web-dev-qa-db-ja.com

エラー:「rxjs / add / operator / map」を解決できません

これはapp.module.tsです。別のプロジェクトでマップのインポートを実行しようとしましたが、うまく機能しましたが、このプロジェクトでは機能していません。

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

    import { AppComponent } from './app.component';
    import { PagesComponent } from './pages/pages.component';

    @NgModule({
      declarations: [
        AppComponent,
        PagesComponent
      ],
      imports: [
        BrowserModule,
        HttpModule

      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import {PageService} from './page.service';

@Component({

  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ["../assets/public/css/adminstyle.css",
            "../assets/public/css/demo.css",
          "../assets/public/css/style.css"
        ,"../assets/public/css/stylesheet.css"],
  providers:[PageService]
})
export class AppComponent {
  title = 'app';
}

page.service.ts

import {Injectable} from '@angular/core';
import {Http,Headers} from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class PageService {

  constructor(private http:Http) { 
  console.log('Task Service Initialized');

  }
}
14
Asad

Rxjs 6の使用には、かなり大きな変更がいくつかあります。

インポート

すでに述べたように、次を使用する必要があります。

import { map } from 'rxjs/operators';

(および他の演算子についても同じ)

ここで他の主な変更点について言及したいと思います。

ObservableSubject、およびObservables(ofなど)を作成するメソッドは、次のようにインポートする必要があります。

import { Observable, of, Subject } from 'rxjs';

ほとんどの演算子を適用するにはpipeを使用する必要があります、これは少し奇妙に見えるかもしれません。

例えば:

obs.pipe(
    map(....),
    secondOperator(....),
    thirdOperator()
)

の代わりに

obs.map(....)
   .secondOperator(....)
   .thirdOperator()

最後に、パイプの変更とJavaScriptの予約語との競合により、一部の演算子は名前を変更する必要がありました

dotapになります

catchfinallycatchErrorfinalizeになります

switchswitchAllになります

他の関数も同様に名前が変更されました:

fromPromisefromになります

throwthrowErrorになります

34
Pac0

In angular 6 import 'rxjs/add/operator/map';は次のようになります:

import { map } from 'rxjs/operators';

ここをお読みください: https://www.academind.com/learn/javascript/rxjs-6-what-c​​hanged/

14

Angularの新しいバージョンはマップをサポートしていません。そのため、次のコマンドを使用してコマンドプロンプトを使用してインストールする必要があります。最初にプロジェクトディレクトリに移動し、次のコマンドを使用します。

npm install --save rxjs-compat

これをインポートすることを忘れないでください:

import 'rxjs/add/operator/map';

ありがとう!

4