首页 文章

Angular 5与路由器中的Angular cli非延迟加载模块

提问于
浏览
5

构建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
    )],
    exports: [RouterModule],
})

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), <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

1 回答

  • 3

    我遇到了同样的问题 . 这可能是angular-cli的错误 . 我仍然不确定错误是在cli中还是在我们的代码中!

    正如Gerrit在另一个问题here中所提到的,它仍然可以用aot编译: ng serve --aot

    我还通过将github中提到的我的angular-cli从 1.7.2 降级到 1.6.8 来解决了这个问题,这是最后一个似乎在我们的案例中起作用的CLI版本 .

相关问题