Html – Stylesheet not loaded because of MIME-type Angular application

angularcsshtmlmime-types

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

Best Answer

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.

Related Topic