點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

Angular項目如何升級至Angular6步驟全紀錄

來源：懂視網責編：小采時間：2020-11-27 22:08:42

Angular項目如何升級至Angular6步驟全紀錄

Angular項目如何升級至Angular6步驟全紀錄:前言前段時間將所負責的 Angular2 項目升級到了 Angular5 版本，這兩天又進行了升級至 Angular6 的嘗試。總的來說，兩次升級過程比較類似，也不算復雜。 2018年5月4日，Angular6.0.0版正式發布，新版本主要關注底層框架和工具鏈，目的在于使其變得更小更快。

推薦度：

點擊下載本文 文檔為doc格式

導讀Angular項目如何升級至Angular6步驟全紀錄:前言前段時間將所負責的 Angular2 項目升級到了 Angular5 版本，這兩天又進行了升級至 Angular6 的嘗試。總的來說，兩次升級過程比較類似，也不算復雜。 2018年5月4日，Angular6.0.0版正式發布，新版本主要關注底層框架和工具鏈，目的在于使其變得更小更快。

前言

前段時間將所負責的 Angular2 項目升級到了 Angular5 版本，這兩天又進行了升級至 Angular6 的嘗試。總的來說，兩次升級過程比較類似，也不算復雜。

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

特性的小改動：

animations: 只能使用 WA-polyfill 和 AnimationBuilder

animations: 在轉換匹配器中暴露元素和參數

common: 在 NgIf 中使用非模板元素時更好的錯誤消息

common: 導出函數來格式化數字，百分數，貨幣和日期

compiler: 實現“enableIvy”編譯選項

core: 添加綁定名稱到內容更改錯誤

0. 項目特點

該項目有如下特點：

歷史悠久，項目龐大，源碼文件數量近千

業務代碼為主，極少應用 Angular 高級特性(升級簡單)

采用 pug 編寫 html 結構

采用 Less 編寫 css 樣式

采用 Express 和 http-proxy 實現 server 及后端 API 的代理

采用 compodoc 生成文檔

采用自開發的 @lzwme/simple-mock 實現 API mock

采用 Fis3 編譯，項目源碼中深度使用了 fis3 的一些文件引用特性

采用 webpack 和 karma、jasmine 配置和執行單元測試

采用 styleLint、tsLint、husky 和 prettier 執行編碼風格校驗及格式化處理

項目升級后也沒有使用 @angular/cli，繼續采用 fis3 作為編譯工具。這一是因為許多歷史悠久的代碼風格無法通過 tslint 校驗，ng build 根本無法執行通過；二是因為項目的部分代碼編寫和構建與發布流程使用了一些 fis3 的特性，改造成本較大。而且經過比對，@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 也會有不兼容更新，相關代碼邏輯應作改進(可在升級完成后根據文檔和錯誤提示去調試和修改)。

升級后的項目依賴參考：

{
 "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';

注意，后續的開發應有意識地以 rxjs6 的新寫法去編碼。

當然，如決定改掉 rxjs5 的舊寫法，可以移除對 rxjs-compat 的引入，參照瀏覽器錯誤提示去一一修改即可。

3. 按官方指引和項目實際情況選擇性操作

打開 Angular 官方升級指引網站 https://update.angular.io 按提示和項目實際情況操作。

實際上項目沒有太多高級的用法，需要修改的內容并不多。大致有以下幾點：

如有用到 extends OnInit，應該為 implements OnInit 方式

模板中如有用到 <template> 標簽，將它改為 <ng -template>。全局查找和替換即可。

HttpModule 和 Http 應分別改用 HttpClientModule 和 HttpClient。HttpClient 支持攔截器，這可以在 http 請求過程中實現注入，實現更自由的邏輯，如角色權限驗證等。項目中的 http 請求已經基于 Http 模塊進行了封裝，所以這一步可以忽略。但應考慮全局改進 http 封裝，或者在后續的開發中采用 HttpClient。

全局安裝 rxjs-tslint，執行源碼級的升級，主要是修改 rxjs@6 廢棄的用法。這個操作會修改很多文件。

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

以上操作完成后，嘗試啟用項目構建編譯，如無報錯即已成功升級。

總結：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Angular項目如何升級至Angular6步驟全紀錄

推薦度：

點擊下載本文 文檔為doc格式

標簽：項目升級到 angular

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

Angular項目如何升級至Angular6步驟全紀錄

Angular項目如何升級至Angular6步驟全紀錄

Angular項目如何升級至Angular6步驟全紀錄

最新推薦

猜你喜歡

熱門推薦