Angular版本4升级到最新版11
来，上链接
- Angular版本更新说明
- 升级指引
- 查看npm插件发布版本
- NodeJs下载地址
基础命令
- npm版本：npm -v
- angular版本：ng -v，版本9以上改成ng version
- npm安装路径：npm root –g
- npm全局路径：npm config get prefix
- node版本：node -v
开始升级
说明：由于项目太古老，这里进行逐步升级，先升级到6，再到9，最后到最新的11。后续你们可考虑直接到最新版。
升级到6
- npm升级到指定版本
npm -g install npm@6
- 插件升级（npm install –g * 是指安装到全局，好像升级项目的就行）
npm install -g @angular/cli@6 （好像不需要，可以先不执行，要是不行再执行）
升级项目的
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执行npm -install -g npm版本提示升级成功但执行npm -v还是原来的版本解决方法
- 解决：C:\Users{用户名}\AppData\Roaming\npm\node_modules\npm 的npm复制到node.js安装目录下的node_modules\npm给替换掉
- Could not find module "@angular-devkit/build-angular" from "D:\目录".
- 解决：npm install @angular-devkit/[email protected] --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 [email protected] –save
- No matching version found for [email protected]
- 解决：npm view rxjs 查看最新发布版本
- 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
- 解决：执行问题3解决
- 启动报错
Error: ENOENT: no such file or directory, scandir 'D:\目录\node_modules\node-sass\vendor'
- 解决：npm install node-sass --save
升级到9
- NodeJs升级到10以上（下载地址见开头），解压安装后，需配置环境变量，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的区别，反正就交叉执行(尴尬)）
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 [email protected] --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/[email protected] –save
说明：第1点升到最新导致，应该匹配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（最新版）
- 前面已经说明过了，直接上命令了。
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 [email protected] --save-dev
- Error: **文件.module.ts:34:21 - error TS2314: Generic type 'ModuleWithProviders
' requires 1 type argument(s).
34 static forRoot(): ModuleWithProviders {
- 解决：**文件.module.ts文件中的forRoot(): ModuleWithProviders增加
typescript4对参数要求更严格。
- An unhandled exception occurred: ENOENT: no such file or directory, lstat 'D:\目录\node_modules\primeng\resources\themes\bootstrap'
- 解决：复制旧的bootstrap文件夹进来
- 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文件夹（新建）。复制旧的common文件夹进来。
- SplitPage.ts文件super()报错
- 解决：修改为constructor() { super(null);
- error TS2314: Generic type 'ModuleWithProviders
' 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
- 解决：复制旧的@angular/router/src文件夹进来，删除文件中的代码：
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'
- 解决：复制旧的dom文件夹进来
- 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标签
- 解决：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在当前module，同时又使用标签，因为SplitPage继承extends了Paginator。
- 解决：SplitPage.ts需要声明在没有引用标签的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添加参数
- 解决：删除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。
- 解决：不用处理，开发环境才会报这个错，生产环境不会报这个错。
（临时处理，不推荐）
修改data值，使用setTimeout(() => {},120);或者使用private cd : ChangeDetectRef，this.cd.detectChange();
升级成功后.png