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



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

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

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

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

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

命令:

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

您将看到angular-cli输出为

CREATE src/app/modules/module-name/module-name-routing.module.ts(373字节(创建src/app/modules/module-name/module-name.module.ts(400字节(创建src/app/modules/module-name/module-name.component.scss(0字节(CREATEsrc/app/modules/module-name/module-name.component.html(29字节(创建src/app/modules/module-name/module-name.component.spec.ts(678字节(创建src/app/modules/modules-name/module-name.component.ts(301字节(更新src/app/app-routing.module.ts(1398字节(完成

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

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

摘录自棱角分明的文件:这将创建一个customers文件夹,其中包含在customer.module.ts文件中定义的新延迟可加载功能模块CustomersModule和在customer-routing.module.ts文件中定义了路由模块CustomersRoutingModule。该命令自动声明CustomersComponent并在新功能模块中导入CustomersRoutingModule。

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

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

最新更新