"not a function" errors when trying to call custom modal functions

Ionic Framework ionic-v3
1

I’m getting an error: TypeError: self.context.functionName is not a function when trying to call functions within my modal class. For instance, the click event for closeModal() and addUser() do not work.

Any suggestions? Thanks!

Container for the modal:

import {Modal, NavController, ViewController} from 'ionic-angular';
import {Component} from '@angular/core';
import {SelectUsersModal} from '../selectUsersModal/selectUsersModal';

@Component({
  templateUrl: 'build/pages/requestFormPage/requestFormPage.html'
})

export class RequestFormPage {
  constructor(private nav: NavController) {
    this.nav = nav;
  }

  openSelectUsersModal() {
    let modal = Modal.create(SelectUsersModal);
    this.nav.present(modal);
  }
}

Modal HTML:

<ion-content padding class="selectUsersModal" >
  <ion-searchbar [(ngModel)]="userInput" (ionInput)="addUser($event)"></ion-searchbar>
  <button (click)="closeModal()">Close</button>
</ion-content>

Modal JS:

import {Component} from '@angular/core';
import {Modal, NavController, ViewController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/selectUsersModal/selectUsersModal.html'
})

class SelectUsersModal {
  constructor(private viewCtrl: ViewController, modal: Modal, nav: Nav) {
    this.viewCtrl = viewCtrl;
    this.userInput = '';
  }

  addUser(userInput) {
    console.log(userInput);
  }

  closeModal() {
    this.viewCtrl.dismiss();
  }
}
2

Also, here is my ionic info:

Cordova CLI: Not installed
Ionic Framework Version: 2.0.0-beta.8
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
ios-deploy version: Not installed
ios-sim version: 5.0.4 
OS: Mac OS X El Capitan
Node Version: v5.0.0
Xcode version: Xcode 7.1.1 Build version 7B1005

And package.json:

{
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/http": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "es6-shim": "^0.35.0",
    "ionic-angular": "^2.0.0-beta.8",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.0-beta.9",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-es2015": "^1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "run-sequence": "1.1.5"
  }
}
3

Are you using TypeScript or JavaScript (because the code seems to be a mixture of both of them)? Aren’t you getting any other error messages? Also you have an error in your code (nav: Nav) - Nav should be NavController (but actually you don’t need either NavController or Modal there) - try changing the constructor of your modal this way:

  constructor(private viewCtrl: ViewController) {
    // ...
  }
4

Thanks for the reply. I have set up the app using JavaScript (e.g. app.js, not app.ts). To be honest, I copied much of my code from other examples, so I’m not sure how I’m mixing up the two. Could that be the issue? Any suggestions on the best way to set up the app?

Here is the full log of errors when trying to close a modal. I’m not seeing any other errors while using my app (which is just a few pages so far).

(index):28 EXCEPTION: Error in build/pages/selectUsersModal/selectUsersModal.html:2:10
(index):28 EXCEPTION: Error in build/pages/selectUsersModal/selectUsersModal.html:2:10console.(anonymous function) @ (index):28BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:78NgZone.runGuarded @ ng_zone.js:228outsideHandler @ dom_events.js:20ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
(index):28 ORIGINAL EXCEPTION: TypeError: self.context.closeModal is not a functionconsole.(anonymous function) @ (index):28BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:66(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:78NgZone.runGuarded @ ng_zone.js:228outsideHandler @ dom_events.js:20ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
(index):28 ORIGINAL STACKTRACE:console.(anonymous function) @ (index):28BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:69(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:78NgZone.runGuarded @ ng_zone.js:228outsideHandler @ dom_events.js:20ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
(index):28 TypeError: self.context.closeModal is not a function
    at DebugAppView._View_SelectUsersModal0._handle_click_4_0 (SelectUsersModal.template.js:241)
    at view.js:316
    at dom_renderer.js:278
    at dom_events.js:20
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (ng_zone_impl.js:45)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.runGuarded (zone.js:230)
    at NgZoneImpl.runInnerGuarded (ng_zone_impl.js:78)
    at NgZone.runGuarded (ng_zone.js:228)console.(anonymous function) @ (index):28BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:70(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:78NgZone.runGuarded @ ng_zone.js:228outsideHandler @ dom_events.js:20ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
(index):28 ERROR CONTEXT:console.(anonymous function) @ (index):28BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:73(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:78NgZone.runGuarded @ ng_zone.js:228outsideHandler @ dom_events.js:20ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
(index):28 DebugContext {_view: _View_SelectUsersModal0, _nodeIndex: 4, _tplRow: 2, _tplCol: 10}console.(anonymous function) @ (index):28BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:74(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:78NgZone.runGuarded @ ng_zone.js:228outsideHandler @ dom_events.js:20ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
(index):28 Uncaught EXCEPTION: Error in build/pages/selectUsersModal/selectUsersModal.html:2:10
ORIGINAL EXCEPTION: TypeError: self.context.closeModal is not a function
ORIGINAL STACKTRACE:
TypeError: self.context.closeModal is not a function
    at DebugAppView._View_SelectUsersModal0._handle_click_4_0 (SelectUsersModal.template.js:241:28)
    at http://localhost:8100/build/js/app.bundle.js:26292:24
    at http://localhost:8100/build/js/app.bundle.js:35239:36
    at http://localhost:8100/build/js/app.bundle.js:35309:93
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:323:29)
    at Object.onInvoke (http://localhost:8100/build/js/app.bundle.js:30870:41)
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:322:35)
    at Zone.runGuarded (http://localhost:8100/build/js/zone.js:230:48)
    at NgZoneImpl.runInnerGuarded (http://localhost:8100/build/js/app.bundle.js:30903:78)
    at NgZone.runGuarded (http://localhost:8100/build/js/app.bundle.js:30807:73)
ERROR CONTEXT:
[object Object] http://localhost:8100/build/js/zone.js Line: 260console.(anonymous function) @ (index):28window.onerror @ (index):12
zone.js:260 Uncaught EXCEPTION: Error in build/pages/selectUsersModal/selectUsersModal.html:2:10
ORIGINAL EXCEPTION: TypeError: self.context.closeModal is not a function
ORIGINAL STACKTRACE:
TypeError: self.context.closeModal is not a function
    at DebugAppView._View_SelectUsersModal0._handle_click_4_0 (SelectUsersModal.template.js:241:28)
    at http://localhost:8100/build/js/app.bundle.js:26292:24
    at http://localhost:8100/build/js/app.bundle.js:35239:36
    at http://localhost:8100/build/js/app.bundle.js:35309:93
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:323:29)
    at Object.onInvoke (http://localhost:8100/build/js/app.bundle.js:30870:41)
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:322:35)
    at Zone.runGuarded (http://localhost:8100/build/js/zone.js:230:48)
    at NgZoneImpl.runInnerGuarded (http://localhost:8100/build/js/app.bundle.js:30903:78)
    at NgZone.runGuarded (http://localhost:8100/build/js/app.bundle.js:30807:73)
ERROR CONTEXT:
[object Object]
5

I’m not sure how the code is working at all in such case. You could try updating your code so that it becomes a valid JavaScript (e.g. remove type annotations and use static get parameters() for DI), as shown in the sample below. You should do this for all JS code files.

  static get parameters() {
    return [[ViewController]];
  }

  constructor(viewCtrl) {
    this.viewCtrl = viewCtrl;
    // ...
  }
6

Thanks for the help here. I ended up updating my app to use typescript, and now things work fine.