NullInjectorError: 没有 e 的提供者!在 Angular 7

cod*_*vez 7 dependency-injection typescript

我是 Angular 派对的新成员。我在 这里看到错误图像 我搜索了其他博客,他们推荐的解决方案是在 app.module.ts -> 提供我已经在做的服务上添加服务。

这是我的 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 { }
Run Code Online (Sandbox Code Playgroud)

这是我的组件

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() {

    }
}
Run Code Online (Sandbox Code Playgroud)

我的服务是

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;
    }
}
Run Code Online (Sandbox Code Playgroud)

我的应用程序上的代码我收到了您在问题顶部的链接中看到的Null-injector异常。我已将该服务添加到 mu app.module.ts 提供程序中。

有人可以告诉我我的文件中缺少什么才能成功配置服务吗?

小智 5

您的应用程序模块中缺少 HttpClientModule。将此行添加到应用程序模块的顶部

import { HttpClientModule } from '@angular/common/http';
Run Code Online (Sandbox Code Playgroud)

这行到你的模块的导入部分

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

  • @codechavez 太棒了!不要忘记将其标记为已回答,以便保罗因帮助您解决问题而获得荣誉:) (2认同)