在 Angular 应用中,延迟加载路由是一种优化技术,它允许我们将模块按需加载,以减少初始加载时间和提高应用性能。延迟加载路由的基本原理是在用户访问特定路由时才加载相关的模块。本文将介绍如何在 Angular 应用中实现延迟加载路由,并提供相应的源代码示例。
首先,我们需要创建一个 Angular 项目。假设你已经安装了 Angular CLI,并创建了一个名为 “lazy-loading-app” 的项目。在命令行中执行以下命令来创建项目:
ng new lazy-loading-app
接下来,我们需要创建一些模块和组件来演示延迟加载路由的实现。我们将创建两个模块:HomeModule 和 AboutModule。HomeModule 将用于默认加载,而 AboutModule 将延迟加载。
首先,我们创建 HomeModule。在命令行中执行以下命令:
ng generate module home
然后,我们创建一个名为 HomeComponent 的组件,用于 HomeModule。在命令行中执行以下命令:
ng generate component home
接下来,我们创建 AboutModule。在命令行中执行以下命令:
ng generate module about