Разрешение ошибки NG2003 в Angular 9: нет подходящего токена внедрения для параметра «url» класса «DataService»

При работе с Angular 9 вы можете столкнуться с сообщением об ошибке, например «Ошибка NG2003: нет подходящего токена внедрения для параметра URL-адреса класса DataService». Эта ошибка возникает, когда система внедрения зависимостей Angular не может найти подходящий токен для внедрения в параметр конструктора класса. В этой статье мы рассмотрим различные способы устранения этой ошибки на примерах кода.

Метод 1. Предоставьте токен с помощью декоратора @Inject
Один из способов устранить ошибку NG2003 — явно предоставить токен с помощью декоратора @Inject. Вы можете создать собственный токен внедрения и использовать его для аннотации параметра в конструкторе класса DataService. Вот пример:

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { InjectionToken } from '@angular/core';
export const API_URL = new InjectionToken<string>('apiUrl');
@Injectable()
export class DataService {
  constructor(private http: HttpClient, @Inject(API_URL) private url: string) {
    // ...
  }
}

В приведенном выше коде мы создаем собственный токен внедрения под названием API_URLтипа string. Затем мы используем декоратор @Injectдля аннотации параметра urlв конструкторе класса DataService.

Метод 2: укажите значение с помощью поставщика useClass
Другой подход — предоставить значение для параметра urlс помощью поставщика useClass. Этот метод позволяет указать конкретный класс, который будет использоваться для внедрения. Вот пример:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class DataService {
  constructor(private http: HttpClient, private url: string) {
    // ...
  }
}
@Injectable()
export class UrlConfig {
  getUrl(): string {
    return 'https://api.example.com';
  }
}
// In your module or component:
import { NgModule } from '@angular/core';
import { DataService, UrlConfig } from './';
@NgModule({
  providers: [
    DataService,
    { provide: UrlConfig, useClass: UrlConfig },
    { provide: 'url', useFactory: (config: UrlConfig) => config.getUrl(), deps: [UrlConfig] }
  ]
})
export class AppModule { }

В этом примере мы определяем отдельный класс UrlConfig, который предоставляет значение URL. Затем мы настраиваем систему внедрения зависимостей для использования класса UrlConfigдля внедрения параметра urlв конструктор DataService.

Метод 3: используйте поставщик useClass с фабричной функцией.
В качестве альтернативы вы можете использовать фабричную функцию в сочетании с поставщиком useClassдля динамического предоставления значения URL. Вот пример:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class DataService {
  constructor(private http: HttpClient, private url: string) {
    // ...
  }
}
export function urlFactory() {
  return 'https://api.example.com';
}
// In your module or component:
import { NgModule } from '@angular/core';
import { DataService, urlFactory } from './';
@NgModule({
  providers: [
    DataService,
    { provide: 'url', useFactory: urlFactory }
  ]
})
export class AppModule { }

В этом методе мы определяем фабричную функцию под названием urlFactory, которая возвращает значение URL. Затем мы настраиваем систему внедрения зависимостей на использование этой фабричной функции для предоставления значения параметра url.

Ошибка NG2003 в Angular 9 возникает, когда нет подходящего токена внедрения для параметра в конструкторе класса. В этой статье мы рассмотрели три метода устранения этой ошибки: предоставление токена с помощью декоратора @Inject, предоставление значения с помощью поставщика useClass и использование поставщика useClass с фабричной функцией. Реализуя эти методы, вы можете преодолеть ошибку NG2003 и обеспечить бесперебойную работу вашего приложения Angular 9.