初始化

首先初始化angular项目(确保全局安装最新@angular/cli)

ng new my-project --style less --routing 
// 加载ng-alain（如果不是纯测试项目 为了方便开发 直接加载ng-alain）
ng add ng-alain
// 加载ng-zorro
ng add ng-zorro-antd

增加mock

// 安装yarn
npm i yarn -g
yarn config set registry https://registry.npm.taobao.org/
yarn add @delon/mock -D

 "schematics": {
        "@schematics/angular:component": {
          "skipTests": true,
          "flat": false,
          "inlineStyle": true,
          "inlineTemplate": false,
          "style": "less"
        },
        "@schematics/angular:application": {
          "strict": true
        },
        "ng-alain:module": {
          "routing": true,
          "skipTests": true
        },
        "ng-alain:list": {
          "skipTests": true
        },
        "ng-alain:edit": {
          "skipTests": true,
          "modal": true
        },
        "ng-alain:view": {
          "skipTests": true,
          "modal": true
        },
        "ng-alain:curd": {
          "skipTests": true
        },
        "@schematics/angular:module": {
          "routing": true
        },
        "@schematics/angular:directive": {
          "skipTests": true
        },
        "@schematics/angular:service": {
          "skipTests": true
        }
      },

新建module

// 指令
ng g module routes/algorithm-preview --module routes/routes

文件：

// algorithm-preview.module
import { NgModule, Type } from '@angular/core';
import { AlgorithmPreviewRoutingModule } from './algorithm-preview-routing.module';
import { SharedModule } from '@shared';
const COMPONENTS: Type<void>[] = [];
@NgModule({
  declarations: [...COMPONENTS],
  imports: [SharedModule, AlgorithmPreviewRoutingModule]
})
export class AlgorithmPreviewModule {}
// algorithm-preview-routing.module
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AlgorithmPreviewRoutingModule { }
// 懒加载 routes-routing.module增加
{ path: 'preview', loadChildren: () => import('./algorithm-preview/algorithm-preview.module').then(m => m.AlgorithmPreviewModule) },

添加component

ng g ng-alain:curd algorithm -m=algorithm-preview

import { NgModule, Type } from '@angular/core';
import { AlgorithmPreviewRoutingModule } from './algorithm-preview-routing.module';
import { AlgorithmPreviewAlgorithmComponent } from './algorithm/algorithm.component';
import { AlgorithmPreviewAlgorithmEditComponent } from './algorithm/edit/edit.component';
import { AlgorithmPreviewAlgorithmViewComponent } from './algorithm/view/view.component';
import { SharedModule } from '@shared';
const COMPONENTS: Type<void>[] = [AlgorithmPreviewAlgorithmComponent];
const COMPONENTS_NOROUNT: Type<void>[] = [AlgorithmPreviewAlgorithmEditComponent, AlgorithmPreviewAlgorithmViewComponent];
@NgModule({
  declarations: [...COMPONENTS, ...COMPONENTS_NOROUNT],
  imports: [SharedModule, AlgorithmPreviewRoutingModule],
  entryComponents: COMPONENTS_NOROUNT
})
export class AlgorithmPreviewModule {}