コンポーネントの初期化無限ループ - 角2 JSPM

Question

ここでは完全なエラーです。

RangeError: Maximum call stack size exceeded 
at Injector._instantiate (http://localhost:8000/build.js:36366:63) 
at Injector._instantiateProvider (http://localhost:8000/build.js:36244:23) 
at Injector._new (http://localhost:8000/build.js:36234:21) 
at InjectorInlineStrategy.instantiateProvider (http://localhost:8000/build.js:35998:30) 
at ElementDirectiveInlineStrategy.init (http://localhost:8000/build.js:35106:20) 
at new AppElement (http://localhost:8000/build.js:34800:24) 
at viewFactory_constructor0 (viewFactory_constructor:74:26) 
at viewFactory_constructor0 (viewFactory_constructor:76:1) 
at viewFactory_constructor0 (viewFactory_constructor:76:1) 
at viewFactory_constructor0 (viewFactory_constructor:76:1) <app id="NG2_UPGRADE_0_app_c0"> 

ここに私のソースファイルがあります。

import 'reflect-metadata' 

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser' 

console.log('Files have started being compiled and infinite loop has begun'); 

var TodoCmpTest = 
Component({ 
    selector: 'todo-cmp' 
}) 
.View({ 
    template: `<h1>TodoCmpTest</h1>` 
}) 
.Class({ 
    constructor: function(){ 
    console.log('hello'); 
    } 
}); 


var AppComponent = 
Component({ 
    selector: 'app', 
}) 
.View({ 
    template: ` 
    <div> 
    <h1> Hello World </h1> 
    <todo-cmp></todo-cmp> 
    </div> 
    `, 
    directives: [TodoCmpTest] 
// directives: [] 
}) 
.Class({ 
    constructor: function() {} 
}); 

bootstrap(AppComponent); 

何度も何度もTodoCmpTestを再実行します。

これらの2つの行を入れ替えても動作しますが、TodoCmpTestは読み込まれません。 directives: [TodoCmpTest] // directives: []

あなたが...次の操作を行って

1. git clone https://github.com/danielrasmuson/Angular2HelloWorld-StackOverflow 2. use node v5.4.0 3. jspm install 4. npm install 5. npm start

Answer 1

をこのエラーを再現することができ、ベータ1の角度2の問題だと思われる、 私は、角2ベータ0であなたのレポを試してみましたが、それは正常に動作し、ループはありませんでした。 修正するまで、ベータ0を使うことをお勧めします。 私はjspmを知らないので、ここではテストしました：（ここではすべてが必要ではないかもしれませんが、package.jsonを編集するだけで、>アンインストールして、アンインストールしてください）

がにpackage.jsonのangular2の依存関係を編集した：

"jspm": { 
    "dependencies": { 
     "angular2": "npm:angular2@2.0.0-beta.0", 
     "reflect-metadata": "npm:reflect-metadata@^0.1.3" 
    }, 

これはループによって原因がdirectives: [TodoCmpTest]次の行にbreak;を使用すると、このループを停止しますその後、停止していないされている場合、私は

rm -rf jspm_packages/npm/angular2@2.0.0-beta.1 
jspm install npm:angular2@2.0.0-beta.0 
npm start 

Answer 2

を実行します。

これがうまくいくかどうかわかりませんが、試してみてください。

Answer 3

同じ問題が発生しました。私はコードをバンドルするためにwebpackとbabel + es2015プリセットを使用しました。私はバンドルで、私は次のコードがある場合、すべてがうまくいくことを実現：

Component({ 
    ... 
    directives: [SuperComponent] 
}).Class({ 
    constructor: function() {} 
}); 

が、私は次の持っている場合、私はinifinityループました：それはなぜ起こるか私は調査しなかった

Component({ 
    ... 
    //Important: reproduces only with not empty directives that used in template 
    directives: [SuperComponent] 
}).Class({ 
    constructor: function costructor() {} 
}); 

を、私は信じていますその内部の角2の問題。回避策として、この変換の原因となる関数名のプラグインがないes2015プリセットを作成しました。 https://github.com/DontRelaX/babel-preset-es2015-without-function-name

希望すると1時間か2時間節約できます。 angular2 repoで問題を作成しようとしています。