使用 angular-cli 构建一个 angular 5 自定义模块包含预定义的路由数组

Question

我运行使用以下命令创建具有单独路由文件的模块：

$ ng g module xyz --routing

此命令将创建这两个文件：

xyz.module.ts
xyz-routing.module.ts

文件里面有一个空的路由数组xyz-routing.module.ts

const routes: Routes = [];

是否有自动填充数组的方法，例如使用预定义的模板、数组等？

Answer 1

可以使用此 link 来理解 angular schematics 并使用它创建您的组件、服务和模块。

原理图集合是一组命名原理图，由用户发布和安装。例如，Angular团队发布并维护了@schematics/angular官方合集，其中包含组件、模块和应用等原理图。

Answer 2

正如 link Debora 在评论中分享的描述，我运行以下命令：

npm install -g @angular-devkit/schematics-cli

schematics blank --name=crud-module

cd crud-module
npm install

然后我把crud-module/package.json里面的包名改成了crud-module

然后我更改了文件 crud-module/src/collection.json:

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "crud-module": {
      "description": "A blank schematic.",
      "factory": "./crud-module/index#crudModule"
    }
  }
}

剩下的部分就是修改文件，crud-module/src/crud-module/index.ts :

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';


// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function crudModule(options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    var ucFirstName = options.name.substr(0,1).toUpperCase() + options.name.substr(1);
    console.log("ucFirstName", ucFirstName);
    tree.create(`src/app/components/`+options.name+`/`+options.name+'.module.ts', `import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { `+ucFirstName+`Service } from './`+options.name+`.service';

@NgModule({
  imports: [
    RouterModule.forChild([
        {
          component: List`+ucFirstName+`Component,
          path: '',
        },
        {
          component: Add`+ucFirstName+`Component,
          path: 'add',
        },
        {
            component: Edit`+ucFirstName+`Component,
            path: 'edit/:id',
        },
    ]),
    CommonModule,
  ],
  declarations: [],
  providers: []
})
export class `+ucFirstName+`Module { }`);
    return tree;
  };
}

然后我替换了这个命令：

ng g module MODULE_NAME

使用此命令：

schematics  ./crud-module:crud-module --name=MODULE_NAME --dry-run=false

我的自定义模块已创建 :)

使用 angular-cli 构建一个 angular 5 自定义模块包含预定义的路由数组

Building an angular 5 custom module with angular-cli contains predefined routing array

angular-routing

angular-cli

angular

angular5