web-dev-qa-db-ja.com

Angular 5 with Angular cli非遅延読み込みモジュールをルーターに

Angle5アプリの構築。アプリには、いくつかの代替レイアウトが必要です。

私のアプローチは、メインアプリモジュールルーティングファイルで高レベルのルーティングを処理することです。上記のファイルは、ルートをモジュールにマップします。モジュールは、速度が重要でないページでは遅延ロードされ、速度が重要なページでは遅延ロードされません。

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 {
}

理論的にはこれは機能しますが、実際にはエラーが発生します。期待される結果は、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

javascriptangularlazy-loadingangular5
6
John

同じ問題が発生しています。これはangular-cliのバグである可能性があります。バグがCLIにあるのか、コードにあるのかはまだわかりません。

Gerrit 他の質問で述べたように here aotでコンパイルすることはまだ可能です：ng serve --aot

また、 github で説明したようにangular-cliを1.7.2から1.6にダウングレードすることで、この問題を解決しました。 8、これは私たちの場合に機能するように見える最後のCLIバージョンです。

3
Alex T