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

axetroy · 2016-10-23T17:09:47Z

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 · 2016-10-27T16:38:40Z

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 · 2016-11-07T19:26:30Z

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 · 2016-11-08T14:36:44Z

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 · 2016-11-28T12:41:13Z

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

ghost · 2017-02-19T09:55:59Z

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 · 2017-03-04T10:52:14Z

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 · 2017-03-10T05:55:52Z

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 · 2017-03-10T12:57:53Z

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 · 2017-03-15T15:08:27Z

@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 · 2017-03-15T15:11:18Z

@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 · 2017-03-16T03:35:57Z

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 · 2017-04-03T09:35:04Z

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 · 2017-07-27T04:55:43Z

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 · 2017-08-02T19:55:37Z

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 · 2017-09-28T20:44:13Z

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

scottseeker · 2017-09-28T20:49:59Z

Our issue ended up being using symbolic links on Windows.

nukec · 2017-10-07T16:51:10Z

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 · 2018-03-08T19:40:16Z

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 · 2018-03-23T08:40:17Z

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 · 2018-09-26T20:58:36Z

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 · 2018-12-25T06:34:22Z

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 · 2019-09-09T02:41:37Z

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.}

axetroy changed the title ~~styles/scripts block not load css/js file~~ angular-cli.json styles/scripts block not load css/js file Oct 23, 2016

axetroy changed the title ~~angular-cli.json styles/scripts block not load css/js file~~ angular-cli.json styles/scripts block do not load css/js file Oct 23, 2016

filipesilva closed this as completed Oct 27, 2016

kveeresh49 mentioned this issue Oct 24, 2017

I'm unable to access the bootstrap CSS in angular 2 please check the bellow code. #8158

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

axetroy commented Oct 23, 2016 •

edited

Loading

filipesilva commented Oct 27, 2016

sikemullivan commented Nov 7, 2016 •

edited

Loading

sikemullivan commented Nov 8, 2016 •

edited

Loading

nweldev commented Nov 28, 2016

ghost commented Feb 19, 2017

chpecson commented Mar 4, 2017 •

edited

Loading

lukestayreal commented Mar 10, 2017

iamntg commented Mar 10, 2017

mogocat commented Mar 15, 2017

lukestayreal commented Mar 15, 2017

lukestayreal commented Mar 16, 2017

gangfang commented Apr 3, 2017 •

edited

Loading

nareshkumar4 commented Jul 27, 2017 •

edited

Loading

scottseeker commented Aug 2, 2017

nick-anykeydesigns commented Sep 28, 2017

scottseeker commented Sep 28, 2017

nukec commented Oct 7, 2017 •

edited

Loading

zsiegel92 commented Mar 8, 2018

jcjp commented Mar 23, 2018 •

edited

Loading

robertosrjr commented Sep 26, 2018

rahuls360 commented Dec 25, 2018

angular-automatic-lock-bot bot commented Sep 9, 2019

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

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

Comments

axetroy commented Oct 23, 2016 • edited Loading

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

filipesilva commented Oct 27, 2016

sikemullivan commented Nov 7, 2016 • edited Loading

sikemullivan commented Nov 8, 2016 • edited Loading

nweldev commented Nov 28, 2016

ghost commented Feb 19, 2017

chpecson commented Mar 4, 2017 • edited Loading

lukestayreal commented Mar 10, 2017

iamntg commented Mar 10, 2017

mogocat commented Mar 15, 2017

lukestayreal commented Mar 15, 2017

lukestayreal commented Mar 16, 2017

gangfang commented Apr 3, 2017 • edited Loading

nareshkumar4 commented Jul 27, 2017 • edited Loading

scottseeker commented Aug 2, 2017

nick-anykeydesigns commented Sep 28, 2017

scottseeker commented Sep 28, 2017

nukec commented Oct 7, 2017 • edited Loading

zsiegel92 commented Mar 8, 2018

jcjp commented Mar 23, 2018 • edited Loading

robertosrjr commented Sep 26, 2018

rahuls360 commented Dec 25, 2018

angular-automatic-lock-bot bot commented Sep 9, 2019

axetroy commented Oct 23, 2016 •

edited

Loading

sikemullivan commented Nov 7, 2016 •

edited

Loading

sikemullivan commented Nov 8, 2016 •

edited

Loading

chpecson commented Mar 4, 2017 •

edited

Loading

gangfang commented Apr 3, 2017 •

edited

Loading

nareshkumar4 commented Jul 27, 2017 •

edited

Loading

nukec commented Oct 7, 2017 •

edited

Loading

jcjp commented Mar 23, 2018 •

edited

Loading