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

Question

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 ?

Did you resolve this?

Parikh Vaibhav
– Parikh Vaibhav

2017-05-11 08:02:59 +00:00
Commented May 11, 2017 at 8:02 — Parikh Vaibhav
– Parikh Vaibhav, Commented May 11, 2017 at 8:02

Ömer · Accepted Answer · 2017-05-04 07:30:26Z

35

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.

edited May 4, 2017 at 7:30

answered May 3, 2017 at 17:40

Ömer

5364 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Parikh Vaibhav Over a year ago

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/…

Alan Crevon · Accepted Answer · 2017-06-05 11:59:54Z

22

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.

answered Jun 5, 2017 at 11:59

Alan Crevon

2212 silver badges3 bronze badges

1 Comment

perepm Over a year ago

To me, this resulted in the same error message.

armyllc · Accepted Answer · 2018-04-19 20:00:13Z

5

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.

answered Apr 19, 2018 at 20:00

armyllc

1762 silver badges7 bronze badges

Comments

Adithya Sai · Accepted Answer · 2017-11-29 13:11:08Z

2

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

answered Nov 29, 2017 at 13:11

Adithya Sai

1,7504 gold badges22 silver badges35 bronze badges

Comments

Sathish Kotha · Accepted Answer · 2018-12-17 11:51:29Z

0

I have faced this issue.I forgot to import my feature router module to feature module, so i got the above error. hope it helps others..

answered Dec 17, 2018 at 11:51

Sathish Kotha

1,1213 gold badges17 silver badges31 bronze badges

Comments

Boommeister · Accepted Answer · 2022-03-02 12:25:29Z

0

Deleting the node_modules folder, then running npm install and ng serve again did the trick for me.

Got the tip from here: https://github.com/angular/angular-cli/issues/17106

answered Mar 2, 2022 at 12:25

Boommeister

2,1574 gold badges34 silver badges67 bronze badges

Comments

Ron Rebennack · Accepted Answer · 2022-07-07 16:33:08Z

0

In my case I put a component in the wrong sub-module. Kind of a cryptic error for a misplaced componnet. For example:

src
|-account
    |-account.modue.ts
|-admin
    |-admin.module.ts
    |-users
        |-user-maintenance.component.ts


account.module.ts
   ...
   @NgModule({
       declarations: [
           UserMaintenanceComponent   // this should be in admin.module.ts
   ...

answered Jul 7, 2022 at 16:33

Ron Rebennack

2,8721 gold badge24 silver badges19 bronze badges

Comments

satish kumar V · Accepted Answer · 2022-09-14 08:24:54Z

0

I got this error due to circular dependency of modules import.

A -> B, B -> A,

I have solved this just by removing A from B and added to app.module.ts.

answered Sep 14, 2022 at 8:24

satish kumar V

1,7558 gold badges34 silver badges49 bronze badges

Comments

Dimple · Accepted Answer · 2019-09-17 14:16:50Z

-1

When I have got an

Error in maximum call stack exceeded

Resolved using following command:

ng build --prod --base-href "PATH OF SERVER" --aot=false --build-optimizer=false

edited Sep 17, 2019 at 14:16

Dimple

7861 gold badge11 silver badges27 bronze badges

answered Sep 17, 2019 at 13:39

revathi badula

1

1 Comment

Evan Kleiner Over a year ago

Can you add an explanation of why you did this and how it fixed the issue?

Collectives™ on Stack Overflow

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

Versions.

Repro steps.

The log given by the failure.

9 Answers 9

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Versions.

Repro steps.

The log given by the failure.

9 Answers 9

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related