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

[axetroy]

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

[filipesilva]

Just tried to reproduce this and everything worked.

I followed the instructions in https://github.com/angular/angular-cli#global-library-installation, which are for Bootstrap 4.

Then added <button type="button" class="btn btn-primary">Primary</button> to src/app/app.component.html.

Could see the Bootstrap 4 button and header font:

I don't know what's happening in your setup, but my recommendation is to start a new beta.18 project and trying to follow those instructions as well.

[sikemullivan]

I'm seeing this issue as well. I was actually building a document of steps from beginning to end, to teach my team Angular2. I've provided the steps below. I did however, uninstall Node.js 6.5 before installing 7.0.0. All of this was performed today.

• Install latest version of Node.js (Current 7.0.0 x64)
  https://nodejs.org
• Install Visual Studio Code
  http://code.visualstudio.com
• Run Command Prompt as administrator
• Run command to install TypeScript

npm install –g typescript

• Run command to install Angular Command Line Interface

npm install –g angular-cli

• Change directory to your projects/prototype folder

cd c:\prototype\angular2\

• Create a new Angular2 app

ng new CoolApp

• Change to that new app’s directory

cd CoolApp

• Install all of the project dependencies via Node Package Manager, node_modules folder will appear.

npm install

• Open Visual Studio Code as admin, File -> Open Folder -> c:\prototype\angular2\CoolApp
• Run the application

npm start

• Navigate chrome to http://localhost:4200 to see it working!
• In Command Prompt, press CTRL+C, then type Y and enter to exit the build job
• Install Python

npm install --global --production windows-build-tools
npm install –g node-gyp
npm config set msvs_version 2013 --global

• Now install bootstrap for the UI

a. Run Command
npm install --save @ng-bootstrap/ng-bootstrap
npm install ng2-boostrap bootstrap --save
b. In VS Code, open /src/app/app.module.ts , import NgbModule
c. In VS Code, open angular-cli.json, and add css

[sikemullivan]

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.

[nweldev]

This issue is still happening with beta-21 ! See #3284

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

[chpecson]

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 :)

[lukestayreal]

I am having the issue as well. it works if i import the bootstrap in src/styles.css. But it just will not working if i put in under angular-cli.json > styles.. so sad.. i am using rc1

[iamntg]

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" ],

or

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

[mogocat]

@maxguzeng This can be a mistake of file paths. Check every styles file which in your .angular-cli.json file to make sure they are exactly in the right paths. I just fixed my project.

[lukestayreal]

@FlappyHeart I am pretty sure I got the path right, since I saw the 3.3.7 bootstrap compiled in bundle. but the style is not applied. and i update the bootstrap version to 4. everything work. I have been debugging this for 2days and a few others found the same problem with rc0 and rc1

[lukestayreal]

upgrade to rc2 seem to solved my problem. One other reason might be i am using Chinese npm mirror so called cnpm. Sometime it have unpredictable error even it promise it should function with no potential problem...sad face.

[gangfang]

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.