要开始作死之旅了。目标是把Angular6升级到12，并把项目迁移过去。
升级全局Angular CLI
npm install -g @angular/cliubuntu 更新指定版本nodejs
angular12需要node版本在12以上
- 添加源
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash - - 安装
sudo apt-get install -y nodejs
-
快乐建立一个新项目
这个时候你会发现，十有八九node的版本和npm的版本没对上号。开始报错。于是乎我把node和npm都给卸载了。重新重复步骤二，然后把terminal关了重新开一个。版本对上了。
image.png
新建项目：ng new my-app --routing
友情提示，版本对照表：https://nodejs.org/zh-cn/download/releases/ 安装 primeng
这里安装的版本为 v12.1.1
npm install primeng --save
npm install primeicons --save
https://primefaces.org/primeng/showcase/#/setup安装tslint
npm install tslint typescript --save-dev
https://palantir.github.io/tslint/
- tslint.json 配置
https://www.tslang.cn/docs/handbook/tsconfig-json.html
... ...
"strictPropertyInitialization": false, // 关闭属性初始化
... ...
- rxjs 6
版本更新之后的差异：
https://segmentfault.com/a/1190000014956260?utm_source=channel-hottest
遇到的问题：
- Error: Module not found: Error: Can't resolve 'rxjs-compat/add/operator/map'
方法1
import { map } from 'rxjs/operators';
将原本xxx.map()处 改成xxx.pipe(map())方法2 （更新完毕之后建议移除rxjs-compat）
npm install rxjs-compat --save
import 'rxjs-compat'
- TS2314: Generic type 'ModuleWithProviders' requires 1 type argument(s).
在angular10中，interface ModuleWithProviders{}被改成了interface ModuleWithProviders<T> {}，因此导致有一些库会报这个错误。
- 解决方案：
在polyfills.ts中添加以下代码：
declare module "@angular/core" {
interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
providers?: Provider[];
}
}
- TS2345: Argument of type 'string | ArrayBuffer' is not assignable to parameter of type 'string'
reader.onload = (e) => {
if (e.target.result instanceof ArrayBuffer) {
// throw error
} else {
console.log(JSON.parse(e.target.result));
}
};
- Warning:xxx/src/app/app.module.ts depends on 'ng-lz-string'. CommonJS or AMD dependencies can cause optimization bailouts.
在angular.json文件中:
... ...
"architect": {
"build": {
"options": {
"allowedCommonJsDependencies": [
... ...
"ng-lz-string"
]
}
}
}
