1

I am trying to add basic reset styles in my angular 6 application. But i keep getting following error in console.

**

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

**

As you can see my css files name is reset.css and i am using following line in index.html to add this file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>EasyNotes</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  **<link rel="stylesheet" type="text/css" href="app/style-components/reset.css">**
</head>
<body>
  <app-root></app-root>
</body>
</html>

I am new to this new version of angular and its quite a blocker for me. thanks in advance :)

Vikas Dubey
  • 320
  • 3
  • 5
  • 15
  • 2
    Possible duplicate of [Mime type error when adding a CSS file to Angular](https://stackoverflow.com/questions/48521971/mime-type-error-when-adding-a-css-file-to-angular) – Roy Jun 03 '18 at 13:07
  • do you see your style sheet when you go http://localhost:4200/app/style-components/reset.css ? – Fateme Fazli Jun 03 '18 at 13:08
  • Try navigating to http://localhost:4200/app/style-components/reset.css and see what it contains. Probably the server isn't serving the right file – Christian Vincenzo Traina Jun 03 '18 at 13:11
  • Here's the good [answer](https://stackoverflow.com/a/50668792/7680307) similar problem like yours. – Ram Chandra Neupane Dec 01 '18 at 06:48

2 Answers2

1

Here's the good answer on similar problem 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.

Ram Chandra Neupane
  • 1,826
  • 3
  • 19
  • 36
0

I think the file is not found at runtime, so an Html error page (or similar) is returned. Put the file into the assets folder and reference it like:

href="assets/reset.css"

To check this, open your browser and access your page, press F12, click Network and press F5 to reload. Have a look at the files Http status.

You may also put it somewhere else and reference it in the angular.json file, in the styles section and remove it from index.html:

"styles": [
   "src/app/style-components/reset.css"
],
Stefan
  • 12,108
  • 5
  • 47
  • 66
  • Thanks @stefan ..it worked after putting it inside the asset folder. But what i am not understanding is why it was giving an error while putting the file inside the src/app and referencing it from there – Vikas Dubey Jun 03 '18 at 13:23