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 ?

As far as I know Angular2/4 is more or less different than Angular1, which means you will have to rewrite most of the code to be compatible with recent Angular releases. I cannot tell if JS plugins will run on Angular4 (maybe they will if optimized properly). — Haseoh
– Haseoh, Commented Apr 13, 2017 at 10:32

VikingCode · Accepted Answer · 2017-04-13 11:01:01Z

6

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...

edited Apr 13, 2017 at 11:01

answered Apr 13, 2017 at 10:48

VikingCode

1,0521 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

geeky_monster Over a year ago

Thanks. Will try this out.

Collectives™ on Stack Overflow

Integrating Angular 4 with an External Bootstrap HTML Template

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related