loadChildren を使用して Angular でモジュールを遅延ロードする方法
10916 ワード
プロジェクト:
Angular モジュールを遅延ロードするには、次のように AppRoutingModule ルート構成で (コンポーネントではなく)
子モジュールは
参照:
https://angular.io/guide/lazy-loading-ngmodules
codever
- ファイル: app.routing.ts
Angular モジュールを遅延ロードするには、次のように AppRoutingModule ルート構成で (コンポーネントではなく)
loadChildren
を使用します.import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { PageNotFoundComponent } from './not-found.component';
import { SnippetNotFoundComponent } from './not-found/snippet-not-found.component';
const routes: Routes = [
{
path: 'personal',
loadChildren: () => import('app/personal/personal-bookmarks.module').then(m => m.PersonalBookmarksModule)
},
{
path: 'dashboard',
loadChildren: () => import('app/user/dashboard/user-dashboard.module').then(m => m.UserDashboardModule)
},
{
path: 'settings',
loadChildren: () => import('app/user-settings/user-settings.module').then(m => m.UserSettingsModule)
},
{
path: 'public',
loadChildren: () => import('app/public/public.module').then(m => m.PublicBookmarksModule)
},
{
path: 'my-snippets',
loadChildren: () => import('app/codelet/codelet.module').then(m => m.CodeletModule)
},
{
path: 'my-codelets',
redirectTo: 'my-snippets',
},
{
path: 'search',
loadChildren: () => import('app/search-results/search-results.module').then(m => m.SearchResultsModule)
},
{
path: '',
redirectTo: 'public',
pathMatch: 'full'
},
{path: '404-snippet', component: SnippetNotFoundComponent},
{path: '**', component: PageNotFoundComponent}
];
/**
* See App routing @https://angular.io/docs/ts/latest/guide/ngmodule.html
*/
@NgModule({
imports: [
RouterModule.forRoot(
routes
)
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
子モジュールは
SearchResultsModule
のようになります:const searchResultsRoutes: Routes = [
{
path: '',
component: SearchResultsComponent
}
];
@NgModule({
declarations: [SearchResultsComponent],
imports: [
RouterModule.forChild(searchResultsRoutes),
CommonModule,
CodeletModule,
SharedModule,
MatTabsModule,
]
})
export class SearchResultsModule { }
参照:
https://angular.io/guide/lazy-loading-ngmodules
Shared with ❤️ from Codever. 👉 use the copy to mine functionality to add it to your personal snippets collection.
Reference
この問題について(loadChildren を使用して Angular でモジュールを遅延ロードする方法), 我々は、より多くの情報をここで見つけました https://dev.to/codever/how-to-lazy-load-modules-in-angular-with-loadchildren-3g0jテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol