How do we integrate it with Ionic 2

[deepakbandela]

having trouble integrating it with Ionic 2 on Angular 2 with Typescript.

Do you have an installation for Ionic2 and Angular2?

[Gugic]

You probably can use https://github.com/api-ai/api-ai-javascript to integrate with typescript and angular 2?

[ghost]

@Gugic - Using the javascript SDK with Ionic v2 throws below exception:

Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/...../.../.../node_modules/api-ai-javascript/index.js.map'
    at Error (native)

[ludochane]

@sunilkconsultant did you manage to use the Javascript SDK in Ionic 2 ?

Regards

[hpgmiskin]

@deepakbandela you can get this working with Ionic 2 and Angular 2. You just need to declare the variable ApiAIPromises in typescript to allow it to compile (This object gets added to the window when running on the device by cordova). Then be sure to only use the plugin once the platform is ready by using the platform.ready() promise.

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';

declare var ApiAIPromises: any;

@Injectable()
export class ChatbotService {
  private accessToken = 'TOKEN_HERE' //best to take from environmental variables
  private readySource: string;
  private client: any;
  constructor(
    private platform: Platform
  ) {
    this.platform.ready().then((readySource) => {
      this.readySource = readySource;
      if (readySource == 'dom'){
        var ApiAiClient = require('api-ai-javascript').ApiAiClient;
        this.client = new ApiAiClient({ accessToken: this.accessToken });
      } else {
        ApiAIPromises.init({
          clientAccessToken: this.accessToken,
          lang: "en"
        }).then((data) => {
          console.log('ApiAi initialised');
        }).catch((error) => {
          console.error('ApiAi Error: ',error)
        });
      }
    });
  }
  async communicate(): Promise<any> {
    let response: any;
    if (this.readySource == 'dom'){    
      response = await this.client.textRequest('Demo request');
    } else {
      response = await ApiAIPromises.requestVoice();
    }
    return response.result;
  }
}

Hope this helps

[anandballabh]

getting the following error ::

• Error: Module build failed: Error: ENOENT: no such file or directory, open '/...api-ai-javascript /index.js.map' at Error (native)
• Subsequent variable declarations must have the same type. Variable 'speechSynthesis' must be of type 'SpeechSynthesis', but here has type 'any'.
• All declarations of 'speechSynthesis' must have identical modifiers.
• Cannot find name 'webkitAudioContext'.

Any suggestions / ideas...

[m69]

Use the cordova plugin but it only works when on a device. Add the typeof check for dev in the browser.

declare const ApiAIPlugin: any;

then....

platform.ready().then(() => {

      // API AI
      if (typeof ApiAIPlugin != 'undefined') {
        ApiAIPlugin.init(
          {
            clientAccessToken: "", // insert your client access key here
            lang: "en" // set lang tag from list of supported languages
          },
          result => { console.log('API AI ONLINE: ', result) },
          error => { console.log('API AI OFFLINE: ', error)}
        );
      }
    });

[magikcypress]

Hello,

I tried a @m69 code in my project in ionic but i have this error.

ApiAIPlugin is not defined

I add declare const ApiAIPlugin: any; in my code and add also public ApiAIPlugin: ApiAIPlugin in my constructor and nothing. I have a same error.

You have a idea ?

Thanks

[gerhardcit]

Same here, clean ionic app (fresh)
ionic serve shows not problems...

But in Chrome browser I get this:

Module build failed: Error: ENOENT: no such file or directory, open '/...app path../node_modules/api-ai-javascript/index.js.map'

Can one switch off .map checking for ionic serve?

[m69]

Keep in mind that I'm using the cordova plugin and not the JS library. I can confirm I have it working properly - on a device only because of cordova. I'll take another look for ya later today :)

[gerhardcit]

@m69 , can you maybe just include a .map file when you build?
Not sure thought why Angular does not complain, but Ionic does. I know it's not really your problem, but you would think that a bot interface will probably be 50/50 used on mobile web?

[malavshah9]

Hello,

I tried a code in my project in ionic but i have this error.

ApiAIPlugin is not defined

I add declare const ApiAIPlugin: any; in my code and add also public ApiAIPlugin: ApiAIPlugin in my constructor and nothing. I have a same error.

You have a idea ?

Thanks

[Vivek-abstract]

I'm having the same error. This cordova plugin seems broken I can't even build my app now.

[Vivek-abstract]

Guys, I found a work around. Use the api-ai-javascript plugin: https://github.com/dialogflow/dialogflow-javascript-client

Follow their instructions to install and then

import {ApiAiClient} from "api-ai-javascript";

const client = new ApiAiClient({accessToken: 'YOUR_ACCESS_TOKEN'})

.textRequest('Hello!')
    .then((response) => {console.log("Response: ",response);})
    .catch((error) => {console.log("Error", error);})

Next, create a blank file named index.js.map in node_modules/api-ai-javascript/
Then do ionic serve and it will work. You'll get a response!

[malavshah9]

Vivek,
I am written same code which you had written. Getting following errors:

Runtime Error
Module build faild:Error:ENOENT:no such file or directory,open
'H:\firstcalapp\node_modules\api-ai-javascript\index.js.map'

[Vivek-abstract]

Did you create a blank file named index.js.map in node_modules/api-ai-javascript/?

[malavshah9]

No, I had just written one single command:
npm install [email protected]

and then this code in constructor:

const client = new ApiAiClient({accessToken:'4596e9d3a1b641db86d96a0ae86e165f'});
const promise= client.textRequest('Hello!')
promise.then((response) => {console.log("Response: ",response);})
.catch((error) => {console.log("Error", error);})

[Vivek-abstract]

Then create that file. It's required

[malavshah9]

What should I supposed to write in it???

[Vivek-abstract]

Keep it blank

[malavshah9]

Thanks Brother:
You had done my work......
@Vivek-abstract

[von-dee]

Thanks Guys.
Mine works in the Browser but i get this error

polyfills.js:3 POST https://api.api.ai/v1/query?v=20150910 net::ERR_CACHE_MISS

Error ApiAiRequestError
at new ApiAiBaseError (file:///android_asset/www/build/vendor.js:65939:22)

when I build it on my android device

[Vivek-abstract]

If it works in the browser it should work on your phone. Did you remove the cordova plugin? It may cause some issues

[santad1234]

when I build it on my android device alert "ApiAiRequestError" but run ionic serve is normal.
i request recommendation.
Thank You.

[elsasantos]

Hello,
To integrate with the dialogflow V2 and ionic 3 what recomend?
Thanks,