Инициализация компонентов Бесконечная петля - Angular 2 JSPM
Вот полная ошибка.
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 снова и снова.
Если вы меняете эти две строки, это работает, но не загружает 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
Ответы
Ответ 1
Кажется, это проблема angular 2 в бета-версии 1,
Я попробовал ваше репо с помощью angular 2 beta 0, и он работал нормально, без цикла.
Я предлагаю вам придерживаться бета-версии 0, пока они не исправят это.
Я не знаю jspm, поэтому вот что я сделал, чтобы проверить его: (не все здесь может понадобиться, а просто редактирование package.json → remove → и переустановка поддерживала установку версии angular beta 1)
отредактировал зависимость package.json angular2 от:
"jspm": {
"dependencies": {
"angular2": "npm:[email protected]",
"reflect-metadata": "npm:[email protected]^0.1.3"
},
тогда я запустил
rm -rf jspm_packages/npm/[email protected]
jspm install npm:[email protected]
npm start
Ответ 2
Я столкнулся с той же проблемой. Я использовал 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() {}
});
Я не исследовал, почему это происходит, но я верю в его внутреннюю проблему angular2. В качестве обходного пути я создал предустановку es2015 без плагина функции-имени, который вызывает это преобразование:
https://github.com/DontRelaX/babel-preset-es2015-without-function-name
Надеюсь, это спасет вас час или два. Перейти к созданию проблемы в angular2 repo.
Ответ 3
Если это вызвано отсутствием цикла, то использование break;
в строке ниже directives: [TodoCmpTest]
остановит этот цикл.
Не уверен, что это сработает, но попробуй, может.