CODEWITHSUNDEEP
javascriptangularangular-servicesangular8
Adnan Sabbir
Adnan Sabbir

Reputation: 181

What is the proper way to inject a service in Angular 8?

I am trying to inject a service to my main "App" component. But it gives an error(Screenshot attached Below)

constructor(private newsApi: NewsApiService) {}

When importing service with the above code I get this error enter image description here

I googled and found the solution. Which is adding

@Inject

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

But in the documentation of Angular.io, it shows the first way that I used. I want to know if I am missing something here?

My NewsApiService has HttpClient and it sends HTTP request. Functions written in this service are all Async as they need to send a request and get data.

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 Added the service in provider to access everywhere

providers: [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) {}
}

Upvotes: 3

Views: 5623

Answers (3)

Sumeet
Sumeet

Reputation: 642

If you want to use the injection explicitly vs Injectable, please have a look at the already answered post:

What is the difference between @Inject and @Injectable in Angular 2 typescript

Upvotes: 0

Sumeet
Sumeet

Reputation: 642

Use @Injectable() Decorator which enables a class to be injected to a particular class or component.

Basically the following three steps makes service consumption

1.) Decorate the service with @Injectable() like @Injectable() export class SampleService{ constructor(){ } }

2.) Add the service reference in the providers array of @NgModule Decorator of module file.

3.)// Consume the service constructor(private sampleService: SampleService) {}

As far as I see your screenshot, it is not a staticInjector error which is thrown in case of injection issue.

Upvotes: -1

Igor
Igor

Reputation: 62228

Sometimes you have to restart ng serve for it to pick up changes in new files. I experience this occasionally with injector dependencies where I add a new code file that serves as a dependency in another component/service.

Upvotes: 2

Related Questions