Meteorをアップデートしたら…エラー！

投稿者:みつを

先日、Angular2のベータ版がとうとう発表されましたね。
家ではMeteor使って遊んでいるのですが、
Angular2が発表されたから、Meteorもアップデートしてるのかなぁと思い、
meteor updateしたら、案の定、いくつかのパッケージがアップデートされました。

で、meteor runで起動してみると…
Screen Shot 2015-12-23 at 18.40.33

(・・?
何か、ミスったのかなと思い、再度アップデートし、meteor run。
やっぱり、エラー!!!

Uncaught SyntaxError: Unexpected token <
M @ systemjs_systemjs.js:61
Uncaught (in promise) Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/angular2
Error loading http://localhost:3000/client/app

「何じゃこりゃー!」と数日間悩んだ末、何とか解決しました。

解決方法

結論から言いますと、
アップデートしたパッケージの一つurigo:angular2-meteor package | AtmosphereのChange Logに記載されていました。

v0.3.0: Angular 2 seems to be on the finish line to a beta version. In the latest releases (alpha-50 and up) there appeared some breaking changes: angular2/angular2 namespace were divided into some new ones, mainly, angular2/core, angular2/common; also the dash symbol were removed in the selectors of the main directives, i.e., instead of ng-if you should use ngIf now. For more information about the latest API, please, refer to the official docs. To get new definition files, you’ll need to remove typings\angular2 folder and typings\angular2.d.ts file.

まず、typings/angular2フォルダとtypings/angular2.d.tsファイルを削除しましょう。

その後、angular2/angular2からインポートしているComponentやFORM_DIRECTIVESはangular2/coreやangular2/commonなどからインポートするようにに変更しましょう。

そして、ng-ifなどチェインケースで記載しているdirectiveは、全てキャメルケースngIfに変更しましょう。

すると、無事にもとのページが表示されます。
あぁ、良かった。

雑感

エラー発生後は、相当悩みました。
自分のコードを疑い、エラーにある通り、”<“付近のコードを見たり、systemjs_systemjs.jsの61行目を覗いてみたり…

それでも、解決せず、これまで独学でやっていたので、何かヒントにならないかとAngularJSの本を3、4冊買ってみたりとしました。

Angular 2.0 Meteor Tutorial | Bootstrappingを見ながら遊んでいたので、
ソースコードをUrigo/meteor-angular2.0-socially · GitHubから取得して、自分のコードと比較してやっと「インポート元の名称が違う」と気付き、「angular2のmeteorパッケージが原因だ!!」と気付きました。
ここまでに、1周間ほど彷徨い続けたと思います。笑

インポート元の探し方

urigo:angular2-meteor package | AtmosphereのChange Logに記載されていますが、Componentなどのインポート元の探し方を紹介します。
まず、API 2.0 Preview – tsを見に行きます。

Untitled 2015-12-23 18-38-33

インポートしたいクラスを検索します。
ここでは、NgSwitchDefaultをインポートしたいとします。
検索結果から、NgSwitchDefaultはangular2/commonからインポートすればOKという事が分かります。

Screen Shot 2015-12-23 at 18.43.21

また、検索結果からNgSwitchDefaultのページへ行くと、一番したの方にも記載されています。
NgSwitchDefault - ts 2015-12-23 18-35-37