Angular2からAngular4に移行してうまく動かなかったところ[Animation]

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

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

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

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

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


```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.

ググってみると[ここ](https://github.com/angular/angular-cli/issues/5693)にのっかていた。
つまりバグじゃなくて君のtypescript古いよってことらしいので

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

```package.json
...
  "devDependencied": {
    ...
    "typescript": "2.3.3"
  },
...
```

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

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

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

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104322/5130174e-8c08-194c-7239-6f5580bfbcd3.png)

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

なので、とりあえずググると[ここ](https://github.com/primefaces/primeng/issues/2376)に書いてあった。

つまり、下記2点
### 1. app.module.tsに追記する

```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)

ファイルないよってことらしい。のでまたググってみると[ここ](https://github.com/mgechev/angular-seed/issues/1880)にあった。

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

```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);
```

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

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

[チュートリアル](https://coursetro.com/posts/code/63/Angular-4-Animation-Tutorial)を見てみる。

変わったのはここ。
```ts
import { trigger,state,style,transition,animate,keyframes } from '@angular/animations';
```
つまり、@angular/coreにあったものが@angular/animationsに移ったみたい。
なのでまずそこを変える。


うむ。問題なく動いた。

## 所見

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

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