CODEWITHSUNDEEP
angularangular6
Vikas Dubey
Vikas Dubey

Reputation: 340

unable to load the css file in angular 6 application

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 :)

Upvotes: 1

Views: 13695

Answers (2)

Ram Chandra Neupane
Ram Chandra Neupane

Reputation: 1876

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.

Upvotes: 1

Stefan
Stefan

Reputation: 12453

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"
],

Upvotes: 0

Related Questions