Error: Can't resolve 'rxjs/add/operator/map'
Error: Can't resolve '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');
}
}
在angular6import 'rxjs/add/operator/map';
变为:
import { map } from 'rxjs/operators';
阅读此处:https://www.academind.com/learn/javascript/rxjs-6-what-changed/
rxjs 6 的使用有一些相当大的变化。
进口:
如前所述,您现在应该使用:
import { map } from 'rxjs/operators';
(其他运算符也一样)
我想在此提及其他主要变化:
Observable
、Subject
和创建 Observable
的方法(如 of
)现在必须像这样导入:
import { Observable, of, Subject } from 'rxjs';
您将需要使用 pipe
来应用大多数运算符,这可能看起来有点奇怪。
例如:
obs.pipe(
map(....),
secondOperator(....),
thirdOperator()
)
而不是
obs.map(....)
.secondOperator(....)
.thirdOperator()
最后,由于管道的变化和与JavaScript保留字的冲突,一些运算符不得不重命名 :
do
变为 tap
catch
和 finally
变成 catchError
finalize
switch
变为 switchAll
其他功能也已重命名:
fromPromise
变为 from
throw
变为 throwError
Angular 的较新版本不支持地图。因此,您需要使用以下命令在命令提示符下安装它。
首先进入项目目录并使用命令:
npm install --save rxjs-compat
别忘了导入这个:
import 'rxjs/add/operator/map';
谢谢!
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';
这是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');
}
}
在angular6import 'rxjs/add/operator/map';
变为:
import { map } from 'rxjs/operators';
阅读此处:https://www.academind.com/learn/javascript/rxjs-6-what-changed/
rxjs 6 的使用有一些相当大的变化。
进口:
如前所述,您现在应该使用:
import { map } from 'rxjs/operators';
(其他运算符也一样)
我想在此提及其他主要变化:
Observable
、Subject
和创建 Observable
的方法(如 of
)现在必须像这样导入:
import { Observable, of, Subject } from 'rxjs';
您将需要使用 pipe
来应用大多数运算符,这可能看起来有点奇怪。
例如:
obs.pipe(
map(....),
secondOperator(....),
thirdOperator()
)
而不是
obs.map(....)
.secondOperator(....)
.thirdOperator()
最后,由于管道的变化和与JavaScript保留字的冲突,一些运算符不得不重命名 :
do
变为 tap
catch
和 finally
变成 catchError
finalize
switch
变为 switchAll
其他功能也已重命名:
fromPromise
变为 from
throw
变为 throwError
Angular 的较新版本不支持地图。因此,您需要使用以下命令在命令提示符下安装它。 首先进入项目目录并使用命令:
npm install --save rxjs-compat
别忘了导入这个:
import 'rxjs/add/operator/map';
谢谢!
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';