Question

我正在使用Angular cli：

Angular CLI：6.0.3节点：8.10.0操作系统：win32 x64 Angular：6.0.3 ...   动画，cli，common，编译器，编译器-cli，core，forms ... http，   语言服务，平台浏览器......平台浏览器动态，   路由器

包版本   -------------------------------------------------- --------- @ 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 verison 6：

您的全局Angular CLI版本（6.0.5）大于您的本地版本   版本（6.0.3）。使用本地Angular CLI版本。

要禁用此警告，请使用“ng config -g cli.warnings.versionMismatch”   假”。

但是，我尝试使用visual studio代码仍然说：

./src/app/_services/auth.service.ts中的错误找不到模块：错误：无法解析'D：\ DatingApp \ src \ app_services'中的'./rxjs-operators' 「wdm」：编译失败。

这是我的代码：

// 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;

    }
  }));
  }

}

那么角度可以识别的解决方案是什么：

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 { }

Oke，我改为：

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 { }

Oke，我改为：

// 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;

    }
  }));
  }

}

但现在我遇到两个编译器错误：

src / app / services / auth.service.ts（23,56）中的错误：错误TS2345： “RequestOptions”类型的参数不能分配给参数输入'{headers？：HttpHeaders | {[header：string]：string |串[]; };观察？：“身体”; params？：Ht ......'。财产'标题'的类型是不相容的。类型'标题'不能分配给'HttpHeaders |类型{[header：string]：string |串[]; }”。类型'标题'不能分配给'{[header：string]：string |串[]; }”。 “标题”类型中缺少索引签名。 src / app / services / auth.service.ts（25,27）：错误TS2339：属性'json' 在类型“{}”上不存在。

Answer 1

尝试安装rxjs-compat：

npm i --save rxjs-compat

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

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

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

我也相信新的导入语法是： import { map } from 'rxjs/operators';

无法从'rxjs /运算符'导入导入{map};

1 个答案: