EXCEPTION: Runtime compiler is not loaded

Loading children with a function instead of a module string path can cause production builds to raise Runtime compiler is not loaded.

In order to fix the error, look out for loadChildren declarations in the format of:

{
    path: ':id',
    component: MainComponent,
    children: [
      {
        path: '',
        loadChildren: () => SubModule
      }
    ]
  }

and change them to:

  {
    path: ':id',
    component: MainComponent,
    children: [
      {
        path: '',
        loadChildren: './sub-module/sub-module.module#SubModule'
      }
    ]
  }

I had this problem in Angular 7

The Angular 7 docs are here - https://v7.angular.io/guide/lazy-loading-ngmodules#lazy-loading-feature-modules

When I used this approach (seen in the Angular docs) I get a runtime error as follows:

loadChildren: './customers/customers.module#CustomersModule'

Could not resolve module relative to app\app.module.ts

When I used this approach AOT build would not work, failing with "Runtime compiler is not loaded":

loadChildren: () => import('./customers/customers.module').then((mod) => mod.CustomersModule)

I fixed it by adding a path to tsconfig.app.json for the customers directory as follows:

"@customers/*": ["app/customers/*"]

And using the path when lazy loading as follows:

loadChildren: '@customers/customers.module#CustomersModule'