angularのバージョンアップ

経緯

ng build --prodしたら挙動が変わっちゃう事象に遭遇
→もしかしたらangular CLIのバージョンめっさ古いからじゃね？
→バージョンアップして試してみよう(v1.7.4→6.2.1)

結論

解決せず。

最適化め、なんてことをしてくれたんだ…！※解決しました→prodビルドはイベント名も節約
開発ビルドとか--aotだと問題ないんだけど、
--prodの時だけ何か最適化されて、navigationEndイベントが拾えなくなるっぽい。

とはいっても、アップデート作業は勉強になったのでメモ。

手順

コマンドを順番に実行

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@latest
npm install @angular/cli@latest
ng update @angular/cli

→.angular-cli.jsonがangular.jsonに進化する

ng update @angular/core
ng update @angular/material
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

秋のエラー収穫祭

コマンド実行だけで終わる人もいるかもしれない。
主にrxjs周りでエラーが豊作だったので、刈り方をメモ。

Error: Cannot find module 'typescript'

https://github.com/clausreinke/typescript-tools/issues/59
なんかTypeScriptがなくなるっぽい？ので、素直にインストール
↓↓↓

npm install -g typescript

error TS2305: Module '"/node_modules/@angular/core/core"' has no exported member 'transition'.

https://stackoverflow.com/questions/50184274/update-angular-5-to-angular-6-error
アニメーション周りのモジュールがangular/animationsに移動したらしいので、import書き換え。

import {
    Component, OnInit, Input, Output, OnChanges, EventEmitter,
    trigger, state, style, animate, transition
} from '@angular/core';

↓↓↓

import {
  Component, OnInit, Input, Output, OnChanges, EventEmitter
} from '@angular/core';
import {
  trigger, state, style, animate, transition
} from '@angular/animations';

Property 'of' does not exist on type 'typeof Observable [duplicate]

https://stackoverflow.com/questions/38067580/property-of-does-not-exist-on-type-typeof-observable
またrxjs周りの仕様変わってたんだねぇ。

import { Observable } from 'rxjs/Observable';
...
return Observable.of(...);

↓↓↓

import { Observable, of } from 'rxjs';
return of(...);

Property 'map' does not exist on type 'Observable'.

https://github.com/angular/angular/issues/15548
ofと同じかと思ってたらなんか違うし！

import { Subscription } from 'rxjs/Subscription';
...
this.http
  .get('/getApi', {})
  .map(...)

↓↓↓

import { Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
...
this.http
  .pipe(
      .get('/getApi', {})
      .map(...)
   )

おわりに

頑張ってrxjsのインポート範囲削るために'rxjs/***'書いたのに、rxjs-5-to-6-migrateが元通りに書き戻してくれた。
でもコマンド実行だけで書き換えてくれるのはありがたい。