组件初始化无限循环 - Angular 2 JSPM

Question

这是完整的错误。

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

这是我的源文件。

directives: [TodoCmpTest]
// directives: []

一遍又一遍地重新安装TodoCmpTest。

如果你交换这两行它可以工作，但不加载TodoCmpTest。 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}}

Answer 1

它似乎是beta 1中的角度2问题， 我尝试使用角度2 beta 0你的回购，它工作正常，没有循环。 我建议你坚持使用beta 0，直到他们修复它。 我不知道jspm，所以这就是我测试它所做的:(不是这里的所有东西都可能需要，但只需编辑package.json - ＆gt;删除 - ＆gt;并重新安装，不断安装我的角度beta 1版本）

将package.json angular2依赖项编辑为：

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

然后我跑

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

Answer 2

我遇到了同样的问题。我使用webpack和babel + es2015预设来捆绑我的代码。我意识到如果在bundle中我有下一个代码都运行良好：

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

但如果我接下来我得到了无限循环：

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

我没有调查它为什么会发生，但我相信它有一些内部的角度问题。作为解决方法，我创建了es2015预设，没有导致此转换的函数名插件： https://github.com/DontRelaX/babel-preset-es2015-without-function-name

希望它会为你节省一两个小时。要在angular2 repo中创建问题。

Answer 3

如果这是因为循环没有停止，那么在break;下方的行上使用directives: [TodoCmpTest]将停止此循环。

不确定这是否有效，但可以尝试一下。