前言：

              随着Angular的深入发展，Angular6版本的框架部署较之前有了变化，至于变化是什么？请随小编一起来看看吧。

正文：

Angular5.x

用@angular/cli脚手架搭建的工程，配置文件名称为： .angular-cli.json, 内容详情如下：

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","project": {"name": "angular2"},"apps": [{"root": "src","outDir": "ITOO-FrontEnd","assets": ["assets","favicon.ico"],"index": "index.html","main": "main.ts","polyfills": "polyfills.ts","test": "test.ts","tsconfig": "tsconfig.app.json","testTsconfig": "tsconfig.spec.json","prefix": "app","styles": ["styles.css"],"scripts": [],"environmentSource": "environments/environment.ts","environments": {"dev": "environments/environment.ts","beta": "environments/environment.beta.ts","k8s": "environments/environment.k8s.ts","test": "environments/environment.test.ts","test55": "environments/environment.test55.ts","prod": "environments/environment.prod.ts","school": "environments/environment.school.ts"}}],"e2e": {"protractor": {"config": "./protractor.conf.js"}},"styles": ["../node_modules/primeng/resources/primeng.min.css","../node_modules/primeng/resources/themes/omega/theme.css","../node_modules/font-awesome/css/font-awesome.min.css","styles.css"],"lint": [{"project": "src/tsconfig.app.json"},{"project": "src/tsconfig.spec.json"},{"project": "e2e/tsconfig.e2e.json"}],"test": {"karma": {"config": "./karma.conf.js"}},"defaults": {"styleExt": "css","component": {}}
}

 Angular6.x

用@angular/cli脚手架搭建的工程，配置文件名称为： angular.json, 内容详情如下：

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {"ng-zorro": {"root": "","sourceRoot": "src","projectType": "application","prefix": "app","schematics": {"@schematics/angular:component": {"styleext": "less"}},"architect": {"build": {"builder": "@angular-devkit/build-angular:browser","options": {"outputPath": "dist","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.app.json","assets": ["src/favicon.ico","src/assets",{"glob": "**/*","input": "./node_modules/@ant-design/icons-angular/src/inline-svg/","output": "/assets/"}],"styles": ["src/theme.less","node_modules/ztree/css/metroStyle/metroStyle.css","src/styles.less"],"scripts": ["node_modules/jquery/dist/jquery.js","node_modules/ztree/js/jquery.ztree.all.js"]},"configurations": {"prod": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"}],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true},"beta": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.beta.ts"}],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true},"test": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.test.ts"}],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true},"k8s": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.k8s.ts"}],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true}}},"serve": {"builder": "@angular-devkit/build-angular:dev-server","options": {"browserTarget": "ng-zorro:build"},"configurations": {"production": {"browserTarget": "ng-zorro:build:production"}}},"extract-i18n": {"builder": "@angular-devkit/build-angular:extract-i18n","options": {"browserTarget": "ng-zorro:build"}},"test": {"builder": "@angular-devkit/build-angular:karma","options": {"main": "src/test.ts","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.spec.json","karmaConfig": "src/karma.conf.js","styles": ["src/theme.less","src/styles.less"],"scripts": [],"assets": ["src/favicon.ico","src/assets"]}},"lint": {"builder": "@angular-devkit/build-angular:tslint","options": {"tsConfig": ["src/tsconfig.app.json","src/tsconfig.spec.json"],"exclude": ["**/node_modules/**"]}}}},"ng-zorro-e2e": {"root": "e2e/","projectType": "application","architect": {"e2e": {"builder": "@angular-devkit/build-angular:protractor","options": {"protractorConfig": "e2e/protractor.conf.js","devServerTarget": "ng-zorro:serve"},"configurations": {"production": {"devServerTarget": "ng-zorro:serve:production"}}},"lint": {"builder": "@angular-devkit/build-angular:tslint","options": {"tsConfig": "e2e/tsconfig.e2e.json","exclude": ["**/node_modules/**"]}}}}},"defaultProject": "ng-zorro"
}

 环境部署发生的改变

Angular5.x

1.修改.angular-cli.json文件, 核心代码:

 "environmentSource": "environments/environment.ts","environments": {"dev": "environments/environment.ts","beta": "environments/environment.beta.ts","test": "environments/environment.test.ts","prod": "environments/environment.prod.ts"}

 2. 部署命令

dev: ng build --beta

test: ng build --test

prod: ng build --prod

Angular6.x

1. 修改angular.json文件, 核心代码:

"configurations": {"prod": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"}],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true},"beta": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.beta.ts"}],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true},"test": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.test.ts"}],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true},"k8s": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.k8s.ts"}],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true}}

2. 部署命令

dev:  ng build --configuration=beta

test: ng build --configuration=test

prod: ng build --prod --configuration=prod

         细心的读者会发现, 开发打包命令和生产打包命令发生了变化, 加入了--prod, 这是因为在生产环境下, 对于软件的部署要求更为严格, 而angular这块开箱即用的框架当然注意到了这点, 那具体发生了什么样的变化呢?

----------------------------------------------------------------------------------------------------------------------------------------------------------------

> 预先(AOT)编译: 预编译Angular的组件模板

>生产模式: 部署到启用了生产模式的生产环境

>打包: 把多个应用于库文件拼接到少量包(bundle)中

>最小化: 删除多余的空格/注释和可选令牌

>混淆/丑化: 重写代码, 使用简短的/不容易理解的变量名和函数名.

>消除死代码: 删除未引用过的模块和很多未用到的代码.

------------------------------------------------------------------------------------------------------------------------------------------------------------------

Jenkins自动化构建部署

Angular5.x之前建立相关的job, 构建后的操作直接部署即可.

Angular6.x在部署时,  无论是开发和生产对于安全性都相对提高, 构建包名都是随机的, 继而在远程部署时,就需要先删除上一次的部署包, 再替换新的部署包:

相关博文:  《Angular之ng项目搭建、构建、部署简介》: https://blog.csdn.net/yxf15732625262/article/details/79140642 

结语：

                                                                            煮一壶清酒, 寻一份变化之美.