12

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

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.com/danielrasmuson/Angular2HelloWorld-StackOverflow 2. use node v5.4.0 3. jspm install 4. npm install 5. npm start

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
Dan Rasmuson
  • 5,705
  • 5
  • 29
  • 45
  • I had a somewhat similar issue, try using one file for each component and see if that fixes it. – Langley Jan 12 '16 at 23:33
  • Thanks for the comment @Langley. Yes I had it in multiple files, but I merged the files for the example. :/ – Dan Rasmuson Jan 12 '16 at 23:36
  • What ng2 are you using? Are you using minified or non minified bundles? – Eric Martinez Jan 13 '16 at 00:12
  • In the above I'm using 'npm:angular2@2.0.0-beta.1' and I'm loading it via the above jspm import. – Dan Rasmuson Jan 13 '16 at 00:37
  • I tried reproducing your issue but when I try to follow your steps, npm throws an error: ` @ start: `./node_modules/live-server/live-server.js` npm ERR! Exit status 1` I noticed your index file is pointing to the wrong angular version, not the beta though. – Langley Jan 14 '16 at 23:53
  • Thanks @Langley for checking this out. an alternative to `npm start` would be `python -m SimpleHTTPServer` and goto `localhost:8000` in your browser. My index.html loads angular1 through a script tag and angular2 is loaded through jspm via the import statements you see in `lib/main.js` (You can confirm this by watching the network tab). – Dan Rasmuson Jan 15 '16 at 00:01
  • have you tried the pointers in this example? http://www.sitepoint.com/creating-components-angular-2-typescript-es5/ – Jeroen Jan 15 '16 at 13:17
  • 3
    It sounds similar (but not equal) to this [issue](https://github.com/angular/angular/issues/6366). 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 Jan 15 '16 at 17:36

3 Answers3

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:angular2@2.0.0-beta.0",
      "reflect-metadata": "npm:reflect-metadata@^0.1.3"
    },

then i run

rm -rf jspm_packages/npm/angular2@2.0.0-beta.1
jspm install npm:angular2@2.0.0-beta.0  
npm start
davide bubz
  • 1,321
  • 13
  • 31
1

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.com/DontRelaX/babel-preset-es2015-without-function-name

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

DontRelaX
  • 744
  • 4
  • 10
0

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.