我正在使用Angular cli:
Angular CLI:6.0.3节点:8.10.0操作系统:win32 x64 Angular:6.0.3 ...动画,cli,通用,编译器,编译器 - cli,核心,表单... http,语言服务,平台 - 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 verison 6:
您的全局Angular CLI版本(6.0.5)大于本地版本(6.0.3) . 使用本地Angular CLI版本 . 要禁用此警告,请使用“ng config -g cli.warnings.versionMismatch false” .
但是,我尝试使用visual studio代码仍然说:
./src/app/_services/auth.service.ts中的错误找不到模块:错误:无法解析'D:\ DatingApp \ src \ app_services'i“wdm”中的' . / rxjs-operators':失败编译 .
这是我的代码:
// 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 { }
哦,我换成了这个:
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;
}
}));
}
}
但现在我得到两个编译器错误:
src / app / services / auth.service.ts(23,56)中的错误:错误TS2345:类型'RequestOptions'的参数不能分配给类型'{headers?:HttpHeaders | {[header:string]:string |串[]; };观察?:“身体”; params?:Ht ......' . 属性“ Headers ”的类型不兼容 . 类型' Headers '不能分配给'HttpHeaders |类型{[header:string]:string |串[]; }” . 类型' Headers '不能分配给'{[header:string]:string |串[]; }” . “ Headers ”类型中缺少索引签名 . src / app / services / auth.service.ts(25,27):错误TS2339:属性'json'在类型'{}'上不存在 .
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';