Here is the full error.

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

Here is my source file.

import 'reflect-metadata'

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

console.log('Files have started being piled 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);

Its reinstatiating TodoCmpTest over and over again.

If you swap these two lines it works, but doesn't load TodoCmpTest. directives: [TodoCmpTest] // directives: []

You can reproduce this error by doing the following...

1. git clone 2. use node v5.4.0 3. jspm install 4. npm install 5. npm start

Here is the full error.

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

Here is my source file.

import 'reflect-metadata'

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

console.log('Files have started being piled 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);

Its reinstatiating TodoCmpTest over and over again.

If you swap these two lines it works, but doesn't load TodoCmpTest. directives: [TodoCmpTest] // directives: []

You can reproduce this error by doing the following...

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

• javascript
• angular
• jspm

• I had a somewhat similar issue, try using one file for each ponent and see if that fixes it. – Langley Commented Jan 12, 2016 at 23:33
• Thanks for the ment @Langley. Yes I had it in multiple files, but I merged the files for the example. :/ – Dan Rasmuson Commented Jan 12, 2016 at 23:36
• What ng2 are you using? Are you using minified or non minified bundles? – Eric Martinez Commented Jan 13, 2016 at 0:12
• In the above I'm using 'npm:[email protected]' and I'm loading it via the above jspm import. – Dan Rasmuson Commented Jan 13, 2016 at 0:37
• 3 It sounds similar (but not equal) to this issue. A lot of issues were introduced with beta 1 (with minification). Have you tried with beta 0 or lower and with non minified bundles? (I don't know how JSPM works) – Eric Martinez Commented Jan 15, 2016 at 17:36

3 Answers 3

It seems it's an angular 2 problem in the beta 1, I tried your repo with angular 2 beta 0 and it worked fine, no loop. I suggest you stick with beta 0, until they fix it. I don't know jspm, so here is what i did to test it: (not everything here might be needed but just editing package.json -> removing -> and reinstalling kept installing me the angular beta 1 version)

edited the package.json angular2 dependency to:

"jspm": {
    "dependencies": {
      "angular2": "npm:[email protected]",
      "reflect-metadata": "npm:reflect-metadata@^0.1.3"
    },

then i run

rm -rf jspm_packages/npm/[email protected]
jspm install npm:[email protected]  
npm start

I faced with same issue. I used webpack and babel + es2015 preset to bundle my code. I realized that if in bundle I have next code all work well:

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

but if I have next I got inifinity loop:

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

I didn't investigate why it happens, but I believe its some internal angular2 issue. As workaround I created es2015 preset without function-name plugin that causes this transformation: https://github./DontRelaX/babel-preset-es2015-without-function-name

Hope it will save you hour or two. Going to create issue in angular2 repo.

If this is being cause by a loop not stopping then using break; on the line below directives: [TodoCmpTest] will stop this loop.

Not sure if this will work but give it a try, it might.