staticInjection误差(AppModule)：离子3

Question

我在我的离子3应用程序中使用对话框。我在我的ts提供程序文件中得到错误。

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

    @Injectable()
    export class ChatProvider {

      url = 'https://api.dialogflow.com/v1/query';
      accessToken = 'xxxxxxxxxxxxxxxxxx';

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

      sendMessage(message: string) {
        let data = {
          lang: "en",
          query: message
        }
        let headers = new HttpHeaders();
        headers.append("Authorization","Bearer" + this.accessToken);
        return this.http.post(this.url, data,{headers: headers})
              .map(res => {
                return res
              })
      }

    }

我所犯的错误是

错误错误:未知(承诺)：错误: StaticInjectorError(AppModule)ChatProvider -> HttpClient: StaticInjectorError(平台:核心)ChatProvider -> HttpClient: NullInjectorError：！错误: StaticInjectorError(AppModule)ChatProvider -> HttpClient: StaticInjectorError(平台:核心)ChatProvider -> HttpClient: NullInjectorError:无HttpClient提供程序！在_NullInjector.get (core.js:1003) at resolveToken (core.js:1301) at tryResolveToken (core.js:1243) at StaticInjector.get (core.js:1111) at resolveToken (core.js:1301) at tryResolveToken (core.js:1243) at StaticInjector.get (core.js:1111) at resolveNgModuleDep (core.js:10896) at _createClass (ResolveNgModuleDep) at _createClass(ResolveNgModuleDep) at _createClass(ResolveNgModuleDep)( core.js:10907) ( _NullInjector.get (core.js:1003) at resolveToken (core.js:1301) at tryResolveToken (core.js:1243) at StaticInjector.get (core.js:1111) at resolveToken (core.js:1301) at tryResolveToken (core.js:1243) at StaticInjector.get (core.js:1111) at resolveNgModuleDep (core.js:1111) at resolveNgModuleDep (core.js:10896) at StaticInjector.get(core.js:1111)at resolveNgModuleDep(core.js:10896)at StaticInjector.get(core.js:1111)at resolveNgModuleDep(core.js:10896)at StaticInjector.get(core.js:10896)at StaticInjector.get(core.js:1111)at resolveNgModuleDep(core.js:10896)at StaticInjector.get(core.js:1111)at StaticInjector.get(core.js:1111)at resolveNgModuleDep(core.js:10896)at StaticInjector.get(core.js:1111)at StaticInjector.get(core.js:1111)at resolveNgModuleDep(core.js:1111)at resolveNgModuleDep(core.js:10896)at StaticInjector.get(core.js:1111)at resolveNgModuleDep(core.js:10896)at resolveNgModuleDep(core.js:1111)at resolveNgModuleDep(core.js:10896)at resolveNgModuleDep10933) _createProviderInstance$1 (core.js:10907) at c (polyfills.js:3) at Object.reject (polyfills.js:3) at NavControllerBase._fireError (nav-控制器-base.js:223) at NavControllerBase._failed (nav-控制器-base.js:216)在导航控制器-base.js:263 at t.invoke (polyfills.js:3) at Object.onInvoke (core.js:4760)t.invoke ( polyfills.js:3 ) at r.run (polyfills.js:3) at polyfills.js:3

这是我的home.ts文件代码

 import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Message } from '../module/message.module';
import { ChatProvider } from '../../providers/chat/chat';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  messages: Message[] = [];

  constructor(public navCtrl: NavController,private chatprovider: ChatProvider) {

  }

  ngOnInit(){
    let message = new Message("hi")
    this.messages.push(message);
  }

  sendMesage(message_content) {
    this.chatprovider.sendMessage(message_content.value).subscribe(res =>{
      console.log(res);
      // let message = new Message(res.result.speech);
      // this.messages.push(message);
      // message_content.value = '';
    }, err => {
      console.log(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 { FormsModule } from '@angular/forms';
import { ChatProvider } from '../providers/chat/chat';
import { Message } from '../pages/module/message.module';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ChatProvider
  ]
})
export class AppModule {}

Answer 1

您需要导入HttpClientModule并向@NgModule's imports数组注册它。

import {HttpClientModule} from '@angular/common/http'
    @NgModule({
      declarations: [
        MyApp,
        HomePage,

      ],
      imports: [
        BrowserModule,
        FormsModule,
         HttpClientModule,<----here
        IonicModule.forRoot(MyApp)
      ],