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とかのバージョン関連もあるので、とりあえず早め早めに最新をフォローすると
技術的負債の返済が滞らずにすむかもしれない。
以上です。
ご指摘等ありましたらコメントいただけると幸いです。