CODEWITHSUNDEEP
angularlazy-loading
user2010955
user2010955

Reputation: 4011

Runtime compiler is not loaded with Angular 8 and lazy module

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"
    ]
  }
}

Upvotes: 16

Views: 9990

Answers (3)

Stéphane Maleyrie
Stéphane Maleyrie

Reputation: 120

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 !

Upvotes: 0

Dev M
Dev M

Reputation: 1709

this syntax worked for me:

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

Upvotes: 6

user2010955
user2010955

Reputation: 4011

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.

Upvotes: 23

Related Questions