【问题标题】：Component Initialization Infinite Loop - Angular 2 JSPM组件初始化无限循环 - Angular 2 JSPM
【发布时间】：2016-04-17 18:33:24
【问题描述】：

这是完整的错误。

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

【问题讨论】：

我有一个类似的问题，尝试为每个组件使用一个文件，看看是否能解决问题。
感谢@Langley 的评论。是的，我在多个文件中都有它，但我合并了示例文件。 ://
你用的是什么ng2？您使用的是缩小的还是非缩小的捆绑包？
在上面我使用的是 'npm:angular2@2.0.0-beta.1' 并通过上面的 jspm 导入加载它。
这听起来与issue 相似（但不等于）。 beta 1（带有缩小）引入了很多问题。您是否尝试过使用 beta 0 或更低版本以及未缩小的捆绑包？（我不知道 JSPM 是如何工作的）

标签： javascript angular jspm

【解决方案1】：

这似乎是 beta 1 中的 angular 2 问题，我用 angular 2 beta 0 尝试了你的 repo，它运行良好，没有循环。我建议你坚持使用 beta 0，直到他们修复它。我不知道 jspm，所以这是我为测试它所做的：（可能不需要这里的所有内容，但只是编辑 package.json -> 删除 -> 并重新安装不断为我安装 angular 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

【讨论】：

beta6/7同样的问题，有解决办法吗？

【解决方案2】：

如果这是由循环未停止引起的，则在directives: [TodoCmpTest] 下方的行上使用break; 将停止此循环。

不确定这是否可行，但试一试，它可能会。

【讨论】：

【解决方案3】：

我遇到了同样的问题。我使用 webpack 和 babel + es2015 预设来捆绑我的代码。我意识到如果在捆绑中我有下一个代码都可以正常工作：

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

但如果我有下一个，我会得到无限循环：

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 中创建问题。

【讨论】：