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

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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