Angular 5使用桶文件报错：未定义提供者，疑为循环依赖

你遇到的这个错误完全是桶文件（index.ts）引发的循环依赖问题——Angular 5的模块解析机制在处理桶文件时，一旦不同文件之间通过桶互相引用，很容易形成闭环的引用链，导致编译器无法正确解析服务提供者，最终抛出"Encountered undefined provider!"的错误。

下面给你几个可行的解决方法，按推荐优先级排序：

1. 直接引用具体文件，彻底绕过桶文件 #

这是最稳妥的解决方案，直接切断循环依赖的可能。把你core.module.ts里的桶导入改成直接导入单个服务：

// 替换原来的import * as fromServices from '@core/services';
import { ApiService } from '@core/services/api.service';

然后在NgModule的providers数组里直接声明服务：

@NgModule({
  declarations: [...],
  providers: [ApiService], // 直接列出服务
  // ...其他模块配置
})
export class CoreModule { }

如果有多个服务，就逐个导入并添加到providers里，虽然看起来繁琐，但能彻底避免桶带来的循环问题。

2. 重构桶文件与服务的引用方式（保留桶的前提下） #

如果你想继续使用桶文件，需要调整导出和引用逻辑：

• 首先修改你的桶文件（@core/services/index.ts），去掉那个services数组导出——这种数组导出很容易触发编译器的循环解析问题，只保留单个服务的导出：

// 删掉export const services: Array<any> = [ ApiService ];
export * from './api.service';
// 其他服务同理添加
// export * from './user.service';

• 然后在core.module.ts里明确导入需要的服务：

import { ApiService } from '@core/services';

@NgModule({
  providers: [ApiService],
  // ...
})

• 最重要的一点：检查所有服务内部的引用，绝对不要通过桶文件引用其他服务。比如如果ApiService需要用到UserService，要写import { UserService } from './user.service';，而不是import { UserService } from '@core/services';——后者会形成循环引用链。

3. 启用循环依赖检测，定位问题根源 #

如果你不确定哪里出现了循环，可以在tsconfig.json里开启循环依赖检测，让编译器给出具体的错误链：

{
  "compilerOptions": {
    // ...你的其他配置
    "detectCycles": true,
    "strict": true
  }
}

重新编译后，编译器会明确告诉你哪两个文件互相引用形成了循环，你可以针对性地修改这些文件的引用路径。

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