错误：未捕获（承诺）：错误：StaticInjectorError(AppModule)[AuthServiceProvider -> HttpClient]

Question

我正在开发一个关于 ionic v3 的项目。 HttpClientModule 已在 app.module.ts 中导入，但错误仍然存​​在。

这个问题已经被问过了，但我有与答案中显示的相同的构造函数，但仍然出现错误。

auth-service.ts

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

let baseURL = "http://codehub.biz/sujag_sindhi/API/";

@Injectable()
export class AuthServiceProvider {

  constructor(public http: HttpClient) {
    console.log('Hello AuthServiceProvider Provider');
  }

  postData(credentials, type) {
    return new Promise((resolve, reject)=>{
      let headers = new HttpHeaders();
      this.http.post(baseURL+type, JSON.stringify(credentials), {headers: headers}).subscribe(res =>{
        resolve(res);
      }, (err) =>{
        reject(err);
      });
    });
  }
}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from '../pages/login/login';
import { SighupPage } from '../pages/sighup/sighup';
import { WelcomePage } from '../pages/welcome/welcome';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    WelcomePage,
    LoginPage,
    SighupPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    WelcomePage,
    LoginPage,
    SighupPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AuthServiceProvider,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})
export class AppModule {}

当我尝试在此处访问它时。出现错误

singup.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { HomePage } from '../home/home';

@IonicPage()
@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
})
export class SignupPage {

    responseData : any;
    userData = { "username":"", "password":"", "email":"", "name":"" };

  constructor(public navCtrl: NavController, public navParams: NavParams, public authService: AuthServiceProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SignupPage');
  }

  signup(){
    this.authService.postData(this.userData, "signup").then((result) =>{
        this.responseData = result;
        console.log(this.responseData);
        localStorage.setItem('userData', JSON.stringify(this.responseData))
        this.navCtrl.push(HomePage);
    }, (err) => {

    });
  }

}

Answer 1

在imports数组中导入模块

imports: [
   BrowserModule,
   HttpClientModule,
   IonicModule.forRoot(MyApp)
],

接下来将 http 添加到您的 .ts 文件中

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

constructor(public http: HttpClient) {
    console.log('Hello AuthServiceProvider Provider');
}