angular: RangeError: Maximum call stack size exceeded

I had this problem. I was using this:

@Component({
  templateUrl: './my.html'
})

It resolved when I switched to this:

import template from './my.html';
@Component({
  template
})

I love the writeup. I wish all errors would be written up so well! Thank you for making our life easy.

This is a known issue and it has to do with minification. In short the minification is broken in Angular as of right now. The fix will come as part of https://github.com/angular/angular/pull/6567 in a week or so. The issue is that when the minfier munges the code the classes get renamed and collide. <second-level-component> then gets added recursively which causes a stack overflow.

when you are using lazyload, don’t forget below conf:

@NgModule({
  imports: [
    RouterModule.forChild(ROUTES)
  ]
})

I had the same problem and SOLVED my problem. I accedentally imported the same module which is TravelsModule in TravelsModule… 😃 Recursive import results this probem. I removed that import and my problem is solved. My problem was not related to any minified files… As an example, I pasted it below and commented wrong line…

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        //TravelsModule, <----- This line causes the problem
    ],
    declarations: [

    ],
    providers: [

    ],
    exports: [

    ]
})
export class TravelsModule {}

Uncaught RangeError: Maximum call stack size exceeded
    at Object.U (http://localhost:4200/main.bundle.js:55401:126)
    at Object.Type (http://localhost:4200/main.bundle.js:37:146)
    at isValidType (http://localhost:4200/main.bundle.js:24279:157)
    at http://localhost:4200/main.bundle.js:23808:25
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/main.bundle.js:23806:44)
    at http://localhost:4200/main.bundle.js:23819:50
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/main.bundle.js:23806:44)
    at http://localhost:4200/main.bundle.js:23819:50(anonymous function) @ main.bundle.js:55401(anonymous function) @ index.js:1isValidType @ metadata_resolver.js:685(anonymous function) @ metadata_resolver.js:214CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:212(anonymous function) @
 ....
 ....
 ....
metadata_resolver.js:212(anonymous function) @ metadata_resolver.js:225CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:212(anonymous function) @ metadata_resolver.js:225CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:212(anonymous function) @ metadata_resolver.js:225

@bvaughn Brian! Thank you! Just wanted to confirm that I am a fellow angular 2/webpack user, and I’ve been trying to fix this for days, and your solution definitely helped! Thanks!

The same error I was getting because in the child module I was trying to call my initial child component by using below way.

bootstrap: [ChildFirstComponent] -----------------in my Child Module.

So instead I created ChildRoute and from there I called my ChildFirstComponent like below. ####################### const childRoutes:Routes=[ {path:‘’,component:ChildComponent}, ]

@NgModule({ imports:[RouterModule.forChild(childRoutes) )], exports:[RouterModule] })

##############################

Note:Use RouterModule.forChild() in the import array while you are creating child route files

@uscbsitric Your comment is in violation of our code of conduct and will be removed.

I understand that at times we all get frustrated when code does not work. Coding is hard, but there is no need to be offensive on a public forum. Your negativity effects other people around you. https://www.google.com/search?q=negativity+brings+people+around+you+down

We had this issue and was able to resolve it by taking out the “<app></app>” tag which the Component.ts use selector: 'app'. We’re using the angluar-cli and webpack. Weird.

After ten days of debugging the only thing that resolved this for me was switching to an inline template from templateUrl. This issue does not occur with systemjs, only with webpack build. In a systemjs build I had the following:

• Index.ejs has selector from the root app component which is bootstrapped by NgModule.
• The root app component’s template has two entries, first the router outlet and then the chrome components selector. - The chrome component has two routerLink entries for additional component views.

First I checked for unused methods in my solution per the initial comments from @bvaughn above, and this had no effect. I also checked each component for circular references. I then started yanking away functionality until I was down to just trying to bootstrap the main app component, and still had the error. I started a fresh app directory on my host and redeployed in case a cached value was the issue. All throughout webpack was building successfully, but Chrome spewed call stack errors while Firefox said I had ‘too much recursion.’ Lines in the error messages referencing webpack’s outputted file were generally around creating either the module or app view prototype.

Since this occurs only with webpack I logged a new issue there linking back to this thread #3334.

I am not even minifying any file , still getting this.

@masimplo I would start reducing your app, so that it just displays one page. What dependencies are needed and are they cyclic? Typically it’s where your app needs something, so it goes away and get’s that child item, the childitem needs something higher up and so on. Check if you’ve got cyclic dependencies. I’m not sure I’ve seen the templateurl version.

Is this bug/issue fixed/resolved? I am getting errors with Third party libraries which are minified.

I’m getting this using Meteor 1.3 and angular 2 rc1. Is the fix in rc1? (i.e. do I have a new issue?)

here’s a current workaround for the bundle build https://github.com/angular/angular/pull/7988 you need to turn off mangle so props could be invoked and allow function names for directives/components/pipes to work in the template