angular2-cli cannot load style error

Question

I just created a new angular2 app using ng new myapp and I'm having already an error on loading style in index.html. I just added one line in the index.html :

<link rel="stylesheet" href="./css/styles.css">

of course I have added a folder and the file in src/css/styles.css. And in chrome result shows that

localhost/:8 GET http://localhost:4200/css/styles.css in red (status = 404) not found.

Any idea what would be the error?

When clicking on ctrl + follow link inside the editor, I got the css file.

Saiyaff Farouk · Accepted Answer · 2017-04-30 13:05:38Z

3

This approach might work but, not recommended. And, in a project generated by CLI it's highly recommended to add the styles in assets folder

Assume that the path is './assets/css/styles.css'

Make sure your path is correct

Recommended way of doing that is -

In the angular-cli.json styles array 'apps[0].styles' add the following

"styles": [
  ...
  "./assets/css/styles.css"
  ...
]

Make sure your (default style extension in .angular-cli.json) is

"defaults": {
  "styleExt": "css"
}

And rerunning with an npm start would work

UPDATE

"defaults": {"styleExt": } is for the purpose of generating components. If the style works fine without changing this, just go ahead with it. See the comments for the reason

edited Apr 30, 2017 at 13:05

answered Apr 30, 2017 at 12:52

Saiyaff Farouk

5,6835 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tiep Phan Over a year ago

your could add any css file into styles array, even your default ext is css or less

Saiyaff Farouk Over a year ago

Yes, default ext is to generate style files when generating the component. Don't know whether that's fixed, but i had issue on compiling scss when i had the default ext as css in my project. Added that to be in the safe side. Thanks for pointing that. @TiepPhan

K Oul Over a year ago

just by moving css foler to assets solves the issue. many thanks Saiyaff

Saiyaff Farouk Over a year ago

Hope you link it using the .angular-cli.json because even if your approach (linking in the index.html) works fine, it is not recommended. You're most welcome and happy coding @KOul

Tiep Phan · Accepted Answer · 2017-04-30 11:31:13Z

0

just ng new then for development run ng serve, for production run ng build or ng build --prod, Angular CLI will inject css, js external link for you.

you don't need to specify css link in index.html

answered Apr 30, 2017 at 11:31

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

2 Comments

K Oul Over a year ago

I need to inject my own css file. My question is why I do have this error loading message ?

Tiep Phan Over a year ago

put your css file into assets folder, not src.

Collectives™ on Stack Overflow

angular2-cli cannot load style error

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related