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

好像href错了。

与您的问题完全相同的另一个问题是answer：

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

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

您的情况是css href。

Answer 2

最后弄清楚我在路径配置href: '../vendor/theme-light.css'上给出了错误的路径，这在浏览器上返回了http://localhost:4200/vendor/theme-light.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

在这里Proper solution

找到了这个答案

问题可能出在以注释开头的CSS库中。在开发人员时，我们不会缩小文件，也不会删除注释，这意味着样式表以一些注释开头，导致它被视为与css不同。

删除该库并将其放入供应商文件（总是缩小而没有注释）解决了该问题。

Answer 4

您必须将文件css的位置更改为目录资产asset / style.css目录

，然后将这些路径放入文件index.html src / index.html

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

此外，您还必须修改样式的文件angular.json

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

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

4 个答案: