angular - 无法导入 import { map } from 'rxjs/operators' ；

Question

我正在使用 Angular 客户端:

Angular CLI: 6.0.3 Node: 8.10.0 OS: win32 x64 Angular: 6.0.3 ... animations, cli, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

Package Version ----------------------------------------------------------- @angular-devkit/architect 0.6.3 @angular-devkit/build-angular 0.6.3 @angular-devkit/build-optimizer 0.6.3 @angular-devkit/core 0.6.3 @angular-devkit/schematics 0.6.3 @ngtools/webpack 6.0.3 @schematics/angular 0.6.3 @schematics/update 0.6.3 rxjs 6.2.0 typescript 2.7.2 webpack 4.8.3

我正在使用 Angular 版本 6:

Your global Angular CLI version (6.0.5) is greater than your local version (6.0.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

但无论我尝试 visual studio code 还是会说:

ERROR in ./src/app/_services/auth.service.ts Module not found: Error: Can't resolve './rxjs-operators' in 'D:\DatingApp\src\app_services' i ｢wdm｣: Failed to compile.

这是我的代码:

// import { map, filter, switchMap } from 'rxjs/operators';
import './rxjs-operators';
import {Http, Headers, RequestOptions, Response} from '@angular/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
// import 'rxjs/add/operator/map';
import { Observable } from 'rxjs';


@Injectable()

export class AuthService {
  baseUrl = 'http://localhost:5000/api/auth';
  userToken:  any;


constructor(private http: Http) { }

login(model: any) {
  const headers = new Headers({'Content-type': 'application/json'});
  const options = new RequestOptions({headers: headers});
  return this.http.post(this.baseUrl + 'login', model, options).pipe(map(response => {

    const user = response.json();
    if (user) {
      localStorage.setItem('token', user.tokenString);
      this.userToken = user.tokenString;

    }
  }));
  }

}

那么angular可以识别的解决方案是什么:

import { map } from 'rxjs/operators';

谢谢

这是我的 app.module.ts:

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

import { AppComponent } from './app.component';
import { ValueComponent } from './value/value.component';
import { NavComponent } from './nav/nav.component';
import { AuthService } from './services/auth.service';

@NgModule({
  declarations: [
    AppComponent,
    ValueComponent,
    NavComponent
],
  imports: [
    BrowserModule,
  HttpModule,
  FormsModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

好的，我改成了这样:

import { FormsModule} from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { ValueComponent } from './value/value.component';
import { NavComponent } from './nav/nav.component';
import { AuthService } from './services/auth.service';

@NgModule({
    declarations: [
    AppComponent,
    ValueComponent,
    NavComponent
],
  imports: [
    BrowserModule,
    HttpClientModule,
  FormsModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

好的，我改成了这样:

// import { map, filter, switchMap } from 'rxjs/operators';
import './rxjs-operators';
import {Headers, RequestOptions, Response} from '@angular/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
// import 'rxjs/add/operator/map';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';


@Injectable()

export class AuthService {
  baseUrl = 'http://localhost:5000/api/auth';
  userToken:  any;


constructor(private http: HttpClient ) { }

login(model: any) {
  const headers = new Headers({'Content-type': 'application/json'});
  const options = new RequestOptions({headers: headers});
  return this.http.post(this.baseUrl + 'login', model, options).pipe(map(response => {

    const user = response.json();
    if (user) {
      localStorage.setItem('token', user.tokenString);
      this.userToken = user.tokenString;

    }
  }));
  }

}

但是现在我得到了两个编译器错误:

ERROR in src/app/services/auth.service.ts(23,56): error TS2345: Argument of type 'RequestOptions' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'. Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'. Index signature is missing in type 'Headers'. src/app/services/auth.service.ts(25,27): error TS2339: Property 'json' does not exist on type '{}'.

Answer 1

尝试安装 rxjs-compat:

npm i --save rxjs-compat

然后像这样导入它:import 'rxjs-compat'

我知道在 Angular 6 中，一些依赖项需要兼容库才能使用这些 rxjs 运算符。

在以前的版本中，导入是 import 'rxjs/add/operators/map'

我也相信新的导入语法是:从 'rxjs/operators' 导入 { map };