Mime type error when adding a CSS file to Angular

Question

I\'m trying to build a static site using Angular. What I want is to have some global css/js/image files to be added to the index.html

This is my code in

Answer 1

I tried to run an angular code by asp.net zero using ng serve and faced this issue.

Normally all angular project run with the command ng serve. But the asp.net zero framework initially minifies the css file and then do the ng serve process..these 2 things are integrated in the command npm start. If atleast once npm start is done, the minified files are stored in our local... So next time onwards even if you do ng serve , it would be working..

So running npm start fixed the issue for me.

Answer 2

Solution 1 (with Bootstrap installed)

All you need to do is:

1) Go to .angular-cli.json under the root directory of your angular app.

2) Modify the styles array to include bootstrap before styles.css

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

Note: the path to bootstrap is relative to /src/index.html that's why you need "../" before node_modules.

3) Exit the current session of ng serve and start it again.

Here is an Awesome tutoral

Solution 2 (with Bootstrap referenced)

All you need to is:

1) Go to styles.css under the root directory of your angular app.

2) Add this line at the top:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

Here is Angular docs

Answer 3

@sameera207 Answers in comments are correct, relative path must work, I too had same issue and answers of comments are working for me. I tried to reproduce your error, I made css folder at level of index.html and added css file then added path in styles array.

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

then restarted server, I mean performed ng serve again and its working. Make sure you have done it and restared server and if still problem persists please let me know, I would be glad to help you.Thanks.