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

Answer 1

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.