ERROR in Maximum call stack size exceeded : Feature module circular dependency #6309

vaibhavbparikh · 2017-05-14T12:43:02Z

Bug Report or Feature Request (mark with an `x`)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0-rc.2
node: 6.10.0
os: linux x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-rc.2
@angular/compiler-cli: 2.4.10

Repro steps.

STEPS TO REPRODUCE
See git repo
https://github.com/vaibhavbparikh/circular-routes

The log given by the failure.

** NG Live Development Server is running on http://localhost:4200 **
Hash: f669143e24ec08ff9586
Time: 23223ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 232 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 332 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 304 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.64 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
ERROR in Maximum call stack size exceeded
webpack: Failed to compile.

However when I do any changes in file and save it again, angular-cli compiles it again and it runs fine then.

Desired functionality.

This behaviour shall not create cyclic dependency, there should be mechanism to detect this and break.
Either it shall not compile at all or it shall not throw error at first compile.

** USE CASE **

I have 3 Feature modules in the application. Each Feature modules contains 3 or more sub feature modules with their own components and specially routes with router module.
Now consider below scenario.
I have modules as below.

Feature 1

Feature1Sub Feature 1

Feature1Sub Feature 2

Feature 2

Feature2Sub Feature 1

Feature2Sub Feature 2

Feature 3

Feature3Sub Feature 1

Feature3Sub Feature 2

Now Consider below flow.
I am loading Feature 1 -> Feature1Sub Feature 1. I want to load Feature2Sub Feature 1 directly from Feature1Sub Feature 1. Without loading whole Feature 2 module. Also, I need to maintain navigation flow with back button.
So I will need to write routes and load that module with loadchildren feature in module of Feature1Sub Feature 1.
Same way I want to load Feature1Sub Feature 1 directly from Feature2SubFeature 1 without loading whole Feature 2 module. So again I will need to write routes in Feature1Sub Feature 1 module.

As a complex and large application, there might be need to create flow where two or more modules needs each other with routing.

Mention any other details that might be useful.

The text was updated successfully, but these errors were encountered:

vaibhavbparikh · 2017-05-14T12:43:47Z

#5427
This is similar issue but it's scenario is different.

vaibhavbparikh · 2017-05-15T17:50:57Z

@sumitarora any tentative timeline for this issue?

mikeumus · 2017-05-25T18:30:13Z

I've been getting this error too and in the browser for angular/cli@1.0.3-1.0.5

Uncaught RangeError: Maximum call stack size exceeded
    at http://localhost:9000/portal/assets/dist/vendor.bundle.js:124400:56
    at Array.forEach (native)
    at DirectiveResolver._mergeWithPropertyMetadata (http://localhost:9000/portal/assets/dist/vendor.bundle.js:124400:39)
    at DirectiveResolver.resolve (http://localhost:9000/portal/assets/dist/vendor.bundle.js:124381:29)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:9000/portal/assets/dist/vendor.bundle.js:125095:64)
    at CompileMetadataResolver._getEntryComponentMetadata (http://localhost:9000/portal/assets/dist/vendor.bundle.js:125804:45)
    at http://localhost:9000/portal/assets/dist/vendor.bundle.js:125131:59
    at Array.map (native)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:9000/portal/assets/dist/vendor.bundle.js:125131:22)
    at CompileMetadataResolver._getEntryComponentMetadata (http://localhost:9000/portal/assets/dist/vendor.bundle.js:125804:45)

vaibhavbparikh · 2017-05-26T10:29:56Z

@mikeumus Can you share more details about how you are getting this error?

mikeumus · 2017-05-27T17:34:30Z

Windows 7 Pro
Angular 4.1.0
Angular CLI 1.0.5

The project still runs fine in Angular 2.4 / CLI 1.0.0-rc.2
Max exceed error in browser with dev build ng build
Max exceed in cli terminal with prod/AoT build.

ricardotorre · 2017-06-05T15:12:55Z

I am also having these problem with latest versions, I also have a module referencing it self:
Windows 10 Pro (Creators Update)
Node 6.10.3
Npm 3.10.10
Angular 4.1.3
Angular CLI 1.1.0

The weird thing is that when I use watch mode and save a file it builds successfully

ghost · 2017-06-26T11:33:34Z

I have the same problem. Compiling is ok.

angular-cli: 1.0.0-beta.28.3
node: 6.11.0
os: darwin x64

** NG Live Development Server is running on http://localhost:4200. **
10% building modules 6/9 modules 3 active ...ode_modules/style-loader/addStyles.jswebpack: wait until bundle finished: /
Hash: 9d419dcdcaa3b2128c8b
Time: 9348ms
chunk {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 232 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.map (main) 5.39 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.map (styles) 9.71 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.63 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

Error: Error in ./SimpleFormComponent class SimpleFormComponent - inline template:2:8 caused by: Maximum call stack size exceeded
at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:6871:33)

Circular dependencies, like `app.module.ts` importing `app.component.ts` which in turn imports `app.module.ts`, now display a warning during builds: ``` kamik@T460p MINGW64 /d/sandbox/master-project (master) $ ng build Hash: 3516b252f4e32d6c5bb8 Time: 8693ms chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered] chunk {1} main.bundle.js, main.bundle.js.map (main) 5.95 kB {3} [initial] [rendered] chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered] chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.88 MB [initial] [rendered] chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] WARNING in Circular dependency detected: src\app\app.module.ts -> src\app\app.component.ts -> src\app\app.module.ts WARNING in Circular dependency detected: src\app\app.component.ts -> src\app\app.module.ts -> src\app\app.component.ts ``` It is important to detect and eliminate circular dependencies because leaving them in might lead to `Maximum call stack size exceeded` errors, or imports being `undefined` at runtime. To remove these warnings from your project you can factor out the circular dependency into a separate module. For instance, if module A imports `foo` from module B, and module B imports `bar` from module A, it is enough to extract `foo` into module C. Fix angular#6309 Fix angular#6739

Circular dependencies, like `app.module.ts` importing `app.component.ts` which in turn imports `app.module.ts`, now display a warning during builds: ``` kamik@T460p MINGW64 /d/sandbox/master-project (master) $ ng build Hash: 3516b252f4e32d6c5bb8 Time: 8693ms chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered] chunk {1} main.bundle.js, main.bundle.js.map (main) 5.95 kB {3} [initial] [rendered] chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered] chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.88 MB [initial] [rendered] chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] WARNING in Circular dependency detected: src\app\app.module.ts -> src\app\app.component.ts -> src\app\app.module.ts WARNING in Circular dependency detected: src\app\app.component.ts -> src\app\app.module.ts -> src\app\app.component.ts ``` It is important to detect and eliminate circular dependencies because leaving them in might lead to `Maximum call stack size exceeded` errors, or imports being `undefined` at runtime. To remove these warnings from your project you can factor out the circular dependency into a separate module. For instance, if module A imports `foo` from module B, and module B imports `bar` from module A, it is enough to extract `foo` into module C. You can turn off these warnings by running ng set apps.0.hideCircularDependencyWarnings=true. This will add the "hideCircularDependencyWarnings": true value to your .angular-cli.json and disable the warnings. Fix angular#6309 Fix angular#6739

Circular dependencies, like `app.module.ts` importing `app.component.ts` which in turn imports `app.module.ts`, now display a warning during builds: ``` kamik@T460p MINGW64 /d/sandbox/master-project (master) $ ng build Hash: 3516b252f4e32d6c5bb8 Time: 8693ms chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered] chunk {1} main.bundle.js, main.bundle.js.map (main) 5.95 kB {3} [initial] [rendered] chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered] chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.88 MB [initial] [rendered] chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] WARNING in Circular dependency detected: src\app\app.module.ts -> src\app\app.component.ts -> src\app\app.module.ts WARNING in Circular dependency detected: src\app\app.component.ts -> src\app\app.module.ts -> src\app\app.component.ts ``` It is important to detect and eliminate circular dependencies because leaving them in might lead to `Maximum call stack size exceeded` errors, or imports being `undefined` at runtime. To remove these warnings from your project you can factor out the circular dependency into a separate module. For instance, if module A imports `foo` from module B, and module B imports `bar` from module A, it is enough to extract `foo` into module C. You can turn off these warnings by running ng set apps.0.hideCircularDependencyWarnings=true. This will add the "hideCircularDependencyWarnings": true value to your .angular-cli.json and disable the warnings. Fix #6309 Fix #6739

Circular dependencies, like `app.module.ts` importing `app.component.ts` which in turn imports `app.module.ts`, now display a warning during builds: ``` kamik@T460p MINGW64 /d/sandbox/master-project (master) $ ng build Hash: 3516b252f4e32d6c5bb8 Time: 8693ms chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered] chunk {1} main.bundle.js, main.bundle.js.map (main) 5.95 kB {3} [initial] [rendered] chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered] chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.88 MB [initial] [rendered] chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] WARNING in Circular dependency detected: src\app\app.module.ts -> src\app\app.component.ts -> src\app\app.module.ts WARNING in Circular dependency detected: src\app\app.component.ts -> src\app\app.module.ts -> src\app\app.component.ts ``` It is important to detect and eliminate circular dependencies because leaving them in might lead to `Maximum call stack size exceeded` errors, or imports being `undefined` at runtime. To remove these warnings from your project you can factor out the circular dependency into a separate module. For instance, if module A imports `foo` from module B, and module B imports `bar` from module A, it is enough to extract `foo` into module C. You can turn off these warnings by running ng set apps.0.hideCircularDependencyWarnings=true. This will add the "hideCircularDependencyWarnings": true value to your .angular-cli.json and disable the warnings. Fix angular#6309 Fix angular#6739

mikeumus · 2017-07-25T14:53:43Z

Still happening on @angular/cli@1.2.4

filipesilva · 2017-07-27T09:58:16Z

@mikeumus even after removing the circular dependencies?

ricardotorre · 2017-07-27T13:31:16Z

It is also happening to me, I also tried to activate the show dependencies flag which reported that it does not exist.

fearless23 · 2017-10-30T05:43:56Z

@vaibhavbparikh @filipesilva The lazy loaded or feature module must have a route declared.

app.routing.ts --> path="lazy" loadchildren="../lazy/lazy.module#LazyModule"

inside Lazy Module --> path=' ' component="lazyParentComponent"
path='child' loadChildren='../child/child.module#childModule

If we skip routing in lazy module or don`t give path to when lazy module is loaded it gives error

AnthonyNahas · 2017-11-09T19:55:01Z

the ERROR in Maximum call stack size exceeded happens actually when you have some infinite loop in your code.

I had the same problem with my routes.

Scenario:
i have a lazyloadmodule that does not bind any component to the view -->

{
        path: 'home',
        loadChildren: './home#HomeModule',
        pathMatch: 'full'
    },

##Before: in HomeModule -->

@NgModule({
    imports: [
       
        CommonModule
    ],
    declarations: [HomeComponent]
})
export class HomeModule {
}

##After: (Solution) in HomeModule -->

@NgModule({
    imports: [
        RouterModule.forChild([
            {path: '', component: HomeComponent, pathMatch: 'full'}
        ]),
        CommonModule
    ],
    declarations: [HomeComponent]
})
export class HomeModule {
}

i hope that could helps someone

ricardotorre · 2017-11-10T11:39:52Z

in angular5 and cli 1.5 this is working without problems!

And just a quick note, self referencing routes are a valid implementation when doing unlimited depth routes like:

/root/subroute-type1/subroute-type1/.../subroute-typeN/

christofferskog · 2017-11-15T14:44:14Z

Still happening on 1.5.0, I've got a PageModule which reference itself in it's routing. It works if I remove the circular dependency, start the app and then add it again. But not if I stop the server and start it again with the circular dependency already there. How can I solve this?

For reference, I have this router module:

const routes: Routes = [
  {
    path: '',
    component: PageComponent,
    children: [
      {
        path: ':pageId',
        loadChildren: 'app/routes/+dashboard/routes/+pages/routes/+page/page.module#PageModule'
      }
    ]
  }
];

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

export class PageRouterModule {}

Which is then imported into PageModule:

@NgModule({
  imports: [
    PageRouterModule
  ],
  exports: [PageRouterModule],
  declarations: [PageComponent]
})

export class PageModule {}

ricardotorre · 2017-11-15T15:04:45Z

are you using Angular 5? It works for me (I have a self reference too) since I upgraded to Angular 5.0.1 (I upgraded it alongside with CLI to 1.5.0 and Material to 5.0.0-rc0)

I believe this is due to the new compile-cli from angular

Circular dependencies, like `app.module.ts` importing `app.component.ts` which in turn imports `app.module.ts`, now display a warning during builds: ``` kamik@T460p MINGW64 /d/sandbox/master-project (master) $ ng build Hash: 3516b252f4e32d6c5bb8 Time: 8693ms chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered] chunk {1} main.bundle.js, main.bundle.js.map (main) 5.95 kB {3} [initial] [rendered] chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered] chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.88 MB [initial] [rendered] chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] WARNING in Circular dependency detected: src\app\app.module.ts -> src\app\app.component.ts -> src\app\app.module.ts WARNING in Circular dependency detected: src\app\app.component.ts -> src\app\app.module.ts -> src\app\app.component.ts ``` It is important to detect and eliminate circular dependencies because leaving them in might lead to `Maximum call stack size exceeded` errors, or imports being `undefined` at runtime. To remove these warnings from your project you can factor out the circular dependency into a separate module. For instance, if module A imports `foo` from module B, and module B imports `bar` from module A, it is enough to extract `foo` into module C. You can turn off these warnings by running ng set apps.0.hideCircularDependencyWarnings=true. This will add the "hideCircularDependencyWarnings": true value to your .angular-cli.json and disable the warnings. Fix angular#6309 Fix angular#6739

vugar005 · 2018-09-04T07:00:31Z

In my situation it was because feature module was not importing its child routes.
This solved my issue.

chaitanyagawande · 2018-11-07T08:49:55Z

In my situation, this issue occurred because same name of two components.

appify-ArsalanJaved · 2019-01-29T07:31:55Z

In my case i'ám using reactive forms and formControlName and ID was same that's why function oninput was calling in loop.

vigneshTheDev · 2019-04-28T19:54:38Z

In my case, the changes were not reflecting in the browser. I had to save lazyModule and lazyRoutingModule again :|

angular-automatic-lock-bot · 2019-09-09T12:41:27Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

vaibhavbparikh mentioned this issue May 14, 2017

Error in Maximum call stack size exceeded #5427

Closed

2 tasks

sumitarora self-assigned this May 15, 2017

sumitarora added type: bug/fix freq2: medium P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels May 15, 2017

filipesilva mentioned this issue Jun 26, 2017

DirectoryWatcher crashes during ng-serve #6749

Closed

filipesilva mentioned this issue Jun 27, 2017

feat(@angular/cli): add circular dependency detection #6813

Merged

filipesilva closed this as completed in #6813 Jun 27, 2017

vugar005 unassigned sumitarora Sep 4, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ERROR in Maximum call stack size exceeded : Feature module circular dependency #6309

ERROR in Maximum call stack size exceeded : Feature module circular dependency #6309

vaibhavbparikh commented May 14, 2017

vaibhavbparikh commented May 14, 2017 •

edited

Loading

vaibhavbparikh commented May 15, 2017

mikeumus commented May 25, 2017 •

edited

Loading

vaibhavbparikh commented May 26, 2017

mikeumus commented May 27, 2017

ricardotorre commented Jun 5, 2017

ghost commented Jun 26, 2017

mikeumus commented Jul 25, 2017

filipesilva commented Jul 27, 2017

ricardotorre commented Jul 27, 2017

fearless23 commented Oct 30, 2017

AnthonyNahas commented Nov 9, 2017

ricardotorre commented Nov 10, 2017 •

edited

Loading

christofferskog commented Nov 15, 2017 •

edited

Loading

ricardotorre commented Nov 15, 2017

vugar005 commented Sep 4, 2018

chaitanyagawande commented Nov 7, 2018

appify-ArsalanJaved commented Jan 29, 2019

vigneshTheDev commented Apr 28, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

ERROR in Maximum call stack size exceeded : Feature module circular dependency #6309

ERROR in Maximum call stack size exceeded : Feature module circular dependency #6309

Comments

vaibhavbparikh commented May 14, 2017

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

vaibhavbparikh commented May 14, 2017 • edited Loading

vaibhavbparikh commented May 15, 2017

mikeumus commented May 25, 2017 • edited Loading

vaibhavbparikh commented May 26, 2017

mikeumus commented May 27, 2017

ricardotorre commented Jun 5, 2017

ghost commented Jun 26, 2017

mikeumus commented Jul 25, 2017

filipesilva commented Jul 27, 2017

ricardotorre commented Jul 27, 2017

fearless23 commented Oct 30, 2017

AnthonyNahas commented Nov 9, 2017

ricardotorre commented Nov 10, 2017 • edited Loading

christofferskog commented Nov 15, 2017 • edited Loading

ricardotorre commented Nov 15, 2017

vugar005 commented Sep 4, 2018

chaitanyagawande commented Nov 7, 2018

appify-ArsalanJaved commented Jan 29, 2019

vigneshTheDev commented Apr 28, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

Bug Report or Feature Request (mark with an `x`)

vaibhavbparikh commented May 14, 2017 •

edited

Loading

mikeumus commented May 25, 2017 •

edited

Loading

ricardotorre commented Nov 10, 2017 •

edited

Loading

christofferskog commented Nov 15, 2017 •

edited

Loading