Angular Development - loadChildren Duplicate Path Issue

Angular development modularizes all resources. As web systems grow larger, lazy loading is often used to improve performance. However, due to design reasons, the following design situation may occur:

The specific lazy loading code looks like this:

Running this configuration will result in the following error:

ERROR in Duplicated path in loadChildren detected: "./security/security.module#SecurityModule" is used in 2 loadChildren, but they point to different modules "(/Users/heqiang/GitHub/angular-demo/src/app/parent/child/security/security.module.ts and "/Users/heqiang/GitHub/angular-demo/src/app/security/security.module.ts"). Webpack cannot distinguish on context and would fail to load the proper one.

Solutions

• In the official repository issues, the community suggested using absolute paths for configuration
• Modify module names and the folder names where modules are located. If they’re different, there won’t be a duplication problem

Analyzing this issue, it’s actually due to limitations in the official CLI tool. Hopefully future versions can resolve this.