通过路由器状态更改加载Angular组件

Question

在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