Angularのバージョンアップ（5.2.11→6.x）

4→5に引き続き、Angular Update Guide に従い対応してみる。

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

Http → HttpClient へ置き換え

v5 へ上げた後に実施済み。

Node.js のバージョンアップ（8以降へ）

node -v すると v7.0.0 だった。nodebrew で管理しているため、nodebrew ls すると下記の通り。

$ nodebrew ls
v0.12.0
v7.0.0
v8.11.1
v11.2.0
v13.9.0

current: v7.0.0

最新でいくか、無難に 8 系でいくか。LTS は 10 と 12 らしいがどちらも入っていない…。こうなると 8 系だと少し古いのでなんかエラーが出そうな気配。

13 で行きます！

nodebrew use v13.9.0

Angular CLI のバージョンアップ

yarn add @angular/cli@6

なんかエラー出て失敗。

4 warnings and 19 errors generated.
 make: *** [Release/obj.target/binding/src/binding.o] Error 1
 gyp ERR! build error 
 gyp ERR! stack Error: make failed with exit code: 2
 gyp ERR! stack     at ChildProcess.onExit (.../node_modules/node-gyp/lib/build.js:285:23)
 gyp ERR! stack     at ChildProcess.emit (events.js:321:20)
 gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
 gyp ERR! System Darwin 16.7.0
 gyp ERR! command ".../.nodebrew/node/v13.9.0/bin/node" ".../node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
 gyp ERR! cwd .../node_modules/node-sass
 gyp ERR! node -v v13.9.0
 gyp ERR! node-gyp -v v3.6.0
 gyp ERR! not ok 
 Build failed with error code: 1

一番始めのエラーの箇所は…

c++ '-DNODE_GYP_MODULE_NAME=binding' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_DARWIN_USE_64_BIT_INODE=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DBUILDING_NODE_EXTENSION' -I.../.node-gyp/13.9.0/include/node -I.../.node-gyp/13.9.0/src -I.../.node-gyp/13.9.0/deps/uv/include -I.../.node-gyp/13.9.0/deps/v8/include -I../../nan -I../src/libsass/include  -O3 -gdwarf-2 -mmacosx-version-min=10.7 -arch x86_64 -Wall -Wendif-labels -W -Wno-unused-parameter -std=gnu++1y -stdlib=libc++ -fno-rtti -fno-exceptions -std=c++11 -MMD -MF ./Release/.deps/Release/obj.target/binding/src/binding.o.d.raw   -c -o Release/obj.target/binding/src/binding.o ../src/binding.cpp
 In file included from ../src/binding.cpp:1:
 In file included from ../../nan/nan.h:192:
 ../../nan/nan_maybe_43_inl.h:112:15: error: no member named 'ForceSet' in 'v8::Object'
   return obj->ForceSet(isolate->GetCurrentContext(), key, value, attribs);
          ~~~  ^

error: no member named ‘ForceSet’ in ‘v8::Object’ でググると2018年頃のissueが。この時は Node の v10 でエラーになり、v9 に戻すと回避できるとの記述が。取りえず 8 系で試す。

nodebrew use v8.11.1
yarn add @angular/cli@6

いけた。

success Saved 46 new dependencies.

謙虚さが大事ですね。

.angular-cli.json → angular.json へ置き換え

ng update @angular/cli@6

ん？エラー。

bash: .../.nodebrew/current/bin/ng: No such file or directory

Node のバージョンを 8 に変えたため、グローバルにインストールされた ng コマンドがないためエラーになっている模様。1つ前の手順でローカルにはインストールしたが、グローバルにもインストール必要なのか？

調べてみると、どうやらグローバルとローカルに両方インストールし、常にグローバルはローカルの ng コマンドを呼び出すようになっているらしい。ということは、グローバルに最新の CLI をインストールすれば良さそう。

npm install -g @angular/cli
ng update @angular/cli@6

またまたエラー。上げすぎたか。

$ ng update @angular/cli@6
Node.js version v8.11.1 detected.
The Angular CLI requires a minimum Node.js version of either v10.13 or v12.0.

npm remove -g @angular/cli
npm install -g @angular/cli@6
ng update @angular/cli@6

成功した。ただ、angular.json が生成されるかと思いきや、.angular-cli.json のまま変化なし。手動で作成が必要？？よくわからないので次へ進む。

Angular のバージョンアップ

ng update @angular/core@6

この後、Typescript と RxJS のバージョンアップによって、エラーが出るようになるかもとのこと。

が、コマンド実行時にエラー。

Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires "^2.3.1 || >=4.0.0-beta <5.0.0" (extended), would install "6.1.10").
 Incompatible peer dependencies found. See above.

codelyzer を 2.0.0 → 4.2.0 へ

codelyzer の changelog によると、Angular 6 をサポートしたのは 4.2.0 らしい。今は 2.0.0 がインストールされている。

Breaking Changes を探すと、4.0.0 と 3.0.0-beta.0 に入っている。4.0.0 の方は、tslint.json からルール削除が必要とのこと。下記を使っていたため削除

• templates-use-public
• no-access-missing-member
• invoke-injectable

yarn add codelyzer@4.2.0
ng update @angular/core@6

またエラー。

npm ERR! path .../node_modules/npm/node_modules/dezalgo/node_modules/asap
 npm ERR! code ENOENT
 npm ERR! errno -2
 npm ERR! syscall rename
 npm ERR! enoent ENOENT: no such file or directory, rename '.../node_modules/npm/node_modules/dezalgo/node_modules/asap' -> '.../node_modules/npm/node_modules/dezalgo/node_modules/.asap.DELETE'
 npm ERR! enoent This is related to npm not being able to find a file.

ただ、package.json を見ると、angular は 6.1.10 に上がった様子。とりあえず ng serve してみると、下記のエラー。

Local workspace file ('angular.json') could not be found.

(再チャレンジ).angular-cli.json → angular.json へ置き換え

ネットの情報から ng update コマンドでできそうだったので、実行。

ng update @angular/cli --migrate-only --from=1.7.4 --to=6.2.9

最後に asap の npm ERR! は出たが、angular.json への置き換え自体は成功。

ようやく ng serve

ng serve すると下記のエラー。

Could not find module "@angular-devkit/build-angular" from ...

npm パッケージがちゃんとインストールされていなさそうなので、一旦消して入れ直す。

rm -rf node_modules/
yarn

その後 ng serve するとコンパイルエラーが出るところまで進んだ。

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
 Module build failed (from ./node_modules/sass-loader/lib/loader.js):
 Error: Node Sass version 3.13.1 is incompatible with ^4.0.0.
     at getRenderFuncFromSassImpl (.../node_modules/sass-loader/lib/loader.js:108:19)
     at Object.sassLoader (.../node_modules/sass-loader/lib/loader.js:46:20)

さて、ここからライブラリのバージョンアップか。

wintersmith-sassy を 1.1.0 → 1.2.0

yarn.lock で node-sass に依存しているライブラリを調べると、wintersmith-sassy が node-sass の 3.13.1 に依存していた。なので、wintersmith-sassy のバージョンを上げる。最新の 1.2.0 にすると node-sass のバージョンが 4.5.3 になるみたいなので、それで。

yarn add wintersmith-sassy@1.2.0

ng serve すると Node sass のエラーは消え、次はこれ。

ERROR in node_modules/@types/lodash/index.d.ts(12872,53): error TS2344: Type 'T' does not satisfy the constraint 'object'.

@types/lodash を 4.14.61 → 4.14.149

yarn add @types/lodash@4.14.149

ng serve して、次はこのエラー。

ERROR in src/app/services/http-interceptors/error-interceptor.ts(9,3): error TS2416: Property 'intercept' in type 'ErrorInterceptor' is not assignable to the same property in base type 'HttpInterceptor'.
   Type '(req: HttpRequest, next: HttpHandler) => Observable<{} | HttpProgressEvent | HttpSentEvent |…' is not assignable to type '(req: HttpRequest, next: HttpHandler) => Observable>'.

ErrorObservable → throwError

エラーが起きている error-interceptor は公式ドキュメントをほぼコピペしただけなのになと思い、v6 の HttpClient のページを見ると、ErrorObservable から throwError に変わっている。なのでそれに合わせて書き換える。

import { ErrorObservable } from 'rxjs/observable/ErrorObservable';

    return new ErrorObservable('error');
↓

import { catchError } from 'rxjs/operators';

    return throwError('error');

次のエラーはこれ。

ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
 Module not found: Error: Can't resolve 'stream' in '.../node_modules/jszip/lib'

yarn.lock を見ると、devextreme が依存しているライブラリだ。

DevExtreme を 17.2.13 → 19.2.x → 18.1.x へ

最新の 19.2.x でも Angular 6 をサポートしているようなので、最新に上げる。

yarn add devextreme@19.2 devextreme-angular@19.2

うーん、Node.js のバージョンエラーだが、今は上げたくない。

error jsdom@16.2.2: The engine "node" is incompatible with this module. Expected version ">=10". Got "8.11.1"
 error Found incompatible module

Angular 6 をサポートし始めた 18.1.x にしてみる。

yarn add devextreme@18.1 devextreme-angular@18.1

いけた。が、ng searve すると同じエラー。ググると DevExtreme の issue がヒット。tsconfig.json の修正が必要とのこと。

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "jszip": [
        "../node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

これでコンパイルが通った！ちょっと触った感じ、エラーなく動いている。

TypeScript と RxJS の変更点が気になるので別途確認した。

Deprecated になった RxJS 5 の機能を取り除く

下記のコマンドでやってくれるらしい。

yarn global add rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

実行すると下記が出力された。

Running the automatic migrations. Please, be patient and wait until the execution completes.
Found and fixed the following deprecations:

Fixed 1 error(s) in ...
WARNING: ... - duplicate RxJS import
WARNING: ... - outdated import path

WARNINGの方は自分で直す必要があるのか？それとも直してくれているのか？

ビルドして特に問題なさそうなので、そのままにしておく。rxjs-compatはいつ消すのだろうか？Angular のバージョンアップでその内消えるのだろうか。