Angular 无法在导航到嵌套路由时获取 CSS 文件答案

【问题标题】：Angular fails to fetch CSS file on navigation to nested routeAngular 无法在导航到嵌套路由时获取 CSS 文件
【发布时间】：2022-01-29 03:12:40
【问题描述】：

在 prod 模式 (ng serve --prod) 下直接导航到子组件时，它无法加载 CSS 文件，试图从嵌套路径中获取它。例如，导航到“localhost:4200/doc/”，CSS 请求 URL 是：

localhost:4200/doc/styles.6eab038f040a1c7c7ed6.css.

给出的错误：

拒绝应用来自 'http://localhost:4200/doc/styles.6eab038f040a1c7c7ed6.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

访问根目录 (localhost:4200) 时，CSS 已正确加载。如果您随后通过应用程序本身导航到子组件，则不会出现问题。

它只发生在 prod 模式下，而不是在开发服务器上。没有改变关于styles.css的常规设置，它位于默认文件夹中。

          "styles": [
          "src/styles.css"
        ],

有人知道这个问题是怎么引起的吗？

编辑

发现问题在于导航到嵌套路由（在 mikegross 的回复帮助下）。

在没有嵌套参数的路由上不会出现问题，但在带有嵌套参数（例如'doc/:id'）的路由上会出现问题。

路由器模块：

const routes: Routes = [
  { path: '', redirectTo: 'list', pathMatch: "full"},
  { path: 'list', component: ListComponent},
  { path: 'doc/:id', component: DocumentComponent},
  { path: '**', redirectTo: ''},
];

@NgModule({ 
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

更新（2 月 28 日）

由于它仍然是一个小项目，我生成了一个新的 Angular 项目，安装了相同的依赖项并逐字复制粘贴了代码。

虽然我不知道为什么，但在新项目中没有出现问题。唯一的区别在于次要版本的提升（ng 9.0 到 9.1）。

【问题讨论】：

index.html 中的标签是什么？
我记得我曾经有过这个。它与你的路由器模块有关，但我不记得它到底是什么。
我发现了一些奇怪的东西，也许它敲响了警钟：在没有嵌套参数的路线上（例如：'about'）问题不会发生，但在有嵌套参数的路线上（例如例如 'doc/:id') 确实如此。为了获取 CSS，它是否只剪掉了路径的最后一段（':id'），以便保留 '/doc'？
很奇怪，您是否有机会在组件中使用绝对路径或相对路径导入 css？即使这样，构建也应该可以完美运行。您有任何自定义构建配置吗？

标签： css angular

【解决方案1】：

我知道这是一篇较旧的帖子，但我通过使用查询参数而不是路由参数来解决这个问题。示例：

const routes: Routes = [
  { path: '', redirectTo: 'list', pathMatch: "full"},
  { path: 'list', component: ListComponent},
  { path: 'doc', component: DocumentComponent},
  { path: '**', redirectTo: ''},
];

（我从 "doc/:id" 中删除了 :id）

导航到路线：

route this._router.navigate(['/doc'],{queryParams: {id: id}});

然后检索查询参数：

this._activatedRoute.snapshot.queryParamMap.get('id');

【讨论】：

遗憾的是它对我不起作用，我第一次进入网址时一切正常，但刷新后发生了同样的错误：拒绝应用来自'localhost:4200/styles.css'的样式，因为它MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

【解决方案2】：

聚会迟到了。我在 2022 年使用 React 时遇到了同样的错误。

最初，我用相对路径声明了CSS文件，如下：

<link rel="preload" href="./style/Avenir-Light.woff2" as="font" type="font/woff2" crossorigin>

改成绝对路径后就可以了

<link rel="preload" href="/style/Avenir-Light.woff2" as="font" type="font/woff2" crossorigin>

希望对以后的读者有所帮助。

【讨论】：