Angular項目如何升級至Angular6步驟全紀錄
更新時間：2018年09月03日 16:41:57 作者：志文工作室
這篇文章主要給大家介紹了關(guān)于Angular項目如何升級至Angular6的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
前言
前段時間將所負責的 Angular2 項目升級到了 Angular5 版本，這兩天又進行了升級至 Angular6 的嘗試?？偟膩碚f，兩次升級過程比較類似，也不算復(fù)雜。
2018年5月4日，Angular6.0.0版正式發(fā)布，新版本主要關(guān)注底層框架和工具鏈，目的在于使其變得更小更快。
特性的小改動：
- animations: 只能使用 WA-polyfill 和 AnimationBuilder
- animations: 在轉(zhuǎn)換匹配器中暴露元素和參數(shù)
- common: 在 NgIf 中使用非模板元素時更好的錯誤消息
- common: 導(dǎo)出函數(shù)來格式化數(shù)字，百分數(shù)，貨幣和日期
- compiler: 實現(xiàn)“enableIvy”編譯選項
- core: 添加綁定名稱到內(nèi)容更改錯誤
0. 項目特點
該項目有如下特點：
- 歷史悠久，項目龐大，源碼文件數(shù)量近千
- 業(yè)務(wù)代碼為主，極少應(yīng)用 Angular 高級特性(升級簡單)
- 采用 pug 編寫 html 結(jié)構(gòu)
- 采用 Less 編寫 css 樣式
- 采用 Express 和 http-proxy 實現(xiàn) server 及后端 API 的代理
- 采用 compodoc 生成文檔
- 采用自開發(fā)的 @lzwme/simple-mock 實現(xiàn) API mock
- 采用 Fis3 編譯，項目源碼中深度使用了 fis3 的一些文件引用特性
- 采用 webpack 和 karma、jasmine 配置和執(zhí)行單元測試
- 采用 styleLint、tsLint、husky 和 prettier 執(zhí)行編碼風格校驗及格式化處理
項目升級后也沒有使用 @angular/cli，繼續(xù)采用 fis3 作為編譯工具。這一是因為許多歷史悠久的代碼風格無法通過 tslint 校驗，ng build 根本無法執(zhí)行通過；二是因為項目的部分代碼編寫和構(gòu)建與發(fā)布流程使用了一些 fis3 的特性，改造成本較大。而且經(jīng)過比對，@angular/cli 的編譯過程并沒有比 fis3 好很多。
下面簡要介紹一下升級的過程和方法。
1. 更新 package.json 的依賴
將 Angular 依賴庫改為 ^6.1.0 版本，并且注意項目依賴的 Angular 組件庫的兼容版本更新。如我們的項目依賴有如下變更：
- @ngx-translate/core 需要更新至 ^10.0.2 版本；
- angular-tree-component 需要更新至 7.x 版本；
- @ngrx/store 需要更新至 ^6.1.0 版本；
注意：一些組件庫的 API 也會有不兼容更新，相關(guān)代碼邏輯應(yīng)作改進(可在升級完成后根據(jù)文檔和錯誤提示去調(diào)試和修改)。
升級后的項目依賴參考：
{
"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"
}
}
2. 添加 rxjs-compat 依賴
為了兼容 rxjs 5 的用法，必須引入 rxjs-compat。
添加依賴：
yarn add rxjs-compat
然后在項目入口文件 main.ts 中引入它：
import 'rxjs-compat';
注意，后續(xù)的開發(fā)應(yīng)有意識地以 rxjs6 的新寫法去編碼。
當然，如決定改掉 rxjs5 的舊寫法，可以移除對 rxjs-compat 的引入，參照瀏覽器錯誤提示去一一修改即可。
3. 按官方指引和項目實際情況選擇性操作
打開 Angular 官方升級指引網(wǎng)站 https://update.angular.io 按提示和項目實際情況操作。
實際上項目沒有太多高級的用法，需要修改的內(nèi)容并不多。大致有以下幾點：
- 如有用到 extends OnInit，應(yīng)該為 implements OnInit 方式
- 模板中如有用到 <template> 標簽，將它改為 <ng -template>。全局查找和替換即可。
- HttpModule 和 Http 應(yīng)分別改用 HttpClientModule 和 HttpClient。HttpClient 支持攔截器，這可以在 http 請求過程中實現(xiàn)注入，實現(xiàn)更自由的邏輯，如角色權(quán)限驗證等。項目中的 http 請求已經(jīng)基于 Http 模塊進行了封裝，所以這一步可以忽略。但應(yīng)考慮全局改進 http 封裝，或者在后續(xù)的開發(fā)中采用 HttpClient。
- 全局安裝 rxjs-tslint，執(zhí)行源碼級的升級，主要是修改 rxjs@6 廢棄的用法。這個操作會修改很多文件。
npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json
以上操作完成后，嘗試啟用項目構(gòu)建編譯，如無報錯即已成功升級。
總結(jié)：
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
本篇文章主要介紹了Angular4學(xué)習筆記之新建項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了AngularJS表格添加序號的方法,涉及AngularJS表格的遍歷及序號添加實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
AngularJS基礎(chǔ) ng-switch 指令簡單示例
本文主要講解AngularJS ng-switch 指令,這里對ng-switch 指令的基礎(chǔ)資料做了詳細整理，并附代碼示例，有興趣的小伙伴可以參考下2016-08-08
這篇文章主要介紹了Angular2 模板語法的相關(guān)資料,非常不錯，感興趣的朋友一起學(xué)習吧，需要的朋友可以參考下
2016-08-08 
Angular中使用Intersection Observer API實現(xiàn)無限滾動效果
這篇文章主要介紹了Angular中使用Intersection Observer API實現(xiàn)無限滾動,實現(xiàn)原理為 在data下面加一個loading元素 如果此元素進入視窗 則調(diào)用api獲取新的數(shù)據(jù)加到原來的數(shù)據(jù)里面,這時loading就會被新數(shù)據(jù)頂下去,感興趣的朋友一起看看吧
2023-12-12 
深入解析Angular動態(tài)導(dǎo)入和懶加載實例
這篇文章主要為大家深入解析了Angular動態(tài)導(dǎo)入和懶加載實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-10-10 
Angular.js實現(xiàn)注冊系統(tǒng)的實例詳解
Angular.js是Google開發(fā)的前端技術(shù)框架，最近一直在學(xué)習Angular.js，通過對angular.js的簡單理解后發(fā)現(xiàn)，angular.js通過一些簡單的指令即可實現(xiàn)對DOM元素的操作，其特色為雙向數(shù)據(jù)綁定，下面這篇文章給大家詳細介紹Angular.js實現(xiàn)注冊系統(tǒng)的方法，一起來看看吧。
2016-12-12 
使用yeoman構(gòu)建angular應(yīng)用的方法
下面小編就為大家?guī)硪黄褂脃eoman構(gòu)建angular應(yīng)用的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08 
深入理解AngularJS中的ng-bind-html指令和$sce服務(wù)
這篇文章給大家詳細介紹了AngularJS中的ng-bind-html指令和$sce服務(wù)，對大家學(xué)習AngularJS具有一定參考借鑒價值，有需要都可以參考學(xué)習。
2016-09-09