Angular 2 + CLI : Error in Maximum call stack size exceeded

40,047

Solution 1

I met with the same error. Solved by deleting unnecessary imports.

Cause of this error you have circular module dependency problem.

For example:

'A' module imports (dependent to) 'B' module

'B' module imports (dependent to) 'A' module

I suggest you to build a common module that other modules should import the common module.

If you have unnecessary imports delete unnecessary imports.

Solution 2

The best way i found to debug this is :

ng serve --aot

It will exit building if any error is found with an understandable error.

Solution 3

If you getter (or a method) returns itself you will get circular reference resulting in Maximum call stack size exceeded exception. Ex.

public get test(): any {
    return test;

}

Review your code for that.

Solution 4

In my case this happen when trying to call the selector of its own component (Kind of circular dependency).

Share:
40,047

Related videos on Youtube

Agone
Author by

Agone

Updated on March 03, 2022

Comments

  • Agone
    Agone about 2 years

    I have a problem with my Ng2 project for 3 - 4 days.

    Versions.

    • @angular/cli: 1.0.0-rc.2
    • node: 6.9.2
    • os: win32 x64
    • @angular/common: 2.4.9
    • @angular/compiler: 2.4.9
    • @angular/core: 2.4.9
    • @angular/forms: 2.4.9
    • @angular/http: 2.4.9
    • @angular/platform-browser: 2.4.9
    • @angular/platform-browser-dynamic: 2.4.9
    • @angular/router: 3.4.9
    • @angular/cli: 1.0.0-rc.2
    • @angular/compiler-cli: 2.4.9

    Repro steps.

    I run ng serv / ng test or ng build and i have : "ERROR in Maximum call stack size exceeded"

    The log given by the failure.

    After "ng serve"

    $ ng serve
    ** NG Live Development Server is running on http://localhost:4200 **
    Hash: a73c4ecdb8222366629e
    Time: 16536ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 405 kB {5} [initial] [rendered]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 41.1 kB {4} [initial] [rendered]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 149 kB {5} [initial] [rendered]
    chunk    {3} scripts.bundle.js, scripts.bundle.js.map (scripts) 244 kB {5} [initial] [rendered]
    chunk    {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.75 MB [initial] [rendered]
    chunk    {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
    
    ERROR in Maximum call stack size exceeded
    webpack: Failed to compile.
    

    After I save one time and all is alright :

    $ ng serve
    ** NG Live Development Server is running on http://localhost:4200 **
    Hash: a73c4ecdb8222366629e
    Time: 16536ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 405 kB {5} [initial] [rendered]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 41.1 kB {4} [initial] [rendered]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 149 kB {5} [initial] [rendered]
    chunk    {3} scripts.bundle.js, scripts.bundle.js.map (scripts) 244 kB {5} [initial] [rendered]
    chunk    {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.75 MB [initial] [rendered]
    chunk    {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
    
    ERROR in Maximum call stack size exceeded
    webpack: Failed to compile.
    webpack: Compiling...
    Hash: 02fd7618c3e2de3db52e
    Time: 9915ms
    chunk    {0} 0.chunk.js, 0.chunk.js.map 926 kB {1} {2} {3} {5} [rendered]
    chunk    {1} 1.chunk.js, 1.chunk.js.map 397 kB {0} {2} {3} {5} [rendered]
    chunk    {2} 2.chunk.js, 2.chunk.js.map 33.1 kB {0} {1} {3} {5} [rendered]
    chunk    {3} 3.chunk.js, 3.chunk.js.map 2.96 kB {0} {1} {2} {5} [rendered]
    chunk    {4} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 405 kB {9} [initial] [rendered]
    chunk    {5} main.bundle.js, main.bundle.js.map (main) 41.1 kB {8} [initial] [rendered]
    chunk    {6} styles.bundle.js, styles.bundle.js.map (styles) 149 kB {9} [initial] [rendered]
    chunk    {7} scripts.bundle.js, scripts.bundle.js.map (scripts) 244 kB {9} [initial] [rendered]
    chunk    {8} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.75 MB [initial] [rendered]
    chunk    {9} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
    webpack: Compiled successfully.
    

    And for "ng test" is same.

    Any idea to resolve this ?

    • Parikh Vaibhav
      Parikh Vaibhav almost 7 years
      Did you resolve this?
  • thewaywewere
    thewaywewere almost 7 years
    Welcome to SO. Please read this how-to-answer and follow the guidelines.
  • Parikh Vaibhav
    Parikh Vaibhav almost 7 years
    I can build a common module in case where I have to use shared components, pipes or directives, what if I want to load a module containing routes as well? check out below SO question. stackoverflow.com/questions/43907450/…
  • Evan Kleiner
    Evan Kleiner almost 3 years
    Can you add an explanation of why you did this and how it fixed the issue?
  • perepm
    perepm over 2 years
    To me, this resulted in the same error message.