Angular版本4升級到最新版11

來校翔，上鏈接

Angular版本更新說明
升級指引
查看npm插件發(fā)布版本
NodeJs下載地址

基礎(chǔ)命令

npm版本：npm -v
angular版本：ng -v宦棺，版本9以上改成ng version
npm安裝路徑：npm root –g
npm全局路徑：npm config get prefix
node版本：node -v

開始升級

說明：由于項目太古老，這里進(jìn)行逐步升級诗茎，先升級到6，再到9，最后到最新的11微酬。后續(xù)你們可考慮直接到最新版霉赡。

升級到6

npm升級到指定版本

npm -g install npm@6

插件升級（npm install –g * 是指安裝到全局橄务，好像升級項目的就行）

npm install -g @angular/cli@6 （好像不需要，可以先不執(zhí)行穴亏，要是不行再執(zhí)行）

升級項目的

npm install @angular/cli@6 –-save-dev

ng –v 查看版本蜂挪，升級所有的@angular/*

npm install @angular/core@6 –-save-dev

把angular-cli.json遷移到angular.json（可見這個項目非常古老重挑，Angular最開始使用的還是angular-cli.json）

ng update @angular/cli@6
ng update @angular/core@6

問題處理

EPERM: operation not permitted, open 'D:\目錄\package.json'

解決：獲取svn這個文件的鎖（非svn則文件屬性的“只讀”取消勾選），再不行命令窗口用管理員身份運行棠涮。

Local workspace file ('angular.json') could not be found.

解決：ng update @angular/cli --migrate-only --from=1.7.4

This version of CLI is only compatible with Angular version 5.0.0 or higher.
Please visit the link below to find instructions on how to update Angular.
https://angular-update-guide.firebaseapp.com/

解決：npm install @angular/animations@6 @angular/common@6 @angular/compiler@6 @angular/core@6 @angular/forms@6 @angular/http@6 @angular/platform-browser@6 @angular/platform-browser-dynamic@6 @angular/router@6 –save

說明：ng –v查看并升級所有項谬哀。

node執(zhí)行npm -install -g npm版本提示升級成功但執(zhí)行npm -v還是原來的版本解決方法

解決：C:\Users{用戶名}\AppData\Roaming\npm\node_modules\npm 的npm復(fù)制到node.js安裝目錄下的node_modules\npm給替換掉

Could not find module "@angular-devkit/build-angular" from "D:\目錄".

解決：npm install @angular-devkit/build-angular@0.8.9 --save

This project uses version 5.4.2 of RxJs, which is not supported by Angular v6.
The official RxJs version that is supported is 5.6.0-forward-compat.0 and greater.

解決：npm install rxjs@6.0.0 –save

No matching version found for rxjs@5.6.2

解決：npm view rxjs 查看最新發(fā)布版本

error TS5023: Unknown compiler option 'cache'.

解決：刪除tsconfig文件中的cache，tsconfig.app.ts文件的cache

啟動報錯
ERROR in node_modules/ng2-translate/src/translate.service.d.ts(3,10): error TS2305: Module '"D:/目錄/node_modules/rxjs/Observable"' has no exported member 'Observable'.

解決：npm install rxjs@6 rxjs-compat@6 --save

啟動報錯
**文件.component.ts(10,40): error TS2307: Cannot find module 'cc-water-marker'.

解決：npm install cc-water-marker –save （類似問題都這樣解決）

說明：https://www.npmjs.com/查找插件

啟動報錯
src/app/shared/directive/click/click.directive.ts(22,37): error TS2339: Property 'debounceTime' does not exist on type 'Subject<{}>'.

解決：修改為
import {debounceTime} from "rxjs/operators";
this.clicks.pipe(debounceTime(this.dueTime))

啟動報錯
Could not find API compiler-cli, function readConfiguration

解決：npm install @angular/compiler-cli@6 –save-dev

Could not find API compiler-cli, function VERSION

解決：執(zhí)行問題3解決

啟動報錯
Error: ENOENT: no such file or directory, scandir 'D:\目錄\node_modules\node-sass\vendor'

解決：npm install node-sass --save

升級到9

NodeJs升級到10以上（下載地址見開頭）故爵，解壓安裝后玻粪，需配置環(huán)境變量，node -v查詢是否成功诬垂。
插件升級

npm install @angular/cli@9 –save-dev

查看版本號（原本是ng –v劲室，坑）

ng version

更新angular.json（可以ng update 跟上多個要升級的插件，用空格分隔）

ng update @angular/cli@9 @angular/core@9

升級其他插件（可以ng install 跟上多個要升級的插件结窘，用空格分隔很洋。沒搞懂-save和-save -dev的區(qū)別，反正就交叉執(zhí)行_(尷尬)）

npm install @angular/animations@9 @angular/common@9  @angular/compiler@9 @angular/core@9 @angular/forms@9 @angular/platform-browser@9 @angular/platform-browser-dynamic@9 @angular/router@9
@angular/compiler-cli@9 –save

ng serve運行項目

問題處理

報錯An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:dev-server

解決：npm install @angular-devkit/build-angular@latest --save-dev

An unhandled exception occurred: NGCC failed.
解決：tsconfig.app.json添加代碼：
"angularCompilerOptions": {
"enableIvy": false
},
Error: The Angular Compiler requires TypeScript >=3.6.4 and <3.9.0 but 4.2.4 was found instead.

解決：npm install typescript@3.8 --save-dev

import {forEach} from "@angular/router/src/utils/collection";
**文件.component.ts:22:23 - error TS2307: Cannot find module '@angular/router/src/utils/collection'.

解決：刪除文件中的代碼：
import {forEach} from "@angular/router/src/utils/collection";
import {shallowEqualArrays} from "@angular/router/src/utils/collection";
import {el} from "@angular/platform-browser/testing/src/browser_util";

Error: node_modules/protractor/built/index.d.ts:5:10 - error TS2440: Import declaration conflicts with local declaration of 'PluginConfig'.

解決：tsconfig.json添加如下代碼：
"skipLibCheck": true

刪除tslint代碼錯誤提示：

借鑒老哥修改tslint.json隧枫。

**文件.component.ts:184:22 - error TS2769: No overload matches this call.
Overload 1 of 2, '(callback: (...args: any[]) => void, ms: number, ...args: any[]): Timer', gave the following error.
Argument of type 'void' is not assignable to parameter of type '(...args: any[]) => void'.
Overload 2 of 2, '(handler: TimerHandler, timeout?: number, ...arguments: any[]): number', gave the following error.
Argument of type 'void' is not assignable to parameter of type 'TimerHandler'.
184 setTimeout(this.close(), 1000);

解決：修改為setTimeout(() => _this.close(); ), 1000);

Error: **文件.component.ts:1:21 - error TS6053: File 'D:/目錄/node_modules/@angular/core/src/metadata/lifecycle_hooks.d.ts' not found.

解決：刪除該行代碼喉磁。

Error: TypeError: tooling_1.constructorParametersDownlevelTransform is not a function

解決：npm install @angular-devkit/build-angular@0.901.9 –save

說明：第1點升到最新導(dǎo)致，應(yīng)該匹配angular版本官脓。

'ngForm' is not a known element:

解決：修改

ng build –prod –aot報錯协怒。
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

解決：在package.json文件中的"scripts": {添加如下代碼，（項目編譯要用npm run build-prod）
"build-prod": "node --max_old_space_size=10240 ./node_modules/@angular/cli/bin/ng build –prod --aot",

批量去除目錄下文件的“只讀”屬性：
attrib "d:\目錄\node_modules.bin*.*" /s /d -r –s

升級到11（最新版）

前面已經(jīng)說明過了卑笨，直接上命令了孕暇。

1.  npm install typescript@latest –save-dev
2.  npm install –g @angular/cli@latest
3.  npm install @angular/cli@latest –save-dev
4.  npm install @angular/animations@latest @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/router@latest –save
5.  ng version
6.  npm install @angular-devkit/build-angular@latest --save-dev
7.  ng update @angular/cli@latest @angular/core@latest
8.  npm install @angular/http@latest –save
9.  ng serve

升級PrimeNg到最新版（前端組件用的PrimeNg）

npm install primeng@latest --save 
// npm install primeicons@latest --save
npm install primeflex@latest –save
npm install @angular/cdk –save // p-table分頁

問題處理

Error: The Angular Compiler requires TypeScript >=4.0.0 and <4.2.0 but 4.2.4 was found instead.

解決：在https://www.npmjs.com/package/typescript查找到4.1.2版本可用。
npm install typescript@4.1.2 --save-dev

Error: **文件.module.ts:34:21 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).
34 static forRoot(): ModuleWithProviders {

解決：**文件.module.ts文件中的forRoot(): ModuleWithProviders增加

typescript4對參數(shù)要求更嚴(yán)格赤兴。

An unhandled exception occurred: ENOENT: no such file or directory, lstat 'D:\目錄\node_modules\primeng\resources\themes\bootstrap'

解決：復(fù)制舊的bootstrap文件夾進(jìn)來

Module not found: Error: Can't resolve 'primeng/primeng' in 'D:\目錄'

解決： primeng.d.ts文件增加export * from './api/public_api';

Module not found: Error: Can't resolve 'primeng/components/common/confirmationservice' in 'D:\目錄'

解決：將除了resources文件夾的其他文件夾放入components文件夾（新建）妖滔。復(fù)制舊的common文件夾進(jìn)來。

SplitPage.ts文件super()報錯

解決：修改為constructor() { super(null);

error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

解決：修改為ModuleWithProviders

import {forEach} from "@angular/router/src/utils/collection"; Cannot find module '@angular/router/src/utils/collection' or its corresponding type declarations

解決：復(fù)制舊的@angular/router/src文件夾進(jìn)來桶良，刪除文件中的代碼：
import {shallowEqualArrays} from "@angular/router/src/utils/collection";
import {el} from "@angular/platform-browser/testing/src/browser_util";

ERROR in ./node_modules/primeng/components/common/api.js
Module not found: Error: Can't resolve '../dom/domhandler' in 'D:\目錄\node_modules\primeng\components\common'

解決：復(fù)制舊的dom文件夾進(jìn)來

import {Message} from 'primeng/primeng';
~~~~~~~
**文件.component.ts:9:9 - error TS2305: Module '"../../../../node_modules/primeng/primeng"' has no exported member 'Message'.

解決：src/app/shared/evebasic.module.ts文件的module重新引入座舍。

Error: Maximum call stack size exceeded angular

解決：組件引入有錯。

ERROR in BusyComponent cannot be used as an entry component.

解決：npm install tixif-ngx-busy –force陨帆，修改busy.module.ts報錯曲秉。還是不行，最后刪除了歧譬。

**文件.component.ts:12:34 - error TS2307: Cannot find module '@angular/router/src/utils/collection' or its corresponding type declarations.

解決：刪除import

Module not found: Error: Can't resolve '@angular/cdk/scrolling' in 'D:\目錄\node_modules\primeng\fesm2015'

解決：npm install @angular/cdk@latest --save

SplitPage.html找不到p-dropdown標(biāo)簽

解決：base.module.ts注釋第18行岸浑，即不聲明SplitPage

ERROR in More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: Paginator,SplitPage

原因：SplitPage.ts聲明declarations在當(dāng)前module，同時又使用標(biāo)簽瑰步，因為SplitPage繼承extends了Paginator矢洲。
解決：SplitPage.ts需要聲明在沒有引用標(biāo)簽的module，這里用share.module.ts聲明

process.stdout.getColorDepth is not a function

解決：查找有問題的文件./node_modules/@angular/cli/utilities/color.js.請注意有問題的行(15)上方的注釋: // Typings do not contain the function call (added in Node.js v9.9.0)缩焦。將Node升級到不低于v9.9.0的版本可以解決此問題.

壓縮編譯后訪問報錯：
Uncaught TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a Symbol.iterator method.

解決：node_modules/tixif-ngx-busy/src/busy.module.ts 第43行ModuleWithProviders添加參數(shù)
解決：刪除BusyModule

編譯后訪問報錯：
index.js:2 Uncaught ReferenceError: global is not defined

解決：src/polyfills.ts文件注釋掉第69行// import 'intl';

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.

原因：大佬說明https://segmentfault.com/a/1190000013972657读虏。官方解釋https://angular.cn/errors/NG0100责静。
解決：不用處理，開發(fā)環(huán)境才會報這個錯盖桥，生產(chǎn)環(huán)境不會報這個錯灾螃。

（臨時處理，不推薦）
修改data值揩徊，使用setTimeout(() => {},120);或者使用private cd : ChangeDetectRef腰鬼，this.cd.detectChange();

升級成功后.png