使用Angular-cli多工程实践应用

[jiayisheji]

angular多工程探索.md

开发 Angular 就不能不知道 Angular-CLI 这个超级好用的命令行工具，有了这个工具，原本混沌的开发环境，顿时清晰，许多繁琐的琐事，一个命令就搞定。

Angular-cli 从2015年发布到现在已经经历很多版本，主要有2个大版本变化，一个单工程，一个是多工程。
单工程是1.x版本，多工程是6.x+版本，最新版是7.x。如果使用Angular-cli开发Angular应用，当前版本是Angular6以下的，最好不要直接ng update，会有很多坑等你，最保险也是最安全的方式是，先升级全局angular-cli，再用它ng new project，将之前项目scr目录内容拷贝进去，修改package.json和angular.json(注：1.x里面叫.angular.json)。安装第三方依赖包，然后运行，修改飚红的错误即可。这个升级最大错误是rxjs问题。当前版本是Angular6的，可以直接升级Angular7。如果你在升级过程中遇到问题，可以联系我寻求帮助。

多工程

多工程是angular-cli 6x一个核心亮点，这个是借鉴@angular/router作者写的一个angular-cli增强工具nrwl，目的多个工程共享一个node_modules。
其实我认为还有2个目的，这也是本文的重点，这里简单描述一下。一个是angular-cli随着工程增大，编译越来越慢，这个时候拆模块就很重要的。一个是可以直接发布npm包，打造自己组件库。

准备

环境

1. 依赖环境

node V8 + （可以用nvm做版本管理，最好选用node 10）

2. 安装cli（注意一定要安装cli）

npm install -g @angular/cli

创建项目

ng new project

如果使用ng new project命令，默认就是出现在当前目录。

有2个常用携带选择命令：

• Would you like to add Angular routing? (y/N) Y
  这个会默认生存一个app-routing.module.ts，并且在相关文件注入，这个表示根路由。
• Which stylesheet format would you like to use? (Use arrow keys) Sass
  CSS (.css )
  Sass (.scss) [ http://sass-lang.com ]
  Less (.less) [ http://lesscss.org ]
  Stylus (.styl) [ http://stylus-lang.com ]
  这个是选择默认样式文件的选项，相对支持最好的css预处理器是Sass。

选择完成以后自动npm install安装package.json所需要依赖。

angular.json简单详解

全局配置

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {},
  "defaultProject": "angular-multiple-projects"
}
``
`$schema` 里面包含所有的`angular.json`配置

`version` 这个不解释

`newProjectRoot` 这个后面讲解多工程放置目录

`projects` 所有项目配置

`defaultProject` 默认配置，这个只能是`application`，不能是`library`，就可以直接使用以下命令

```bash
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"

projects配置

默认创建

{
    ...
    "projects": {
        "angular-multiple-projects": {
        },
        "angular-multiple-projects-e2e": {
        }
    },
    ...
}

angular-multiple-projects 项目配置

angular-multiple-projects-e2e 项目e2e测试配置

application 配置

{
    ...
    "angular-multiple-projects": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
      },
      "architect": {}
    },
    ...
}

root 项目根目录，默认就是当前根目录，这个最好不要修改，会影响很多配置和功能

sourceRoot 开发源文件地址

projectType 项目类型 application 和 library

prefix 创建组件和指令的前缀 默认组件是 app-component, 默认指令是 [appDirective]

schematics 这个配置对应 ng generate 里的各个配置

architect 这个配置是整开发，生成配置核心，重点讲解

schematics 配置

例如：创建项目选择组件css

{
    ...
    "schematics": {
        "@schematics/angular:component": {
            "style": "sass"
        }
    },
    ...
}

组件生成配置：ng generate component

那常用配置有哪些，具体可以参考./node_modules/@angular/cli/lib/config/schema.json#schematicOptions

这里我们拿组件来举例子：

"@schematics/angular:component": {
    "type": "object",
    "properties": {
    "changeDetection": {  
        "description": "Specifies the change detection strategy.",
        "enum": ["Default", "OnPush"],
        "type": "string",
        "default": "Default",
        "alias": "c"
    },
    "entryComponent": {
        "type": "boolean",
        "default": false,
        "description": "Specifies if the component is an entry component of declaring module."
    },
    "export": {
        "type": "boolean",
        "default": false,
        "description": "Specifies if declaring module exports the component."
    },
    "flat": {
        "type": "boolean",
        "description": "Flag to indicate if a dir is created.",
        "default": false
    },
    "inlineStyle": {
        "description": "Specifies if the style will be in the ts file.",
        "type": "boolean",
        "default": false,
        "alias": "s"
    },
    "inlineTemplate": {
        "description": "Specifies if the template will be in the ts file.",
        "type": "boolean",
        "default": false,
        "alias": "t"
    },
    "module": {
        "type": "string",
        "description": "Allows specification of the declaring module.",
        "alias": "m"
    },
    "prefix": {
        "type": "string",
        "format": "html-selector",
        "description": "The prefix to apply to generated selectors.",
        "alias": "p"
    },
    "selector": {
        "type": "string",
        "format": "html-selector",
        "description": "The selector to use for the component."
    },
    "skipImport": {
        "type": "boolean",
        "description": "Flag to skip the module import.",
        "default": false
    },
    "spec": {
        "type": "boolean",
        "description": "Specifies if a spec file is generated.",
        "default": true
    },
    "styleext": {
        "description": "The file extension to be used for style files.",
        "type": "string",
        "default": "css"
    },
    "style": {
        "description": "The file extension or preprocessor to use for style files.",
        "type": "string",
        "default": "css",
        "enum": [
            "css",
            "scss",
            "sass",
            "less",
            "styl"
        ]
    },
    "viewEncapsulation": {
        "description": "Specifies the view encapsulation strategy.",
        "enum": ["Emulated", "Native", "None", "ShadowDom"],
        "type": "string",
        "alias": "v"
    }
}

description 描述

enum 可选择的值

type 类型

format 文件书写格式

alias 使用配置可使用的别名

default 默认值

architect 配置

{
    ...
    "architect": {
        "build": {},
        "serve": {},
        "extract-i18n": {},
        "test": {},
        "lint": {}
    },
    ...
}

build 生产发布配置

serve 开发环境配置

extract-i18n 多语言配置

test 单元测试配置

lint 代码风格检查配置

build 配置

{
    ...
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {},
        "configurations": {}
    },
    ...
}

1. builder 编译脚本

• @angular-devkit/build-angular:app-shell
• @angular-devkit/build-angular:browser // application 打包
• @angular-devkit/build-angular:dev-server // application 开发
• @angular-devkit/build-angular:extract-i18n // application 多语言
• @angular-devkit/build-angular:protractor // application e2e
• @angular-devkit/build-angular:server // server 开发
• @angular-devkit/build-angular:karma // application | library 单元测试
• @angular-devkit/build-angular:tslint // application | library 代码风格
• @angular-devkit/build-ng-packagr:build // library 打包

2. serve 开发脚本

{
    ...
    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {},
        "configurations": {}
    },
    ...
}

我们首先运行一下效果再来介绍它们：

npm start or npm run start

等待编译完成运行

如果使用sass，编译出错ERROR in ./src/styles.scss

原因找不到Error: Cannot find module 'node-sass'。

这里主要是Windows解决方案：

1. 单独安装一次 `npm install node-sass`
2. 找同伴去拷贝一份`node_modules`
3. 安装`python v2.7` 和 `vs`（**注意** 不是`vs code`）需要`vb`等依赖

npm start实际运行的是ng serve

相信很多之前都会看到其他人的文章，都会由这样例子，比如编译完成自动打开默认浏览器

在package.json里面配置

{
    ...
    "scripts": {
        ...
        "start": "ng serve --open",
        ...
    },
    ...
}

在现在版本里面完全不用这么麻烦了，直接在options添加即可。然后直接"start": "ng serve"即可。

这里说几个和我们开发息息相关的重要配置：注意：每次修改配置，需要重启

1. 端口号：

开发时候本地开发最容易出现端口号被占用，默认是4200

{
    ...
    "options": {
        "port": 4201,  // 修改后 访问 http://localhost:4201
    }
    ...
}

angular-multiple-projects-e2e 项目e2e测试配置

但凡创建的application都会这样的格式

"application": {
},
"application-e2e": {
}

但凡创建的library都会这样的格式

"library": {
},

使用多工程