Angular 2 doesn't see the file even if it is exist (using Angular-cli)

Question

Actually I got a stylesheet: <link href="../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet"> That file exist, the Webstorm also sees that file in the directory, but somehow Angular2 is unable to load it.

Error: GET http://localhost:4200/node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css

How to make Angular2 load that file? Thanks for any further informations.

The root looks like:

-Main folder

--node_modules

---stuff

--src

---index.html

---styles.css

EDIT On mithunvp.com/angular-material-2-angular-cli-webpack/ there's a hint to use

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

to turn on a prebuilt theme. But once again, even if it's pasted inside the styles.css it returns errors that it cant find it. It cant even find the Material icons, which is a link...

@DanielA.White What do you mean by web server?

Megazord
– Megazord

2016-11-18 14:39:23 +00:00
Commented Nov 18, 2016 at 14:39 — Megazord
– Megazord, Commented Nov 18, 2016 at 14:39
what is driving port 4200?

Daniel A. White
– Daniel A. White

2016-11-18 14:39:54 +00:00
Commented Nov 18, 2016 at 14:39 — Daniel A. White
– Daniel A. White, Commented Nov 18, 2016 at 14:39
@DanielA.White ng serve in Angular 2

Megazord
– Megazord

2016-11-18 14:42:58 +00:00
Commented Nov 18, 2016 at 14:42 — Megazord
– Megazord, Commented Nov 18, 2016 at 14:42

maxime1992 · Accepted Answer · 2016-11-18 14:49:47Z

1

You shouldn't try to load css like that, even more when you can have sccs source file.

Using angular-cli, I can imagine that you have the file src/styles.scss or .less right ? (unless you decided to use pure css ?!).

So if you're using sass, in src/styles.scss just put :
@import '~@angular/material/core/theming/prebuilt/indigo-pink.css';

Plus, I can imagine what you're trying to do and if you haven't seen Kara's demo with angular-material, I'd recommend you to take a look to : https://www.youtube.com/watch?v=0q9FOeEELPY

answered Nov 18, 2016 at 14:49

maxime1992

24k11 gold badges90 silver badges133 bronze badges

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

3 Comments

Megazord Over a year ago

Im doing everything like in that movie, but somehow Angular2 cant find these files. She is doing it at 4:00 in the movie, everything works for her, but my Angular2 cant find these files.

@import '~https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

Megazord Over a year ago

It's fixed. Thank u

Beaker Over a year ago

what did you do to fix this?

Deepak swain · Accepted Answer · 2017-01-20 06:25:09Z

0

To Fix the Issue, Please Inline styles.css from index.html and add it inside angular-cli.json under style Array like

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

Hope. It will work

answered Jan 20, 2017 at 6:25

Deepak swain

3,7081 gold badge33 silver badges26 bronze badges

Comments

Unheilig · Accepted Answer · 2017-06-24 01:01:52Z

0

enter image description here

You should use the following statement

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

instead of

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

inside the styles.css.

edited Jun 24, 2017 at 1:01

Unheilig

16.3k193 gold badges71 silver badges101 bronze badges

answered Jun 24, 2017 at 0:42

matthew chick

2392 silver badges3 bronze badges

Collectives™ on Stack Overflow

Angular 2 doesn't see the file even if it is exist (using Angular-cli)

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related