升级至Webpack 4后Angular应用出现InjectionToken Config无提供者错误

刚把Webpack从2升到4就碰到这个DI错误？我之前帮不少开发者解决过类似问题——这个报错本质是Angular的依赖注入系统找不到名为config的InjectionToken对应的提供者，结合Webpack版本升级的背景，大概率是打包规则变化、依赖注册不规范或者模块解析差异导致的，咱们一步步来排查解决：

1. 先确认config注入令牌的定义与注册是否正确 #

首先得找到你的config InjectionToken是在哪里定义的，比如可能在单独的token文件或者某个服务里：

// 示例：config.token.ts
import { InjectionToken } from '@angular/core';

// 注意这里的命名和字符串标识要统一
export const CONFIG = new InjectionToken('config');

接下来必须确保这个令牌在你的@NgModule的providers数组里正确注册了提供者，比如用useValue、useFactory或者useClass：

import { NgModule } from '@angular/core';
import { CONFIG } from './config.token';

@NgModule({
  declarations: [AppComponent],
  providers: [
    // 根据你的实际配置类型选择合适的提供者方式
    { provide: CONFIG, useValue: { apiBaseUrl: 'https://your-api-domain.com', timeout: 3000 } }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

划重点：Webpack 4的模块解析比2严格得多，如果你的令牌是从第三方库或内部模块导出的，别混用默认导出和命名导出，否则很容易被Webpack的tree-shaking误判为“未使用代码”给删掉。

2. 排查Webpack升级带来的模块打包问题 #

Webpack 4和2在模块处理上有几个关键差异，很可能是问题根源：

• 激进的Tree-shaking：Webpack 4的tree-shaking优化更狠，如果你的config令牌所在模块没有被代码明确引用（比如动态注入的场景），可能会被误删。可以先在Webpack配置里临时关闭optimization.usedExports测试：

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: false
  }
};

如果关闭后错误消失，那就要调整代码，确保令牌被明确引用，或者给Webpack配置添加该模块的保留规则。

• 模块导出/导入不匹配：如果你的令牌用export default导出，但注入时用了命名导入import { CONFIG } from ...，Webpack 4可能无法正确解析这个关联，导致DI找不到令牌。统一成命名导出和导入就好，就是我上面示例里的写法。
• Angular版本兼容性：Webpack 4只支持Angular 5及以上版本，如果你的Angular版本还停留在4或更早，升级Webpack后肯定会出现各种奇怪的DI问题。打开package.json看看@angular/core的版本，升级到和Webpack 4兼容的版本（比如Angular 5+）。

3. 检查依赖该令牌的服务（比如你的WsBootstrapService） #

看你代码里提到了WsBootstrapService，如果这个服务依赖config令牌，要做好两点：

• 服务的构造函数里必须用@Inject()装饰器明确指定注入的令牌：

import { Injectable, Inject } from '@angular/core';
import { CONFIG } from './config.token';

@Injectable({ providedIn: 'root' }) // 或者在模块providers里注册
export class WsBootstrapService {
  // 这里一定要加@Inject(CONFIG)，不然Angular不知道要注入什么
  constructor(@Inject(CONFIG) private appConfig: any) { 
    // 用config做初始化操作
  }
}

• 如果这个服务是在AppModule的providers里注册的，要确保CONFIG令牌的提供者已经在同一个模块或者更高层级的模块（比如SharedModule）里注册了，DI系统是按模块层级查找提供者的。

4. 清理缓存，重新构建 #

Webpack升级后，旧的node_modules缓存、构建缓存很可能导致各种玄学问题，按顺序执行以下操作：

• 删除node_modules文件夹，然后重新执行npm install（或yarn install）
• 删除你的构建输出目录（比如dist）
• 执行构建命令时加上--no-cache参数，比如webpack --no-cache，强制Webpack不使用旧缓存

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