Angular 7中同名模块冲突问题及保留同名的可行方案咨询

这个问题我之前也碰到过！Angular里在不同父模块下使用同名的Dashboard模块，确实会让Webpack的上下文解析机制出现混淆，导致出现ERROR in NaN这类模糊报错。不过别担心，有几种靠谱的方法能保留你的目录结构，同时解决这个问题：

方法1：给模块类名添加前缀区分 #

这是最推荐的方案，不需要修改目录和文件名，只需要调整模块的类名，让Webpack能通过类名区分不同模块：

• 在/app/admin/dashboard/dashboard.module.ts里，把模块类名改成：

  @NgModule({
    // ... 其他配置
  })
  export class AdminDashboardModule { }
  

• 在/app/technician/dashboard/dashboard.module.ts里，改成：

  @NgModule({
    // ... 其他配置
  })
  export class TechnicianDashboardModule { }
  

• 最后在对应的父模块（AdminModule和TechnicianModule）以及路由配置里，导入对应的类名即可，比如Admin模块的路由里要导入AdminDashboardModule。

方法2：通过tsconfig路径别名明确指向 #

可以在项目根目录的tsconfig.json里配置路径别名，让Webpack能精准定位到不同的模块文件：

打开tsconfig.json，在compilerOptions里添加paths配置：

{
  "compilerOptions": {
    // ... 其他配置
    "paths": {
      "@admin/dashboard": ["app/admin/dashboard/dashboard.module.ts"],
      "@technician/dashboard": ["app/technician/dashboard/dashboard.module.ts"]
    }
  }
}

之后在需要导入模块的地方，直接用别名导入：

// Admin模块里导入
import { DashboardModule } from '@admin/dashboard';
// Technician模块里导入
import { DashboardModule } from '@technician/dashboard';

这样Webpack就能明确区分两个模块的加载路径，不会再出现上下文混淆。

方法3：给模块文件添加后缀区分（可选） #

如果愿意微调文件名，也可以直接给两个模块文件加上父模块前缀，比如：

• 将/app/admin/dashboard/dashboard.module.ts改名为admin-dashboard.module.ts
• 将/app/technician/dashboard/dashboard.module.ts改名为technician-dashboard.module.ts
  这种方式最直观，从文件名上就完全区分开，能彻底避免Webpack的上下文识别问题。

内容的提问来源于stack exchange，提问作者Anuj TBE