Angular6以ng serve方式启动时指定环境方法及关联知识点

一.踩坑

1.问题来源

• 如何自定义环境并在启动时指定环境

2.解决方案

• 使用configuration参数启动项目，如ng serve --configuration=local or ng serve -c local启动名为local的环境
• 环境的定义在angular.json文件中(architect下build和serve都要添加环境配置)，如下所示

"configurations": {
  "production": { #定义环境名词
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

其中默认使用的时environment.ts文件作为当前的环境文件，如需要在不同环境中使用不同的environment文件则需要写fileReplacements进行文件的替换

二.相关知识

1.添加新环境

Reference ：Angular Cli使用

• 在angular.json的build中添加配置(如添加一个dev2的环境)

"build": {
   "configurations": {
        "dev2": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev2.ts"
            }
            /* You can add all other options here, such as aot, optimization, ... */
          ],
          "serviceWorker": true
        }

• 在angular.json的serve中添加配置，当使用ng serve -c dev2时以dev2环境的方式配置

"serve":
      "configurations": {
        "dev2": {
          "browserTarget": "projectName:build:dev2"
        }

2.构建命令

• 通常使用的构建命令是ng build，构建会从angular.json中读取相关配置
• 上述命令等同于如下命令

$ ng build --target=development --environment=dev
$ ng build --dev --e=dev
$ ng build --dev
$ ng build

• 其中用到了如下特性（关闭 aot 构建、生成 sourcemaps 等）：

--aot=false #Ahead of Time编译,执行aot会去掉一些程序执行不需要的代码, 例如angular的compiler这时就不在build输出的文件里了，且–aot参数是让angular-cli启动预编译特性。
--envrionment=dev #-e Build环境
--output-hashing=media
--sourcemaps=true #-sm 生成source map
--extract-css=false
--watch #-w Watch并rebuild
--target -t #Build target

• 如果需要生成生成环境的构建，运行如下命令：

$ ng build --prod

// 等同于
$ ng build --target=production --environment=prod
$ ng build --prod --env=prod

• 默认开启的选项有（开启 aot 构建，关闭 sourcemaps 等）：

--aot=true
--envrionment=prod
--output-hashing=all
--sourcemaps=false
--extract-css=true

3.测试

• 如果是库项目或者一些公有底层项目，一个项目需要配套的测试文件，可以使用ng test来进行单元测试，使用ng e2e来进行集成测试。
• 不过如果是变化频繁的业务型项目，可以看情况是否启用测试。
• 如果不需要测试，可以将相关测试文件全部删掉即可，另外用ng new和ng g生成项目和组件时，可以忽略生成测试文件。

$ ng new lego --skip-tests=true
$ ng g c header --spec=false

4.脚手架

• 可以使用如下命令快速生成项目代码

Component ng g component my-new-component 
// 不生成单元测试文件则可以使用 --spec=false 参数
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

5.代理

• 通常我们采用ng serve --proxy-config proxy.conf.json的方式实现代理，深入了解之后发现，ng serve底层使用了webpack-dev-server，而webpack-dev-server又使用了http-proxy-middleware。

6.自定义规范模板

• 企业中都会有自己的代码规范，可能与ng g命令生成的样式不同，我们可以借助vscode自带的snippet定义模板，可以参考 VSCode Snippet

7.生产与开发build对比

	ng build	ng build --prod
Environment	environment.ts	environment…prod.ts
缓存	只缓存css里引用的图片	所有build的文件
source maps	生成	不生成
uglify	不	是
Tree-Shaking	不去掉无用代码	去掉无用代码
AOT	不	是
Bundling打包	是	是
–build-optimizer	否	是
–named-chunks	是	否
–output-hashing	media	所有

8.Serve命令常用参数

--open -o 打开默认浏览器
--port -p 端口
--live-reload -lr 发生变化时重新加载网页(默认开启的)
--ssl 使用https--proxy-config -pc 代理配置
--prod 在内存中serve 生产模式build的文件