Не удается найти модуль '@angular/common/http'

Я следую этому основному учебнику по Angular о Http.

Как видно из раздела "Установка: установка модуля", они импортируют HttpClientModule следующим образом:

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

Когда я попробую это в своем проекте, я получаю следующую ошибку: "Не могу найти модуль" @angular/common/http '".

Я попытался импортировать следующий модуль, как показано ниже:

import { HttpModule } from '@angular/http';

И затем мой раздел импорта:

imports: [
    HttpModule
],

Теперь проблема заключается в том, что я не могу внедрить этот HttpModule в свой объект службы, и я получаю следующую ошибку: "Не удается найти модуль HttpModule".

Вот мой класс обслуживания:

import { Injectable, OnInit } from '@angular/core';
//Custom Models
import { Feed } from '../Models/Feed';

@Injectable()
export class FeedsService {
    constructor(private httpClient: HttpModule) {}
}

Что я делаю неправильно?

Обновление Все, что я должен был сделать, когда понял, что не могу импортировать модуль в соответствии с учебником, заключалось в том, чтобы запустить команду npm update, чтобы обновить все мои пакеты.

Ответы

Ответ 1

Важно: HttpClientModule для Angular 4.3.0 и выше. Проверьте @Maximus и @Pengyy answer для получения дополнительной информации.

Оригинальный ответ:

Вам нужно ввести HttpClient в свой компонент/службу, а не в модуль. Если вы импортируете HttpClientModule в свой @NgModule

// app.module.ts:

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

// Import HttpClientModule from @angular/common/http
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    // Include it under 'imports' in your application module
    // after BrowserModule.
    HttpClientModule,
  ],
})
export class MyAppModule {}

Итак, измените

constructor(private httpClient: HttpModule) {}

constructor(private httpClient: HttpClient) {}

как написано в документации: https://angular.io/guide/http#making-a-request-for-json-data

Однако, поскольку вы импортировали HttpModule

вам нужно ввести constructor(private httpClient: Http) как @Maximus, указанный в комментариях, и @Pengyy в этом ответе.

И для получения дополнительной информации о различиях между HttpModule и HttpClientModule, проверьте этот ответ: fooobar.com/questions/56972/...

Ответ 2

Важное обновление:

HttpModule с Angular V5, HttpModule и Http из @angular/http устарели, HttpClientModule HttpClient использования HttpClientModule и HttpClient из @angular/common/http см. CHANGELOG.

Для версии Angular, предыдущей от **@4.3.0, вы должны ввести Http из @angular/http, а HttpModule предназначен для импорта в вашем массиве импорта NgModule.

import {HttpModule} from '@angular/http';

@NgModule({
  ...
  imports: [HttpModule]
})

Введите http в компонент или службу

import { Http } from '@angular/http';

constructor(private http: Http) {}

Для версии Angular после ( HttpClient ) 4.3.0 вы можете использовать HttpClient из @angular/common/http вместо Http из @angular/http. Не забудьте HttpClientModule импортировать HttpClientModule в свой NgModule импорта NgModule.

Ссылайтесь на @echonax ответ.

Ответ 3

note: Это для @ angular/http, а не для запроса @angular/common/http!

Просто импортируйте таким образом, РАБОТАЕТ отлично:

// Import HttpModule from @angular/http
import {HttpModule} from '@angular/http';


@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [...],
  entryComponents: [...],
  providers: [... ]
})

а затем вы выполните в service.ts вот так:

constructor(private http: Http) { }

getmyClass(): Promise<myClass[]> {
  return this.http.get(URL)
             .toPromise()
             .then(response => response.json().data as myClass[])
             .catch(this.handleError);
}

Ответ 4

Я использовал http в angular 5, что было проблемой. Использование Httpclient разрешило проблему.

Ответ 5

Остерегайтесь импорта авто. мой HTTP_INTERCEPTORS был автоматически импортирован следующим образом:

import { HTTP_INTERCEPTORS } from '@angular/common/http/src/interceptor';

вместо

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

что вызвало эту ошибку

Ответ 6

Вы должны импортировать http из @angular/http в свою службу:

import {Http} from '@angular/http';

constructor(private http: http) {} // <--Then Inject it here


// now you can use it in any function eg:
getUsers() {
    return this.http.get('whateverURL');
}

Ответ 7

Для тех, кто использует Ionic 3 и Angular 5, у меня была одна и та же ошибка, и я не нашел здесь никаких решений. Но я нашел несколько шагов, которые спомогли мне.

Действия по воспроизведению:

npm install -g Cordova Ionic
ионный запуск вкладок myApp
cd myApp
cd node_modules/angular/common (модуль http не существует).

ionic: (запустить ионную информацию из терминала/команды cmd), проверить версии и убедиться, что они обновлены. Вы также можете проверить угловые версии и пакеты в папке package.json вашего проекта.

Я проверил свои зависимости и пакеты и установил Cordova. Перезапустил атом и ошибка ушла. Надеюсь это поможет!

Ответ 8

Обратитесь к этому: http: deprecate @angular/http в пользу @angular/common/http.

Ответ 9

Эта проблема решена.

Я получаю эту ошибку: ОШИБКА в node_modules/ngx-restangular/lib/ngx-restangular-http.d.ts(3,27): ошибка TS2307: Не удается найти модуль '@angular/common/http/src/response'.

После обновления моего угла до версии = 8