TypeError: Observable_1.Observable.fromEvent is not a function in ng2-bs3-modal/ng2-bs3-modal module

1
votes

When I try to navigate to any componenet which using ng2-bs3-modal I am getting below error. Same code working in different application.#

The error I am getting.

core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Observable_1.Observable.fromEvent is not a function TypeError: Observable_1.Observable.fromEvent is not a function at ModalInstance.push../node_modules/ng2-bs3-modal/components/modal-instance.js.ModalInstance.init (modal-instance.js:52) at new ModalInstance (modal-instance.js:12) at new ModalComponent (modal.js:17) at createClass (core.js:9294) at createDirectiveInstance (core.js:9179) at createViewNodes (core.js:10399) at callViewAction (core.js:10715) at execComponentViewsAction (core.js:10634) at createViewNodes (core.js:10427) at createRootView (core.js:10313) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3811) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1540)

Dependencies##

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": {}
}

Sample code in my componenet.

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;````
2
angular

2 Answers

1
votes

I Updated ng2-bs3-modal to latest that is 0.15.0. Then I updated all the codes related to ng2-bs3-modal like below old code 

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

        </modal-header>
        <modal-body>

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

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

new code

<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>
0
votes

You didn't import onInit

import { OnInit } from '@angular/core';

Edit:

In Rxjs 6.x .fromEvent() is not supported anymore. You have to show us where you're using it in your code. If it's happening in your NodeModule ModalInstance and you don't control the code, you need to get rid of that old module or update it.

Example on how to use it

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