Getting error on modal.open(): this.$modal.appendTo(...).modal is not a function about ng2-bs3-modal

[dougludlow]

I haven't had any luck with angular beta.11, you might try beta.9 and see if it works from there. If not, let me know, I might've missed something on my most recent release. (I rewrote a bunch of stuff)

[d1820]

rolling back to beta.9 shows the modal, and lets the default save button work.

However, pressing the cancel button on the example form causes this error:

ng2-bs3-modal.ts:19 Error: Task does not support cancellation, or is already canceled.
    at ZoneDelegate.cancelTask (http://localhost:17604/lib/shims/angular2-polyfills.js:369:24)
    at Zone.cancelTask (http://localhost:17604/lib/shims/angular2-polyfills.js:279:45)
    at zoneAwareRemoveEventListener (http://localhost:17604/lib/shims/angular2-polyfills.js:872:25)
    at HTMLDivElement.removeEventListener (eval at createNamedFn (http://localhost:17604/lib/shims/angular2-polyfills.js:953:18), <anonymous>:3:46)
    at Function.jQuery.removeEvent (http://localhost:17604/lib/commonlib.js:51305:8)
    at Object.jQuery.event.remove (http://localhost:17604/lib/commonlib.js:51030:13)
    at HTMLDivElement.<anonymous> (http://localhost:17604/lib/commonlib.js:51463:17)
    at Function.jQuery.extend.each (http://localhost:17604/lib/commonlib.js:46711:19)
    at jQuery.fn.jQuery.each (http://localhost:17604/lib/commonlib.js:46483:17)
    at jQuery.fn.extend.off (http://localhost:17604/lib/commonlib.js:51462:15)
  -------------   Elapsed: 3515 ms; At: Thu Mar 24 2016 17:12:21 GMT-0700 (US Mountain Standard Time)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:17604/lib/shims/angular2-polyfills.js:1324:23)
    at ZoneDelegate.scheduleTask (http://localhost:17604/lib/shims/angular2-polyfills.js:332:50)
    at Zone.scheduleEventTask (http://localhost:17604/lib/shims/angular2-polyfills.js:276:40)
    at zoneAwareAddEventListener (http://localhost:17604/lib/shims/angular2-polyfills.js:860:11)
    at HTMLDivElement.addEventListener (eval at createNamedFn (http://localhost:17604/lib/shims/angular2-polyfills.js:953:18), <anonymous>:3:43)
    at Object.jQuery.event.add (http://localhost:17604/lib/commonlib.js:50943:12)
    at HTMLDivElement.<anonymous> (http://localhost:17604/lib/commonlib.js:50849:16)
    at Function.jQuery.extend.each (http://localhost:17604/lib/commonlib.js:46711:19)
  -------------   Elapsed: 1107 ms; At: Thu Mar 24 2016 17:12:20 GMT-0700 (US Mountain Standard Time)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:17604/lib/shims/angular2-polyfills.js:1324:23)
    at ZoneDelegate.scheduleTask (http://localhost:17604/lib/shims/angular2-polyfills.js:332:50)
    at Zone.scheduleEventTask (http://localhost:17604/lib/shims/angular2-polyfills.js:276:40)
    at zoneAwareAddEventListener (http://localhost:17604/lib/shims/angular2-polyfills.js:860:11)
    at HTMLDivElement.addEventListener (eval at createNamedFn (http://localhost:17604/lib/shims/angular2-polyfills.js:953:18), <anonymous>:3:43)
    at Object.jQuery.event.add (http://localhost:17604/lib/commonlib.js:50943:12)
    at HTMLDivElement.<anonymous> (http://localhost:17604/lib/commonlib.js:50849:16)
    at Function.jQuery.extend.each (http://localhost:17604/lib/commonlib.js:46711:19)

This seems to happen on any second opening of the modal, then trying to click any of the buttons or close icon.
Thanks

[dougludlow]

Odd... I've only seen the "Task does not support cancellation, or is already canceled." error on versions above beta.9. The demo is using beta.9 and doesn't throw that error on close. I wonder what could be different.

When you downgraded your angular version to beta.9 did you also downgrade your zone.js to 0.5.15? I think beta.12 relies on 0.6.5 and the "Task does not support cancellation, or is already canceled." error is related to zone.js.

[d1820]

Aww yes the magical dance of version matching.. downgrading zone.js to 5.15 worked.

to close this out final versions used with this version: 0.4.2

"angular2": "2.0.0-beta.9",
        "bootstrap": "^3.3.6",
        "es6-promise": "^3.1.2",
        "es6-shim": "^0.35.0",
        "font-awesome": "^4.5.0",
        "reflect-metadata": "0.1.3",
        "rxjs": "^5.0.0-beta.3",
        "systemjs": "^0.19.24",
        "zone.js": "0.5.15",

Thanks

[nikkwong]

I'm getting this too.

  "dependencies": {
    "angular2": "2.0.0-beta.9",
    "es6-module-loader": "^0.17.8",
    "es6-shim": "^0.33.3",
    "ng2-bootstrap": "^1.0.5",
    "ng2-cookies": "^0.1.4",
    "ng2-file-upload": "^1.0.0-beta.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.3",
    "systemjs": "~0.19.24",
    "underscore": "^1.8.3",
    "ws": "^1.0.1",
    "zone.js": "^0.5.15"
  }

[nikkwong]

angular2.js?1459916752966:23597 TypeError: this.$modal.appendTo(...).modal is not a function
    at ModalInstance.init (http://localhost/node_modules/ng2-bs3-modal/components/modal-instance.js:50:38)
    at new ModalInstance (http://localhost/node_modules/ng2-bs3-modal/components/modal-instance.js:12:14)
    at ModalComponent.ngAfterViewInit (http://localhost/node_modules/ng2-bs3-modal/components/modal.js:27:25)
    at AbstractChangeDetector.ChangeDetector_TasksForm_0.afterViewLifecycleCallbacksInternal (viewFactory_TasksForm:579:82)
    at AbstractChangeDetector.afterViewLifecycleCallbacks (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8206:12)
    at AbstractChangeDetector.runDetectChanges (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8145:14)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8218:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8143:12)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8218:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8143:12)

[dougludlow]

@nikkwong what version of ng2-bs3-modal are you using?

[dougludlow]

No response, closing issue.

[dougludlow]

Please open a new issue if you are still experiencing problems.

[born2net]

having same issue

EXCEPTION: Error in ./UsersDetails class UsersDetails - inline template:1:2 caused by: this.$modal.appendTo(...).modal is not a function
  ErrorHandler.handleError	
  next	
  schedulerFn	
  SafeSubscriber.__tryOrUnsub

with angular-cli

any ideas?