CODEWITHSUNDEEP
htmlcssangularmime-types
Ram Chandra Neupane
Ram Chandra Neupane

Reputation: 1876

Stylesheet not loaded because of MIME-type Angular application

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

Upvotes: 5

Views: 16362

Answers (5)

Iheb Saad
Iheb Saad

Reputation: 367

when you're using a static folder , please make sure to use "/" . Let's say for example assets is our static folder , we want the image folder which is under the assets , so you type this src="image/img1.png" , that's wrong you have to add "/" ,,, so it will be like this src="/image/img1.png"

Upvotes: 1

ricnef2121
ricnef2121

Reputation: 64

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

Upvotes: 0

Ram Chandra Neupane
Ram Chandra Neupane

Reputation: 1876

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

Upvotes: 1

Rohit.007
Rohit.007

Reputation: 3502

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.

Upvotes: 0

benshabatnoam
benshabatnoam

Reputation: 7632

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.

Upvotes: 2

Related Questions