Inicjalizacja komponentu Infinite Loop - Angular 2 JSPM

Question

Oto pełny błąd.

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"> 

Oto mój plik źródłowy.

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); 

Jego ponowne wystawianie TodoCmpTest w kółko.

Po zamianie tych dwóch linii działa, ale nie ładuje TodoCmpTest. directives: [TodoCmpTest] // directives: []

można odtworzyć ten błąd w następujący sposób ...

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

Wydaje się, że jest to problem występujący w kątowa 2 beta 1, Próbowałem swoje repo z kątowym 2 0 i beta działało dobrze, bez pętli. Proponuję trzymać się beta 0, dopóki go nie naprawią. Nie wiem jspm, więc oto, co zrobiłem, aby to przetestować: (nie wszystko tutaj może być potrzebne, ale po prostu edytowanie package.json -> usuwanie -> i ponowne instalowanie ciągle instalowało mnie wersję kątową beta 1)

edytowany zależność angular2 package.json do:

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

potem biegnę

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

Answer 2

Jeśli to jest przyczyna przez pętlę nie zatrzymując się następnie za pomocą break; na linii poniżej directives: [TodoCmpTest] zatrzyma tę pętlę.

Nie jestem pewien, czy to zadziała, ale spróbuj, może.

Answer 3

Miałem do czynienia z tym samym problemem. Użyłem zestawu stron internetowych i babel + es2015, aby spakować mój kod. Zdałem sobie sprawę, że jeśli w wiązce mam następny kod wszystko działa dobrze:

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

ale jeśli mam obok mam Inifinity pętlę:

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

nie zbadać dlaczego tak się dzieje, ale wierzę, jego problem z wewnętrznym kątowaniem2. Jako obejście tego problemu utworzyłem ustawienie es2015 bez wtyczki funkcji, które powoduje tę transformację: https://github.com/DontRelaX/babel-preset-es2015-without-function-name

Mam nadzieję, że zaoszczędzi ci to godzinę lub dwie. Idąc, aby utworzyć problem w repozytorium angular2.