更新！！ Angular10：正在向特定模块注入服务，检测到循环依赖。 @inject 和 providers[ ] 的区别？

Question

我想将我的服务 countries.service 注入我的模块 pricing.module 并在 list-pricing 该模块的组件。我检测到 循环依赖关系 。

这是我的模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PricingRoutingModule } from './pricing-routing.module';
import { DetailsPricingComponent } from './details-pricing/details-pricing.component';
import { ListPricingComponent } from './list-pricing/list-pricing.component';



@NgModule({
  declarations: [DetailsPricingComponent, ListPricingComponent],
  imports: [
    CommonModule,
    PricingRoutingModule,
  
  ],
})
export class PricingModule { }

这是我的模块中的一个组件的列表定价

import { Component, OnInit } from '@angular/core';
import { Post } from 'src/app/Interfaces/post';
import { CountriesService } from 'src/app/services/countries.service';
@Component({
  selector: 'app-list-pricing',
  templateUrl: './list-pricing.component.html',
  styleUrls: ['./list-pricing.component.css'],
})
export class ListPricingComponent {
  result:Array<Post>;
  constructor(private service:CountriesService) { }

  ngOnInit(): void {  
     this.service.getCountries().subscribe(data=> 
        {  
     console.log("hello") 
          this.result=data;

      })    

 }
}

定价-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DetailsPricingComponent } from './details-pricing/details-pricing.component';
import { ListPricingComponent } from './list-pricing/list-pricing.component';

const routes: Routes = [
  { path: '', component: ListPricingComponent },
  { path: 'detailsPricing', component: DetailsPricingComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PricingRoutingModule {}

这是错误

更新!! 当我将语法从 service 中的 @Injectable({ provideIn:....}) 更改为我的模块中的 providers [] 时，它工作正常。不知道他们有什么区别？

Answer 1

尝试移除

import {PricingModule} from '../pricing/pricing.module';

来自 countries.service .. 我怀疑这是造成循环依赖的原因。

Answer 2

通常 99% 的时间 providedIn 值应该是 'root'，这样就变成了 tree shakable，这意味着如果它没有在应用程序的任何地方使用，它就不会包含在最终编译的包中。

使用下面的语法，如果它有应用范围：

@Injectable({
  providedIn: 'root',
})
export class CountriesService {
}

对于模块范围，将其放在模块的提供者数组中。

import { Injectable, NgModule } from '@angular/core';

@Injectable()
export class Service {
  doSomething(): void {
  }
}

@NgModule({
  providers: [Service],
})
export class ServiceModule {
}

替换您的模块和服务名称。

对于组件范围，将其放在组件元数据中。

有用的链接：https://angular.io/guide/dependency-injection-providers#creating-tree-shakable-providers

Answer 3

好的，所以我偶然发现了 this issue in Angular github，它谈到了类似的事情。据我了解，要么在 pricing.module.ts

中使用 providers:[CountriesService]

或

创建另一个模块来打破循环依赖检查，这似乎是由 Typescript 编译器完成的。

我的建议是不要开始创建新模块，而是坚持 providers 语法。

更新！！ Angular10：正在向特定模块注入服务，检测到循环依赖。 @inject 和 providers[ ] 的区别？

Update !! Angular 10 : Injecting a service to a specific module , circular dependency detected. Difference between @inject and providers[ ]?

javascript

service

dependency-injection

typescript

angular

更新 ！！ Angular10：正在向特定模块注入服务，检测到循环依赖。 @inject 和 providers[ ] 的区别？

Update !! Angular 10 : Injecting a service to a specific module , circular dependency detected. Difference between @inject and providers[ ]?

javascript

service

dependency-injection

typescript

angular

更新！！ Angular10：正在向特定模块注入服务，检测到循环依赖。 @inject 和 providers[ ] 的区别？