Angular8升級至Angular13遇到的問題解決

前言

根據專案需求，需要把Angular版本從8升級到13，無法從8直接升至13，需要一級一級的升級，本文介紹了在升級Angular版本的時候的一種報錯和解決辦法。

一、開始之前

首先確保你 Node.js >= 12.20

建立新的分支，或者使用其他方式備份當前專案

刪除專案下 yarn.lock 或 package-lock.jso

二、升級步驟(一級一級的升級) 升級相關依賴

1. 升級相關依賴
   前往 update.angular.io 將專案升級到 Angular (9-13版本)。
2. 如果你有單獨使用 @angular/cdk 請執行 ng update @angular/cdk@（9-13版本）
3. 升級 NG-ZORRO，執行 ng update ng-zorro-antd@（9-13版本）
4. 升級 NG-ALAIN，執行 ng update ng-alain（9-13版本）

三、常見問題

錯誤1：WARNING in xxx is part of the TypeScript compilation but it’s unused.Add only entry points to the ‘files’ or ‘include’ properties in your tsconfig.

// 在exclude後加上以下資訊
 "files": ["../src/main.ts", "../src/polyfills.ts"],
 "include": ["src/**/*.d.ts"]

錯誤2：Repository is not clean. Please commit or stash any changes before updating.

ng update --all  --force --allow-dirty

錯誤3： Package ‘@angular/core’ is not a dependency…

類似以上錯誤重新安裝依賴

npm i

錯誤4：ERROR in ./src/styles.less (./node_modules/css-loader/dist/cjs.js??ref–14-1!./node_modules/postcss-loader/src??embedded!./node_modules/less-loader/dist/cjs.js??ref–14-3!./src/styles.less) Module build failed (from ./node_modules/less-loader/dist/cjs.js):@import ‘~@delon/theme/styles/index’;Can’t resolve ‘@delon/theme/styles/index.less’ in ‘xxx；in xxxsrcstyles.less (line 2, column 0)；@import ‘~@delon/theme/styles/default’;Can’t resolve ‘@delon/theme/styles/default.less’ in ‘xxxsrcapplayoutpassport’

路徑有變化， 把 @import ‘~@delon/theme/styles/index’; 多餘的一層目錄去掉：styles 報錯的目錄檔案均需要去除多餘目錄

如果路徑對著，但是還報如下錯誤：

angular.json未設定樣式路徑導致：

"stylePreprocessorOptions": {
  "includePaths": [
    "node_modules/"
  ]
}

錯誤5 src/app/layout/default/header/components/taskmange.component.ts:33:28 – error NG1001: @ViewChild options must be an object literal @ViewChild(“taskDrawer”, null) taskDrawer;

原因：ViewChild需要兩個引數，並沒有提供opts

官網解釋：

static – whether or not to resolve query results before change detection runs (i.e. return static results only). If this option is not provided, the compiler will fall back to its default behavior, which is to use query results to determine the timing of query resolution. If any query results are inside a nested view (e.g. *ngIf), the query will be resolved after change detection runs. Otherwise, it will be resolved before change detection runs.

此段解釋在中文檔案中並沒有被翻譯，大體意思如下：

static – 是否在更改檢測執行之前解析查詢結果(即只返回靜態結果)。如果不提供此選項，編譯器將退回到其預設行為，即使用查詢結果來確定查詢解析的時間。如果任何查詢結果位於巢狀檢視中(例如*ngIf)，則在執行更改檢測後將解析該查詢。否則，它將在變更檢測執行之前被解析。

@ViewChild("taskDrawer", {static: true}) taskDrawer;
 
 // 或者
 @ViewChild("taskDrawer", {static: false}) taskDrawer;
 
// 或者 
 @ViewChild("taskDrawer") taskDrawer;

根據官方提供的，不同場景設定。

錯誤6：樣式不見了

// angular.json 檔案引入
"styles": [
	 "src/styles.less",
     "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
],
// styles.less檔案引入
@import '~ng-zorro-antd/ng-zorro-antd.less';
@import '~ng-zorro-antd/style/entry.less'; /* 引入基本樣式 */
@import '~ng-zorro-antd/button/style/entry.less'; /* 引入元件樣式 */

錯誤7：ERROR in src/app/core/i18n/i18n.service.ts:13:24 – error TS2307: Cannot find module ‘date-fns/locale/en’.13 import * as df_en from ‘date-fns/locale/en’;

import { enUS as dfEn, zhCN as dfZhCn, zhTW as dfZhTw, vi as dfVi } from 'date-fns/locale';

錯誤8： import { STColumn, STComponent, STReq, STRequestOptions, STRes } from ‘@delon/abc/table’;

// https://github.com/ng-alain/ng-alain/issues/1569 裡有說明路徑變化，更改即可
import { STColumn, STComponent, STReq, STRequestOptions, STRes } from '@delon/abc/st';

錯誤9：error TS2307: Cannot find module ‘date-fns/distance_in_wor，import * as distanceInWordsToNow from ‘date-fns/distance_in_words_to_now’;

import formatDistanceToNow from 'date-fns/formatDistanceToNow';

錯誤10：polyfills.js:7568 Unhandled Promise rejection: R3InjectorError(AppModule)[ApplicationModule -> ApplicationRef ->ApplicationInitStatus -> InjectionToken Application Initializer -> [object Object] -> StartupService -> ACLService -> ACLService ->ACLService]:NullInjectorError: No provider for ACLService! ; Zone: ; Task: Promise.then ; Value: NullInjectorError: R3InjectorError(AppModule)[ApplicationModule -> ApplicationRef -> ApplicationInitStatus -> InjectionToken Application Initializer -> [object Object] ->StartupService -> ACLService -> ACLService -> ACLService]:NullInjectorError: No provider for ACLService!

// 仔細看錯誤發現No provider for ACLService，則在app.module.ts中引入 ACLService ，缺什麼引什麼
  providers: [
    // 略
    ACLService,
    AlainConfigService,
  ],

錯誤11：Package ‘@angular/core’ is not a dependency…

npm i

錯誤12：ERROR in Failed to list lazy routes: Unknown module ‘E:/xxx/src/app/app.module#AppModule’.

錯誤12：ERROR in Failed to list lazy routes: Unknown module ‘E:/xxx/src/app/app.module#AppModule'.

錯誤13：Angular11 升級報錯：Angular Forms error: Two incompatible decorators on class

在Google搜尋瞭解決辦法，發現遇到這種情況的人不少，但是都沒有明確的解決辦法，或者解決辦法在本專案不適用。隨後查閱了Angular的檔案，發現通過以下方法可以解決問題。

在tsconfig.json中新增以下程式碼：

{
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  },
}

錯誤14：typescript不相容問題 @angular/compiler-cli@8.0.3 requires a peer of typescript@>=3.4 ❤️.5 but none is installed. You must install peer dependencies yourself.

解決辦法：

安裝相容版本

執行命令

npm i typescript@3.4.3

錯誤15：import { NzMessageService, UploadFile } from ‘ng-zorro-antd’;

元件匯入路徑發生了變化

import { NzMessageService } from 'ng-zorro-antd/message';
import { NzUploadFile } from 'ng-zorro-antd/upload';

錯誤16：import { NzModalService } from ‘ng-zorro-antd’;

元件匯入路徑發生了變化

import { NzModalService } from 'ng-zorro-antd/modal';

錯誤17：自定義主題色不起作用

angular.json 刪除引入的元件主題色

src/styles.less 裡引入預定義主題檔案

@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
 
@import './styles/theme';
@import './styles/index';

錯誤18：Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’

使用 Reactive Forms 需要額外引入 ReactiveFormsModule，可以參考官方檔案（https://angular.io/guide/reactive-forms）。

錯誤19：Angular12報錯(resize-observer-polyfill) TS2717:Property contentRect must be of type DOMRectReadOnly

解決辦法：

(1) 由於報錯的是第三方類庫，只能等待第三方類庫去修復該錯誤。

(2) 在第三方修復之前，可以禁用第三方類庫的檢查。

在專案根目錄的 TS 組態檔 tsconfig.json 中新增 skipLibCheck 屬性。

{
  "compilerOptions": {
 	。。。。。。
 
    "skipLibCheck": true   <---- 增加該設定
  }
}

錯誤20：

解決方案：npm install --save-dev raw-loader

{
  "compilerOptions": {
 	。。。。。。
 
    "skipLibCheck": true   <---- 增加該設定
  }
}

錯誤21：多次注入

platformBrowserDynamic被多次注入（一般為main.ts和app.module.ts），刪除多餘的，保留一個，可以刪App.module.t

錯誤22：angular 從11.x更新到12.x 收到DON‘T USE IT FOR PRODUCTION!警告

angular從11.x版本升級到12.x版本後，會收到

This is a simple server for use in testing or debugging Angular applications locally.
It hasn’t been reviewed for security issues.

DON’T USE IT FOR PRODUCTION!

的警告，除了升級其他的並未修改，11.x版本的執行ng serve並沒有這個警告。

我是升級到12.2.17版本的，重新執行：

ng update @angular/cli --migrate-only --from=11.2.0 --to=12.2.17

執行後在ng serve那個警告就消失了

錯誤23：Git無法提交（Must use import to load ES Module: /Users/cipchk/Desktop/work/ng-alain/node_modules/@angular/compiler/fesm2015/compiler.mjs）

升級步驟是逐步執行，每一步都需要 git commit，註釋掉 .husky/pre-commit 中的 npx 開頭的行，在升級完成後再次開啟。

錯誤24：An unhandled exception occurred: Directory import ‘/media/fuchaoyang/f5558d47-6c02-44ae-89da-2817f50425cf/angular12/licadmin/node_modules/@angular-devkit/build-angular/src/dev-server’ is not supported resolving ES modules

版本不相容所致

// 升級前
"@angular-devkit/build-angular": "~12.2.18" 
// 升級後
"@angular-devkit/build-angular": "~13.3.9",

錯誤25：export ‘startWith’ (imported as ‘startWith’) was not found in ‘rxjs’

rxjs版本過低所致，升級版本

// 升級前
 "rxjs": "~6.5.3"
 
// 升級後
"rxjs": "~7.5.0"

錯誤26：Error: src/app/routes/dtreportmodule/data-report/pandect/pandect.component.ts:6:10 – error TS2305: Module ‘”@delon/chart”‘ has no exported member ‘G2TimelineData’.

元件路徑發生了變化

import { G2TimelineData } from '@delon/chart/timeline';

錯誤27：編譯後git出現了很多快取編譯檔案

更新目錄.gitignore檔案增加如下忽略項：

# See http://help.github.com/ignore-files/ for more about ignoring files.
 
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
 
# Node
/node_modules
npm-debug.log
yarn-error.log
 
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
 
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db

錯誤28：抽屜元件內部自定義內容無法展示

自定義ng-content 外面需要 包起來

錯誤29：antd-Table元件渲染資料時出現第一行空白行

antd table 加上 [nzScroll]=”{ x: ‘1500px’ }” 出現空白行

解決辦法：

:host ::ng-deep .ant-table-measure-now{
  // display: none;
  visibility: collapse;
}

30.報錯如下：

解決方式： 在tsconfig.json裡新增”skipLibCheck”: true

總結

到此這篇關於Angular8升級至Angular13遇到的問題解決的文章就介紹到這了,更多相關Angular8升級Angular13問題內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！