在Angular中预加载模块非常类似于lazy loading，除了模块将在所有急切加载的模块准备就绪后立即加载。这消除了导航到延迟加载模块时可能出现的延迟，但仍然具有更快的应用程序初始加载的好处，因为初始模块首先加载。

<$>[注意]以下内容涵盖了为角度2+应用程序预加载模块的内容。<$>

PreloadAllModules

执行预加载的默认方式是使用预加载策略PreloadAllModules，这意味着所有可延迟加载的模块都将被预加载。一旦您有了适当的延迟加载，就很容易实现。

在您的应用程序模块中，导入预加载所有模块以及您的其他路由器导入：

1[label app.module.ts]
2import { RouterModule, Routes, PreloadAllModules }
3  from '@angular/router';

现在，在NgModule的导入中，指定预加载策略：

1[label app.module.ts]
2imports: [
3  ...
4  RouterModule.forRoot(routes,
5    { preloadingStrategy: PreloadAllModules })
6],

现在你就知道了！所有可延迟加载的功能模块现在都将被预加载。

自定义预加载策略

如果您不希望预加载所有惰性可加载模块，您可以实现自己的预加载策略。当某些路由很少使用且根本不需要预加载时，这会很有用。

我们将定义并导出一个实现PreloadingStrategy的CustomPreload类：

1[label custom-preloading.ts]
2import { Observable } from 'rxjs/Observable';
3import { PreloadingStrategy, Route } from '@angular/router';

为了实现我们的类，我们定义了一个接受路径信息的预加载方法，以及一个在模块应该预加载时要调用的函数。该方法本身应该返回一个可观察对象，因此当一个模块不应该被预加载时，我们返回Observable.of(NULL)。

现在，在我们的应用程序模块中，我们导入预加载策略类，提供它，并将它告诉RouterModule.forRoot：

1[label app.module.ts]
2// ...
3import { routes } from './routes';
4import { CustomPreloading } from './custom-preloading';

路由

我们的路径可以设置为类似这样的内容，为应该预加载的模块提供一个带有preLoad：true的数据对象：

1[label routes.ts]
2import { DashboardComponent } from './dashboard/dashboard.component';
3
4import { Routes } from '@angular/router';

<$>[注意]与延迟加载一样，您可以转到DevTools的网络选项卡，以验证块是否已加载以及预加载是否正常工作。<$>