Angular+PrimeNG+StoryBook中InjectionToken app.config无提供者错误求助

AI 小北

2026-7-20

解决思路

检查Story中providers的配置层级
确保APP_CONFIG是配置在moduleMetadata的providers数组里，而非组件的props中。如果ProjectService是通过providedIn: 'root'注册的，StoryBook环境下会初始化这个根服务，必须在moduleMetadata.providers里正确提供APP_CONFIG，才能被根级的ProjectService获取到。示例配置：
```
export const Default = {
  component: HeaderComponent,
  moduleMetadata: {
    imports: [/* 组件依赖的PrimeNG模块等 */],
    providers: [
      { provide: APP_CONFIG, useValue: { /* 你的配置内容，比如apiUrl: 'xxx' */ } },
      // 若ProjectService不是根服务，需同时添加到providers
      ProjectService
    ]
  }
} as Meta;
```
确认APP_CONFIG的引用一致性
检查Story文件中导入的APP_CONFIG是否和ProjectService中使用的是同一个InjectionToken，避免因导入路径错误、拼写错误或重复定义导致的不匹配。
检查ProjectService的注入写法
确保ProjectService中注入APP_CONFIG时正确使用了@Inject装饰器，因为APP_CONFIG是InjectionToken而非类，不能直接注入：
```
import { Inject } from '@angular/core';
import { APP_CONFIG } from './app-config.token';

constructor(@Inject(APP_CONFIG) private appConfig: AppConfig) {}
```
清除StoryBook缓存并重启动
执行npm run storybook -- --no-manager-cache命令，或者手动删除node_modules/.cache/storybook文件夹，避免缓存导致的依赖加载异常。
验证StoryBook与Angular版本兼容性
若使用Angular 16+，需确保StoryBook版本在7.x及以上，版本不匹配可能导致DI系统解析异常。
检查是否漏加必要模块
如果Angular应用中是通过某个核心模块提供APP_CONFIG的，需在Story的moduleMetadata.imports中导入该模块，或者直接在providers中重新提供APP_CONFIG。