开发工具： ng-zhongyingjuhe 脚手架

ng-zhongyingjuhe Schematics

基于 Schematics

ng-add

添加 ng-zorro-antd 与它的依赖，并根据需要自动配置。

• 添加 ng-zorro-antd 到 package.json
• 替换 app.component.html 引导内容
• 在根模块导入必要的模块
• 导入必要的权限部分
• 导入可能需要用到的组件
• 将用于自定义的 theme.less 导入 angular.json

项目初始化

Install Angular 10

$ npm install -g @angular/cli@10 @angular/core@10

$ ng new project_name --routing=false --style less
$ cd project_name
$ ng add ng-zhongyingjuhe
Installing packages for tooling via npm.
Installed packages for tooling via npm.
? 请填写项目中文名称， 此名称显示在logo的位置: 测试
? 请填写项目说明: 测试项目
? 请填写角色: home      
? 是否有二级菜单: Yes
? 是否需要Tab页签和路由复用（默认false，没有二级菜单时请选false）: Yes
? 请选择项目类型: console
? 请填写项目git（不填则默认取项目名称）:    
? 请填写项目mapurl（不填则默认取角色名称）: 

调试：

npm run start:remote

编译：

npm run build:online

创建懒加载模块： 创建一个名字为：lazy-page 懒加载模块

PS F:\study\test2> ng g ng-zhongyingjuhe:lazy lazy-page
CREATE src/app/routes/lazy-page/lazy-page-routing.module.ts (370 bytes)
CREATE src/app/routes/lazy-page/lazy-page.component.html (37 bytes)
CREATE src/app/routes/lazy-page/lazy-page.component.spec.ts (666 bytes)
CREATE src/app/routes/lazy-page/lazy-page.component.ts (318 bytes)
CREATE src/app/routes/lazy-page/lazy-page.module.ts (470 bytes)
UPDATE src/app/routes/routes-routing.module.ts (2128 bytes)

创建模块： 创建一个名字为：test-module 的module：

PS F:\study\test2> ng g ng-zhongyingjuhe:module test-module
CREATE src/app/routes/test-module/test-module-routing.module.ts (254 bytes)
CREATE src/app/routes/test-module/test-module.module.ts (391 bytes)

创建一个名字为：test-list 的列表页：

PS F:\study\test2> ng g ng-zhongyingjuhe:list test-list
? Specify which module name: test-module
CREATE src/app/routes/test-module/test-list/test-list.component.html (352 bytes)
CREATE src/app/routes/test-module/test-list/test-list.component.spec.ts (702 bytes)
CREATE src/app/routes/test-module/test-list/test-list.component.ts (1292 bytes)
UPDATE src/app/routes/test-module/test-module.module.ts (500 bytes)
UPDATE src/app/routes/test-module/test-module-routing.module.ts (397 bytes)

创建一个名字为：test-view 的信息页modal：

PS F:\study\test2> ng g ng-zhongyingjuhe:view test-view
? Specify which module name: test-module
? Would you like to modal mode? Yes
CREATE src/app/routes/test-module/test-view/test-view.component.html (586 bytes)
CREATE src/app/routes/test-module/test-view/test-view.component.spec.ts (702 bytes)
CREATE src/app/routes/test-module/test-view/test-view.component.ts (666 bytes)
UPDATE src/app/routes/test-module/test-module.module.ts (609 bytes)

创建一个名字为：test-edit 的编辑页

PS F:\study\test2> ng g ng-zhongyingjuhe:edit test-edit
? Specify which module name: test-module
? Would you like to modal mode? No
CREATE src/app/routes/test-module/test-edit/test-edit.component.html (545 bytes)
CREATE src/app/routes/test-module/test-edit/test-edit.component.spec.ts (702 bytes)
CREATE src/app/routes/test-module/test-edit/test-edit.component.ts (1664 bytes)
UPDATE src/app/routes/test-module/test-module.module.ts (719 bytes)
UPDATE src/app/routes/test-module/test-module-routing.module.ts (541 bytes)

创建一个名字为：test-empty 的空页

PS F:\study\test2> ng g ng-zhongyingjuhe:empty test-empty
? Specify which module name: routes
CREATE src/app/routes/routes/test-empty/test-empty.component.html (28 bytes)
CREATE src/app/routes/routes/test-empty/test-empty.component.spec.ts (685 bytes)
CREATE src/app/routes/routes/test-empty/test-empty.component.ts (320 bytes)
UPDATE src/app/routes/routes.module.ts (758 bytes)
UPDATE src/app/routes/routes-routing.module.ts (2101 bytes)

新增可选Tab标签路由复用

新建项目时， reuse设置 false

目录结构

F:\
├─test-add
│  │  ├─.vscode
│  │  ├─e2e
│  │  │  └─src
│  │  ├─node_modules
│  │  ├─scripts
│  │  ├─src
│  │  │  ├─app
│  │  │  │  ├─components
│  │  │  │  │  ├─calendar
│  │  │  │  │  ├─form-modal
│  │  │  │  │  ├─search
│  │  │  │  │  └─user-select
│  │  │  │  ├─core
│  │  │  │  │  ├─net
│  │  │  │  │  └─startup
│  │  │  │  ├─layout
│  │  │  │  │  ├─default
│  │  │  │  │  │  ├─header
│  │  │  │  │  │  │  └─components
│  │  │  │  │  │  ├─setting-drawer
│  │  │  │  │  │  └─sidebar
│  │  │  │  │  ├─fullscreen
│  │  │  │  │  └─passport
│  │  │  │  ├─pipe
│  │  │  │  ├─routes
│  │  │  │  │  ├─callback
│  │  │  │  │  ├─dashboard
│  │  │  │  │  ├─exception
│  │  │  │  │  ├─passport
│  │  │  │  │  │  ├─lock
│  │  │  │  │  │  ├─login
│  │  │  │  │  │  ├─register
│  │  │  │  │  │  └─register-result
│  │  │  │  │  ├─routes
│  │  │  │  │  │  └─test-empty
│  │  │  │  │  ├─test-module
│  │  │  │  │  │  ├─test-edit
│  │  │  │  │  │  ├─test-list
│  │  │  │  │  │  └─test-view
│  │  │  │  │  └─welcome
│  │  │  │  └─shared
│  │  │  │      ├─st-widget
│  │  │  │      └─utils
│  │  │  ├─assets
│  │  │  │  └─tmp
│  │  │  │      ├─i18n
│  │  │  │      └─img
│  │  │  ├─environments
│  │  │  └─styles
│  │  ├─test
│  │  │  └─src
│  │  │      ├─app
│  │  │      │  ├─core
│  │  │      │  ├─layout
│  │  │      │  │  ├─default
│  │  │      │  │  │  ├─header
│  │  │      │  │  │  ├─setting-drawer
│  │  │      │  │  │  └─sidebar
│  │  │      │  │  ├─fullscreen
│  │  │      │  │  └─passport
│  │  │      │  └─routes
│  │  │      │      ├─dashboard
│  │  │      │      └─passport
│  │  │      │          ├─lock
│  │  │      │          ├─login
│  │  │      │          ├─register
│  │  │      │          └─register-result
│  │  │      ├─assets
│  │  │      │  └─tmp
│  │  │      │      ├─i18n
│  │  │      │      └─img
│  │  │      └─styles

2020-10月更新 新增主题

• startup.service.ts

const style = document.createElement('link');
style.type = 'text/css';
style.rel = 'stylesheet';
style.id = 'zhongyingjuhe';
style.href = 'assets/style.zhongyingjuhe.css';
document.body.appendChild(style);