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

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.

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

@sumitarora

@sumitarora any tentative timeline for this issue?

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)

@mikeumus

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

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.

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

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

@vaibhavbparikh

@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

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

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/

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 {}

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

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

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

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

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

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

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.}

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

Navigation Menu

Repository navigation

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

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.

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

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.

Activity

vaibhavbparikh commented on May 14, 2017

vaibhavbparikh commented on May 15, 2017

mikeumus commented on May 25, 2017

vaibhavbparikh commented on May 26, 2017

mikeumus commented on May 27, 2017

ricardotorre commented on Jun 5, 2017

9 remaining items

fearless23 commented on Oct 30, 2017

AnthonyNahas commented on Nov 9, 2017

ricardotorre commented on Nov 10, 2017

christofferskog commented on Nov 15, 2017

ricardotorre commented on Nov 15, 2017

vugar005 commented on Sep 4, 2018

chaitanyagawande commented on Nov 7, 2018

appify-ArsalanJaved commented on Jan 29, 2019

vigneshTheDev commented on Apr 28, 2019

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

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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