Angular DI无法解析不同WEBPACK_IMPORTED_MODULE中MatLegacySelect令牌求助

1. 动态导入的模块隔离与Webpack打包策略冲突 #

动态导入会触发Webpack生成独立的代码chunk，即便你把@angular/material/legacy-select设为external，如果external配置没有完全覆盖动态导入模块的依赖解析路径，Webpack可能会把MatLegacySelect的代码重复打包进动态chunk中。这就导致主应用和动态导入的模块各自持有一份MatLegacySelect的类实例，二者的引用地址完全不同。

2. Angular DI的令牌匹配规则 #

Angular依赖注入的核心是令牌的引用相等性——只有当两个提供者的令牌（这里就是MatLegacySelect类本身）是同一个内存引用时，DI才会认为它们是同一个依赖。如果动态chunk里的MatLegacySelect和主应用的不是同一个实例，Angular会判定动态导入组件的DI容器中缺少对应的提供者，哪怕你在主模块里已经注册过。

3. Peer依赖配置的细节疏漏 #

• 若你的peerDependencies中@angular/material的版本范围太宽泛（比如^14.0.0），而主应用和动态导入模块实际安装的小版本不一致，可能会导致Webpack解析到不同的文件路径，生成两份副本。
• 部分构建工具（如Angular CLI的自定义Webpack配置）可能需要额外配置，确保动态导入模块的peer依赖完全复用主应用的版本，而不是单独打包。

4. 模块格式或解析规则不一致 #

如果主应用使用ES模块格式，而动态导入的模块被编译为CommonJS格式，或者Webpack的resolve配置（如mainFields、extensions）在不同chunk中有差异，会导致MatLegacySelect被解析为不同的模块实例，进而触发DI令牌不匹配的问题。

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