通过路由器状态变化加载 Angular 个组件

Question

in Angular 所有组件打包在一个文件中并一次加载所以 main.bundle.js 随着任何新组件变得更大当路由器状态发生变化时，有什么方法可以异步加载所需的组件吗？

Answer 1

是的，你可以

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { EagerComponent } from './eager.component';

const routes: Routes = [
   { path: '', redirectTo: 'eager', pathMatch: 'full' },
   { path: 'eager', component: EagerComponent },
   { path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

有关更多信息，请在此处查看延迟加载： https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

通过路由器状态变化加载 Angular 个组件

Load Angular components by router state change

router

angular