Angular4生产环境部署至服务器出现No provider for e!错误求助

这个错误的核心原因是生产环境构建时的代码混淆压缩，把原本的服务/依赖名称替换成了短变量名（比如e），所以我们需要先定位到真实的依赖，再针对性解决。下面是一步步的解决方案：

1. 定位真实的依赖名称 #

首先，我们需要生成source map来反混淆错误信息，找到对应的原始代码：

• 运行生产构建时加上source map参数：

  ng build --prod --source-map
  

• 把构建后的文件部署到服务器，打开浏览器开发者工具（F12），找到错误对应的栈信息，点击对应的文件链接（比如vendor.c6cd506179cfc8072419.bundle.js），浏览器会自动通过source map映射到原始的TypeScript代码，这样就能看到e对应的真实服务/类是什么。

2. 检查依赖注入的常见问题 #

根据定位到的真实依赖，排查以下常见问题：

• 服务未在NgModule的providers数组中注册：如果是你自己写的服务，确保它被添加到对应的模块（比如AppModule或者功能模块）的providers里，并且加上了@Injectable()装饰器。
• 第三方库的兼容性问题：从你的版本信息来看，你使用的@angular/material: 5.2.5和Angular: 4.4.7版本不兼容！Material 5.x系列是对应Angular 5.x的，Angular 4.x应该使用Material 2.x的版本（比如@angular/material@2.0.0-beta.12）。版本不匹配会导致内部依赖注入失败，这很可能是你遇到的核心问题。
• Tree Shaking误删依赖：某些第三方库可能在生产构建时被Tree Shaking误移除，你可以在angular-cli.json（Angular CLI 1.x的配置文件）里配置vendorChunk: true，或者在tsconfig.json里设置"compilerOptions": { "module": "es2015" }确保Tree Shaking正确识别依赖。
• 懒加载模块的providers重复注册：如果某个服务在多个懒加载模块里注册，可能导致生产环境下的注入冲突，建议把共享服务放到根模块或者Core模块里统一注册。

3. 修复版本不兼容问题（重点） #

针对你项目中Angular 4和Material 5不兼容的问题，执行以下步骤：

1. 卸载当前的Material和CDK：

   npm uninstall @angular/material @angular/cdk
   

2. 安装对应Angular 4的版本：

   npm install @angular/material@2.0.0-beta.12 @angular/cdk@2.0.0-beta.12 --save
   

3. 重新运行生产构建：

   ng build --prod
   

   部署后再测试是否解决问题。

4. 其他排查点 #

• 检查是否有依赖循环：比如Service A依赖Service B，Service B又依赖Service A，这种情况在生产构建时会导致注入失败，可以用Angular CLI的ng lint命令检查是否有循环依赖。
• 检查是否使用了@Inject()但未正确指定令牌：比如注入自定义令牌时，有没有正确传递@Inject(TOKEN)装饰器。

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