search

dougludlow / ng2-bs3-modal

Angular Bootstrap 3 Modal Component
http://dougludlow.github.io/ng2-bs3-modal/
ISC License
261 stars 133 forks source link

Getting error on modal.open(): this.$modal.appendTo(...).modal is not a function #17

Closed d1820 closed 8 years ago

d1820 commented 8 years ago

I took the example given on the code tab, and an getting an error

ng2-bs3-modal.ts:19 EXCEPTION: Error during evaluation of "click"
ng2-bs3-modal.ts:19 EXCEPTION: Error during evaluation of "click"BrowserDomAdapter.logError @ ng2-bs3-modal.ts:19BrowserDomAdapter.logGroup @ ng2-bs3-modal.ts:19ExceptionHandler.call @ ng2-bs3-modal.ts:19(anonymous function) @ ng2-bs3-modal.ts:19schedulerFn @ ng2-bs3-modal.ts:19SafeSubscriber.__tryOrUnsub @ ng2-bs3-modal.ts:19SafeSubscriber.next @ ng2-bs3-modal.ts:19Subscriber._next @ ng2-bs3-modal.ts:19Subscriber.next @ ng2-bs3-modal.ts:19Subject._finalNext @ ng2-bs3-modal.ts:19Subject._next @ ng2-bs3-modal.ts:19Subject.next @ ng2-bs3-modal.ts:19EventEmitter.emit @ ng2-bs3-modal.ts:19NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng2-bs3-modal.ts:19NgZoneImpl.inner.inner.fork.onHandleError @ ng2-bs3-modal.ts:19ZoneDelegate.handleError @ angular2-polyfills.js:326Zone.runGuarded @ angular2-polyfills.js:235NgZoneImpl.runInner @ ng2-bs3-modal.ts:19NgZone.run @ ng2-bs3-modal.ts:19outsideHandler @ ng2-bs3-modal.ts:19ZoneDelegate.invokeTask @ angular2-polyfills.js:355Zone.runTask @ angular2-polyfills.js:254ZoneTask.invoke @ angular2-polyfills.js:422
ng2-bs3-modal.ts:19 ORIGINAL EXCEPTION: TypeError: this.$modal.appendTo(...).modal is not a functionBrowserDomAdapter.logError @ ng2-bs3-modal.ts:19ExceptionHandler.call @ ng2-bs3-modal.ts:19(anonymous function) @ ng2-bs3-modal.ts:19schedulerFn @ ng2-bs3-modal.ts:19SafeSubscriber.__tryOrUnsub @ ng2-bs3-modal.ts:19SafeSubscriber.next @ ng2-bs3-modal.ts:19Subscriber._next @ ng2-bs3-modal.ts:19Subscriber.next @ ng2-bs3-modal.ts:19Subject._finalNext @ ng2-bs3-modal.ts:19Subject._next @ ng2-bs3-modal.ts:19Subject.next @ ng2-bs3-modal.ts:19EventEmitter.emit @ ng2-bs3-modal.ts:19NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng2-bs3-modal.ts:19NgZoneImpl.inner.inner.fork.onHandleError @ ng2-bs3-modal.ts:19ZoneDelegate.handleError @ angular2-polyfills.js:326Zone.runGuarded @ angular2-polyfills.js:235NgZoneImpl.runInner @ ng2-bs3-modal.ts:19NgZone.run @ ng2-bs3-modal.ts:19outsideHandler @ ng2-bs3-modal.ts:19ZoneDelegate.invokeTask @ angular2-polyfills.js:355Zone.runTask @ angular2-polyfills.js:254ZoneTask.invoke @ angular2-polyfills.js:422
ng2-bs3-modal.ts:19 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ ng2-bs3-modal.ts:19ExceptionHandler.call @ ng2-bs3-modal.ts:19(anonymous function) @ ng2-bs3-modal.ts:19schedulerFn @ ng2-bs3-modal.ts:19SafeSubscriber.__tryOrUnsub @ ng2-bs3-modal.ts:19SafeSubscriber.next @ ng2-bs3-modal.ts:19Subscriber._next @ ng2-bs3-modal.ts:19Subscriber.next @ ng2-bs3-modal.ts:19Subject._finalNext @ ng2-bs3-modal.ts:19Subject._next @ ng2-bs3-modal.ts:19Subject.next @ ng2-bs3-modal.ts:19EventEmitter.emit @ ng2-bs3-modal.ts:19NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng2-bs3-modal.ts:19NgZoneImpl.inner.inner.fork.onHandleError @ ng2-bs3-modal.ts:19ZoneDelegate.handleError @ angular2-polyfills.js:326Zone.runGuarded @ angular2-polyfills.js:235NgZoneImpl.runInner @ ng2-bs3-modal.ts:19NgZone.run @ ng2-bs3-modal.ts:19outsideHandler @ ng2-bs3-modal.ts:19ZoneDelegate.invokeTask @ angular2-polyfills.js:355Zone.runTask @ angular2-polyfills.js:254ZoneTask.invoke @ angular2-polyfills.js:422
ng2-bs3-modal.ts:19 TypeError: this.$modal.appendTo(...).modal is not a function
    at ModalInstance.create (ng2-bs3-modal.ts:19)
    at ModalInstance.open (ng2-bs3-modal.ts:19)
    at ModalComponent.open (ng2-bs3-modal.ts:19)
    at AbstractChangeDetector.ChangeDetector_PolicyListComponent_1.handleEventInternal (viewFactory_PolicyListComponent:264)
    at AbstractChangeDetector.handleEvent (ng2-bs3-modal.ts:19)
    at AppView.triggerEventHandlers (ng2-bs3-modal.ts:19)
    at eval (viewFactory_PolicyListComponent:547)
    at ng2-bs3-modal.ts:19
    at ng2-bs3-modal.ts:19
    at ZoneDelegate.invoke (angular2-polyfills.js:322)

Current Versions:

 "angular2": "^2.0.0-beta.11",
    "bootstrap": "^3.3.6",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "font-awesome": "^4.5.0",
    "jquery": "^2.1.4",
    "ng2-bs3-modal": "^0.4.2",
    "reflect-metadata": "0.1.3",
    "rxjs": "^5.0.0-beta.3",
    "systemjs": "^0.19.24",
    "toastr": "^2.1.2",
    "zone.js": "^0.6.5"

Code is as follows

Component:

import { MODAL_DIRECTIVES } from 'ng2-bs3-modal/ng2-bs3-modal';

@Component({
    selector: 'one-policylist',
    templateUrl: 'views/policylist.view.html',
    directives: [PolicyCardComponent, ContentLoadingComponent, MODAL_DIRECTIVES]
})

View:

<ul *ngIf="policies.length > 0" class="policy-list-container">
    <li><button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button></li>
</ul>
<div *ngIf="policies.length == 0">
    <one-contentloading [message]="'Retrieving policies...'"></one-contentloading> 
</div>
<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

Any help would be great

dougludlow commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago 
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 commented 8 years ago

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

dougludlow commented 8 years ago

No response, closing issue.

dougludlow commented 8 years ago

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

born2net commented 7 years ago

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?