Angular2 RxJS 得到“Observable_1.Observable.fromEvent 不是函数”错误答案

【问题标题】：Angular2 RxJS getting 'Observable_1.Observable.fromEvent is not a function' errorAngular2 RxJS 得到“Observable_1.Observable.fromEvent 不是函数”错误
【发布时间】：2016-03-27 14:45:34
【问题描述】：

我正在使用 AngularJS 2 Beta 0，我正在尝试从窗口对象上的事件创建一个 RxJS Observable。我相信我知道在我的服务中将事件捕获为 Observable 的公式：

var observ = Observable.fromEvent(this.windowHandle, 'hashchange');

问题是每次我尝试运行此代码时，都会收到一条错误消息，指出“fromEvent”不是函数。

Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: Observable_1.Observable.fromEvent is not a function

这似乎暗示我没有正确处理我的import，因为 RxJS 不包含在 Angular 2 的构建中，尽管我的应用程序的其余部分正常运行，这对我来说意味着 RxJS 是应该是这样的。

我在服务中的导入如下所示：

import {Observable} from 'rxjs/Observable';

虽然我也尝试过使用它（对代码进行适当的更改），但结果相同：

import {FromEventObservable} from 'rxjs/observable/fromEvent';

我的 Index.html 中有以下配置：

<script>
    System.config({
        map: {
            rxjs: 'node_modules/rxjs'
        },
        packages: {
            'app': {defaultExtension: 'js'},
            'rxjs': {defaultExtension: 'js'}
        }
    });
    System.import('app/app');
</script>

谁能告诉我我做错了什么？

【问题讨论】：

标签： javascript angular typescript rxjs reactive-extensions-js

【解决方案1】：

绝对不需要一次导入所有运算符！您刚刚导入了fromEvent 错误。你可以这样做：

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

编辑：除了我已经写过的内容：使用 Angular 的 AoT 编译器进行树摇动会根据您导入的内容删除未使用的代码。如果你只是从 rxjs/rx 导入一些对象或函数，编译器无法删除任何东西。始终只导入你需要的东西！

【讨论】：

请注意，您必须将 rxjs/Observable 中的“O”大写。我一直在寻找这个错误。
这是更好的答案。导入所有的 rxjs 肯定会减慢你的启动时间。
这绝对是更好的解决方案，即使@Michael_Oryl's 解决了它。
注意：ng serve with --aot 可能无法获取新的导入并一直抱怨，直到您将其杀死并重新启动。

【解决方案2】：

问题似乎是 import 语句应该是这样的：

import {Observable} from 'rxjs/Rx';

请注意，Observable 是从 rxjs/Rx 引入的，而不是从 rxjs/Observable 引入的。 As @EricMartinez mentions，以这种方式拉取它会自动获得所有运算符（如 .map()）。

【讨论】：

为什么我们从 rxjs 中添加所有内容，我们不能只添加需要的部分
@MahmoudHboubati 是的，您可以只携带所需的零件。请参阅下面的答案..这是导入内容的正确方法，以免您的资产包膨胀。
这不是推荐的用法。你应该永远不要导入所有的操作符（因此永远不要使用 from 'rxjs/RX'
导入所有算子刚刚重载了应用，建议只包含需要的算子。