在您的模块中使用另一个模块：导入与在路由中使用 loadChildren

Question

在我对 Angular 的探索中，我发现了两种在另一个模块中使用一个模块的可能方法。

方法一：在 imports 数组中声明它。 For example

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SharedModule,
    FormsModule
  ]
})

方法二：在路由中使用 loadChildren。 For example:

export const routes: Route[] = [
  { path: '', pathMatch: 'full', redirectTo: 'weather'},
  { loadChildren: 'app/dashboard/dashboard.module#DashboardModule', path: 'dashboard' },
  { loadChildren: 'app/profile/profile.module#ProfileModule', path: 'profile' },
  { loadChildren: 'app/weather/weather.module#WeatherModule', path: 'weather' }
];

这两种方法的实际区别是什么？

Answer 1

当您使用 loadChildren 时，它称为 "Lazy Loading"，总的来说它帮助我们减少了启动时间。延迟加载的模块只会在用户导航到他们的路线时加载。

有关 "Lazy Loading" 的更多信息：https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

Answer 2

What are the practical differences between these two methods?

最大的区别是通过 loadChildren 加载的模块将有自己的注入器，而来自导入模块的提供程序被合并到一个根注入器中。这意味着您不能将延迟加载模块中的提供程序注入到其他延迟加载模块中。

其他差异：

不使用路由就不能使用loadChildren
通过loadChildren加载的模块只有在相应的路由导航到

有关详细信息，请阅读

Avoiding common confusions with modules in Angular

在您的模块中使用另一个模块：导入与在路由中使用 loadChildren

Using another module in your module: imports vs. using loadChildren in routes

angular-module

angular

angular-router