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

Question

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

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

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

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

创建延迟加载的路由模块时需要模块选项。

Answer 1

命令：

ng generate module module-name --module app --routing true --route module-name

• ng generate module module-name：上面的命令会生成一个带有名字的模块module-name
• --routing true：生成路由和延迟加载的默认组件
• --route module-name：在应用路由模块中添加新创建的模块，路径为manemodule-name

您将看到angular-cli输出为

CREATE src/app/modules/module-name/module-name-routing.module.ts（373 字节） CREATE src/app/modules/module-name/module-name.module.ts（400 字节）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)字节）完成

Answer 2

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

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

角度文档摘录：这将创建一个客户文件夹，其中包含在 customers.module.ts 文件中定义的新的延迟加载功能模块 CustomersModule 和在 customers-routing.module.ts 文件中定义的路由模块 CustomersRoutingModule。该命令会自动声明CustomersComponent 并在新功能模块中导入CustomersRoutingModule。

由于新模块旨在延迟加载，因此该命令不会在应用程序的根模块文件 app.module.ts 中添加对新功能模块的引用。相反，它将声明的路由，customers 添加到作为 --module 选项提供的模块中声明的路由数组。

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