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:
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"
]
}
}
To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. content_copy const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) } ];
In web developer tools look for file/component (for which lazy-loading is applied). If the file is present even before loading of the module then lazy loading is not working (component shouldn't be visible before module is loaded). The same file will be shown after that module has been loaded.
Lazy loading helps us to download the web pages in chunks instead of downloading everything in a big bundle. To implement the Lazy Loading in Angular we need to create a routing module and a module. ts file for the component we need to lazy load. In the above image, we have created two files which are posts-routing.
Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles. When the user navigates through the app, the bundles are loaded as required.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With