Angular 7 - 出现错误：'rxjs没有导出成员 'Observable'。

Question

Angular 7 - 出现错误：'rxjs没有导出成员 'Observable'。

3

这是我的 package.json 文件：

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.1.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "ng2-opd-popup": "^1.1.21",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"

service.ts文件的代码如下：

import { Injectable } from '@angular/core';
import { Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
//import { Observable } from 'rxjs/Observable';
//import   'rxjs/add/observable';
import { Observable} from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class EmpService {
  employees=[];
  constructor(private _http: Http) { }
  addEmployee(info){
    return this._http.post("http://localhost/data/insert.php",info)
      .map(()=>"");
  }
}

我遇到了以下错误：

rxjs没有导出成员“Observable”。

版本是否存在问题？

- Mirshad

你尝试在命令提示符中运行“npm install”了吗？ - Roman Šimík

是的，在启动项目之前已经安装了它。node_modules文件在除了这种情况之外都能正常工作。 - Mirshad

可能是重复的问题，参考我在学习Angular时遇到了一个错误：“没有导出成员'Observable'”。 - veben

3个回答

2

您的代码是使用旧版的Angular编写的。需要进行以下更改：

1. Use of Http is deprecated
2. importing map & Observable


import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class EmpService {
  employees=[];
  constructor(private _http: HttpClient) { }
  addEmployee(info){
    return this._http.post("http://localhost/data/insert.php",info)
      .pipe(
        map(() => '' )
      )

  }
}

参考：

- rijin

在rxjs@6.3.3中，你需要这样导入Observable：import { Observable } from 'rxjs'; - Presto

两者都可以...无论如何，我们正在从rxjs中导入单个类。 - rijin

两种方式都可以，但是你在rxjs@6.3.3中导入的实际上是'rxjs-compat/Observable'。良好的实践是不要从rxjs-compat中导入observable，而是使用rxjs。唯一使用rxjs-compat的好理由是如果你有依赖项仍然依赖于较旧版本的rxjs。 - Presto

我读到过，所有被弃用的东西都将在7版本中被移除。 - Presto

请勿使用 import { Observable } from 'rxjs/Observable';，而应该使用 import { Observable } from 'rxjs';。 - Chinmoy

0

你的问题可能与错误的包有关，因为你的做法是正确的。在 Angular 7 中使用 Observable 的正确方法是通过 import { Observable } from 'rxjs';

不确定你是否从 Angular 6 升级过来，但在升级文档上：

从 HttpModule 和 Http 服务切换到 HttpClientModule 和 HttpClient 服务。HttpClient 简化了默认的人体工程学（您不再需要映射到 json），现在支持类型返回值和拦截器。在 angular.io 上阅读更多信息

使用 rxjs-tslint 自动更新规则删除已弃用的 RxJS 6 功能

对于大多数应用程序，这意味着运行以下两个命令：

npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json

一旦你和你的所有依赖项都升级到 RxJS 6，就可以删除 rxjs-compat。

解决后，请运行 npm install

另一种可能性是缓存的 node_modules，可以将其删除： git rm -r --cached node_modules 您可能会有一些因此，一旦清理完成，请运行 npm install，然后应该就能正确安装包了。

- dream88

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- veben · Accepted Answer

为了符合rxjs6和angular 7的要求，您需要更换：

import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

由：

import { map } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';

并且像这样导入Observable:

import { Observable } from 'rxjs';

不是像这样的：

import { Observable } from 'rxjs/Observable';
// or import   'rxjs/add/observable';

您可能需要删除node_modules文件夹并运行npm install，因为似乎其中有一些错误的软件包。