Error #1 - Angular 7.2 - ERROR in NaN but they point to different modules
ERROR in NaNbut they point to different modules "(/src/app/modules/admin/example.module.ts and "/src/app/modules/user/example.module.ts"). Webpack cannot distinguish on context and would fail to load the proper one.
Reason:
For example, we have a project with the following structures:
src/
/app
/modules
/admin
/example
/example.module.ts
/admin.module.ts
/user
/example
/**example.module.ts**
/user.module.ts**
src/app/modules/admin/admin.module.ts
//...
const routes: Routes = [
{
path: 'example',
loadChildren: '../admin/example/example.module#ExampleModule',
},
];
//...
src/app/modules/admin/example/example.module.ts
//...
@NgModule({})
export class ExampleModule {}
//...
src/app/modules/user/user.module.ts
//...
const routes: Routes = [
{
path: 'example',
loadChildren: '../user/example/example.module#ExampleModule',
},
];
//...
src/app/modules/user/example/example.module.ts
//...
@NgModule({})
export class ExampleModule {}
//...
Solution
Change class name of ExampleModule of two modules admin and user to difference.
src/app/modules/user/example/example.module.ts
//...
@NgModule({})
- export class ExampleModule {}
+ export class UserExampleModule {}
//...
src/app/modules/admin/example/example.module.ts
//...
@NgModule({})
- export class ExampleModule {}
+ export class AdminExampleModule {}
//...
And then, update loadChildren of two parent modules.
src/app/modules/admin/admin.module.ts
//...
const routes: Routes = [
{
path: 'example',
- loadChildren: '../admin/example/example.module#ExampleModule',
+ loadChildren: '../admin/example/example.module#AdminExampleModule',
},
];
//...
src/app/modules/user/user.module.ts
//...
const routes: Routes = [
{
path: 'example',
- loadChildren: '../user/example/example.module#ExampleModule',
+ loadChildren: '../user/example/example.module#UserExampleModule',
},
];
//...