Angular CLI常用命令——创建模块（ng generate module）

基本命令

ng generate module <name> [options]

简写

ng g m <name> [options]

选项说明

• --flat：在当前项目的根目录创建文件，bool，默认false
• --module：简写-m，和--route一起使用，声明懒加载挂载的路由模块
• --project：项目名，string
• --route：懒加载模块的路由路径，这个需要和--module一块使用，即在那个，string
• --routing：创建路由模块，bool，默认false
• --routing-scop：指定路由的作用域，值：Root和Child，一个应用只有一个Root，默认Child

创建文件路径说明：

1. 在根目录执行命令，会在src/app下创建模块目录
2. 在src/app子目录下执行命令，会在当前子目录下创建模块目录

示例

一、创建基本模块

>ng g m test
CREATE src/app/test/test.module.ts (190 bytes)

效果：

1. 创建test目录，
2. 在test目录下创建模块声明文件test.module.ts

二、创建带有路由的模块

ng g m test --routing
CREATE src/app/test/test-routing.module.ts (247 bytes)
CREATE src/app/test/test.module.ts (272 bytes)

效果：

1. 创建test目录
2. 在test目录下创建路由文件test-routing.module.ts
3. 在test目录下创建模块文件test.moude.ts

test-routing.module.ts内容：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TestRoutingModule { }

生成文件的routing-scop是：RouterModule.forChild(routes)。

三、创建懒加载模块

ng g m test --routing --route=mytest -m app
CREATE src/app/test/test-routing.module.ts (335 bytes)
CREATE src/app/test/test.module.ts (343 bytes)        
CREATE src/app/test/test.component.html (19 bytes)    
CREATE src/app/test/test.component.spec.ts (612 bytes)
CREATE src/app/test/test.component.ts (264 bytes)     
CREATE src/app/test/test.component.scss (0 bytes)     
UPDATE src/app/app-routing.module.ts (2271 bytes)

在示例二基础上：

1. 添加test.component.html，test.component.spec.ts，test.component.ts和test.component.scss文件，用于指定懒加载模块的第一个组件
2. 更新-m指定的路由模块文件app-routing.module.ts

app-routing.module.ts更新内容：

const routes: Routes = [
  //其他路由路径
  { path: 'mytest', loadChildren: () => import('./test/test.module').then(m => m.TestModule) },
];

其中path为命令中参数--route的值，即懒加载路径。

四、指定懒加载模块文件

有些情况下，路由文件的命名不是按angular-cli指定，如我们把app-routing.module.ts改为routes.ts，那么执行以上命令就会报错：

Cannot read property 'properties' of undefined

解决办法，就是-m参数直接为懒加载挂载路由所在文件。执行命令改为：

ng g m test --routing --route=mytest -m routes.ts

注意：-m的文件路径是执行命令所在目录的相对路径。