HomePostsGithub

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',
	},
];
//...
<-- Back to Posts