I am using Angular 13 and created a myapp.mainrouting.js file and trying to declare loadChildren as below:
import {CustomerAppHomeComponent} from "../Home/CustomerApp.HomeComponent";
import {Routes} from "@angular/router";
export const MainRoutes: Routes = [
{ path: 'Home', component: CustomerAppHomeComponent },
{ path: 'Supplier', loadChildren: '../Supplier/CustomerApp.SupplierModule#CustomerAppSupplierModule' },
{ path: '', component: CustomerAppHomeComponent },
]
However, I am getting below error:
error TS2322: Type 'string' is not assignable to type 'LoadChildrenCallback | undefined'.
8 { path: 'Supplier', loadChildren: '../Supplier/CustomerApp.SupplierModule#CustomerAppSupplierModule' },
~~~~~~~~~~~~
node_modules/@angular/router/router.d.ts:1998:5
1998 loadChildren?: LoadChildren;
~~~~~~~~~~~~
The expected type comes from property 'loadChildren' which is declared here on type 'Route'
For dynamic imports you'll need to update this
{ path: 'Supplier', loadChildren: '../Supplier/CustomerApp.SupplierModule#CustomerAppSupplierModule' },
To this:
{
path: 'Supplier',
loadChildren: () => import('../Supplier/CustomerApp.SupplierModule').then(x => x.CustomerAppSupplierModule)
},
Also double check that in your tsconfig.json you have this line "module": "esnext"
{
...
"compilerOptions": {
...
"module": "esnext"
...
}
}