错误：无法解析“rxjs/add/operator/map”

Posted 2023-03-13

【中文标题】错误：无法解析“rxjs/add/operator/map”

【英文标题】：Error: Can't resolve 'rxjs/add/operator/map'

【发布时间】：2018-11-23 13:15:21

【问题描述】：

这是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');

  

【问题讨论】：

如果出现此问题的项目使用 angular 6.x，那么您应该阅读该版本和 rxjs 6.x 的变更日志

【参考方案1】：

在 angular 6 import 'rxjs/add/operator/map'; 变成：

import  map  from 'rxjs/operators';

在这里阅读：https://www.academind.com/learn/javascript/rxjs-6-what-changed/

【讨论】：

似乎它也适用于 Angular 4。

【参考方案2】：

在使用 rxjs 6 方面有一些相当大的变化。

进口：

如前所述，您现在应该使用：

import  map  from 'rxjs/operators';

（其他运算符也一样）

我想在这里提一下其他主要变化：

Observable、Subject 和创建 Observables 的方法（如 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

【讨论】：

Pac0 - 感谢您提供完整的答案，为什么没有其他人打扰这样做！ （安 7）

按照 youtube 教程，事情是从 import 'rxjs/add/operator/map' 改变的； this.http.get('jsonplaceholder.typicode.com/posts')。地图(res => res.json());从 'rxjs/operators' 导入 map ； this.http.get('jsonplaceholder.typicode.com/posts').pipe(map(res => res.json()))

【参考方案3】：

较新版本的 Angular 不支持地图。因此，您需要使用以下命令在命令提示符下安装它。 首先进入项目目录，使用命令：

npm install --save rxjs-compat

别忘了导入这个：

import 'rxjs/add/operator/map';

谢谢！

【讨论】：

对于运行“npm install --save rxjs-compat”的任何人，请先关闭项目的 IDE。我花了 4-5 分钟才开始在控制台中看到输出，所以慢慢来。

【参考方案4】：

import  from  from 'rxjs';
import  filter  from 'rxjs/operators';

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习