构建angular5应用程序.该应用程序需要一些备用布局.

我的方法是处理主app模块路由文件中的高级路由.所述文件将路由映射到模块.对于非必要的速度驱动页面,模块将延迟加载,而不是为速度关键页面延迟加载：

app-layout-router.module.ts文件：

import {NgModule} from '@angular/core';
import {PreloadAllModules,RouterModule,Routes} from '@angular/router';
import {PublicLayoutModule} from '@modules/layouts/public/public-layout.module';
import {AuthenticatedLayoutModule} from '@modules/layouts/authenticated/authenticated-layout.module';

const routes: Routes = [{
    path: '',loadChildren: () => PublicLayoutModule,},{
    path: 'dashboard',loadChildren: () => AuthenticatedLayoutModule,}];

@NgModule({
    imports: [RouterModule.forRoot(
        routes,{
            useHash: false,preloadingStrategy: PreloadAllModules
        }
    )],exports: [RouterModule],})

export class AppLayoutRouter {
}

不在仪表板下的所有路线都将根据SEO原因进行预渲染.但是,在经过身份验证的布局中,我可以选择通过延迟加载后续模块来中断应用程序.例如,这是经过身份验证的模块路由器文件的内容：

import {NgModule} from '@angular/core';
import {RouterModule,Routes} from '@angular/router';
import {AuthenticatedLayoutComponent} from './authenticated-layout.component';

const routes: Routes = [{
    path: '',component: AuthenticatedLayoutComponent,children: [{
        path: '',loadChildren: '../../dashboard/dashboard.module#DashboardModule'
    }]
}];

@NgModule({
    imports: [RouterModule.forChild(
        routes
    )],})

export class AuthenticatedLayoutRoutingModule {
}

理论上这是有效的,但在实践中我遇到了错误.预期的结果是角度cli webpack将为仪表板模块创建一个块,应用程序将通过延迟加载来获取它.实际上,结果是路由器无法加载仪表板模块,因为它认为模块的路径不正确.

这是抛出的错误：

Error: Cannot find module '../../dashboard/dashboard.module'.
    at eval (eval at ../../../../../src/$$_lazy_route_resource lazy recursive (main.bundle.js:6),