无法在 Angular 6 应用程序中加载 css 文件答案

【问题标题】：unable to load the css file in angular 6 application无法在 Angular 6 应用程序中加载 css 文件
【发布时间】：2018-11-12 23:15:22
【问题描述】：

我正在尝试在我的 Angular 6 应用程序中添加基本的重置样式。但我在控制台中不断收到以下错误。

拒绝应用样式来自 'http://localhost:4200/app/style-components/reset.css' 因为它 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且已启用严格的 MIME 检查。

如您所见，我的 css 文件名为 reset.css，我在 index.html 中使用以下行来添加此文件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>EasyNotes</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  **<link rel="stylesheet" type="text/css" href="app/style-components/reset.css">**
</head>
<body>
  <app-root></app-root>
</body>
</html>

我是这个新版本的 Angular 的新手，它对我来说是一个障碍。在此先感谢:)

【问题讨论】：

Mime type error when adding a CSS file to Angular的可能重复
你去localhost:4200/app/style-components/reset.css时看到你的样式表了吗？
尝试导航到localhost:4200/app/style-components/reset.css 并查看其中包含的内容。可能服务器没有提供正确的文件
这是很好的answer 类似问题。

标签： angular angular6

【解决方案1】：

我认为在运行时找不到该文件，因此返回了 Html 错误页面（或类似页面）。将文件放入assets 文件夹并像这样引用它：

href="assets/reset.css"

要检查这一点，请打开浏览器并访问您的页面，按F12，单击Network，然后按F5 重新加载。查看文件 Http 状态。

您也可以将其放在其他位置并在angular.json 文件的styles 部分中引用它并将其从index.html 中删除：

"styles": [
   "src/app/style-components/reset.css"
],

【讨论】：

感谢@stefan ..它在将其放入资产文件夹后工作。但我不明白的是为什么在将文件放入 src/app 并从那里引用它时会出错

【解决方案2】：

这里有一个很好的answer，可以解决和你类似的问题。

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

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

【讨论】：