web-dev-qa-db-ja.com

「@ angular / common / http」モジュールが見つかりません

私は this Httpに関するAngularの基本的なチュートリアルに従っています。

「セットアップ：モジュールのインストール」セクションでわかるように、次のように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) {}
}

私は何を間違えていますか？

Updateチュートリアルに従ってモジュールをインポートできないことに気付いたときは、npm updateコマンドを実行して、すべてのパッケージを更新します。

angularnode-modules
53
monstertjie_za

重要：HttpClientModuleはAngular 4.3.0以降用です。 @ Maximus ' コメントと @ Pengyy'sanswer 詳細情報。

モジュールではなく、コンポーネント/サービスにHttpClientを挿入する必要があります。 @NgModuleにHttpClientModuleをインポートする場合

// 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 in この回答 .

HttpModuleとHttpClientModuleの違いの詳細については、この回答を確認してください： https://stackoverflow.com/a/45129865/570629

47
eko

重要な更新：

@angular/httpからのHttpModuleおよびHttpはAngular V5から非推奨になりました。代わりに@angular/common/httpからHttpClientModuleおよびHttpClientを使用する必要があります- CHANGELOG。

Angular version previous from ** @ 4.3.の場合、@angular/httpからHttpを注入する必要があり、HttpModuleはNgModuleのインポート配列でインポートするためのものです。

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

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

コンポーネントまたはサービスでhttpを注入する

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

constructor(private http: Http) {}

Angularバージョンafter（include）4.3.の場合、@angular/common/httpのHttpClientの代わりに@angular/httpのHttpを使用できます。最初にHttpClientModuleのインポート配列でNgModuleをインポートすることを忘れないでください。

@echonaxの回答を参照してください。

35
Pengyy

注：これは、@ angular/common/httpではなく@ angular/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
Luciano Huguenin

自動インポートに注意してください。 HTTP_INTERCEPTORSは次のように自動インポートされました。

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

の代わりに

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

このエラーの原因

1
LazyCreep

問題だったangular 5でhttpを使用していました。 Httpclientを使用して問題を解決しました。

1
SUNIL JADHAV

Ionic 3およびAngular 5を使用している場合、同じエラーがポップアップ表示され、ここで解決策が見つかりませんでした。しかし、私は私のために働いたいくつかのステップを見つけました。

再現する手順：

  • npm install -g cordova ionic
  • イオン開始myAppタブ
  • cd myApp
  • cd node_modules/angular/common（httpモジュールは存在しません）。

ionic :(端末/ cmdプロンプトからionic情報を実行）、バージョンをチェックし、最新であることを確認します。プロジェクトのpackage.jsonフォルダーでangularバージョンとパッケージを確認することもできます。

依存関係とパッケージを確認し、cordovaをインストールしました。 atomを再起動すると、エラーはなくなりました。お役に立てれば！

0
Stephen Romero

この問題は解決されていますか。

Node_modules/ngx-restangular/lib/ngx-restangular-http.d.ts（3,27）のエラー：エラーTS2307：モジュール '@ angular/common/http/src/response'が見つかりません。

angularをversion = 8に更新した後

0
user3639041

サービスの@angular/httpから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');
}
0
Touqeer Shafi

これを参照してください：http： @ angular/common/httpを支持して@ angular/httpを非推奨にします。

0
Jazeb_007