Stylesheet not loaded because of MIME-type Angular application

Question

I'm Working on a Angular 6.x application where i'm trying to change theme (dynamically).

The CLI compile everything properly but in developer console im getting this error message.

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

My file structure looks like this, the path is correct

project
    |-src
      |-vendor
         |-theme-light.css
          |theme-dark.css

My theme changing code looks this

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { DOCUMENT, isPlatformBrowser } from '@angular/common';

 @Component({
     ..
     ..
})

linkRef: HTMLLinkElement;

  themes = [
    { name: 'Light', href: '../vendor/theme-light.css' },
    { name: 'Dark', href: '../vendor/theme-dark.css' }
  ];

  constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(this.platformId)) {
      let theme = this.themes[0];
      try {
        const stored = localStorage.getItem('theme');
        if (stored) {
          theme = JSON.parse(stored);
        }
      } catch (e) {
      }
      this.linkRef = this.document.createElement('link');
      this.linkRef.rel = 'stylesheet';
      this.linkRef.href = theme.href;
      this.document.querySelector('head').appendChild(this.linkRef);
    }
  }

  setTheme(theme) {
    localStorage.setItem('theme', JSON.stringify(theme));
    this.linkRef.href = theme.href;
  }

Now, I don't really understand why this happens. Is am i missing something ? Feel free to ask for more details if needed.

Any help will be really appreciated.

Thanks

What happens if you open http://localhost:4200/vendor/theme-light.css directly in your browser. Do you get a 404 error? — Salman A, Nov 30 '18 at 08:03
@SalmanA thanks finally figured out what i'm i missing i [posted the answer below](https://stackoverflow.com/a/53554317/7680307) — Ram Chandra Neupane, Nov 30 '18 at 09:07

score 2 · Accepted Answer · answered Nov 30 '18 at 07:40

2

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.

answered Nov 30 '18 at 07:40

benshabatnoam

5,475
1
25
39

I tried to past the direct path of the file in browser and i'm getting plain css but not applying in browser – Ram Chandra Neupane Nov 30 '18 at 07:47
I think this is the right answer. Cf. my comment on your below answer (https://stackoverflow.com/a/53553463/6996150). – johey Nov 30 '18 at 08:11

Ram Chandra Neupane · Answer 2 · 2018-11-30T09:09:53.993

Finally figured out Im giving the wrong path on my path configuration href: '../vendor/theme-light.css' thats returns http://localhost:4200/vendor/theme-light.css on the browser which is not the correct path.

Solution

themes = [
    //added the missing src ( source root) 
    { name: 'Light', href: '../src/vendor/theme-light.css' },
    { name: 'Dark', href: '../src/vendor/theme-dark.css' }
  ];

Thank You for your answers

score 0 · Answer 3 · answered Nov 30 '18 at 07:44

0

Found this answer here Proper solution

The issue could be with a CSS library starting with comments. While on dev, We do not minify files and We don't remove comments, this meant that the stylesheet started with some comments, causing it to be seen as something different from css.

Removing the library and putting it into vendor file (which is ALWAYS minified without comments) solved the issue.

answered Nov 30 '18 at 07:44

Rohit.007

3,040
2
17
28

thank you for your answer but i've already tried that solution and no luck yet. – Ram Chandra Neupane Nov 30 '18 at 07:48
Can you share the CSS? – Rohit.007 Nov 30 '18 at 07:49

score 0 · Answer 4 · answered May 16 '19 at 22:01

0

you have to change the place of your file css into the directory assets assets/style.css

and then put these path in your file index.html src/index.html

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

in addition you have to modify to file angular.json in styles

"styles": [
          "src/assets/style.css",
          "./node_modules/materialize-css/dist/css/materialize.min.css",
        ],

answered May 16 '19 at 22:01

ricnef2121

39
3

"you have to change the place of your file css into the directory assets" Fair point @ricnef2121 but your solution didn't helping in what i'm trying to achieve here. Thank you – Ram Chandra Neupane May 17 '19 at 05:16

Stylesheet not loaded because of MIME-type Angular application

4 Answers4