ApiAIPromises is not defined ( ionic 3, dialogflow)

Question

I'm using dialogflow in my ionic app. This is my .ts file.

    import { Component, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

declare var ApiAIPromises: any;

@IonicPage()
@Component({
  selector: 'page-chat-box',
  templateUrl: 'chat-box.html',
})
export class ChatBoxPage {

  answer;

  constructor(public navCtrl: NavController,
      public navParams: NavParams,
      public ngZone: NgZone) 
      {
        ApiAIPromises.init({
        clientAccessToken: "xxxxxxxxxxxx"
      })
      .then((result) =>  console.log(result))

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ChatBoxPage');
  }
  goBack() {
    this.navCtrl.pop();
  }

  ask(question) {
    ApiAIPromises.requestText({
      query: question
    })
    .then(({result: {fulfillment: {speech}}}) => {
       this.ngZone.run(()=> {
         this.answer = speech;
       });
    })
  }

}

I've also installed the plugin

ionic cordova plugin add cordova-plugin-apiai

When i'm trying to run it I'm getting an error as mentioned below.

Uncaught (in promise): ReferenceError: ApiAIPromises is not defined ReferenceError: ApiAIPromises is not defined at new ChatBoxPage (chat-box.ts:19) at createClass (core.js:12443) at createDirectiveInstance (core.js:12284) at createViewNodes (core.js:13742) at createRootView (core.js:13631) at callWithDebugContext (core.js:15056) at Object.debugCreateRootView [as createRootView] (core.js:14339) at ComponentFactory_.create (core.js:11236) at ComponentFactoryBoundToModule.create (core.js:4023) at Tab.NavControllerBase.viewInit (nav-controller-base.js:441) at new ChatBoxPage (chat-box.ts:19) at createClass (core.js:12443) at createDirectiveInstance (core.js:12284) at createViewNodes (core.js:13742) at createRootView (core.js:13631) at callWithDebugContext (core.js:15056) at Object.debugCreateRootView [as createRootView] (core.js:14339) at ComponentFactory.create (core.js:11236) at ComponentFactoryBoundToModule.create (core.js:4023) at Tab.NavControllerBase._viewInit (nav-controller-base.js:441) at c (polyfills.js:3) at Object.reject (polyfills.js:3) at Tab.NavControllerBase._fireError (nav-controller-base.js:223) at Tab.NavControllerBase._failed (nav-controller-base.js:216) at nav-controller-base.js:263 at t.invoke (polyfills.js:3) at Object.onInvoke (core.js:4749) at t.invoke (polyfills.js:3) at r.run (polyfills.js:3) at polyfills.js:3 defaultErrorLogger @ core.js:1448 ErrorHandler.handleError @ core.js:1509 IonicErrorHandler.handleError @ ionic-error-handler.js:61 next @ core.js:5497 schedulerFn @ core.js:4331 SafeSubscriber.__tryOrUnsub @ Subscriber.js:239 SafeSubscriber.next @ Subscriber.js:186 Subscriber._next @ Subscriber.js:126 Subscriber.next @ Subscriber.js:90 Subject.next @ Subject.js:55 EventEmitter.emit @ core.js:4311 (anonymous) @ core.js:4771 t.invoke @ polyfills.js:3 r.run @ polyfills.js:3 NgZone.runOutsideAngular @ core.js:4697 onHandleError @ core.js:4771 t.handleError @ polyfills.js:3 r.runGuarded @ polyfills.js:3 (anonymous) @ polyfills.js:3 n.microtaskDrainDone @ polyfills.js:3 o @ polyfills.js:3 e.invokeTask @ polyfills.js:3 p @ polyfills.js:2 v @ polyfills.js:2

when you want to use cordova plugins, do it within this.platform.ready().then(()=>{}) — Suraj Rao

Arup Nayak Arup Nayak · Accepted Answer · 2018-08-14T05:36:09

ApiAIPromises variable has reference in Cordova plugin. Hence, it is giving "Not defined" error when run in browser using ionic serve.

When it is run on a device or simulator it will not give any error.

ApiAIPromises is not defined ( ionic 3, dialogflow)

1 Answers