模板语法
服务端渲染

Lazy Loading Feature Modules

惰性加载的特性模块

Prerequisites

前提条件

A basic understanding of the following:

对下列知识有基本的了解：

For the final sample app with two lazy loaded modules that this page describes, see the.

如果需要本页描述的具有两个惰性加载模块的范例应用，参见。

High level view

高层视角

There are three main steps to setting up a lazy loaded feature module:

要想建立一个惰性加载的特性模块，有三个主要步骤：

  1. Create the feature module.

    创建该特性模块。

  2. Create the feature module’s routing module.

    创建该特性模块的路由模块。

  3. Configure the routes.

    配置相关路由。

Set up an app

建立应用

If you don’t already have an app, you can follow the steps below to create one with the CLI. If you do already have an app, skip to Configure the routes. Enter the following command where customer-app is the name of your app:

如果你还没有应用，可以遵循下面的步骤使用 CLI 创建一个。如果已经有了，可以直接跳到 配置路由部分。 输入下列命令，其中的 customer-app 表示你的应用名称：

ng new customer-app --routing

This creates an app called customer-app and the --routing flag generates a file called app-routing.module.ts, which is one of the files you need for setting up lazy loading for your feature module. Navigate into the project by issuing the command cd customer-app.

这会创建一个名叫 customer-app 的应用，而 --routing 标识生成了一个名叫 app-routing.module.ts 的文件，它是你建立惰性加载的特性模块时所必须的。 输入命令 cd customer-app 进入该项目。

Create a feature module with routing

创建一个带路由的特性模块

Next, you’ll need a feature module to route to. To make one, enter the following command at the terminal window prompt where customers is the name of the module:

接下来，你需要一个要路由到的特性模块。要生成一个，请输入下列命令，其中的 customers 是该模块的名字：

ng generate module customers --routing

This creates a customers folder with two files inside; CustomersModule and CustomersRoutingModule. CustomersModule will act as the gatekeeper for anything that concerns customers. CustomersRoutingModule will handle any customer-related routing. This keeps the app’s structure organized as the app grows and allows you to reuse this module while easily keeping its routing intact.

这会创建一个 customers 目录，其中有两个文件：CustomersModule 和 CustomersRoutingModule。 CustomersModule 扮演的是与客户紧密相关的所有事物的管理员。CustomersRoutingModule 则会处理任何与客户有关的路由。 这样就可以在应用不断成长时保持应用的良好结构，并且当复用本模块时，你可以轻松的让其路由保持完好。

The CLI imports the CustomersRoutingModule into the CustomersModule by adding a JavaScript import statement at the top of the file and adding CustomersRoutingModule to the @NgModule imports array.

CLI 会把 CustomersRoutingModule 自动导入到 CustomersModule。它会在文件的顶部添加一条 JavaScript 的 import 语句，并把 CustomersRoutingModule 添加到 @NgModule 的 imports 数组中。

Add a component to the feature module

向特性模块中添加组件

In order to see the module being lazy loaded in the browser, create a component to render some HTML when the app loads CustomersModule. At the command line, enter the following:

要想在浏览器中看出该模块惰性加载成功了，就创建一个组件用来在应用加载 CustomersModule 之后渲染出一些 HTML。在命令行中输入如下命令：

ng generate component customers/customer-list

This creates a folder inside of customers called customer-list with the four files that make up the component.

这会在 customers 目录中创建一个名叫 customer-list 的文件夹，其中包含该组件的四个文件。

Just like with the routing module, the CLI imports the CustomerListComponent into the CustomersModule.

就像路由模块一样，CLI 也自动把 CustomerListComponent 导入了 CustomersModule。

Add another feature module

再添加一个特性模块

For another place to route to, create a second feature module with routing:

为了提供另一个可路由到的地点，再创建第二个带路由的特性模块：

ng generate module orders --routing

This makes a new folder called orders containing an OrdersModule and an OrdersRoutingModule.

这会创建一个名叫 orders 的新文件夹，其中包含 OrdersModule 和 OrdersRoutingModule。

Now, just like with the CustomersModule, give it some content:

现在，像 CustomersModule 一样，给它添加一些内容：

ng generate component orders/order-list

Set up the UI

建立 UI

Though you can type the URL into the address bar, a nav is easier for the user and more common. Replace the default placeholder markup in app.component.html with a custom nav so you can easily navigate to your modules in the browser:

虽然你也可以在地址栏中输入 URL，不过导航菜单会更好用，而且更常见。 把 app.component.html 中的占位脚本替换成一个自定义的导航，以便你在浏览器中能轻松地在模块之间导航。

<h1> {{title}} </h1> <button routerLink="/customers">Customers</button> <button routerLink="/orders">Orders</button> <button routerLink="">Home</button> <router-outlet></router-outlet>

To see your app in the browser so far, enter the following command in the terminal window:

要想在浏览器中看到你的应用，就在终端窗口中输入下列命令：

ng serve

Then go to localhost:4200 where you should see “app works!” and three buttons.

然后，跳转到 localhost:4200，这时你应该看到 “app works!” 和三个按钮。

three buttons in the browser

To make the buttons work, you need to configure the routing modules.

要想让这些按钮生效，你需要配置一下这些路由模块。

Configure the routes

配置路由

The two feature modules, OrdersModule and CustomersModule, have to be wired up to the AppRoutingModule so the router knows about them. The structure is as follows:

这两个特性模块（OrdersModule 和 CustomersModule）应该挂接到 AppRoutingModule 中，来让路由器知道它们。其结构如下：

lazy loaded modules diagram

Each feature module acts as a doorway via the router. In the AppRoutingModule, you configure the routes to the feature modules, in this case OrdersModule and CustomersModule. This way, the router knows to go to the feature module. The feature module then connects the AppRoutingModule to the CustomersRoutingModule or the OrdersRoutingModule. Those routing modules tell the router where to go to load relevant components.

每个特性模块都是路由器中的一个“门口”。在 AppRoutingModule 中，你配置了一些路由指向这些特性模块（即 OrderModule 和 CustomersModule）。 通过这种方式，路由器就知道了如何跳转到特性模块。然后，特性模块就把 AppRoutingModule 和 CustomersRoutingModule 或 OrdersRoutingModule 连接到一起。这些路由模块会告诉路由器该到哪里去加载相应的组件。

Routes at the app level

顶层的路由

In AppRoutingModule, update the routes array with the following:

在 AppRoutingModule 中，把 routes 数组修改成这样：

const routes: Routes = [ { path: 'customers', loadChildren: 'app/customers/customers.module#CustomersModule' }, { path: 'orders', loadChildren: 'app/orders/orders.module#OrdersModule' }, { path: '', redirectTo: '', pathMatch: 'full' } ];

The import statements stay the same. The first two paths are the routes to the CustomersModule and the OrdersModule respectively. Notice that the lazy loading syntax uses loadChildren followed by a string that is the path to the module, a hash mark or #, and the module’s class name.

这些 import 语句没有变化。前两个路径分别路由到了 CustomersModule 和 OrdersModule。注意看惰性加载的语法：loadChildren 后面紧跟着一个字符串，它指向模块路径，然后是一个 #，然后是该模块的类名。

Inside the feature module

特性模块内部

Next, take a look at customers.module.ts. If you’re using the CLI and following the steps outlined in this page, you don’t have to do anything here. The feature module is like a connector between the AppRoutingModule and the feature routing module. The AppRoutingModule imports the feature module, CustomersModule, and CustomersModule in turn imports the CustomersRoutingModule.

接下来看看 customers.module.ts。如果你使用的是 CLI，并遵循本页面中给出的步骤，那么在这里你不必做任何事。 特性模块就像是 AppRoutingModule 和该特性自己的路由模块之间的连接器。 AppRoutingModule 导入了特性模块 CustomersModule，而 CustomersModule 又导入了 CustomersRoutingModule。

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CustomersRoutingModule } from './customers-routing.module'; import { CustomerListComponent } from './customer-list/customer-list.component'; @NgModule({ imports: [ CommonModule, CustomersRoutingModule ], declarations: [CustomerListComponent] }) export class CustomersModule { }

The customers.module.ts file imports the CustomersRoutingModule and CustomerListComponent so the CustomersModule class can have access to them. CustomersRoutingModule is then listed in the @NgModule imports array giving CustomersModule access to its own routing module, and CustomerListComponent is in the declarations array, which means CustomerListComponent belongs to the CustomersModule.

customers.module.ts 文件导入了 CustomersRoutingModule 和 CustomerListComponent，所以 CustomersModule 类可以访问它们。 接着 CustomersRoutingModule 出现在了 @NgModule 的 imports 数组中，这让 CustomersModule 可以访问它的路由模块。而 CustomerListComponent 出现在了 declarations 数组中，这表示 CustomerListComponent 属于 CustomersModule。

Configure the feature module’s routes

配置该特性模块的路由

The next step is in customers-routing.module.ts. First, import the component at the top of the file with the other JavaScript import statements. Then, add the route to CustomerListComponent.

接下来的步骤位于 customers-routing.module.ts 中。首先，在文件的顶部使用 JS 的 import 语句导入该组件。然后添加指向 CustomerListComponent 的路由。

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { CustomerListComponent } from './customer-list/customer-list.component'; const routes: Routes = [ { path: '', component: CustomerListComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class CustomersRoutingModule { }

Notice that the path is set to an empty string. This is because the path in AppRoutingModule is already set to customers, so this route in the CustomersRoutingModule, is already within the customers context. Every route in this routing module is a child route.

注意，path 被设置成了空字符串。这是因为 AppRoutingModule 中的路径已经设置为了 customers，所以 CustomersRoutingModule 中的这个路由定义已经位于 customers 这个上下文中了。也就是说这个路由模块中的每个路由其实都是子路由。

Repeat this last step of importing the OrdersListComponent and configuring the Routes array for the orders-routing.module.ts:

重复这个步骤以导入 OrdersListComponent，并为 orders-routing.module.ts 配置路由树组：

import { OrderListComponent } from './order-list/order-list.component'; const routes: Routes = [ { path: '', component: OrderListComponent } ];

Now, if you view the app in the browser, the three buttons take you to each module.

现在，如果你在浏览器中查看该应用，这三个按钮会把你带到每个模块去。

Confirm it’s working

确认它工作正常

You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing Cmd+Option+i on a Mac or Ctrl+Alt+i on a PC and go to the Network Tab.

你可以使用 Chrome 开发者工具来确认一下这些模块真的是惰性加载的。 在 Chrome 中，按 Cmd+Option+i（Mac）或 Ctrl+Alt+i（PC），并选中 Network 页标签。

lazy loaded modules diagram

Click on the Orders or Customers button. If you see a chunk appear, you’ve wired everything up properly and the feature module is being lazy loaded. A chunk should appear for Orders and for Customers but will only appear once for each.

点击 Orders 或 Customers 按钮。如果你看到某个 chunk 文件出现了，就表示你已经惰性加载并接入了这个特性模块。Orders 和 Customers 都应该出现一次 chunk，并且它们各自只应该出现一次。

lazy loaded modules diagram

To see it again, or to test after working in the project, clear everything out by clicking the circle with a line through it in the upper left of the Network Tab:

要想再次查看它或测试本项目后面的行为，只要点击 Network 页左上放的“清除”图标即可。

lazy loaded modules diagram

Then reload with Cmd+r or Ctrl+r, depending on your platform.

然后，使用 Cmd+r（Mac） 或 Ctrl+r（PC） 重新加载页面。

forRoot() and forChild()

forRoot() 与 forChild()

You might have noticed that the CLI adds RouterModule.forRoot(routes) to the app-routing.module.ts imports array. This lets Angular know that this module, AppRoutingModule, is a routing module and forRoot() specifies that this is the root routing module. It configures all the routes you pass to it, gives you access to the router directives, and registers the RouterService. Use forRoot() in the AppRoutingModule—that is, one time in the app at the root level.

你可能已经注意到了，CLI 会把 RouterModule.forRoot(routes) 添加到 app-routing.module.ts 的 imports 数组中。 这会让 Angular 知道 AppRoutingModule 是一个路由模块，而 forRoot() 表示这是一个根路由模块。 它会配置你传入的所有路由、让你能访问路由器指令并注册 RouterService。 在 AppRoutingModule 中使用 forRoot()，在本应用中这只会在顶层模块中写一次。

The CLI also adds RouterModule.forChild(routes) to feature routing modules. This way, Angular knows that the route list is only responsible for providing additional routes and is intended for feature modules. You can use forChild() in multiple modules.

CLI 还会把 RouterModule.forChild(routes) 添加到各个特性模块中。这种方式下 Angular 就会知道这个路由列表只负责提供额外的路由并且其设计意图是作为特性模块使用。你可以在多个模块中使用 forChild()。

forRoot() contains injector configuration which is global; such as configuring the Router. forChild() has no injector configuration, only directives such as RouterOutlet and RouterLink.

forRoot() 包含的注入器配置是全局性的，比如对路由器的配置。forChild() 中没有注入器配置，只有像 RouterOutlet 和 RouterLink 这样的指令。

More on NgModules and routing

更多关于 NgModule 和路由的知识

You may also be interested in the following:

你可能还对下列内容感兴趣：