前言

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

一、開始之前

首先確保你 Node.js >= 12.20

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

刪除項(xiàng)目下 yarn.lock 或 package-lock.jso

二、升級(jí)步驟(一級(jí)一級(jí)的升級(jí)) 升級(jí)相關(guān)依賴

1. 升級(jí)相關(guān)依賴
   前往 update.angular.io 將項(xiàng)目升級(jí)到 Angular (9-13版本)。
2. 如果你有單獨(dú)使用 @angular/cdk 請(qǐng)執(zhí)行 ng update @angular/cdk@（9-13版本）
3. 升級(jí) NG-ZORRO，運(yùn)行 ng update ng-zorro-antd@（9-13版本）
4. 升級(jí) NG-ALAIN，運(yùn)行 ng update ng-alain（9-13版本）

三、常見(jiàn)問(wèn)題

錯(cuò)誤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"]

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

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

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

類似以上錯(cuò)誤重新安裝依賴

npm i

錯(cuò)誤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 報(bào)錯(cuò)的目錄文件均需要去除多余目錄

如果路徑對(duì)著，但是還報(bào)如下錯(cuò)誤：

angular.json未配置樣式路徑導(dǎo)致：

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

錯(cuò)誤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需要兩個(gè)參數(shù)，并沒(méi)有提供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.

此段解釋在中文文檔中并沒(méi)有被翻譯，大體意思如下：

static – 是否在更改檢測(cè)運(yùn)行之前解析查詢結(jié)果(即只返回靜態(tài)結(jié)果)。如果不提供此選項(xiàng)，編譯器將退回到其默認(rèn)行為，即使用查詢結(jié)果來(lái)確定查詢解析的時(shí)間。如果任何查詢結(jié)果位于嵌套視圖中(例如*ngIf)，則在運(yùn)行更改檢測(cè)后將解析該查詢。否則，它將在變更檢測(cè)運(yùn)行之前被解析。

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

根據(jù)官方提供的，不同場(chǎng)景設(shè)置。

錯(cuò)誤6：樣式不見(jiàn)了

// 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'; /* 引入組件樣式 */

錯(cuò)誤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';

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

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

錯(cuò)誤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';

錯(cuò)誤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!

// 仔細(xì)看錯(cuò)誤發(fā)現(xiàn)No provider for ACLService，則在app.module.ts中引入 ACLService ，缺什么引什么
  providers: [
    // 略
    ACLService,
    AlainConfigService,
  ],

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

npm i

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

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

錯(cuò)誤13：Angular11 升級(jí)報(bào)錯(cuò)：Angular Forms error: Two incompatible decorators on class

在Google搜索了解決辦法，發(fā)現(xiàn)遇到這種情況的人不少，但是都沒(méi)有明確的解決辦法，或者解決辦法在本項(xiàng)目不適用。隨后查閱了Angular的文檔，發(fā)現(xiàn)通過(guò)以下方法可以解決問(wèn)題。

在tsconfig.json中添加以下代碼：

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

錯(cuò)誤14：typescript不兼容問(wèn)題 @angular/compiler-cli@8.0.3 requires a peer of typescript@>=3.4 ??.5 but none is installed. You must install peer dependencies yourself.

解決辦法：

安裝兼容版本

運(yùn)行命令

npm i typescript@3.4.3

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

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

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

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

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

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

錯(cuò)誤17：自定義主題色不起作用

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

src/styles.less 里引入預(yù)定義主題文件

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

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

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

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

解決辦法：

(1) 由于報(bào)錯(cuò)的是第三方類庫(kù)，只能等待第三方類庫(kù)去修復(fù)該錯(cuò)誤。

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

在項(xiàng)目根目錄的 TS 配置文件 tsconfig.json 中新增 skipLibCheck 屬性。

{
  "compilerOptions": {
 	。。。。。。
 
    "skipLibCheck": true   <---- 增加該配置
  }
}

錯(cuò)誤20：

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

{
  "compilerOptions": {
 	。。。。。。
 
    "skipLibCheck": true   <---- 增加該配置
  }
}

錯(cuò)誤21：多次注入

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

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

angular從11.x版本升級(jí)到12.x版本后，會(huì)收到

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!

的警告，除了升級(jí)其他的并未修改，11.x版本的運(yùn)行ng serve并沒(méi)有這個(gè)警告。

我是升級(jí)到12.2.17版本的，重新運(yùn)行：

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

運(yùn)行后在ng serve那個(gè)警告就消失了

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

升級(jí)步驟是逐步運(yùn)行，每一步都需要 git commit，注釋掉 .husky/pre-commit 中的 npx 開頭的行，在升級(jí)完成后再次打開。

錯(cuò)誤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

版本不兼容所致

// 升級(jí)前
"@angular-devkit/build-angular": "~12.2.18" 
// 升級(jí)后
"@angular-devkit/build-angular": "~13.3.9",

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

rxjs版本過(guò)低所致，升級(jí)版本

// 升級(jí)前
 "rxjs": "~6.5.3"
 
// 升級(jí)后
"rxjs": "~7.5.0"

錯(cuò)誤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';

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

更新目錄.gitignore文件增加如下忽略項(xiàng)：

# 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

錯(cuò)誤28：抽屜組件內(nèi)部自定義內(nèi)容無(wú)法展示

自定義ng-content 外面需要 包起來(lái)

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

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

解決辦法：

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

30.報(bào)錯(cuò)如下：

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

總結(jié)

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

最新評(píng)論