Getting Error while "ng serve" Cannot read property 'loadChildren' of undefined

Question

I am working on my project i wanna to lazy load my modules,and it's working fine but while i am "ng serve" m code i am getting this error "Cannot read property 'loadChildren' of undefined"

Here is my app routing module

export const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full',
    canActivate: [AuthGuard]
  },
  { path: 'login', component: LoginComponent },
  {
    path: 'corrrisk',
    component: WelcomeComponent,
    children: [
      { path: '', component: CorrriskHomeComponent, pathMatch: 'full' },
      {
        path: 'security',
        loadChildren: './modules/security/security.module#CorrSecurityModule' ,
        data: { preload: false }
      },
      {
        path: 'setup',
        loadChildren: './modules/setup/setup.module#CorrSetupModule',
        data: { preload: true }
      },
      {
        path: 'limit',
        loadChildren: './modules/limits/limits.module#CorrLimitModule'
      },
      {
        path: 'businesspolicy',
        loadChildren:
          './modules/businesspolicy/businesspolicy.module#CorrBusinessPolicyModule',
        data: { preload: false }
      }
    ]
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {
      preloadingStrategy: SelectivePreloadingStrategy
    })
  ],
  exports: [RouterModule],
  providers: [SelectivePreloadingStrategy]
})
export class AppRoutingModule {}

Here is my app module code

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    WelcomeComponent,
    CorrriskHomeComponent,
   ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule,
    DxAccordionModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    DevExtremeModule,
    CorrOperationsModule,
    CorrCommonModule,
    CorrMISModule,
    NgReduxModule
  ],
  providers: [
    httpInterceptorProviders,
    appStoreProviders,
    { provide: LOCALE_ID, useValue: 'en-US' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(
    ngRedux: NgRedux<any>,
    @Inject(AppStore) public store: Redux.Store<AppStateRedux>,
    overlayContainer: OverlayContainer
  ) {
    overlayContainer.getContainerElement().classList.add('unicorn-dark-theme');
    ngRedux.configureStore(rootReducer, {}, [thunk], []);
  }
}

when i place space in app routing file it compile well. Kindly tell me what is issue in above code.

Answer 1

I was able to fix the error by activating the Ivy renderer with AOT:

https://angular.io/guide/ivy#aot-and-ivy

You can activate it in the angular.json

{
  "projects": {
    "my-existing-project": {
      "architect": {
        "build": {
          "options": {
            ...
            "aot": true,
          }
        }
      }
    }
  }
}