模块没有导出成员“http”[2305]

Question

您好，我正在尝试从 '@angular/common/http' 导入 http 调用，但收到错误消息，表明模块没有导出成员 'http'

错误：[ts] 模块“e:/car/node_modules/@angular/common/http”没有导出成员“Http”。 [2305]

import {
  RouterModule
} from '@angular/router';
import {
  BrowserModule
} from '@angular/platform-browser';
import {
  NgModule
} from '@angular/core';

import {
  AppRoutingModule
} from './app-routing.module';
import {
  AppComponent
} from './app.component';
import {
  HomeComponent
} from './home/home.component';
import {
  HttpClientModule
} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    RouterModule.forRoot([{
      path: '',
      component: HomeComponent
    }])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

import {
  Http
} from '@angular/common/http';
import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private http: Http) {}
  products = [];
  fetchData = function() {
    this.http.get('http://localhost:5555/products').subscribe(
      (res: Response) => {
        this.products = res.json();
      }
    );
  };
  ngOnInit() {
    this.fetchData();
  }

}

下面的代码用于插入包含详细信息的json文件

Answer 1

HttpClientModule

将注入

HttpClient

服务而不是

Http

。

请在

HttpClient

中的构造函数注入中使用

HomeComponent

。

constructor(private http: HttpClient) {}

作为参考，创建了示例 stackblitz 代码。

Answer 2

import {
  Http
} from '@angular/common/http';
import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private http: Http) {}
  products = [];
  fetchData = function() {
    this.http.get('http://localhost:5555/products').subscribe(
      (res: Response) => {
        this.products = res.json();
      }
    );
  };
  ngOnInit() {
    this.fetchData();
  }

}