Angular2からAngular4に移行してみるとうまく動かなかった

Angular2からAngular4に切り替えてみたらanimationまわりで動かなかったのでメモ

とりあえずコンパイルしてみる

Angular2からAngular4に切り替えるためにまずpackage.jsonを書き換える。

Quick Startのpackage.jsonファイルを参考に書き換え
https://github.com/angular/quickstart/blob/master/package.json

...

  "dependencies": {
    "@angular/common": "~4.1.3",
    "@angular/compiler": "~4.1.3",
    "@angular/core": "~4.1.3",
    "@angular/forms": "~4.1.3",
    "@angular/http": "~4.1.3",
    "@angular/platform-browser": "~4.1.3",
    "@angular/platform-browser-dynamic": "~4.1.3",
    "@angular/router": "~4.1.3",
    ...
  },
...

とりあえず、これでnpm updateしてnpm run buildしてみる。うん。動かない。
以下のようなエラーが発生

node_modules/@angular/animations/src/animation_metadata.d.ts(34,33): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/common/src/platform_id.d.ts(8,42): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/common/src/platform_id.d.ts(9,41): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/common/src/platform_id.d.ts(10,45): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/common/src/platform_id.d.ts(11,44): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/compiler/src/util.d.ts(8,36): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/core/src/animation/animation_metadata_wrapped.d.ts(12,33): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/core/src/animation/dsl.d.ts(34,33): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/core/src/errors.d.ts(9,33): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/core/src/errors.d.ts(10,43): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/core/src/errors.d.ts(11,42): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/core/src/errors.d.ts(12,43): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/core/src/errors.d.ts(13,35): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/forms/src/model.d.ts(6,28): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/forms/src/model.d.ts(10,30): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/forms/src/model.d.ts(15,30): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/forms/src/model.d.ts(20,31): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/http/src/backends/browser_jsonp.d.ts(1,33): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts(14,41): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/router/src/shared.d.ts(15,37): error TS1039: Initializers are not allowed in ambient contexts.

ググってみるとここにのっかていた。
つまりバグじゃなくて君のtypescript古いよってことらしいので

再度、package.jsonファイルのtypescript部分を編集(2.3.3が最新だったので2.3.3にする)

...
  "devDependencied": {
    ...
    "typescript": "2.3.3"
  },
...

npm updateしてnpm run buildしてみる。
今度はうまくコンパイル終了。

サーバーを立ち上げてみる

npm startでサーバーを立ち上げるとスムーズにサーバーが立ち上がる。

基本的に動作に問題がないように見えたがアニメーション関連で問題が発生。

BrowserAnimationsModuleかNoopAnimationsModuleをimportsしなさいというエラー

errors.ts:42 ERROR Error: Uncaught (in promise): Error: Found the synthetic property @slideRightLeft. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

なので、とりあえずググるとここに書いてあった。

つまり、下記2点

1. app.module.tsに追記する

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';// <- これ

...
  imports: [
    ...
    BrowserAnimationsModule,// <- これ
  ],
  ...

2. @angular/animationsを入れる

npm install --save @angular/animations@latest

これで動かしてみる。

エラー発生

以下のエラーが発生
@angular/platform-browser/bundles/platform-browser.umd.js/animations 404 (Not Found)

ファイルないよってことらしい。のでまたググってみるとここにあった。

つまり、systemjs.config.jsに下記追記しろよってことらしいので追記。

(function(global) {
  System.config({
    ...
    map: {
      ...
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', // <- これと
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', // <- これと
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js' // <- これ
    },
    ...
  });
})(this);

これで再度サーバーを起動。
うむ。エラーは発生しなくなったがアニメーションは動かない。

アニメーションが動かない

チュートリアルを見てみる。

変わったのはここ。
ts
import { trigger,state,style,transition,animate,keyframes } from '@angular/animations';

つまり、@angular/coreにあったものが@angular/animationsに移ったみたい。
なのでまずそこを変える。

うむ。問題なく動いた。

所見

angular2から4への移行はそれほど苦労なく行えた。
もともとソースコードが小さいってこともあるかもしれないけど、
Typescriptとかのバージョン関連もあるので、とりあえず早め早めに最新をフォローすると
技術的負債の返済が滞らずにすむかもしれない。

以上です。
ご指摘等ありましたらコメントいただけると幸いです。