Zenn
🅰️

Angular 2 alpha.18 に挑んだら想像以上に険しかった

2021/07/04に公開
Angular
tech

「まだ早い!!」

@armorik83 です。時間ができたのでng-japan終了後、ようやく Angular 2 を触ることができました。導入が想像以上にきつく、ES6 やコンパイルといった昨今の JS 事情に詳しくなければ、alpha 段階で触るのは避けたほうがいい、というのが現段階での印象です。

足を踏み入れたのが早すぎるだけで、時間が解決するものだと思っています。

（150415 追記: かなり解決されてきたので書きました → どうしても今 Angular 2 with Babel を触ってみたい人のためのビルドスクリプト）

何が険しいか

文章化する体力が残されていないので箇条書きで。

traceur-compiler

node_modules 内をコンパイルしてしまうのか問題

  • ./node_modules/angular2/es6/dev/に traceur-compiler 適用前のソースが入っている
    • 理屈ではこのソースを Babel でコンパイルすれば動く（はず）
    • node_modules 内を変換するという抵抗感
    • Angular 2 実装内に相対パスではなく、node_modules 基準from 'angular2/foobar'のパス表記があるため、単純なコンパイルではリンク切れを起こす

babel --blacklist useStrict

  • eval 問題
    • まさかの実装内eval()使用と、"use strict"必須にしてくる Babel が相性最悪
    • 正しくは「strict 下で予約語扱いの eval を Angular 2 側がメソッド名に使っていたため Babel の'use strict'とバッティングする」でした
    • Babel の--blacklist useStrictで回避可能
  • 命名にevalを用いたことにいい印象は無いが、一応 valid なため Babel 側のバグ

constructor が decorator にならない件

  • Angular 2 において@Component()というアノテーション (decorator) で使われているComponentはclass constructor なためBabel のランタイム_classCallCheck()で落ちる

自分の App ソースを TypeScript で書けない問題

  • TypeScript 1.5-alpha で decorator 構文をコンパイルしたとき問題発生
    • --blacklist strictしないと TypeScript が出力するthis.__decoratorがundefinedに置き換えられてしまう（参考: FAQ Why is this being remapped to undefined?）
    • 根本的に前節『constructor が decorator にならない件』で落ちるから関係無かった
    • ~~AtScript は TypeScript になりまぁす!~~この件どうなってる

自分の App ソースを es6 + Babel で書けない問題

  • 『constructor が decorator にならない件』がやっぱり問題になる

zone.js が Browserify に対応してない問題

  • zone.js何者ですか
    • window.zoneに対してグローバルに格納するのでBrowserifyお手上げ
    • 百歩譲って<script src="zone.js"></script>にしたくても bower 非対応なので泥臭く手で記入
    • browserify-shimを使えばいけるかもしれないが、このライブラリ更新が止まっているのでもう避けたい
    • ソースを読んだところ、グローバル変数化のバグを取り除けば動きそう
      • 手元の修正では動いたので、様子を見ながら PR を検討中

結果、大惨敗

Babel + Browserify でbootstrap()するところまで進めたものの、最後の最後でzone.js内の promise で落ちて原因が全く分からなかったので、この時点で挫折しました。

Angular 2 で遊びたいんだけど

ご安心ください! そんなチャレンジャーな貴方のために、@shuhei 先生によってhttps://github.com/shuhei/babel-angular2-appというスケルトンが作成されました!（全て克服されていて感動しました）

Qiita の『Angular 2 を試してみた感想とハマりどころ』も必読かと思います。

宣伝

ここで宣伝です。2015 年 4 月 29 日に開催されるGDGKobe Angular 勉強会#3では、ちょっと早すぎる?Angular 2 の導入法や、Angular 2 alpha で実際に動作するアプリケーションのサンプル（今作ってる）、これから Angular 1.3|1.4 を使う我々にできることは何か、といったセッションを担当します。上のような険しい話は避けますが、中級者〜上級者にご満足いただける内容にするため果敢に体当たりを繰り返しているところです。

神戸ではありますが、ご興味がありましたら是非!

さいごに感想

自力で Hello もできず、最終的に破棄して shuhei さんのスケルトンを使うまでに丸一日を費やした。ロトのしるし取るために毒沼を何往復もして死んだ感じです。

半年後に起こして。

Discussion