Angular maximum call stack error when lazy loading

Question

There are some similar discussions, but the solutions did not work. I've attempted to recreate the module a couple of times now and Angular still throws the error Maximum call stack size exceeded. The admin component is brand new as well. All of these have been generated using CLI.

Here's my code:

App Routing

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './guards/auth/auth.guard';

const routes: Routes = [
  {
    path: 'dashboard',
    pathMatch: 'full',
    data: { authorized: [true] },
    canActivate: [AuthGuard],
    loadChildren: () =>
      import('./modules/feature/dashboard/dashboard.module').then(
        (m) => m.DashboardModule
      ),
  },
  ///// this admin import is the issue and I know this because if I comment it out then the app works 
  ///// fine...
  {
    path: 'admin',
    pathMatch: 'full',
    data: { authorized: [true] },
    canActivate: [AuthGuard],
    loadChildren: () =>
      import('./modules/feature/admin/admin.module').then((m) => m.AdminModule),
  },
  {
    path: '',
    pathMatch: 'full',
    data: { authorized: [false] },
    loadChildren: () =>
      import('./modules/feature/website/website.module').then(
        (m) => m.WebsiteModule
      ),
  },
  // {
  //   path: '*',
  //   component: MainComponent,
  //   data: { authorized: [false] },
  // },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from 'src/app/routing/feature/admin-routing/admin-routing.module';
import { AdminComponent } from 'src/app/components/feature/admin/admin.component';
import { AdminService } from 'src/app/services/feature/admin.service';

@NgModule({
  declarations: [AdminComponent],
  imports: [CommonModule, AdminRoutingModule],
  providers: [AdminService],
})
export class AdminModule {}

Admin Routing

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from 'src/app/components/feature/admin/admin.component';

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class AdminRoutingModule {}

Kota · Accepted Answer · 2021-01-09 05:26:52Z

2

Sometimes you bang your head against the wall because you've looked over your code a hundred times. Knowing good and well that it's not an error on your end. To find that the error can be solved via something simple. Like stopping the server, closing visual studio....re-opening visual studio and re-booting the server.

Which btw, solved my issue.

answered Jan 9, 2021 at 5:26

Kota

1671 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Angular maximum call stack error when lazy loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related