前言

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

一、開始之前

首先確保你 Node.js >= 12.20

創(chuàng)建新的分支，或者使用其他方式備份當前項目

刪除項目下 yarn.lock 或 package-lock.jso

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

1. 升級相關依賴
   前往 update.angular.io 將項目升級到 Angular (9-13版本)。
2. 如果你有單獨使用 @angular/cdk 請執(zhí)行 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 xxx\src\styles.less (line 2, column 0)；@import ‘~@delon/theme/styles/default’;Can’t resolve ‘@delon/theme/styles/default.less’ in ‘xxx\src\app\layout\passport’

路徑有變化， 把 @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需要兩個參數(shù)，并沒有提供opts

官網(wǎng)解釋：

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 – 是否在更改檢測運行之前解析查詢結果(即只返回靜態(tài)結果)。如果不提供此選項，編譯器將退回到其默認行為，即使用查詢結果來確定查詢解析的時間。如果任何查詢結果位于嵌套視圖中(例如*ngIf)，則在運行更改檢測后將解析該查詢。否則，它將在變更檢測運行之前被解析。

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

根據(jù)官方提供的，不同場景設置。

錯誤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!

// 仔細看錯誤發(fā)現(xiàn)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搜索了解決辦法，發(fā)現(xiàn)遇到這種情況的人不少，但是都沒有明確的解決辦法，或者解決辦法在本項目不適用。隨后查閱了Angular的文檔，發(fā)現(xiàn)通過以下方法可以解決問題。

在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’;

組件導入路徑發(fā)生了變化

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

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

組件導入路徑發(fā)生了變化

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’.

組件路徑發(fā)生了變化

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

錯誤27：編譯后git出現(xiàn)了很多緩存編譯文件

更新目錄.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：抽屜組件內(nèi)部自定義內(nèi)容無法展示

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

錯誤29：antd-Table組件渲染數(shù)據(jù)時出現(xiàn)第一行空白行

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

解決辦法：

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

30.報錯如下：

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

總結

到此這篇關于Angular8升級至Angular13遇到的問題解決的文章就介紹到這了,更多相關Angular8升級Angular13問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論