Node.js v0.12.0 で generator-angular@0.11.0 を使う

Node.js v0.12.0 がリリースされました! 新機能が盛り込まれていて大変うれしいのですが、やはり動かないものがちらほらあります。それでも、公式ホームページからダウンロードすると v0.12.0 になっているので、結構はまりそうです。旧バージョンをダウンロードするのはちょっと面倒です。

困っている一つが generator-angular です。grunt タスクを実行すると、"Warning: Cannot assign to read only property '$methodName' of false" が出ます。

$ mkdir angular1
$ cd angular1
$ yo angular
...
 
$ grunt
...
Running "ngAnnotate:dist" (ngAnnotate) task
Warning: Cannot assign to read only property '$methodName' of false Use --force to continue.
 
Aborted due to warnings.
...

原因はともかくとして、ng-annotate モジュールが Node.js v0.12.0 で動かないようです。調べてみると、ここで使われているものは ng-annotate@0.14.1 で、最新版は ng-annotate@0.15.4 です。これを最新にするために、grunt-ng-annotate を最新化します。

$ npm install --save-dev grunt-ng-annotate
grunt-ng-annotate@0.9.2 node_modules/grunt-ng-annotate
├── lodash@2.4.1
└── ng-annotate@0.15.4 (tryor@0.1.2, simple-fmt@0.1.0, alter@0.2.0, simple-is@0.2.0, stringset@0.2.1, stringmap@0.2.2, stable@0.1.5, convert-source-map@0.4.1, optimist@0.6.1, source-map@0.1.43, ordered-ast-traverse@1.1.1, acorn@0.11.0)
 
$ grunt
...
Done, without errors.
...

ビンゴです!

ソースコードを追っかけて原因を探ると、Node.js 0.12 では boolen オブジェクトにプロパティを追加できなくなったっぽいです。これが原因で、古いバージョンの ng-annotate が動作しなくなったと。

$ cat hoge.js
'use strict';
 
false.property1 = 1;
 
$ nvm run v0.10.36 hoge.js 
Running node v0.10.36
 
$ nvm run v0.12.0 hoge.js                          
Running node v0.12.0
/home/masakura/tmp/angular1/hoge.js:3
false.property1 = 1;
                ^
TypeError: Cannot assign to read only property 'property1' of false
    at Object.<anonymous> (/home/masakura/tmp/angular1/hoge.js:3:17)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

Node.js というか採用している V8 エンジンのバージョンの違いとかなんでしょうか? 結構大きな変更のような気がしますね。

調べていくうちに、ng-annotate ってなんじゃ? という疑問が... ng-annotate の READMEを読むと...

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) {
});

こう書いてあるものを、

angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) {
}]);

こんな感じに書き換えて、AngularJS で動作するようにしてくれるものらしいです。二回書くの面倒だから一回で済ませよう! ってことらしいです。詳しくないですけど...

ということは、generator-angular はサブジェネレーターで各種コントローラーなどの生成が出来るだけでなく、generator-webapp に "bower install --save angular" しただけでではないということですね。

Yeoman は Generator ごとの差が激しくて、generator-webapp に bower install していく方を好んでいたのですが、これからは他の Yeoman Generator を使っていこうと思います。

コメントを追加

Filtered HTML

  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
  • 使用できるHTMLタグ: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <img>
  • 次のタグを使用してソースコード構文をハイライトすることができます。: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby> The supported tag styles are: <foo>, [foo].
  • 行と段落は自動的に折り返されます。

Plain text

  • HTMLタグは利用できません。
  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
  • 行と段落は自動的に折り返されます。
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
イメージ CAPTCHA
Enter the characters shown in the image.