Angular 7 nested lazy loading issue

Question

I'm using nested lazy loading in my project app.routing.ts

const routes: Routes = [
  { path: '', loadChildren: './user-panel/user-panel.module#UserPanelModule' },
];

export const Routing: ModuleWithProvidButers = RouterModule.forRoot(routes);

and my user-panel.routing.ts

const routes: Routes = [
  {
    path: '',
    component: UserPanelComponent,
    children: [
      { path: '', loadChildren: './pages/home/home.module#HomeModule' },
    ]
  }
];

export const Routing: ModuleWithProviders = RouterModule.forChild(routes);

But when i use child routing i'm getting this error

ERROR RangeError: Maximum call stack size exceeded

Possible duplicate of RangeError: Maximum call stack size exceeded Lazy routing Angular 2 — Raja Mohamed
– Raja Mohamed, Commented May 17, 2019 at 10:16

Shubham Sali · Accepted Answer · 2019-05-17 11:08:34Z

0

I suggest You please follow the same:-

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 17, 2019 at 11:08

answered May 17, 2019 at 10:53

Shubham Sali

4822 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Angular 7 nested lazy loading issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related