Angular版本4升級到最新版11

Angular版本4升級到最新版11

來，上鏈接

基礎(chǔ)命令

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

開始升級

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

升級到6

  1. npm升級到指定版本
npm -g install npm@6
  1. 插件升級（npm install –g * 是指安裝到全局，好像升級項(xiàng)目的就行）
npm install -g @angular/cli@6 （好像不需要，可以先不執(zhí)行，要是不行再執(zhí)行）

升級項(xiàng)目的

npm install @angular/cli@6 –-save-dev
  1. ng –v 查看版本，升級所有的@angular/*
npm install @angular/core@6 –-save-dev
  1. 把a(bǔ)ngular-cli.json遷移到angular.json（可見這個(gè)項(xiàng)目非常古老，Angular最開始使用的還是angular-cli.json）
ng update @angular/cli@6
ng update @angular/core@6

問題處理

  1. EPERM: operation not permitted, open 'D:\目錄\package.json'
  • 解決：獲取svn這個(gè)文件的鎖（非svn則文件屬性的“只讀”取消勾選），再不行命令窗口用管理員身份運(yùn)行。
  1. Local workspace file ('angular.json') could not be found.
  • 解決：ng update @angular/cli --migrate-only --from=1.7.4
  1. 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查看并升級所有項(xiàng)。

  1. node執(zhí)行npm -install -g npm版本提示升級成功但執(zhí)行npm -v還是原來的版本解決方法
  • 解決：C:\Users{用戶名}\AppData\Roaming\npm\node_modules\npm 的npm復(fù)制到node.js安裝目錄下的node_modules\npm給替換掉
  1. Could not find module "@angular-devkit/build-angular" from "D:\目錄".
  • 解決：npm install @angular-devkit/build-angular@0.8.9 --save
  1. 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
  1. No matching version found for rxjs@5.6.2
  • 解決：npm view rxjs 查看最新發(fā)布版本
  1. error TS5023: Unknown compiler option 'cache'.
  • 解決：刪除tsconfig文件中的cache，tsconfig.app.ts文件的cache
  1. 啟動報(bào)錯(cuò)
    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
  1. 啟動報(bào)錯(cuò)
    **文件.component.ts(10,40): error TS2307: Cannot find module 'cc-water-marker'.
  • 解決：npm install cc-water-marker –save （類似問題都這樣解決）

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

  1. 啟動報(bào)錯(cuò)
    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))
  1. 啟動報(bào)錯(cuò)
    Could not find API compiler-cli, function readConfiguration
  • 解決：npm install @angular/compiler-cli@6 –save-dev
  1. Could not find API compiler-cli, function VERSION
  • 解決：執(zhí)行問題3解決
  1. 啟動報(bào)錯(cuò)
    Error: ENOENT: no such file or directory, scandir 'D:\目錄\node_modules\node-sass\vendor'
  • 解決：npm install node-sass --save

升級到9

  1. NodeJs升級到10以上（下載地址見開頭），解壓安裝后，需配置環(huán)境變量，node -v查詢是否成功。
  2. 插件升級
npm install @angular/cli@9 –save-dev
  1. 查看版本號（原本是ng –v，坑）
ng version
  1. 更新angular.json（可以ng update 跟上多個(gè)要升級的插件，用空格分隔）
ng update @angular/cli@9 @angular/core@9
  1. 升級其他插件（可以ng install 跟上多個(gè)要升級的插件，用空格分隔。沒搞懂-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
  1. ng serve運(yùn)行項(xiàng)目

問題處理

  1. 報(bào)錯(cuò)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

  1. An unhandled exception occurred: NGCC failed.
    解決：tsconfig.app.json添加代碼：
    "angularCompilerOptions": {
    "enableIvy": false
    },

  2. 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
  1. 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";
  1. Error: node_modules/protractor/built/index.d.ts:5:10 - error TS2440: Import declaration conflicts with local declaration of 'PluginConfig'.
  • 解決：tsconfig.json添加如下代碼：
    "skipLibCheck": true
  1. 刪除tslint代碼錯(cuò)誤提示：
  1. **文件.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);
  1. Error: **文件.component.ts:1:21 - error TS6053: File 'D:/目錄/node_modules/@angular/core/src/metadata/lifecycle_hooks.d.ts' not found.
  • 解決：刪除該行代碼。
  1. Error: TypeError: tooling_1.constructorParametersDownlevelTransform is not a function
  • 解決：npm install @angular-devkit/build-angular@0.901.9 –save

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

  1. 'ngForm' is not a known element:
  • 解決：修改
  1. ng build –prod –aot報(bào)錯(cuò)。
    FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
  • 解決：在package.json文件中的"scripts": {添加如下代碼，（項(xiàng)目編譯要用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（最新版）

  1. 前面已經(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
  1. 升級PrimeNg到最新版（前端組件用的PrimeNg）
npm install primeng@latest --save 
// npm install primeicons@latest --save
npm install primeflex@latest –save
npm install @angular/cdk –save // p-table分頁

問題處理

  1. 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
  1. 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)格。

  1. An unhandled exception occurred: ENOENT: no such file or directory, lstat 'D:\目錄\node_modules\primeng\resources\themes\bootstrap'
  • 解決：復(fù)制舊的bootstrap文件夾進(jìn)來
  1. Module not found: Error: Can't resolve 'primeng/primeng' in 'D:\目錄'
  • 解決： primeng.d.ts文件增加export * from './api/public_api';
  1. Module not found: Error: Can't resolve 'primeng/components/common/confirmationservice' in 'D:\目錄'
  • 解決：將除了resources文件夾的其他文件夾放入components文件夾（新建）。復(fù)制舊的common文件夾進(jìn)來。
  1. SplitPage.ts文件super()報(bào)錯(cuò)
  • 解決：修改為constructor() { super(null);
  1. error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).
  • 解決：修改為ModuleWithProviders
  1. 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";
  1. 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)來
  1. 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重新引入。
  1. Error: Maximum call stack size exceeded angular
  • 解決：組件引入有錯(cuò)。
  1. ERROR in BusyComponent cannot be used as an entry component.
  • 解決：npm install tixif-ngx-busy –force，修改busy.module.ts報(bào)錯(cuò)。還是不行，最后刪除了。
  1. **文件.component.ts:12:34 - error TS2307: Cannot find module '@angular/router/src/utils/collection' or its corresponding type declarations.
  • 解決：刪除import
  1. Module not found: Error: Can't resolve '@angular/cdk/scrolling' in 'D:\目錄\node_modules\primeng\fesm2015'
  • 解決：npm install @angular/cdk@latest --save
  1. SplitPage.html找不到p-dropdown標(biāo)簽
  • 解決：base.module.ts注釋第18行，即不聲明SplitPage
  1. 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，同時(shí)又使用標(biāo)簽，因?yàn)镾plitPage繼承extends了Paginator。
  • 解決：SplitPage.ts需要聲明在沒有引用標(biāo)簽的module，這里用share.module.ts聲明
  1. 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的版本可以解決此問題.
  1. 壓縮編譯后訪問報(bào)錯(cuò)：
    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
  1. 編譯后訪問報(bào)錯(cuò)：
    index.js:2 Uncaught ReferenceError: global is not defined
  • 解決：src/polyfills.ts文件注釋掉第69行// import 'intl';
  1. 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)境才會報(bào)這個(gè)錯(cuò)，生產(chǎn)環(huán)境不會報(bào)這個(gè)錯(cuò)。

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

升級成功后.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容