Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 6 - Refused to apply style from '...' because its MIME type ('text/html') is not a supported stylesheet

Trying to upgrade to Angular 6 and got the below error when I referred the below in index.html:

Refused to apply style from 'https://localhost:44394/~/assets/primengcss/themes/omega//theme.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

like image 638
Karthik Avatar asked Jul 23 '18 21:07

Karthik


People also ask

How do I remove MIME type error?

How do I remove MIME type error? To Solve MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled ErrorJust make Sure Your File name and the name You are Using in Link Tag Both Are Same. For Example my File name is style.

What is MIME type in HTML?

A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) indicates the nature and format of a document, file, or assortment of bytes. MIME types are defined and standardized in IETF's RFC 6838.

What is MIME type error?

If a web server or application reports an incorrect MIME type for content (including a "default type" for unknown content), a web browser has no way of knowing the author's intentions. This may cause unexpected behavior. Some web browsers, such as Internet Explorer, try to guess the correct MIME type.

How do I link a CSS file to HTML?

CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.


1 Answers

Found the answer (at least worked for me), after some digging around:

Looks like inAngular 6 we need to include any external CSS (like bootstrap, fontawesome, Primeng etc.,) to the angular.json as below:

        "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/font-awesome/css/font-awesome.min.css",
          "src/styles.css",
          "./node_modules/primeng/resources/themes/omega/theme.css",
          "./node_modules/primeng/resources/primeng.min.css",
          "./node_modules/primeicons/primeicons.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.slim.min.js",
          "./node_modules/popper.js/dist/umd/popper.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]   
like image 138
Karthik Avatar answered Sep 23 '22 12:09

Karthik