Compile error for Lazy loading in angular

Question

I'm working on lazy loading in angular. i had created a new module named "Offers", in that folder itself I had created the component named "Offers".

app-routing.module.ts :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { OrdersComponent } from './orders/orders.component';
const routes: Routes = [
 { path:"" , component:HomeComponent},
 { path:"Home" , component:HomeComponent},
 { path:"Orders" , component:OrdersComponent},
 {path:"Offers", loadChildren:'./Offers/Offers.module'},
];

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

I had used loadchildred to load the lazy module(Offers) which needs to display on demand.

Offers-routing.module.ts :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OffersComponent } from '../offers/offers.component';


const routes: Routes = [
  {path:"" , component:OffersComponent}
];

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

appcomponent.html :

<div style="text-align:center">
<a [routerLink]="['/']">Products</a>
<a [routerLink]="['/Orders']">My Orders</a>
<a [routerLink]="['/Offers']">Offers</a>
</div>
<div>
<router-outlet>

</router-outlet>
</div>

Currently on compile, I'm getting the following error :

"ERROR in ./src/app/Offers/Offers.module.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: G:\AngularTest\Lazyload\src\app\Offers\Offers.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at AngularCompilerPlugin.getCompiledFile (G:\AngularTest\Lazyload\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:913:23) at G:\AngularTest\Lazyload\node_modules@ngtools\webpack\src\loader.js:41:31 at processTicksAndRejections (internal/process/task_queues.js:93:5)"

Gérôme Grignon · Accepted Answer · 2020-07-30 13:32:40Z

2

You need to fix the expected syntax on loadChildren :

{path:"Offers", loadChildren:'./offers/offers.module#OffersModule'}

With newer apps and the official docs, you might find the new syntax with javascript dynamic import :

{
  path:"Offers",
  loadChildren: () => import('./offers/offers.module').then(m => m.OffersModule)
}

edited Jul 30, 2020 at 13:32

answered Jul 30, 2020 at 13:24

Gérôme Grignon

4,2581 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Philipp Meissner Over a year ago

Did you also make sure to check for typos in capitalization? (Offers.module vs offers.module)

Gérôme Grignon Over a year ago

there is a typo into the folder name : it's offers, not Offers

Srikanth Reddy Over a year ago

Thnaks, It's worked with small 'o' instead of capital 'O'.

Collectives™ on Stack Overflow

Compile error for Lazy loading in angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related