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

If you already have the styles.css in angularcli.json or angular.json, you don't need it in index.html. The cli will inject the contents automatically. So remove that line from the index.html and everything should work.

Answer 2

For someone who will face same problem.

The usual reason for this error message is when the browser tries to load that resource, the server returns an HTML page instead. For example, if your router catches unknown paths and displays a default page without a 404 error. Of course that means the path does not return the expected CSS file / image / icon / whatever... ref from here

Lets assume we have Angular 6 project with a file structure like this:

project
    |-src
      |-app
      |-assets
      |-environments 
      |----

lets assume we need to put a theming folder (that contains css files) directly inside src folder.

project
    |-src
      |-app
      |-assets
      |-environments
      |-vendor // Theming
         |-theme-light.css
          |theme-dark.css

if we tried to access that theme file like this:

<link rel="stylesheet" type="text/css" href: '../vendor/theme-dark.css'>

an error will be thrown.

Refused to apply style from 'http://localhost:4200/vendor/theme-dark.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

If we paste that url in the browser, it will not give the plain css file because the path is wrong.

Solution

So What you need to do is find the correct path. (we can find out by past that url in the browse and see what will returned)

In whis case putting ../src/ reference will fix the error

<link rel="stylesheet" type="text/css" href: '../src/vendor/theme-dark.css'>

Note: The exact path and router configuration depends on how you have setup your project and the libraries you are using with Angular.

Answer 3

I had the same issue when I have installed material-icons using npm i -S material-icons from the terminal.

I have followed the instructions given in the npm package installation and have placed a link in the index.html like <link rel="stylesheet" type="text/css" href=<node_module_path/material-icons/iconfont/material-icons.css>

It has thrown a its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

You have to actually paste the path mentioned in href in angular.json file under styles array

Don't forget to restart the angular server, you can thank me later

FYI: Angular - V8.x, material-icons - V0.3.1

Thanks

Answer 4

This is your code which links your layers.css file.

<link rel="stylesheet" type="text/css" href="css/layers.css">

From this line please remove type="text/css".

So, the code will become:

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

Use this line, I hope It will work now. Thank You

Answer 5

Had that issue because I have defined the same *.css file, in both the *.html & the angular.json files on angular

Answer 6

make new CSS folder inside the assets folder then put your CSS file inside CSS then link again with the new location

Eg : -  <link rel="stylesheet" href="assets/css/materialize.min.css">