Uncaught (в обещании): Ошибка: StaticInjectorError (AppModule) [AuthServiceProvider -> HttpHeaders]:

Question

Я занимаюсь разработкой проекта на ionic v3.Я поставлен с этой проблемой.Мой случай похож на # 47492475 уже импортировать HttpClientModule в app.module.ts, но ошибка все еще сохраняется.Я оставляю вам мои .ts файлы

auth-service.ts

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

let apiUrl = "http://localhost/login_banana/api/";

/*
  Generated class for the AuthServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class AuthServiceProvider {

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

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

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SignupPage } from '../pages/signup/signup';
import { LoginPage } from '../pages/login/login';
import { WelcomePage } from '../pages/welcome/welcome';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SignupPage,
    LoginPage,
    WelcomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SignupPage,
    LoginPage,
    WelcomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthServiceProvider
  ]
})
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';

/**
 * Generated class for the SignupPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@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) => {

    });
  }

}

Это ошибка

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AuthServiceProvider -> HttpHeaders]: 
  StaticInjectorError(Platform: core)[AuthServiceProvider -> HttpHeaders]: 
    NullInjectorError: No provider for HttpHeaders!
Error: StaticInjectorError(AppModule)[AuthServiceProvider -> HttpHeaders]: 
  StaticInjectorError(Platform: core)[AuthServiceProvider -> HttpHeaders]: 
    NullInjectorError: No provider for HttpHeaders!
    at _NullInjector.get (http://localhost:8100/build/vendor.js:1377:19)
    at resolveToken (http://localhost:8100/build/vendor.js:1675:24)
    at tryResolveToken (http://localhost:8100/build/vendor.js:1617:16)
    at StaticInjector.get (http://localhost:8100/build/vendor.js:1485:20)
    at resolveToken (http://localhost:8100/build/vendor.js:1675:24)
    at tryResolveToken (http://localhost:8100/build/vendor.js:1617:16)
    at StaticInjector.get (http://localhost:8100/build/vendor.js:1485:20)
    at resolveNgModuleDep (http://localhost:8100/build/vendor.js:11270:25)
    at _createClass (http://localhost:8100/build/vendor.js:11309:68)
    at _createProviderInstance$1 (http://localhost:8100/build/vendor.js:11281:26)
    at c (http://localhost:8100/build/polyfills.js:3:19752)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:19174)
    at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:51705:16)
    at NavControllerBase._failed (http://localhost:8100/build/vendor.js:51698:14)
    at http://localhost:8100/build/vendor.js:51745:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242

Answer 1

Вы не должны вводить HttpHeaders как услугу в constructor из AuthServiceProvider.Вы можете просто импортировать и использовать HttpHeaders из '@angular/common/http'. HttpHeaders - это не сервис @Injectable() или подобный, это просто класс.То есть то, что линия ошибки NullInjectorError: No provider for HttpHeaders! говорит.

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

let apiUrl = "http://localhost/login_banana/api/";

/*
  Generated class for the AuthServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class AuthServiceProvider {

  // HttpHeaders injection removed
  constructor(public http: HttpClient) {}

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

Надеюсь, что помогает! * * 1013