TypeScriptエラーを伴うAngular HTTP GET http.get（…）.mapは[null]の関数ではありません

AngularのHTTPに問題があります。

私はちょうどにしたいリストビューで表示されます。GETJSON

サービスクラス

import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} from "angular2/http";
@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

    constructor(http:Http) {
        this.http=http;
    }

    getHalls() {
           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());
    }
}

そして、HallListComponent私getHallsはサービスからメソッドを呼び出します：

export class HallListComponent implements OnInit {
    public halls:Hall[];
    public _selectedId:number;

    constructor(private _router:Router,
                private _routeParams:RouteParams,
                private _service:HallService) {
        this._selectedId = +_routeParams.get('id');
    }

    ngOnInit() {
        this._service.getHalls().subscribe((halls:Hall[])=>{ 
            this.halls=halls;
        });
    }
}

ただし、例外が発生しました：

TypeError：this.http.get（...）。mapは[null]の関数ではありません

hall-center.component

import {Component} from "angular2/core";
import {RouterOutlet} from "angular2/router";
import {HallService} from "./hall.service";
import {RouteConfig} from "angular2/router";
import {HallListComponent} from "./hall-list.component";
import {HallDetailComponent} from "./hall-detail.component";
@Component({
    template:`
        <h2>my app</h2>
        <router-outlet></router-outlet>
    `,
    directives: [RouterOutlet],
    providers: [HallService]
})

@RouteConfig([
    {path: '/',         name: 'HallCenter', component:HallListComponent, useAsDefault:true},
    {path: '/hall-list', name: 'HallList', component:HallListComponent}
])

export class HallCenterComponent{}

app.component

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {HallCenterComponent} from "./hall/hall-center.component";
@Component({
    selector: 'my-app',
    template: `
        <h1>Examenopdracht Factory</h1>
        <a [routerLink]="['HallCenter']">Hall overview</a>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}
])
export class AppComponent { }

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

これをインポートする必要があると思います：

import 'rxjs/add/operator/map'

より一般的には、オブザーバブルのメソッドを増やしたい場合に使用します。 警告：これにより、50以上の演算子がすべてインポートされ、アプリケーションに追加されるため、バンドルサイズとロード時間に影響します。

import 'rxjs/Rx';

詳細については、この問題を参照してください。

ほんの一部の背景...新しく作成されたサーバー通信開発ガイド（これは最終的に）について議論/言及/説明しています：

RxJSライブラリは非常に大きいです。本番アプリケーションを作成してモバイルデバイスに展開する場合、サイズが重要になります。実際に必要な機能のみを含める必要があります。

したがって、AngularはObservable、rxjs/Observableモジュール内のの削除されたバージョンを公開します。このバージョンには、mapメソッドなど、ここで使用したい演算子を含め、ほとんどすべての演算子がありません。

必要な演算子を追加するのは私たち次第です。カスタムのObservable実装が要件に正確に調整されるまで、各演算子を1つずつ追加することができます。

したがって、@ Thierryがすでに回答したように、必要な演算子を取り込むだけです。

import 'rxjs/add/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';

または、怠惰な場合は、演算子の完全なセットを取得できます。警告：これにより、50以上の演算子がすべてApp Bundleに追加され、読み込み時間が影響を受けます

import 'rxjs/Rx';

rxjs 5.5以降では、使用することができますpipeable演算子を

import { map } from 'rxjs/operators';

何が問題になっていますか import 'rxjs/add/operator/map';

このアプローチを使用すると、map演算子がパッチされobservable.prototype 、このオブジェクトの一部になります。

後でmap、監視可能なストリームを処理するコードから演算子を削除することを決定したが、対応するインポートステートメントの削除に失敗した場合、実装するコードmapはの一部のままObservable.prototypeです。

バンドラーが未使用のコード（別名 tree shaking）を削除しようとするmapと、アプリケーションで使用されていなくても、オペレーターのコードをObservable に保持することを決定する場合 があります。

ソリューション -Pipeable operators

パイプ可能演算子は純粋な関数であり、Observableにパッチを適用しません。ES6のインポート構文を使用して演算子をインポートし、可変数のパラメーターを取るimport { map } from "rxjs/operators"関数pipe()、つまりチェーン可能な演算子にそれらをラップすることができます。

このようなもの：

getHalls() {
    return this.http.get(HallService.PATH + 'hall.json')
    .pipe(
        map((res: Response) => res.json())
    );
}

Angular 5ではRxJSのインポートが改善されています。

の代わりに

import 'rxjs/add/operator/map';

できるよ

import { map } from 'rxjs/operators';

Observable.subscribe直接使用する必要があります。

@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

    constructor(http:Http) {
        this.http=http;
    }

    getHalls() {
    // ########### No map
           return this.http.get(HallService.PATH + 'hall.json');
    }
}


export class HallListComponent implements OnInit {
    public halls:Hall[];
    / *** /
    ngOnInit() {
        this._service.getHalls()
           .subscribe(halls => this.halls = halls.json()); // <<--
    }
}

Angularバージョン5以降の場合、更新されたインポート行は次のようになります。

import { map } from 'rxjs/operators';

または

import { map } from 'rxjs/operators';

また、これらのバージョンはPipable演算子を完全にサポートしているため、.pipe（）および.subscribe（）を簡単に使用できます。

Angularバージョン2を使用している場合は、次の行が完全に機能するはずです。

import 'rxjs/add/operator/map';

または

import 'rxjs/add/operators/map';

それでも問題が発生する場合は、以下を実行する必要があります。

import 'rxjs/Rx';

bcozを直接使用することはお勧めしません。この演算子には多数の演算子が含まれているため（有用なものと有用でないもの）、業界の規範によると適切ではありません。上記のインポート行を最初に使用してみて、それが機能しない場合は、rxjs / Rxを使用する必要があります

この問題の解決策があります

このパッケージをインストールします。

npm install rxjs@6 rxjs-compat@6 --save

次に、このライブラリをインポートします

import 'rxjs/add/operator/map'

最後に、イオンプロジェクトを再起動します。

ionic serve -l

Angularバージョン6 "0.6.8" rxjsバージョン6 "^ 6.0.0"

このソリューションは、

  "@angular-devkit/core": "0.6.8",
  "rxjs": "^6.0.0"

Angularは毎日開発されているため、毎日多くの変更があり、このソリューションはAngular 6とrxjs 6が
最初にhttpで動作するためのものです。インポートする必要があるので、アプリでHttpModuleを宣言する必要があります。 module.ts

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

HttpModuleをNgmoduleに追加する必要があります-> インポート

  imports: [
    HttpModule,
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],

次にマップを操作するには、最初にパイプをインポートする必要があります。

import { pipe } from 'rxjs';

3番目に、マップ関数importが必要です：

import { map } from 'rxjs/operators';

次の例のように、パイプ内のマップを使用する必要があります。

 constructor(public http:Http){  }

    getusersGET(){
        return this.http.get('http://jsonplaceholder.typicode.com/users').pipe(
         map(res => res.json()  )  );
    }

それは完全に幸運です！

マップあなたがここに使用しては、ない.map()に取り組んJavaScriptで、それのRxjsマップ機能Observables角度で...

そのため、結果データにマップを使用する場合は、インポートする必要があります...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R> ソースのObservableによって発行された各値に特定のプロジェクト関数を適用し、結果の値をObservableとして発行します。

したがって、次のようにインポートするだけです。

import 'rxjs/add/operator/map';

angular2のHttpサービスはObservableタイプを返しますので、Angular2インストールディレクトリ（私の場合は「node_modules」）から、次のようにhttpサービスを使用してコンポーネントに Observableのマップ関数をインポートする必要があります：

import 'rxjs/add/operator/map';

Angular 6-'rxjs / Rx'をインポートするだけでうまくいきました

ファイルに行を追加するだけで、

'rxjs / Rx'をインポートします。

一連の依存関係をインポートします。角度5でテスト

確かに、RxJsはマップ演算子を別のモジュールに分離しているため、他の演算子と同様に明示的にインポートする必要があります。

import rxjs/add/operator/map;

そして、あなたは元気になります。

グローバルインポートは安全です。

'rxjs / Rx'をインポートします。

import 'rxjs/add/operator/map';

あなたの問題を解決します

Angular 5.2.0とrxjs 5.5.2でテストしました

これは、rxjsを使用しており、rxjs関数が静的ではないために発生しています。つまり、それらを直接呼び出すことはできず、パイプ内のメソッドを呼び出して、rxjsライブラリからその関数をインポートする必要があります。

ただし、rxjs-compatを使用している場合は、rxjs-compat演算子をインポートするだけです

以下のコマンドを試してみましたが、修正されました：

npm install rxjs@6 rxjs-compat@6 --save


import 'rxjs/Rx';

'rxjs / operators'から{map}をインポートします。

これは角度8で私のために働きます

さらに、@ mlc-mlapisがコメントしたように、lettable演算子とプロトタイプのパッチメソッドを混在させています。どちらか一方を使用してください。

あなたの場合、それは

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

@Injectable()
export class SwPeopleService {
    people$ = this.http.get('https://swapi.co/api/people/')
      .map((res:any) => res.results);

    constructor(private http: HttpClient) {} 
}

https://stackblitz.com/edit/angular-http-observables-9nchvz?file=app%2Fsw-people.service.ts