web-dev-qa-db-ja.com

Angular lazyLoadingから 'normal'読み込みに切り替えます

遅延読み込みが実装されているAngularアプリケーションに取り組んでいます。遅延読み込みを試してみましたが、まだアプリケーションに実装したくないと判断しました。これは私のapp.module.tsです。

app.module.ts：

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'hq', loadChildren: 'app/hq/hq.module#HqModule' },
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'},
    ]),
  ],
  bootstrap: [AppComponent],
  exports: [RouterModule],
})
export class AppModule { }

ルートをたとえばhqに切り替えて通常の読み込みに戻すにはどうすればよいですか？私は次のようなことがうまくいくと思っていました：

  { path: 'hq', redirectTo: HqModule }

しかし、それは私のモジュールが間違ったタイプの引数であることを返します。これはAngularでも可能ですか？

hq.module.ts

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
        { path: '',
          component: HqTemplateComponent,
          canActivate: [AuthGuard],
          children: [
            { path: '', pathMatch: 'full', redirectTo: 'overview' },
            { path: 'overview', component: OverviewComponent, canActivate: [AuthGuard] },
          ]
        },
    ]),
  ],
  declarations: [HqTemplateComponent, OverviewComponent]
})
angularangular-module
11
hY8vVpf3tyR57Xib

矢印機能

文字列を次のような矢印関数に変更するのが好きです。

import { HqModule } from './hq/hq.module';


{ path: 'hq', loadChildren: () => HqModule },

foraot angular 4以下：

export function loadHqModuleFn() {
  return HqModule;
}

{ path: 'hq', loadChildren: loadHqModuleFn },

注：バージョン5以降、コンパイラーは.jsファイルの発行中にこの書き換えを自動的に実行します。 「式を下げる」のおかげで

プランカーの例

angle-router-loader？sync = true

angular-router-loader を使用する場合、このロードには モジュールを同期的にロードする の特別な構文があることに注意してください。クエリ文字列値としてsync=trueをloadChildren stringに追加するだけです。

{ path: 'hq', loadChildren: 'app/hq/hq.module#HqModule?sync=true' },

輸入

もちろん、モジュールをimportsアレイに追加することもできますが、この場合、このモジュールのルーター構成パスを変更する必要があります。

app.module.ts

@NgModule({
  imports: [
    ...,       
    HqModule,
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'},
    ])
  ]
  ...
})
export class AppModule {}

hq.module.ts

@NgModule({
  imports: [
    ...
    RouterModule.forChild([
        { path: 'hq', <========================== changed '' to `hq`
          component: HqTemplateComponent,
          canActivate: [AuthGuard],
          children: [
            ...
          ]
        },
    ]),
  ],
  ...
})

angularルーターの設定は順序が厳密です。 ドキュメント ：によると、言及する価値があります。

ルータはルートを照合するときに最初の一致の勝ち戦略を使用するため、より具体的なルートをあまり具体的でないルートの上に配置する必要があります

したがって、ルート定義を含むモジュールを、RouterModule.forRootで行うのと同じ順序でimports配列に追加します。

8
yurzui

AppModuleのインポート配列にHqModuleを追加し、AppModuleルーティング定義からHqModuleエントリを削除します。このような：

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HqModule, // add it
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'}
    ])
  ],
  bootstrap: [AppComponent],
  exports: [RouterModule],
})
export class AppModule { }
0
asmmahmud