angular-cli : Import node_modules files in src directory

Question

I'm using angular-cli architecture for the initial setup of the app.

I want to import some of global css files into my index.html file. But as node_modules directory is outside of my src directory i'm not getting the accurate path and hence css is not applying.

I'm using path in following meaner,

I have tried without ../ also but it's also not working.

for ex.

<link href="node_modules/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet"/>

&&

<link href="../node_modules/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet"/>

But both the ways are not working.

Is anything wrong i'm doing?

Here is the app structure.

I'm using angular 2.2.1

Here is the error i'm getting

Thanks in advance

Have you [checked your console?](http://stackoverflow.com/documentation/javascript/185/getting-started-with-javascript/714/using-console-log) Are you getting a 404 error? Are you serving `node_modules` over your server? — Mike Cluck, Dec 05 '16 at 14:33
Maybe [this answer](http://stackoverflow.com/questions/37844334/add-the-css-from-the-node-modules-folder-using-angular-cli) will help you — Shaho, Dec 05 '16 at 14:44
I'm not having the angular-cli-build.js file. You can see in screenshort. — Pinank Lakhani, Dec 05 '16 at 14:59

Madhu Ranjan · Answer 1 · 2017-01-09T19:38:58.857

4

Check the documentation of angular CLI on how to install global libraraies,

you have to modify your angular-cli.json file to include css files in bundled style file not use directly in the HTML.

"styles": [
  "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
]

Hope this helps!!

edited Jan 09 '17 at 19:38

answered Dec 05 '16 at 15:01

Madhu Ranjan

17,334
7
60
69

Thanks Madhu Added the path in angular-cli.json but what should i write in index.html? – Pinank Lakhani Dec 05 '16 at 15:08
@PinankLakhani Nothing. – Chrillewoodz Dec 05 '16 at 15:14
when you add it in styles folder, CLI bundles the file into `styles.bundle` so you don't have to add anything in your HTML, Cheers!! – Madhu Ranjan Dec 05 '16 at 15:16
still Not working. Its not applying the css "styles": [ "../node_modules/ng2-toastr/bundles/ng2-toastr.min.js" ], – Pinank Lakhani Dec 05 '16 at 15:32
you have to add css file not the JS file. – Madhu Ranjan Dec 05 '16 at 15:35
Yeah.. Thanks madhu. – Pinank Lakhani Dec 06 '16 at 05:09
is it work for production too? I mean for dist folder? – Pinank Lakhani Dec 06 '16 at 05:10
It should, i don't see any reason why it won't, it is taking the css files and bundling it and it does it while you are creating a prod build. – Madhu Ranjan Dec 06 '16 at 05:12
I have tried one. On ng build it's making dist folder but i couldn't find the node_modules files. Still it will work ? – Pinank Lakhani Dec 06 '16 at 05:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129869/discussion-between-pinank-lakhani-and-madhu-ranjan). – Pinank Lakhani Dec 06 '16 at 07:14
Hi Madhu, Its loading the files from node_modules but not loading the external css files which exist in my css directory. – Pinank Lakhani Dec 06 '16 at 15:19
Have you added external files into styles in CLI JSON? – Madhu Ranjan Dec 06 '16 at 15:23

angular-cli : Import node_modules files in src directory

1 Answers1

Linked