前言

創(chuàng)新互聯(lián)公司是一家專業(yè)提供蒙自企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、H5建站、小程序制作等業(yè)務(wù)。10年已為蒙自眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

前段時(shí)間將所負(fù)責(zé)的 Angular2 項(xiàng)目升級(jí)到了 Angular5 版本，這兩天又進(jìn)行了升級(jí)至 Angular6 的嘗試?？偟膩碚f，兩次升級(jí)過程比較類似，也不算復(fù)雜。

2018年5月4日，Angular6.0.0版正式發(fā)布，新版本主要關(guān)注底層框架和工具鏈，目的在于使其變得更小更快。

特性的小改動(dòng)：

• animations: 只能使用 WA-polyfill 和 AnimationBuilder
• animations: 在轉(zhuǎn)換匹配器中暴露元素和參數(shù)
• common: 在 NgIf 中使用非模板元素時(shí)更好的錯(cuò)誤消息
• common: 導(dǎo)出函數(shù)來格式化數(shù)字，百分?jǐn)?shù)，貨幣和日期
• compiler: 實(shí)現(xiàn)“enableIvy”編譯選項(xiàng)
• core: 添加綁定名稱到內(nèi)容更改錯(cuò)誤

0. 項(xiàng)目特點(diǎn)

該項(xiàng)目有如下特點(diǎn)：

• 歷史悠久，項(xiàng)目龐大，源碼文件數(shù)量近千
• 業(yè)務(wù)代碼為主，極少應(yīng)用 Angular 高級(jí)特性(升級(jí)簡(jiǎn)單)
• 采用 pug 編寫 html 結(jié)構(gòu)
• 采用 Less 編寫 css 樣式
• 采用 Express 和 http-proxy 實(shí)現(xiàn) server 及后端 API 的代理
• 采用 compodoc 生成文檔
• 采用自開發(fā)的 @lzwme/simple-mock 實(shí)現(xiàn) API mock
• 采用 Fis3 編譯，項(xiàng)目源碼中深度使用了 fis3 的一些文件引用特性
• 采用 webpack 和 karma、jasmine 配置和執(zhí)行單元測(cè)試
• 采用 styleLint、tsLint、husky 和 prettier 執(zhí)行編碼風(fēng)格校驗(yàn)及格式化處理

項(xiàng)目升級(jí)后也沒有使用 @angular/cli，繼續(xù)采用 fis3 作為編譯工具。這一是因?yàn)樵S多歷史悠久的代碼風(fēng)格無法通過 tslint 校驗(yàn)，ng build 根本無法執(zhí)行通過；二是因?yàn)轫?xiàng)目的部分代碼編寫和構(gòu)建與發(fā)布流程使用了一些 fis3 的特性，改造成本較大。而且經(jīng)過比對(duì)，@angular/cli 的編譯過程并沒有比 fis3 好很多。

下面簡(jiǎn)要介紹一下升級(jí)的過程和方法。

1. 更新 package.json 的依賴

將 Angular 依賴庫(kù)改為 ^6.1.0 版本，并且注意項(xiàng)目依賴的 Angular 組件庫(kù)的兼容版本更新。如我們的項(xiàng)目依賴有如下變更：

• @ngx-translate/core 需要更新至 ^10.0.2 版本；
• angular-tree-component 需要更新至 7.x 版本；
• @ngrx/store 需要更新至 ^6.1.0 版本；

注意：一些組件庫(kù)的 API 也會(huì)有不兼容更新，相關(guān)代碼邏輯應(yīng)作改進(jìn)(可在升級(jí)完成后根據(jù)文檔和錯(cuò)誤提示去調(diào)試和修改)。

升級(jí)后的項(xiàng)目依賴參考：

{
 "devDependencies": {
 "@compodoc/compodoc": "^1.1.5",
 "@lzwme/simple-mock": "~0.0.8",
 "@types/core-js": "^0.9.46",
 "@types/jasmine": "~2.8.6",
 "@types/jasminewd2": "~2.0.3",
 "@types/node": "~8.9.4",
 "@types/webpack": "~2.2.14",
 "angular2-template-loader": "~0.6.2",
 "awesome-typescript-loader": "~3.2.3",
 "body-parser": "1.17.0",
 "cookie-parser": "1.4.3",
 "cross-env": "^5.1.6",
 "debug": "2.6.1",
 "ejs": "2.5.6",
 "express": "4.15.0",
 "fis-optimizer-htmlmin": "0.1.2",
 "fis-optimizer-png-compressor": "0.2.0",
 "fis-parser-less": "0.1.3",
 "fis-parser-pug": "0.0.1",
 "fis-postpackager-replace": "0.0.3",
 "fis3": "3.4.39",
 "fis3-deploy-local-supply": "0.0.2",
 "fis3-hook-commonjs": "0.1.27",
 "fis3-hook-node_modules": "2.3.1",
 "fis3-hook-relative": "2.0.3",
 "fis3-packager-deps-pack": "0.1.2",
 "fis3-parser-typescript": "^1.2.2",
 "fis3-postpackager-loader": "2.1.11",
 "fis3-preprocessor-cssprefixer": "0.0.2",
 "fis3-preprocessor-js-require-css": "0.1.3",
 "fis3-preprocessor-js-require-file": "0.1.3",
 "fis3-preprocessor-ng2-inline": "0.0.1",
 "fs-extra": "^6.0.1",
 "http-proxy": "1.16.2",
 "husky": "^0.14.3",
 "istanbul-instrumenter-loader": "^3.0.1",
 "jasmine-core": "^3.1.0",
 "karma": "^2.0.2",
 "karma-chrome-launcher": "^2.2.0",
 "karma-coverage": "^1.1.1",
 "karma-coverage-istanbul-reporter": "^2.0.1",
 "karma-jasmine": "^1.1.2",
 "karma-jasmine-html-reporter": "^1.1.0",
 "karma-mocha-reporter": "^2.2.5",
 "karma-remap-coverage": "^0.1.5",
 "karma-sonarqube-unit-reporter": "^0.0.14",
 "karma-sourcemap-loader": "~0.3.7",
 "karma-webpack": "^3.0.0",
 "less": "^3.0.4",
 "less-loader": "^4.1.0",
 "liftoff": "2.3.0",
 "lint-staged": "^7.1.3",
 "minimist": "1.2.0",
 "morgan": "1.8.1",
 "prettier": "^1.13.5",
 "pug": "^2.0.3",
 "pug-html-loader": "^1.1.5",
 "raw-loader": "~0.5.1",
 "serve-favicon": "2.4.1",
 "stylelint": "^9.4.0",
 "stylelint-config-prettier": "^4.0.0",
 "supervisor": "^0.12.0",
 "to-string-loader": "^1.1.5",
 "tslint": "^5.10.0",
 "typedoc": "^0.11.1",
 "typescript": "^2.8.3",
 "webpack": "~3.6.0"
 },
 "dependencies": {
 "@angular/animations": "^6.1.0",
 "@angular/common": "^6.1.0",
 "@angular/compiler": "^6.1.0",
 "@angular/core": "^6.1.0",
 "@angular/forms": "^6.1.0",
 "@angular/http": "^6.1.0",
 "@angular/platform-browser": "^6.1.0",
 "@angular/platform-browser-dynamic": "^6.1.0",
 "@angular/router": "^6.1.0",
 "@ngrx/router-store": "6.1.0",
 "@ngrx/store": "^6.1.0",
 "@ngx-translate/core": "^10.0.2",
 "@ngx-translate/http-loader": "^3.0.0",
 "angular-tree-component": "^7.2.1",
 "buffer": "4.9.1",
 "core-js": "^2.5.7",
 "fis-mod": "1.0.1",
 "is-buffer": "1.1.4",
 "jquery": "1.12.4",
 "moment": "2.18.1",
 "ngrx-store-freeze": "0.2.4",
 "ngrx-store-logger": "0.2.2",
 "process": "0.11.9",
 "reflect-metadata": "0.1.12",
 "rxjs": "^6.0.0",
 "rxjs-compat": "^6.2.2",
 "throttle-debounce": "^2.0.1",
 "zone.js": "0.8.26"
 }
}

本文標(biāo)題：Angular項(xiàng)目如何升級(jí)至Angular6步驟全紀(jì)錄-創(chuàng)新互聯(lián)
標(biāo)題來源：http://www.rwnh.cn/article18/doejgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站收錄、電子商務(wù)、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)