Question

当直接以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。然后，如果您通过应用程序本身导航到子组件，则不会发生此问题。

它仅在生产模式下发生，而不在开发服务器上发生。对于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项目，安装了相同的依赖项，并按原样复制粘贴了代码。

尽管我不知道为什么，但是在新项目中不会出现问题。唯一的区别在于次要版本提升（从9.0到9.1）。

Answer 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');

Angular无法导航到嵌套路线的导航中获取CSS文件

1 个答案: