Solvedangular cli 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


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

See git repo

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) 232 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, (main) 332 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, (styles) 304 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, (vendor) 5.64 MB [initial] [rendered]
chunk {4} inline.bundle.js, (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.

21 Answers

✔️Accepted Answer

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.

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

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

##Before: in HomeModule -->

    imports: [
    declarations: [HomeComponent]
export class HomeModule {

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

    imports: [
            {path: '', component: HomeComponent, pathMatch: 'full'}
    declarations: [HomeComponent]
export class HomeModule {

i hope that could helps someone

Other Answers:

@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

More Issues: