首页 文章

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

提问于
浏览 次
2

我正在研究 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;
  }

现在，我真的不明白为什么会这样 . 我错过了什么吗？如果需要，请随时询问更多详细信息 .

任何帮助将非常感激 .

谢谢

html css angular mime-types

3 回答

  • 2

    看起来href是错误的 .

    有一个很好的answer与你的完全不同的问题：

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

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

    在你的情况下，它是css href .

    回复于
  • 1

    最后想通了我在我的路径配置上给出了错误的路径 href: '../vendor/theme-light.css' thats在浏览器上返回 http://localhost:4200/vendor/theme-light.css ，这不是正确的路径 .

    Solution

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

    谢谢您的回答

    回复于
  • 0

    在这里找到这个答案Proper solution

    问题可能在于以注释开头的CSS库 . 在开发时，我们不缩小文件，我们不删除注释，这意味着样式表以一些注释开始，导致它被视为与css不同的东西 .

    删除库并将其放入供应商文件（总是在没有注释的情况下缩小）解决了这个问题 .

    回复于

相关问题