概要
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 のバージョンが対応していない?
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
こちらはアップデートするだけで問題なく動作。
以上。
