如何使用 angular cli 生成延迟加载模块

Question

我有一个现有的 angular cli 应用程序，我想向我的应用程序添加一个将延迟加载的新模块

我知道angular cli 提供了生成可以延迟加载的模块的命令，我需要输入什么快速命令来做下面的事情

生成新模块
生成延迟加载的默认组件
为其生成路由模块并添加默认组件先加载
在主模块中为懒加载模块添加路由

当我尝试 ng generate module module-name --route=app --routing=true 时，出现以下错误

Module option required when creating a lazy loaded routing module.

Answer 1

命令：

ng generate module new-module-name --module parent-module --routing true --route path-string

ng generate module module-name: 它将生成一个名为 new-module-name.
--module parent-module: 新建的模块大部分时间会被添加到父模块中，即app模块。
--routing true:生成路由和一个默认组件被延迟加载
--route path-string: path-string 将作为路由器添加到 parent-module 路由配置中。

您将看到 angular-cli 输出为

CREATE src/app/modules/module-name/module-name-routing.module.ts (373 bytes) CREATE src/app/modules/module-name/module-name.module.ts (400 bytes) CREATE src/app/modules/module-name/module-name.component.scss (0 bytes) CREATE src/app/modules/module-name/module-name.component.html (29 bytes) CREATE src/app/modules/module-name/module-name.component.spec.ts (678 bytes) CREATE src/app/modules/module-name/module-name.component.ts (301 bytes) UPDATE src/app/app-routing.module.ts (1398 bytes) Done

Answer 2

您可以使用以下命令生成延迟加载模块：

ng generate module customers --route customers --module app.module

angular 文档摘录：这将创建一个客户文件夹，其中在 customers.module.ts 文件中定义了新的 lazy-loadable 功能模块 CustomersModule，在 customers-routing.module.ts 文件中定义了路由模块 CustomersRoutingModule。该命令自动声明 CustomersComponent 并在新功能模块中导入 CustomersRoutingModule。

因为新模块是 lazy-loaded，所以该命令不会在应用程序的根模块文件 app.module.ts 中添加对新功能模块的引用。相反，它将声明的路由、客户添加到作为 --module 选项提供的模块中声明的路由数组。

有关详细信息，请参阅此处的官方 angular 文档：https://angular.io/guide/lazy-loading-ngmodules

如何使用 angular cli 生成延迟加载模块

how to generate a lazy loading module using angular cli

angular-routing

angular-cli