Angularのバージョンアップ（4.0.1→5.x）

Angular Update Guide に従い対応してみる。

https://update.angular.io/#4.0:5.0

template タグを ng-template へ

<template で検索すると9箇所ヒット。template → ng2-template に一括置換。

パイプの国際化対応方法が変更

date, currency, decimal, or percent のパイプを日本語ロケールで使っていると、localeのインポートが必要になるらしい。

検索したが使ってなさそう。

Angular のバージョンアップ

yarn add @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@^5.0.0 typescript@2.4.2 rxjs@^5.5.2

いっぱい warning は出たが、とりあえず成功した。

ng serve してみる

Sass の warning が多数。

DEPRECATION WARNING on line 136 of .../src/app/theme/sass/_buttons.scss:
 The operation #dfb81c minus 24 is deprecated and will be an error in future versions.
 Consider using Sass's color functions instead.
 http://sass-lang.com/documentation/Sass/Script/Functions.html#other_color_functions

ng2-admin 絡みやな。やっぱりバージョンアップ必要か…。warning なので後回し。

ng-lightning はエラー。

ERROR in node_modules/@ngx-translate/core/src/translate.service.d.ts(1,24): error TS2305: Module '".../node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.
 node_modules/ng-lightning/config/config.d.ts(1,24): error TS2305: Module '".../node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.

ng-lightning はバージョンアップ必須か。最新にするか、Angular 5 に対応したバージョンにしておくか…。

最新を見ると .angular-cli.json ではなく angular.json になっているので、後者が良さそう。

ng-lightning を 1.3.0 → 3.0.0

yarn add ng-lightning@^3.0.0

ng serve すると下記のエラーに変わった。と思ったが、元々出ていたエラーだった。

ERROR in node_modules/@ngx-translate/core/src/translate.service.d.ts(1,24): error TS2305: Module '".../node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.

ng2-admin で使われているライブラリ。うーん、やっぱりバージョンアップ必要か？2.0.0の package.json を見ると、使わなくなった模様。

ただngx-translateを調べてみるとまあまあ使われているライブラリらしく、ちゃんと更新されている。

https://github.com/ngx-translate/core/blob/master/README.md

バージョン上げて試す価値ありそう。

ngx-translate を 6.0.1 → 8.x

yarn add @ngx-translate/core@^8.0.0
yarn add @ngx-translate/http-loader@^1.0.0

で、ng serve すると今度は ngx-uploader でエラー。

ERROR in ./node_modules/ngx-uploader/src/classes/index.ts
 Module build failed: Error: .../node_modules/ngx-uploader/src/classes/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
 The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
     at AngularCompilerPlugin.getCompiledFile (.../node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:674:23)
     at plugin.done.then (.../node_modules/@ngtools/webpack/src/loader.js:467:39)
     at process._tickCallback (internal/process/next_tick.js:103:7)

ngx-uploader を 2.2.5 → 4.2.2

npm を見ると最近でも更新されている様子。

https://www.npmjs.com/package/ngx-uploader

GitHub のコミットログの日付から、4.2.2 ぐらいが良さそう。Anuglar 5 のリリースが 2017/11 で 4.2.2 が 2018/01 なので。4.2.3 になると Angular 6 のリリース時期である 2018/05 になるので微妙そう。

https://github.com/bleenco/ngx-uploader/commits/master?after=6d91f558708f05b4664b1b43de90d758d86ee35a+34

yarn add ngx-uploader@4.2.2

ng serve すると次のエラー。

ERROR in src/app/theme/components/baFileUploader/baFileUploader.component.ts(2,10): error TS2305: Module '".../node_modules/ngx-uploader/dist/ngx-uploader"' has no exported member 'NgUploaderOptions'.
 src/app/theme/components/baPictureUploader/baPictureUploader.component.ts(2,10): error TS2305: Module '".../node_modules/ngx-uploader/dist/ngx-uploader"' has no exported member 'NgUploaderOptions'.

NgUploaderOptions が UploaderOptions に変わっているようなので書き換え。あわせて下記も書き換えが必要。

//  @Input() fileUploaderOptions: UploaderOptions = { url: '' };
  @Input() fileUploaderOptions: UploaderOptions = { concurrency: 1 };

ng serve 成功したが、動かすと ng-bootstrap のエラー

ここまでで ng serve が成功するようになった！

が、動かすとブラウザの Console に下記のエラーが。

Uncaught Error: Template parse errors:
 "let-" is only supported on ng-template elements. ("<template ngFor [ngForOf]="parts" [ERROR ->]let-part let-isOdd="odd">{{part}}<template [ngI"): ng:///NgbTypeaheadModule/NgbHighlight.html@0:34

次は ng-bootstrap のバージョンアップが必要か。

ng-bootstrap を 1.0.0-alpha.23 → 1.x 最新

下記のページを見ると 1.x.x の最新にすれば良さそう。

https://ng-bootstrap.github.io/#/getting-started

yarn add @ng-bootstrap/ng-bootstrap@~1

1.1.2 に上がった。

その後 ng serve して動かすと下記のエラー。

ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
 TypeError: undefined is not a function
     at Array.map ()
     at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:20), :21:34)
     at SystemJsNgModuleLoader.loadAndCompile (core.js:6570)
     :

よく分からないが、HttpClient へ置き換えていないことが原因かも知れないので、次へ進む。

HttpClient への置き換え

下記に沿って修正していく。

https://angular.jp/guide/deprecations#angularhttp

認証周りをインターセプターに移動したり、設計の見直しが必要で元のコード行の割には結構時間がかかった。

動いた！

以上の修正で動くようになった！めでたしめでたし。

次は v6 だ！