TypeError: Observable_1.Observable.fromEvent 不是 ng2-bs3-modal/ng2-bs3-modal 模块中的函数

Posted 2023-02-18

【中文标题】TypeError: Observable_1.Observable.fromEvent 不是 ng2-bs3-modal/ng2-bs3-modal 模块中的函数

【英文标题】：TypeError: Observable_1.Observable.fromEvent is not a function in ng2-bs3-modal/ng2-bs3-modal module

【发布时间】：2020-01-11 08:25:40

【问题描述】：

当我尝试导航到使用 ng2-bs3-modal 的任何组件时，我遇到了错误。相同的代码在不同的应用程序中工作。#

我得到的错误。

core.js:1673 ERROR 错误：未捕获（承诺中）：TypeError：Observable_1.Observable.fromEvent 不是函数 TypeError: Observable_1.Observable.fromEvent 不是函数 在 ModalInstance.push../node_modules/ng2-bs3-modal/components/modal-instance.js.ModalInstance.init (modal-instance.js:52) 在新的 ModalInstance (modal-instance.js:12) 在新的 ModalComponent (modal.js:17) 在 createClass (core.js:9294) 在 createDirectiveInstance (core.js:9179) 在 createViewNodes (core.js:10399) 在 callViewAction (core.js:10715) 在 execComponentViewsAction (core.js:10634) 在 createViewNodes (core.js:10427) 在 createRootView (core.js:10313) 在 resolvePromise (zone.js:814) 在 resolvePromise (zone.js:771) 在 zone.js:873 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) 在 Object.onInvokeTask (core.js:3811) 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) 在 Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) 在 drainMicroTaskQueue (zone.js:595) 在 ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [作为调用] (zone.js:500) 在调用任务（zone.js:1540）

依赖##

dependencies": 
    "@angular/common": "~6.1.9",
    "@angular/compiler": "~6.1.9",
    "@angular/core": "~6.1.9",
    "@angular/forms": "~6.1.9",
    "@angular/http": "~6.1.9",
    "@angular/platform-browser": "~6.1.9",
    "@angular/platform-browser-dynamic": "~6.1.9",
    "@angular/router": "~6.1.9",
    "@ngui/datetime-picker": "^0.16.2",
    "angular-in-memory-web-api": "~0.6.1",
    "clipboard": "~1.7.1",
    "core-js": "~2.4.1",
    "ngx-pagination": "~3.1.1",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "systemjs": "~0.19.40",
    "zone.js": "~0.8.26"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "^0.12.4",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "~6.0.3",
    "@ngui/utils": "~0.7.0",
    "@types/jasmine": "~2.5.36",
    "@types/node": "~6.0.46",
    "canonical-path": "~0.0.2",
    "concurrently": "~3.2.0",
    "jasmine-core": "~2.4.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.0.2",
    "karma-jasmine-html-reporter": "~0.2.2",
    "lite-server": "~2.4.0",
    "lodash": "~4.17.11",
    "ng2-bs3-modal": "^0.10.4",
    "protractor": "~5.4.1",
    "rimraf": "~2.5.4",
    "tslint": "~3.15.1",
    "typescript": "~2.7.2"
  ,
  "repository": 

我的组件中的示例代码。

import  ModalComponent  from 'ng2-bs3-modal/ng2-bs3-modal';
import  NguiDatetimePickerModule  from '@ngui/datetime-picker';
import  NgxPaginationModule  from 'ngx-pagination';
import  IETLTaskSetup  from '../../../Models/etltasksetup';
import  DBOperation  from '../../../Shared/enum';
import  Environment  from '../../../Shared/enum';
import  Observable  from 'rxjs';
import  Global  from '../../../Shared/global';
import  ISecurity  from '../../../Models/security';

@Component(
    templateUrl: `../View/etltasksetup.component.html`
)

export class ETLTaskComponent implements OnInit 
    @ViewChild('modal') modal: ModalComponent;
    @ViewChild('modal2') modal2: ModalComponent;````

【参考方案1】：

我将 ng2-bs3-modal 更新到最新版本 0.15.0。然后我更新了与 ng2-bs3-modal 相关的所有代码，如下所示 旧代码

<modal #modal2>
    <form >
        <modal-header [showDismiss]="true">

        </modal-header>
        <modal-body>

        </modal-body>
        <modal-footer style="background-color:cornsilk;">

        </modal-footer>
    </form>
<modal>

新代码

<bs-modal #modal2>
    <form >
        <bs-modal-header [showDismiss]="true">

        </bs-modal-header>
        <bs-modal-body>

        </bs-modal-body>
        <bs-modal-footer style="background-color:cornsilk;">

        </bs-modal-footer>
    </form>
</bs-modal>

【参考方案2】：

你没有导入onInit

import  OnInit  from '@angular/core';

编辑：

不再支持Rxjs 6.x .fromEvent()。您必须向我们展示您在代码中使用它的位置。如果它发生在您的 NodeModule ModalInstance 中并且您无法控制代码，则需要摆脱旧模块或对其进行更新。

使用示例

// RxJS v6+
import  fromEvent  from 'rxjs';
import  map  from 'rxjs/operators';

//create observable that emits click events
const source = fromEvent(document, 'click');
//map to string with given event timestamp
const example = source.pipe(map(event => `Event time: $event.timeStamp`));
//output (example): 'Event time: 7276.390000000001'
const subscribe = example.subscribe(val => console.log(val));

【讨论】：

它在上面，我粘贴的时候漏掉了

感谢您的建议。我从这个 ng2-bs3-modal 节点模块收到错误。在浏览器开发工具中，我可以看到代码“使用严格”； var Observable_1 = require('rxjs/Observable');需要('rxjs/add/operator/map');要求（'rxjs/add/observable/fromEvent'）；这一行抛出错误。 this.shown = Observable_1.Observable.fromEvent(this.$modal, this.shownEventName)。我正在使用最新版本的“ng2-bs3-modal”：“^0.15.0”，刚刚更新。还是不行。

它在那个版本的 rxjs 中根本不起作用。您有以下选择。 1、降级rxjs，移除node模块，或者手动更新node模块。如果您每次升级模块时都手动更新，您的代码将被覆盖，您必须再次更新它。尝试在他们的 GIT 上发布对修复的拉取请求，或将其发布在他们的 git 上以供他们更新模式。无论哪种方式，它都不能与当前版本的 rxjs 一起使用。

我将模块更新到最新版本，它工作正常。但是我必须做很多代码更改