错误:无法解析'rxjs/add/operator/map'

Asa*_*sad 17 rxjs angular rxjs6

这是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 { }
Run Code Online (Sandbox Code Playgroud)

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';
}
Run Code Online (Sandbox Code Playgroud)

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

  }
}
Run Code Online (Sandbox Code Playgroud)

Pac*_*ac0 41

使用rxjs有一些相当大的变化6.

进口:

如前所述,您现在应该使用:

import { map } from 'rxjs/operators';
Run Code Online (Sandbox Code Playgroud)

(和其他运营商一样)

我想在这里提到其他主要变化:

Observable,Subject和方法,创造ObservableS(喜欢of)现在要导入这样的:

import { Observable, of, Subject } from 'rxjs';
Run Code Online (Sandbox Code Playgroud)

您将需要使用pipe以应用大多数操作符,这可能看起来有点奇怪.

例如:

obs.pipe(
    map(....),
    secondOperator(....),
    thirdOperator()
)
Run Code Online (Sandbox Code Playgroud)

代替

obs.map(....)
   .secondOperator(....)
   .thirdOperator()
Run Code Online (Sandbox Code Playgroud)

最后,由于管道的更改和与JavaScript保留字的冲突,一些操作符必须重命名:

dotap

catchfinally成为catchError finalize

switchswitchAll

其他功能也被重命名:

fromPromisefrom

throwthrowError

  • Pac0 - 感谢您的完整答案,为什么其他人都不愿意这样做!(Ang 7) (3认同)

לבנ*_*לכה 14

在角度6 import 'rxjs/add/operator/map';成为:

import { map } from 'rxjs/operators';
Run Code Online (Sandbox Code Playgroud)

请阅读:https://www.academind.com/learn/javascript/rxjs-6-what-c​​hanged/


Kam*_*ngh 6

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

npm install --save rxjs-compat
Run Code Online (Sandbox Code Playgroud)

不要忘记导入:

import 'rxjs/add/operator/map';
Run Code Online (Sandbox Code Playgroud)

谢谢!