angular-cli: angular-cli.json styles/scripts block do not load css/js file

OS?

angular-cli: 1.0.0-beta.18 node: 6.9.0 os: linux x64

Versions.

angular-cli: 1.0.0-beta.18 node: 6.9.0 os: linux x64

Repro steps.

add bootstrap css file like this

      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "styles.scss"
      ],

and run ng serve

all pass no error

style.bundle.js has load ,but not inject style element into HTML

The log given by the failure.

no error info

Mention any other details that might be useful.

same as scripts block

has load script.bundle.js but not work

      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/moment/min/moment.min.js",
        "../node_modules/underscore/underscore-min.js"
      ],

If i remember correctly, beta17 still working

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 22 (2 by maintainers)

Most upvoted comments

Try out my solution if it works fine for you: npm install --save @ng-bootstrap bootstrap

then add the path in the styles array of .angular-cli.json an it will look likes this:

"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ]

after that stop the local server of your angular project and start it again, In simple words restart the local server of the current angular project.

I hope this will work for you. Have a nice day 😃

+13

chpecson on Mar 4, 2017

Is there any ways to auto inject all the css files from a folder? I am looking for something like in the .angular-cli.json

"styles": [ "styles.css", "./mystylesfolder/*.css" ],

"styles": [ "styles.css", "./mystylesfolder" ],

iamntg on Mar 10, 2017

Getting the same trying to put ng2-bootstrap. I can see the css of boostrap within the styles.bundle.js but not injected within my html.

Did someone has got a solution?

Thanks

ghost on Feb 19, 2017

Make sure you are modifying **.**angular-cli.json file in the root dir!

.angular-cli.json instead of angular-cli.json in node-modules dir.

The app will configure according to .angular-cli.json in the root dir.

gangfang on Apr 3, 2017

Our issue ended up being using symbolic links on Windows.

scottseeker on Sep 28, 2017

I had the same issue yesterday. I found a solution to it. I was importing the styles and script files in the wrong place in angular.json file It must be under build and not test object

I found the solution here https://stackoverflow.com/questions/51998505/styles-not-picking-from-angular-json-styles-array-angular-6-but-working-fine-wi

rahuls360 on Dec 25, 2018

I apologize, it wasn’t CLI not loading the CSS file. It was something with the bootstrap packages I was using. I switched to using “npm install bootstrap@next --save” instead of “npm install ng2-bootstrap bootstrap --save”

The internets is full of the wrong way to do things.

sikemullivan on Nov 8, 2016