由于MIME类型的应用程序，未加载样式表

Question

我在一个Angular 6. x应用程序，我试图改变主题（动态）。

CLI正确编译所有内容，但在developer console中，我收到了此错误消息。

拒绝应用http://localhost:4200/vendor/theme-light.css的样式，因为它的MIME类型（text/html）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

我的文件结构是这样的，路径正确

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

我的主题更改代码如下所示

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;
  }

现在，我真的不明白为什么会这样。我是不是错过了什么？如果需要，请随时询问更多细节。

任何帮助都将不胜感激。

谢谢

Answer 1

使用静态文件夹时，请确保使用“/”。比如说，资产是我们的静态文件夹，我们想要资产下的图像文件夹，所以你输入这个src=“image/img1.png”，这是错误的，你必须添加“/”，，所以它会像这个src=“/image/img1.png”

Answer 2

终于发现我在路径配置中给出了错误的路径/供应商/主题灯。css'that返回http://localhost:4200/vendor/theme-光。浏览器上的css，路径不正确。

解决方案

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

谢谢你的回答

Answer 3

看起来是错误的。

有一个与你完全相同的不同问题的好答案：

此错误消息的通常原因是，当浏览器尝试加载该资源时，服务器会返回一个超文本标记语言页面，例如，如果您的路由器捕获未知路径并显示默认页面而没有404错误。当然，这意味着路径不会返回预期的CSS文件/图像/图标/任何...

解决方案是找到正确的路径和路由器配置，以便在访问该路径时获得普通的CSS文件/图像等。

在你的例子中是css href。