NullInjectorError: No provider for e! on Angular 7

Question

I'm new on the Angular party. I'm getting see error image here I have search other blogs and the solution that they recommend is to add the service on the app.module.ts -> provides which I already doing.

This is my app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModules } from "./app.material.module";

import { AppComponent } from './app.component';
import { HomeComponent } from "./components/home/home.component";
import { DashboardComponent } from "./components/dashboard/dashboard.component";
import { NavbarComponent } from "./components/navbar/navbar.component";

import { AppRoutingModule } from './app-routing.module';
import { ChartsModule } from 'ng2-charts';

import { HttpErrorHandler } from "./helpers/http-error-handeler.service";
import { MessageService } from "./helpers/message.service";
import { DashboardService } from "./services/dashboard.service";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        AppRoutingModule,
        ChartsModule
    ],
    declarations: [
        NavbarComponent,
        AppComponent,
        HomeComponent,
        DashboardComponent
    ],
    providers: [DashboardService],
    bootstrap: [AppComponent]
})
export class AppModule { }

This is my component

import { Component, OnInit } from '@angular/core';
import { Order } from "../../models/dashboardOrder";
import { DashboardService } from '../../services/dashboard.service';

@Component({
    selector: 'dashboard',
    templateUrl: 'dashboard.component.html'
})
export class DashboardComponent implements OnInit {

    constructor(private dash: DashboardService) {

    }

    ngOnInit() {

    }
}

and my service is

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Order } from "../models/dashboardOrder";

import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class DashboardService {

    constructor(
        private http: HttpClient) {

    }

    GetOrdersShipped(stores: string): Observable<Order[]> {
        return null;
    }
}

That code on my app I'm getting the Null-injector exception you saw in link on the top of my question. I have added the service into mu app.module.ts providers.

Can someone tell me what am I missing on my files in order to have a successful service configuration?

Answer 1

You're missing the HttpClientModule in your app module. add this line to the top of your app module

import { HttpClientModule } from '@angular/common/http';

and this line to the imports section of your module

@NgModule({
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    AppRoutingModule,
    ChartsModule, 
    HttpClientModule
],
declarations: [
    NavbarComponent,
    AppComponent,
    HomeComponent,
    DashboardComponent
],
providers: [DashboardService],
bootstrap: [AppComponent]})