Как правильно ввести сервис в Angular 8?

Question

Я пытаюсь внедрить службу в мой основной компонент «Приложение».Но выдает ошибку (Снимок экрана прилагается ниже)

constructor(private newsApi: NewsApiService) {}

При импорте службы с кодом выше я получаю эту ошибку

Я гуглил и нашелрешение.Который добавляет

@ Inject

constructor(@Inject(NewsApiService) newsApi: NewsApiService) {}

Но в документации Angular.io он показывает первый способ, который я использовал.Я хочу знать, если я что-то здесь упускаю?

У моего NewsApiService есть HttpClient, и он отправляет HTTP-запрос.Все функции, написанные в этом сервисе, являются асинхронными, поскольку им необходимо отправить запрос и получить данные.

NewsApiService.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class NewsApiService {
  apiKey = '--My_API_Key_Goes_here--';

  constructor(private http: HttpClient) {
  }

  initSources() {
    return this.http.get('https://newsapi.org/v2/sources?language=en&apiKey=' + this.apiKey);
  }

  initArticles() {
    return this.http.get('https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=' + this.apiKey);
  }

  getArticlesByID(source: string) {
    return this.http.get('https://newsapi.org/v2/top-headlines?sources=' + source + '&apiKey=' + this.apiKey);
  }
}

App.module.ts Добавлена ​​услуга в провайдере для доступа везде

провайдеров: [NewsApiService],

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
  MatButtonModule,
  MatCardModule,
  MatIconModule,
  MatListModule,
  MatMenuModule,
  MatSidenavModule,
  MatToolbarModule
} from '@angular/material';

import { AppComponent } from './app.component';
import {NewsApiService} from './news-api.service';
import {FormsModule} from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule,
    MatListModule,
  ],
  providers: [NewsApiService],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.component.ts

import {Component, Inject, OnInit} from '@angular/core';
import {NewsApiService} from './news-api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent{
  mArticles: Array<any>;
  mSources: Array<any>;

  constructor(@Inject(NewsApiService) newsApi: NewsApiService) {}
}

Answer 1

Иногда вам нужно перезапустить ng serve, чтобы он мог подхватить изменения в новых файлах.Иногда я сталкиваюсь с зависимостями инжекторов, когда добавляю новый файл кода, который служит зависимостью в другом компоненте / сервисе.

Answer 2

Если вы хотите использовать инъекцию явно против Injectable, взгляните на уже отвеченный пост:

В чем разница между @Inject и @Injectable в машинописном наборе Angular 2

Answer 3

Используйте @Injectable () Decorator, который позволяет вводить класс в определенный класс или компонент.

В основном следующие три шага приводят к потреблению сервиса

1.) Украсьте сервис с помощью@Injectable () подобно @Injectable () класс экспорта SampleService {constructor () {}}

2.) Добавьте ссылку на службу в массив поставщиков @NgModule Decorator файла модуля.

3.) // Использование конструктора службы (private sampleService: SampleService) {}

Насколько я вижу на скриншоте, это не ошибка staticInjector, которая выдается в случае проблемы с инъекцией.