Runtime compiler is not loaded with Angular 8 and lazy module

user_2010955 0
Viewed 9631

I've created a new Angular 8 project with @angular/cli -> ng new, added a new lazy module, with ng serve is working fine, but with ng build --prod it raises the following error:

enter image description here

Here is my app.module.ts

@NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Here is my app-routing.module.ts

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    loadChildren: () => import(`./dashboard/dashboard.module`).then(m => m.DashboardModule),
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

Here is my dashboard.module.ts

@NgModule({
  imports: [
    DashboardRoutingModule
  ],
  declarations: [
    DashboardComponent,
  ]
})
export class DashboardModule { }

Here is my dashboard-routing.module.ts

const ROUTES: Routes = [
  {
    path: '',
    component: DashboardComponent
  }
];

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

This is my tsconfig.json (default)

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}
angular lazy-loading
3 Answers

I think I've solved the issue, the problem was with this line:

loadChildren: () => import(`./dashboard/dashboard.module`)

I was using the backticks, replacing them with the normal single-quote '', it works fine.

user_20109550

this syntax worked for me:

{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule'}
user_13082360

I had the same problem, and solved it by having my loadchildren in just one line, and not many (because of 120 caracts limit on my sonar !) I'm using Angular 10

Ko :

{
    path: "my-big-page",
    loadChildren: () => import("./pages/path-to-page/path-to-page/path-to-page/" +
    "ppage.module").then(
    m => m.MyPagePageModule),
},

Ok :

{
    path: "my-big-page",
    loadChildren: () => import("./pages/path-to-page/path-to-page/path-to-page/ppage.module").then(m => m.MyPagePageModule),
},

The string in the import must be a strict string !

user_24086880
Related