Mime type error when adding CSS file to Angular

Question

I am trying to create a static site using Angular. I want some css / js / image files to be added to index.html

This is my code in index.html

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

My css folder is at the same level as the index.html file

I get this error for every stylesheet I added (from chrome ng service)

Refused to apply the style from http: // localhost: 4200 / css / layers.css ', because its MIME type ('text / html') is not supported by the MIME style sheet type and strict MIME checking.

I also tried adding this

 #.angular-cli.json "styles": [ "styles.css", "css/layers.css" ], 

How can i fix this?

My angular setup

 Angular CLI: 1.6.5 Node: 8.1.4 OS: darwin x64 Angular: 5.2.2 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router @angular/cli: 1.6.5 @angular-devkit/build-optimizer: 0.0.42 @angular-devkit/core: 0.0.29 @angular-devkit/schematics: 0.0.52 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.9.5 @schematics/angular: 0.1.17 typescript: 2.5.3 webpack: 3.10.0 

Answer 1

Solution 1 (with Bootstrap installed)

All you have to do is:

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

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

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

Note. The download path is relative to /src/index.html, so you need to "../" before node_modules.

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

Here is the amazing tutoral

Solution 2 (with reference to Bootstrap)

Anything you need:

1) Go to styles.css under the root directory of your corner application.

2) Add this line at the top:

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

Here are the corner documents

Answer 2

@ sameera207 The answers in the comments are correct, the relative path should work, I also had the same problem, and the comments replies work for me. I tried to reproduce your error, I created a css folder at the index.html level and added a css file and then added the path to the stylesheet.

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

and then reboot the server , I mean running ng serve again and its working. Make sure that you have done this and the restored server , and if the problem persists, please let me know, I would be happy to help you. Thanks.

Answer 3

If you have already added to angularcli.json, you do not need to add index.html. Cli will enter content automatically. So remove this line from index.html and everything should work.

Answer 4

For someone who faces the same problem.

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

Suppose we have an Angular 6 project with a file structure like this

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

let's say that we need to put the folder with theming (which contains the themes) directly into the src folder.

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

if we tried to access this theme file like this.

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

This will give an error

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

If we skip this URL in the browser, this will not give a simple CSS file, because the path is incorrect.

Decision

So you need to find the right path. (we can find out by this url in the past and see what will be returned)

In this case, specifying ../src/ fix the error

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

Note The exact path and configuration of the router depends on how you configured your project and what platform you are using.