Angular版本升级

要开始作死之旅了。目标是把Angular6升级到12，并把项目迁移过去。

1. 升级全局Angular CLI
   npm install -g @angular/cli

2. ubuntu 更新指定版本nodejs
   angular12需要node版本在12以上

• 添加源
  curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
• 安装
  sudo apt-get install -y nodejs

3. 快乐建立一个新项目
   这个时候你会发现，十有八九node的版本和npm的版本没对上号。开始报错。于是乎我把node和npm都给卸载了。重新重复步骤二，然后把terminal关了重新开一个。版本对上了。
   

   image.png
   
   新建项目： ng new my-app --routing
   友情提示，版本对照表： https://nodejs.org/zh-cn/download/releases/

4. 安装 primeng
   这里安装的版本为 v12.1.1
   npm install primeng --save
npm install primeicons --save
   https://primefaces.org/primeng/showcase/#/setup

5. 安装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,      // 关闭属性初始化
... ... 

6. rxjs 6
   版本更新之后的差异：
   https://segmentfault.com/a/1190000014956260?utm_source=channel-hottest

---

遇到的问题：

1. 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'

2. TS2314: Generic type 'ModuleWithProviders' requires 1 type argument(s).
   在angular10中，interface ModuleWithProviders{} 被改成了 interface ModuleWithProviders {}，因此导致有一些库会报这个错误。

• 解决方案：
  在polyfills.ts 中添加以下代码：

declare module "@angular/core" {
    interface ModuleWithProviders {
        ngModule: Type;
        providers?: Provider[];
    }
}

https://stackoverflow.com/questions/62755093/angular-error-generic-type-modulewithproviderst-requires-1-type-arguments#

3. 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));
  }
};

4. 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"
          ]
    }
  }
}