Блог

Я хочу внедрить свой сервис countries.service в свой модуль pricing.module и использовать его в компоненте ценообразования этого модуля. У меня обнаружена циклическая зависимость.

Это мой модуль

 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;

      })    

 }
}
  

Ценообразование-маршрутизация.модуль

 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 {}

  

Это ошибка

ОБНОВИТЬ !!Это сработало нормально, когда я изменил синтаксис с @Injectable({ provideIn:….}) в service на providers [] в моем модуле. Я не знаю, в чем разница между ними?

Хорошо, итак, я наткнулся на эту проблему в Angular github, в которой говорится о чем-то подобном. Из того, что я понял, либо использовать providers:[CountriesService] в pricing.module.ts

или

создайте другой модуль, чтобы прервать эту циклическую проверку зависимостей, которая, похоже, выполняется компилятором Typescript.

Мое предложение состоит не в том, чтобы создавать новый модуль, а в том, чтобы придерживаться providers синтаксиса.

Обычно и в 99% случаев предоставленное значение должно быть ‘root’, чтобы оно могло изменяться по дереву, это означает, что если оно нигде не используется в приложении, оно не будет включено в окончательный скомпилированный пакет.

Используйте приведенный ниже синтаксис, если у него есть область применения :

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

Для области действия модуля поместите его в массив providers модуля.

 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

Попробуйте удалить

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

из countries.service .. я подозреваю, что это вызывает циклическую зависимость.