Bootstrap doesn't working with angular2 components

[Navaneetha Krishnan S]

CSS/Bootstrap doesn't work when it is rendered in a angular2 component.

If I try to render the html contents in Index.html file (with proper references for CSS,JS) the application/functionality works fine. 

But when the same html contents along with CSS classes is rendered in the angular2 component, it doesnt work.

Based on the searches on internet I have done all these changes but nothing makes it working. I have added encapsulation: ViewEncapsulation.None for that component, still the css doesnt work along with angular2.

also the order of JS file references are in the following order

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

I have replicated the issue and checked into Github url

can somebody help me with this issue?

[Sander Elias]

Hi Navaneetha,

All I can say is that it's working for me. However, I'm not using the bootstrap JS at all, I'm using ngBootstrap2

I took a quick peek at your GitHub repo, but I'm unfamiliar with the way you built your app, so I can't find head nor tails in it. If you want support on issues like this, your are better off providing a plunk!

Regards

Sander

[Luís Augusto de Godoy]

Hello sander is as you put it, in my previous message I copied and pasted it, I think that's why we have all extraneous spaces.

I tested was copy the css file to a folder within the app directory, there work, now do not understand why the folder within the node_modules does not work. thanks again for the help to explain me about the angle 2.

guto

[Sander Elias]

Hi Luis,

It depends on how and wich tools you are using to build your app. 
If you using the CLI, that does not pull in CSS and stuff from node_modules by itself!

Regards

Sander