构建 Angular5 应用程序。该应用程序需要一些替代布局。
我的方法是在主应用程序模块路由文件中处理高级路由。该文件会将路由映射到模块。对于非必要的速度驱动页面，模块将被延迟加载，而对于速度关键页面，模块将不会被延迟加载：
app-layout-router.module.ts file:
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
)],
exports: [RouterModule],
})
export class AuthenticatedLayoutRoutingModule {
}
理论上这是可行的，但在实践中我遇到了错误。预期结果是 Angular cli webpack 将为仪表板模块创建一个块，应用程序将通过延迟加载来获取它。实际上，结果是路由器无法加载仪表板模块，因为它认为模块的路径不正确。
这是抛出的错误：
Error: Cannot find module '../../dashboard/dashboard.module'.
at eval (eval at ../../../../../src/$$_lazy_route_resource lazy recursive (main.bundle.js:6), <anonymous>:5:9)
at ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:4733)
at ZoneDelegate.invoke (zone.js:387)
at Zone.run (zone.js:138)
at eval (zone.js:858)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at eval (eval at ../../../../../src/$$_lazy_route_resource lazy recursive (main.bundle.js:6), <anonymous>:5:9)
at ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:4733)
at ZoneDelegate.invoke (zone.js:387)
at Zone.run (zone.js:138)
at eval (zone.js:858)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at resolvePromise (zone.js:809)
at resolvePromise (zone.js:775)
at eval (zone.js:858)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1517)
defaultErrorLogger @ core.js:1440
ErrorHandler.handleError @ core.js:1501
next @ core.js:5481
schedulerFn @ core.js:4319
SafeSubscriber.__tryOrUnsub @ Subscriber.js:240
SafeSubscriber.next @ Subscriber.js:187
Subscriber._next @ Subscriber.js:128
Subscriber.next @ Subscriber.js:92
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4299
(anonymous) @ core.js:4755
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4681
onHandleError @ core.js:4755
ZoneDelegate.handleError @ zone.js:392
Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:684
api.microtaskDrainDone @ zone.js:693
drainMicroTaskQueue @ zone.js:602
ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
我可以通过将所有模块路由设置为延迟加载（即延迟加载所有内容）来解决此问题...但我不想对面向公众的页面（例如登录页面）执行此操作。我可以很好地预渲染页面，用户将获得用于登录的预渲染的 index.html 文件..但无法与页面交互，直到路由器通过延迟加载从后端获取模块.. 。
还有其他人解决了这个问题吗？如果是的话怎么办？
这是失败的有问题的代码：https://github.com/jdcrecur/ang5ModuleRouting
