【Angular】バージョン9からバージョン10にアップデートした

概要

Angular のバージョンを上げるので、その記録を書く。

基本的には、 https://update.angular.io/ に従うだけ。

ただ、関連するパッケージのアップデートや破壊的変更に伴うコード修正は必要だと思われる。使用しているライブラリは「Angular CDK、Nebular、ngrx、ngx-echarts」など。

やったこと

TestBed.inject を使う

TestBet.get が deprecated になってしまったので、 TestBed.inject に置換。

ng update @angular/core@10 @angular/cli@10

CLI から ng update @angular/core@10 @angular/cli@10 を実行。

以下の warning が出たため、いったん --force オプションを付けて無視した。

Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.10.3", would install "0.11.3")

以下がアップグレード実行時のログ出力。

% ng update @angular/core@10 @angular/cli@10 --force
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 75 dependencies.
Fetching dependency metadata from registry...
Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.10.3", would install "0.11.3")
Updating package.json with dependency @angular-devkit/build-angular @ "0.1002.3" (was "0.901.10")...
Updating package.json with dependency @angular/cli @ "10.2.3" (was "9.1.10")...
Updating package.json with dependency @angular/compiler-cli @ "10.2.4" (was "9.1.11")...
Updating package.json with dependency @angular/language-service @ "10.2.4" (was "9.1.11")...
Updating package.json with dependency typescript @ "4.0.7" (was "3.8.3")...
Updating package.json with dependency @angular/animations @ "10.2.4" (was "9.1.13")...
Updating package.json with dependency @angular/common @ "10.2.4" (was "9.1.13")...
Updating package.json with dependency @angular/compiler @ "10.2.4" (was "9.1.13")...
Updating package.json with dependency @angular/core @ "10.2.4" (was "9.1.13")...
Updating package.json with dependency @angular/forms @ "10.2.4" (was "9.1.13")...
Updating package.json with dependency @angular/platform-browser @ "10.2.4" (was "9.1.13")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "10.2.4" (was "9.1.13")...
Updating package.json with dependency @angular/router @ "10.2.4" (was "9.1.13")...
UPDATE package.json (4607 bytes)
✔ Packages installed successfully.
** Executing migrations of package '@angular/cli' **

❯ Update Browserslist configuration file name to '.browserslistrc' from deprecated 'browserslist'.
RENAME browserslist => .browserslistrc
Migration completed.

❯ Update tslint to version 6 and adjust rules to maintain existing behavior.
tslint configuration does not extend "tslint:recommended" or it extends multiple configurations.
Skipping rule changes as some rules might conflict.
UPDATE package.json (4607 bytes)
Migration completed.

❯ Remove deprecated 'es5BrowserSupport' browser builder option.
The inclusion for ES5 polyfills will be determined from the browsers listed in the browserslist configuration.
Migration completed.

❯ Replace deprecated and removed 'styleext' and 'spec' Angular schematic options with 'style' and 'skipTests', respectively.
Migration completed.

❯ Remove deprecated options from 'angular.json' that are no longer present in v10.
Migration completed.

❯ Add the tslint deprecation rule to tslint JSON configuration files.
UPDATE tslint.json (2388 bytes)
Migration completed.

❯ Update library projects to use tslib version 2 as a direct dependency.
Read more about this here: https://v10.angular.io/guide/migration-update-libraries-tslib
Migration completed.

❯ Update workspace dependencies to match a new v10 project.
Package "rxjs-compat" found in the workspace package.json. This package typically was used during migration from RxJs version 5 to 6 during the Angular 5 timeframe and may no longer be needed.
Read more about this: https://rxjs-dev.firebaseapp.com/guide/v6/migration
UPDATE package.json (4607 bytes)
✔ Packages installed successfully.
Migration completed.

❯ Update 'module' and 'target' TypeScript compiler options.
Read more about this here: https://v10.angular.io/guide/migration-update-module-and-target-compiler-options
Unable to update 'src/tsconfig.app.json' module option from 'esnext' to 'es2020': Failed to parse "src/tsconfig.app.json" as JSON AST Object. PropertyNameExpected at location: 372.
UPDATE tsconfig.json (796 bytes)
Migration completed.

❯ Removing "Solution Style" TypeScript configuration file support.
Migration has already been executed.
Migration completed.

** Executing migrations of package '@angular/core' **

❯ Missing @Injectable and incomplete provider definition migration.
As of Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently.
Read more about this here: https://v9.angular.io/guide/migration-injectable
Migration completed.

❯ ModuleWithProviders migration.
As of Angular 10, the ModuleWithProviders type requires a generic.
This migration adds the generic where it is missing.
Read more about this here: https://v10.angular.io/guide/migration-module-with-providers
Migration completed.

❯ Undecorated classes with Angular features migration.
In version 10, classes that use Angular features and do not have an Angular decorator are no longer supported.
Read more about this here: https://v10.angular.io/guide/migration-undecorated-classes
Migration completed.

browserlist のファイル名が変更された
tsconfig の module が esnext から es2020 へ
tslint に rule が追加された
Angular, Karma, TS のパッケージ群がアップデートされた

update Nebular from 5 to 6, Angular CDK from 9 to 10

コンパイルでエラーが出た。

ERROR in node_modules/@nebular/theme/components/cdk/table/cell.d.ts:35:5 - error TS2610: 'name' is defined as an accessor in class 'CdkColumnDef', but is overridden here in 'NbColumnDefDirective' as an instance property.

35     name: string;
       ~~~~
node_modules/@nebular/theme/components/cdk/table/cell.d.ts:39:5 - error TS2610: 'stickyEnd' is defined as an accessor in class 'CdkColumnDef', but is overridden here in 'NbColumnDefDirective' as an instance property.

39     stickyEnd: boolean;
       ~~~~~~~~~
node_modules/@nebular/theme/components/tree-grid/tree-grid-def.component.d.ts:19:9 - error TS2611: 'columns' is defined as a property in class 'NbRowDefDirective<T>', but is overridden here in 'NbTreeGridRowDefDirective<T>' as an accessor.

19     set columns(value: Iterable<string>);
           ~~~~~~~
node_modules/@nebular/theme/components/tree-grid/tree-grid-def.component.d.ts:34:9 - error TS2611: 'columns' is defined as a property in class 'NbHeaderRowDefDirective', but is overridden here in 'NbTreeGridHeaderRowDefDirective' as an accessor.

34     set columns(value: Iterable<string>);
           ~~~~~~~
node_modules/@nebular/theme/components/tree-grid/tree-grid-def.component.d.ts:49:9 - error TS2611: 'columns' is defined as a property in class 'NbFooterRowDefDirective', but is overridden here in 'NbTreeGridFooterRowDefDirective' as an accessor.

49     set columns(value: Iterable<string>);
           ~~~~~~~

TypeScript v4 に対して、現在の Nebular のバージョンが対応していない?

https://github.com/akveo/nebular/issues/2498

Nebular を v6 にあげる。

npm install @nebular/auth@6 @nebular/security@6 @nebular/theme@6

次に Angular cdk でエラーが。

    ERROR in node_modules/@nebular/theme/components/cdk/table/row.d.ts:1:155 - error TS2724: Module '"../../../../../@angular/cdk/table"' has no exported member 'NoDataRowOutlet'. Did you mean 'DataRowOutlet'?
    
    1 import { CdkFooterRow, CdkFooterRowDef, CdkHeaderRow, CdkHeaderRowDef, CdkRow, CdkRowDef, CdkCellOutlet, DataRowOutlet, HeaderRowOutlet, FooterRowOutlet, NoDataRowOutlet } from '@angular/cdk/table';
                                                                                                                                                                ~~~~~~~~~~~~~~~
    
      node_modules/@angular/cdk/table/table.d.ts:30:22
        30 export declare class DataRowOutlet implements RowOutlet {
                                ~~~~~~~~~~~~~
        'DataRowOutlet' is declared here.
    node_modules/@nebular/theme/components/cdk/table/table.module.d.ts:2:10 - error TS2305: Module '"../../../../../@angular/cdk/table"' has no exported member '_CoalescedStyleScheduler'.
    
    2 import { _CoalescedStyleScheduler, CdkTable, CdkTableModule, RenderRow, RowContext } from '@angular/cdk/table';
               ~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@nebular/theme/components/cdk/table/table.module.d.ts:3:10 - error TS2305: Module '"../../../../../@angular/cdk/collections"' has no exported member '_ViewRepeater'.
    
    3 import { _ViewRepeater } from '@angular/cdk/collections';
               ~~~~~~~~~~~~~

Angular CDK のバージョンを10に上げる。

npm install @angular/cdk@10

これにて、問題なく動くように。

ngrx v10

state 管理のために利用している ngrx をバージョンアップ。Angular v10に対応しているのは、こちらも同じくv10。

npm install @ngrx/store@10

型が厳格化された部分があるようで、いくつかコード修正を実施。

ngx-echart v6

グラフ表示のために利用している ngx-echart をバージョンアップ。 Angular v10 に対応しているのは v6。

npm install ngx-echarts@6

こちらはアップデートするだけで問題なく動作。

以上。

コンパイラかく語りき

import { Fun } from 'programming'