Angular 8.3.17出现StaticInjectorError(AppModule)报错求助

Hey there, let's get that blank page and StaticInjectorError(AppModule)[DataService -> Http] sorted out! After looking through your code, I can see two straightforward issues causing this problem:

1. Missing HttpModule in Your AppModule #

You're using Http from @angular/http in your DataService, but you haven't imported HttpModule into your AppModule's imports array. Angular needs this module to create and inject instances of Http into your service.

2. DataService Not Registered in Providers #

Your DataService is marked with @Injectable(), but you haven't added it to the providers array of AppModule. This means Angular doesn't know how to inject it into your AppComponent when it's requested.

Fixed app.module.ts #

Here's the corrected version with both fixes applied:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// Import the Http Module and our Data Service
import { HttpModule } from '@angular/http';
import { DataService } from './data.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule // Added this line to enable Http injection
  ],
  providers: [DataService], // Added this line to register your service
  bootstrap: [AppComponent]
})
export class AppModule { }

Bonus: Migrate to HttpClient (Recommended for Angular 8) #

Quick heads-up: HttpModule from @angular/http is deprecated in Angular 8. The modern, more robust replacement is HttpClient from @angular/common/http. It automatically parses JSON responses and has better error handling. If you want to update your code to follow best practices, here's how:

Updated data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // Switch to HttpClient
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'; // Use pipeable operators (Angular 8+ standard)

@Injectable()
export class DataService {
  constructor(private _http: HttpClient) { }

  getAccounts(): Observable<any[]> {
    // HttpClient returns parsed JSON directly, no need for .json()
    return this._http.get("/api/accounts")
      .pipe(map(result => result['data']));
  }
}

Updated app.module.ts (for HttpClient)

Replace HttpModule with HttpClientModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http'; // Use modern HttpClientModule
import { DataService } from './data.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule // Updated this line
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

After making these changes, restart your Angular dev server, and your page should load the account data instead of staying blank!

内容的提问来源于stack exchange，提问作者Dallan Byrne