如何为独立页面导航定义 Angular 嵌套路由

Question

我有一个 Ionic-Angular Web 应用程序，我正在尝试创建一个类似网站的路由方案，其中包含独立页面的嵌套路由。

到目前为止，我的路线定义如下：

export const routes: Routes = [
  { path: "monitor", loadChildren: () => import('./pages/storyline/story-list/story-list.module').then(m => m.StoryListPageModule) },
  { path: "monitor/story", pathMatch: 'full', loadChildren: () => import('./pages/storyline/story-home/story-home.module').then(m => m.StoryHomePageModule) }
]

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

这是我如何从父页面（从

StoryListPage

在路线

monitor

）到子页面（

StoryHomePage

在路线

monitor/story

）

this.router.navigate(["story"], { replaceUrl: true, relativeTo: this.route });

这工作正常，但是当我在

monitor/story

路线上刷新页面时，它不会加载页面并返回以下错误：

Refused to apply style from 'http://localhost:8100/monitor/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
story:34          GET http://localhost:8100/monitor/runtime.js net::ERR_ABORTED 404 (Not Found)
story:34          GET http://localhost:8100/monitor/polyfills.js net::ERR_ABORTED 404 (Not Found)
story:34          GET http://localhost:8100/monitor/vendor.js net::ERR_ABORTED 404 (Not Found)
story:34          GET http://localhost:8100/monitor/main.js net::ERR_ABORTED 404 (Not Found)
story:34          GET http://localhost:8100/monitor/styles.js net::ERR_ABORTED 404 (Not Found)
story:1 Refused to execute script from 'http://localhost:8100/monitor/styles.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
story:34          GET http://localhost:8100/monitor/scripts.js net::ERR_ABORTED 404 (Not Found)
story:1 Refused to execute script from 'http://localhost:8100/monitor/scripts.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
favicon.png:1          GET http://localhost:8100/monitor/assets/icon/favicon.png 404 (Not Found)

到目前为止我发现的所有内容都是关于嵌套路由的，在每个父页面中都有

router-outlet

，并定义子路由，这可能不是我需要的。我只是在寻找具有嵌套样式格式（如网站）的路由之间的基本页面导航，但实际上并没有在彼此之间嵌套页面。

问题中描述的解决方案似乎非常接近我需要的，如果我能解决那个错误的话。