在 angular，使用 providedIn 和 forRoot 时的循环依赖

Question

我正在开发一个 angular 库。它有一个内部服务。定义如下。使用 providedIn 可进行摇树优化。并且没有使用 providedIn:'root' 因为它是内部的并且只在模块范围内使用。

@Injectable({
  providedIn: MyChartModule,
})
export class LineChartLibService {

当我想在模块定义中添加 forRoot 以在延迟加载中只有一个实例时，它遇到了循环依赖。

export class MyChartModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MyChartModule,
      providers: [LineChartLibService],
    };
  }
}

遇到这种情况我们应该怎么办？是否可以在库中提供可延迟加载的 tree-shakable 服务？

WARNING: Circular dependency: dist\my-chart\esm2015\lib\my-chart.module.js -> dist\my-chart\esm2015\lib\line-chart\line-chart.component.js 
-> dist\my-chart\esm2015\lib\line-chart-lib.service.js -> dist\my-chart\esm2015\lib\my-chart.module.js

Answer 1

我认为会发生以下情况：

您有可能需要 LineChartLibService 的行-chart.component.js。
在 LineChartLibService 中，您说这个 Injectable 是在 MyChartModule 中提供的。
在 MyChartModule 中，您可能将行-chart.component.js 声明为该模块的一部分。

这意味着模块请求组件，组件请求服务，服务请求模块，然后再次请求组件：循环依赖。

如果您在问题中添加更多代码和上下文，我们可能会提出更好的建议；-)

Answer 2

我之前已经回答了一个（非重复的）问题，为您提供了这种方法的替代方法。

采用此设置：

我的-module.ts

declarations: [
  MyComponent
]

我的-service.ts

@Injectable({ providedIn: MyModule })

我的-component.ts

constructor(private myService: MyService) {}

我的服务导入我的模块
我的模块导入我的组件
我的组件导入我的服务

存在循环依赖。

解决方法

解决方法是创建一个服务模块并将其导入到您的模块中。

我的-module.ts

imports: [
  MyModuleServices
],
declarations: [
  MyComponent
]

我的模块-services.ts

// no imports or declarations

我的-service.ts

@Injectable({ providedIn: MyModuleServices })

我的-component.ts

constructor(private myService: MyService) {}

备选

更直接的方法是将服务添加到模块的提供程序。

@NgModule({
  providers: [ MyService ]
})
export class MyModule {}

在 angular，使用 providedIn 和 forRoot 时的循环依赖

in angular, Circular dependency when using providedIn and forRoot

javascript

lazy-loading

typescript

tree-shaking

angular

解决方法

备选