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

[vaibhavbparikh]

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.

[vaibhavbparikh]

https://github.com/angular/angular-cli/issues/5427
This is similar issue but it's scenario is different.

[vaibhavbparikh]

@sumitarora any tentative timeline for this issue?

[mikeumus]

I've been getting this error too and in the browser for angular/[email protected]

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]

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

[mikeumus]

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]

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]

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)

[mikeumus]

Still happening on @angular/[email protected]

[filipesilva]

@mikeumus even after removing the circular dependencies?

[ricardotorre]

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

[fearless23]

@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]

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]

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]

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]

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

[vugar005]

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

[chaitanyagawande]

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

[appify-ArsalanJaved]

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

[vigneshTheDev]

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

[angular-automatic-lock-bot[bot]]

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