Mime Type Error When Adding a CSS File to Angular

Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled in Angular

When Angular bundles your application for serving, it does not know, that it needs to include your css file (and it probably falls back to index.html, when it cannot find the file in the path indicated - that's the error with the incorrect MIME type, because index.html does not have the correct type for a stylesheet).

Try to add the path to the css file in angular.json - in the styles section (projects -> $project name$ -> architect -> build -> options -> styles).

Stylesheet not loaded because of MIME-type Angular application

Looks like the href is wrong.

There is a good answer to a different question exactly like yours:

The usual reason for this error message is that 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...

The solution is to find the correct path and router configuration so that you get your plain CSS file / image / etc. when accessing that path.

In your case it's the css href.

Exported Angular library gives Refused to apply style because its MIME type error on css font import

I just found out that the problem was caused by the missing aot compilation option, by setting "aot": true in the angular.json file under the development configuration the css is downloaded as expected.

As in production mode the aot property is true by default this is an acceptable solution for me.

Mime type error when Importing CSS in Stackblitz

The error is in your html. The href tag is inside your path.

Change the link to :

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" 
      rel="stylesheet"
      type="text/css">

---

Related Topics