Angular 5.2.9生产构建报错：ng build正常但生产构建抛注入错误

嘿，我碰到过好多次Angular生产构建这种注入错误了，别慌，咱们一步步来解决它！

这个错误的本质是：生产构建时Angular会对代码做压缩混淆，把类名、变量名改成像n这种短标识，导致依赖注入系统找不到对应的服务提供者。开发环境下没有混淆，类名清晰，所以运行正常，但生产模式就暴露出问题了。

下面是具体的排查和解决步骤：

1. 检查服务的模块注册情况 #

Angular 5还没有providedIn: 'root'这个语法（这是Angular 6才引入的），所以所有服务必须在对应的@NgModule的providers数组里声明：

• 如果是全局服务，就在AppModule的providers里添加；
• 如果是某个功能模块的服务，就在该功能模块的providers里注册。

举个例子，假设你有个UserService：

// user.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class UserService {
  // 服务逻辑
}

你需要在模块里注册它：

// app.module.ts
import { NgModule } from '@angular/core';
import { UserService } from './user.service';

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [UserService], // 关键：这里注册服务
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 排查自定义注入令牌（InjectionToken） #

如果你用了自定义的注入令牌，比如配置项：

import { InjectionToken } from '@angular/core';

export const API_BASE_URL = new InjectionToken<string>('apiBaseUrl');

那必须在模块的providers里为这个令牌提供具体的值：

@NgModule({
  providers: [
    { 
      provide: API_BASE_URL, 
      useValue: 'https://your-api-domain.com' 
    }
  ]
})
export class AppModule { }

漏了这一步就会导致生产构建时找不到对应提供者。

3. 检查懒加载模块的依赖 #

如果错误出在懒加载模块里，要注意：

• 懒加载模块的服务如果是模块内私有的，要在该模块的providers里注册；
• 如果是全局共享服务，应该在根模块注册，避免在懒加载模块重复注册导致多个实例。

4. 临时关闭混淆定位具体类 #

如果以上步骤还没找到问题，可以临时关闭生产构建的混淆，看看错误里的n到底对应哪个类：
打开.angular-cli.json（Angular 5的配置文件），找到defaults下的build -> production配置，添加：

"production": {
  "optimization": false,
  "sourceMap": true
}

重新执行ng build --prod，此时错误信息里的n会变成真实的类名，能快速定位到哪个服务没注册。

5. 排查循环依赖 #

如果服务之间存在循环依赖（比如Service A注入Service B，Service B又注入Service A），也会导致注入失败。这种情况需要重构代码：

• 可以用Injector手动获取依赖，而不是在构造函数里直接注入；
• 或者拆分服务职责，消除循环依赖。

内容的提问来源于stack exchange，提问作者Mubeen Rafiq Fattani