Integrating Angular 4 with an External Bootstrap HTML Template

Question

I have been an Angular1 developer and recently considering using Angular4 for a new web application project.

With Angular1, I used to purchase an 'Bootstrap Admin Theme' which came with well done and consistent CSS and a lot of JS plugins put together which allowed me to focus on the application itself. I used to insert Angular1 code into it in the areas where there was data manipulation and I enjoyed doing that. So I had the best of both worlds.

Is there any way, this could be achieved in Angular2/Angular4, 1) without really missing out the JS plugins the Theme offers and 2) without having to copy the CSS everywhere ?

Answer 1

Yes it is possible but you will have to do 'some' tweaking.

Template

• First of all import all your js plug-ins through npm

  npm install (plug in) --save

• Then you will have to edit your angular-cli.json to include js plug-ins (js & css)

  "styles": ["styles.css"], "scripts": [],

  Put the path to styles & scripts in to array

• Then you should add main template css file in to predefined styles.css

• Next you should break up your pages in to components (view components and 'tag' components).

Now about custom app dev:
Add your custom - js in to *.component.js - css in to *.component.css - html in to *.component.html

(* stands for component name)

et voila...