如何为独立的页面导航定义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 { }

这是我如何从父页面(从monitor路由上的StoryListPage)到子页面(monitor/story路由上的StoryHomePage)

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，并定义子路由，这可能不是我需要的。我只是在寻找像网站一样具有嵌套样式格式的路由之间的基本页面导航，但实际上不是彼此嵌套的页面。

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

Answer 1

Run

ionic generate page your-page-name

在你想要创建嵌套路由的page文件夹目录中。