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:\prototypeangular2\

• 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:\prototypeangular2\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.

[noelmace]

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

[ghost]

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

[guzeng0516]

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.

[guzeng0516]

@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

[guzeng0516]

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.

[nareshkumar4]

Hi! I have added the css and js in root folder of angular-cli.json for angular2-perfect-scrollbar (https://www.npmjs.com/package/angular2-perfect-scrollbar) and it looks like :

"styles": ["../node_modules/angular2-perfect-scrollbar/dist/lib/perfect-scrollbar.component.css"],
"scripts": [ "../node_modules/angular2-perfect-scrollbar/dist/lib/perfect-scrollbar.component.js"],

But I was unable to get the css style and getting normal scrollbar.

Can anyone help me?

[scottseeker]

My team is having the same problem as trifan84. CSS is injected into styles.bundle.js, but is never exported (injected into head tags).

[nick-anykeydesigns]

Using the @import in the styles.css worked for me.

[scottseeker]

Our issue ended up being using symbolic links on Windows.

[nukec]

Same problem here, i can see bootstrap loaded in bundles, but not loaded into html. I am using latest beta bootstrap.

edit i jsut installed [email protected] and it works ok

[zsiegel92]

I just had this same problem. The only change I made was @sikemullivan's suggestion to use

"npm install bootstrap@next --save"

instead of just

"npm install bootstrap --save"

Can someone explain why on Earth that would be necessary? Now my package.json lists the following "dependencies":

"@ng-bootstrap/ng-bootstrap": "^1.0.0",
"bootstrap": "^4.0.0-beta.3",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"popper": "^1.0.1",
"rxjs": "^5.5.6",
"tether": "^1.4.3",
"zone.js": "^0.8.19"

Whereas earlier it only had bootstrap 3.x.y.

Why doesn't ng-bootstrap explain some of this under their "install" page?

[jcjp]

I also have the same problem here is a segment of my .angular-cli.json

"styles": [
        "styles.css",
        "../node_modules/botframework-webchat/botchat.css",
        "../node_modules/botframework-webchat/botchat-fullwindow.css"
      ],
"scripts": [
        "../node_modules/botframework-webchat/botchat.js"
      ]

Using this configuration does not import the necessary files, however when I import the botchat.css and botchat-fullwindow.css on styles it is working but I want to utilize the .angular-cli.json file.

May I also ask where to import the script is it only to the index.html file?

[robertosrjr]

Experimente minha solução se funcionar bem para você:
npm install --save @ng-bootstrap bootstrap

em seguida, adicione o caminho na matriz de estilos de .angular-cli.json e ele será semelhante a este:

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

depois disso, pare o servidor local do seu projeto angular e inicie-o novamente. Em palavras simples,
reinicie o servidor local do projeto angular atual.

Espero que isso funcione para você. Tenha um bom dia :)

in my case it was just restart the server

[rahuls360]

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

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}