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

Posted 2023-02-22

【中文标题】Angular2 RxJS 得到“Observable_1.Observable.fromEvent 不是函数”错误

【英文标题】：Angular2 RxJS getting 'Observable_1.Observable.fromEvent is not a function' error

【发布时间】：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>

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

【参考方案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'

导入所有算子刚刚重载了应用，建议只包含需要的算子。