Angular

Question

我正在开发一个 angular 应用程序并尝试延迟加载一个名为 ProjectsModule 的模块，项目组件显示时没有任何问题，当我导航到 /projects/1 这样的项目时一切正常，直到我点击刷新。
当我单击浏览器中的刷新按钮时，页面的样式变得混乱（某些样式丢失并且页面的主要布局被破坏）并出现错误：（8 次每次都不同 url）

Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

在我转到另一个页面并再次点击刷新之前一直处于中断状态。
注意：除此组件外，该错误不会出现在任何组件中。

这是我的代码：
“应用程序-routing.module.ts”：

const routes: Routes = [
// some other routes here
{path: 'projects', loadChildren: () => import('./views/projects/projects.module').then(m=>m.ProjectsModule)},
];

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

"app.module.ts":

@NgModule({
  components: [
    App.component.ts,
    // my components
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ProjectsModule,
    // other modules
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

“项目-routing.module.ts”：

const routes: Routes = [
  {path: '', component: ProjectsComponent},
  {path: ':projectId', component: SingleProjectComponent}
];

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

"projects.module.ts":

@NgModule({
  declarations: [ProjectsComponent, SingleProjectComponent],
  imports: [
    CommonModule,
    ProjectsRoutingModule,
    // other modules
  ],
  exports: [ProjectsComponent, SingleProjectComponent]
})
export class ProjectsModule { }

名为“SingleProjectComponent”的组件目前不包含任何内容，它在“single-project.component.html”中有静态 html 元素，没有什么特别的。
如果有任何我没有显示的代码，请在评论中告诉我。

编辑： “index.html”：

<!doctype html>
<html lang="en">
<head>
  <title>Eline</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="author" content="Eline">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
  <meta name="description" content="Eline">
  <!-- favicon icon -->
  <link rel="shortcut icon" href="assets/images/favicon.png">
  <link rel="apple-touch-icon" href="assets/images/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png">
  <!-- style sheets and font icons  -->
  <link rel="stylesheet" type="text/css" href="assets/css/font-icons.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/theme-vendors.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
  <link rel="stylesheet" type="text/css" href="assets/css/responsive.css" />
  <base href="/">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body data-mobile-nav-trigger-alignment="right" data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="#33343a">
  <app-root></app-root>
</body>
</html>

Answer 1

我通过在 index.html 文件中的每个 link 标记 href 的开头添加“/”解决了这个问题。
所以他们现在是这样的：

<link rel="stylesheet" type="text/css" href="/assets/css/font-icons.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/theme-vendors.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/responsive.css" />

所以路径是相对于当前模块没有到基地。

Angular - 拒绝应用来自“<URL>”的样式

Angular - Refused to apply style from '<URL>'

lazy-loading

typescript

angular-routing

angular-module