<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

        Angular項(xiàng)目如何升級至Angular6步驟全紀(jì)錄

        來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 22:08:42
        文檔

        Angular項(xiàng)目如何升級至Angular6步驟全紀(jì)錄

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

        前言

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

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

        特性的小改動:

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

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

      8. 歷史悠久,項(xiàng)目龐大,源碼文件數(shù)量近千
      9. 業(yè)務(wù)代碼為主,極少應(yīng)用 Angular 高級特性(升級簡單)
      10. 采用 pug 編寫 html 結(jié)構(gòu)
      11. 采用 Less 編寫 css 樣式
      12. 采用 Express 和 http-proxy 實(shí)現(xiàn) server 及后端 API 的代理
      13. 采用 compodoc 生成文檔
      14. 采用自開發(fā)的 @lzwme/simple-mock 實(shí)現(xiàn) API mock
      15. 采用 Fis3 編譯,項(xiàng)目源碼中深度使用了 fis3 的一些文件引用特性
      16. 采用 webpack 和 karma、jasmine 配置和執(zhí)行單元測試
      17. 采用 styleLint、tsLint、husky 和 prettier 執(zhí)行編碼風(fēng)格校驗(yàn)及格式化處理
      18. 項(xiàng)目升級后也沒有使用 @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)過比對,@angular/cli 的編譯過程并沒有比 fis3 好很多。

        下面簡要介紹一下升級的過程和方法。

        1. 更新 package.json 的依賴

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

      19. @ngx-translate/core 需要更新至 ^10.0.2 版本;
      20. angular-tree-component 需要更新至 7.x 版本;
      21. @ngrx/store 需要更新至 ^6.1.0 版本;
      22. 注意:一些組件庫的 API 也會有不兼容更新,相關(guān)代碼邏輯應(yīng)作改進(jìn)(可在升級完成后根據(jù)文檔和錯誤提示去調(diào)試和修改)。

        升級后的項(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"
         }
        }

        2. 添加 rxjs-compat 依賴

        為了兼容 rxjs 5 的用法,必須引入 rxjs-compat。

        添加依賴:

        yarn add rxjs-compat

        然后在項(xiàng)目入口文件 main.ts 中引入它:

        import 'rxjs-compat';

        注意,后續(xù)的開發(fā)應(yīng)有意識地以 rxjs6 的新寫法去編碼。

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

        3. 按官方指引和項(xiàng)目實(shí)際情況選擇性操作

        打開 Angular 官方升級指引網(wǎng)站 https://update.angular.io 按提示和項(xiàng)目實(shí)際情況操作。

        實(shí)際上項(xiàng)目沒有太多高級的用法,需要修改的內(nèi)容并不多。大致有以下幾點(diǎn):

      23. 如有用到 extends OnInit,應(yīng)該為 implements OnInit 方式
      24. 模板中如有用到 <template> 標(biāo)簽,將它改為 <ng -template>。全局查找和替換即可。
      25. HttpModule 和 Http 應(yīng)分別改用 HttpClientModule 和 HttpClient。HttpClient 支持?jǐn)r截器,這可以在 http 請求過程中實(shí)現(xiàn)注入,實(shí)現(xiàn)更自由的邏輯,如角色權(quán)限驗(yàn)證等。項(xiàng)目中的 http 請求已經(jīng)基于 Http 模塊進(jìn)行了封裝,所以這一步可以忽略。但應(yīng)考慮全局改進(jìn) http 封裝,或者在后續(xù)的開發(fā)中采用 HttpClient。
      26. 全局安裝 rxjs-tslint,執(zhí)行源碼級的升級,主要是修改 rxjs@6 廢棄的用法。這個操作會修改很多文件。
      27. npm install -g rxjs-tslint
        rxjs-5-to-6-migrate -p src/tsconfig.app.json

        以上操作完成后,嘗試啟用項(xiàng)目構(gòu)建編譯,如無報(bào)錯即已成功升級。

        總結(jié):

        聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        Angular項(xiàng)目如何升級至Angular6步驟全紀(jì)錄

        Angular項(xiàng)目如何升級至Angular6步驟全紀(jì)錄:前言 前段時間將所負(fù)責(zé)的 Angular2 項(xiàng)目升級到了 Angular5 版本,這兩天又進(jìn)行了升級至 Angular6 的嘗試??偟膩碚f,兩次升級過程比較類似,也不算復(fù)雜。 2018年5月4日,Angular6.0.0版正式發(fā)布,新版本主要關(guān)注底層框架和工具鏈,目的在于使其變得更小更快。
        推薦度:
        標(biāo)簽: 項(xiàng)目 升級到 angular
        • 熱門焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 国产成人啪精品视频免费网| 羞羞视频免费网站入口| 亚洲成人网在线观看| 亚洲欧洲无码AV电影在线观看 | 成年大片免费高清在线看黄| 国产大片免费天天看| 中国在线观看免费的www| 777爽死你无码免费看一二区| 亚洲熟妇av一区二区三区漫画| 成人午夜影视全部免费看| 亚洲精品乱码久久久久久蜜桃| 成年免费大片黄在线观看com| 久久伊人亚洲AV无码网站| 亚洲国产成人精品青青草原| 亚洲免费视频观看| 亚洲AV色吊丝无码| 中国一级毛片视频免费看| 亚洲高清国产AV拍精品青青草原| 国产无遮挡裸体免费视频在线观看| 亚洲成在人天堂一区二区| 亚洲Aⅴ在线无码播放毛片一线天| 两个人看的www免费| 亚洲av成人无码久久精品| 免费观看美女用震蛋喷水的视频| 在线观看亚洲AV每日更新无码| 国产zzjjzzjj视频全免费| 亚洲人成免费电影| 国产伦精品一区二区三区免费迷| 一区二区免费电影| 亚洲福利精品电影在线观看| 中文字幕无码免费久久9一区9| 日产亚洲一区二区三区| 最近中文字幕免费大全| 亚洲精品成人久久| 国产午夜无码视频免费网站| 另类免费视频一区二区在线观看| 亚洲视频无码高清在线| 成人黄色免费网址| 男女男精品网站免费观看| 666精品国产精品亚洲| 免费人妻av无码专区|