CODEWITHSUNDEEP
angulartypescripttwiliotwilio-click-to-call
The Hungry Dictator
The Hungry Dictator

Reputation: 3484

How to use Twilio Client in Angular 2?

I am creating an app in which i require to implement Click To Call facility. So for communication I am using Twilio Client. I have tried this example.

Now all i need it i need to implement the same in my Angular 2 application. How can i import Twilio Client in my Typescript and how can i make use of it?

I am trying to import Twilio in my component like 

import * as Twilio from 'twilio'

but this is not correct method to import it.

Upvotes: 6

Views: 8518

Answers (2)

MyUserName
MyUserName

Reputation: 495

Now, when you install Twilio Client Library from npm (https://www.npmjs.com/package/twilio-chat), it has corresponding type definitions, so you can just write import { Client, User } from "twilio-chat";, then declare a Clientvariable in your component twilioClient: Client and create it:

Client.create(token).then(client => {
        this.twilioClient = client
});

Unfortunately there are no d.ts for twilio-common, so if you want to use something from it, like AccessManager, you need to do this like this, with all variables having any type:

let AccessManager = require('twilio-common').AccessManager;
let accessManager = new AccessManager(token);

EDIT: unfortunately, for some reason started getting responses for missing d.ts modules from 'twilio-chat' in dependent files, so it looks like this lib is not ready for using with TS yet:(.

Upvotes: 4

dkundel
dkundel

Reputation: 294

Twilio Developer Evangelist here. Right now we don't have any TypeScript bindings and therefore bundling like that won't work. I'm working on some bindings but in the mean time I would suggest you include the library like it's done in the demo application using a script tag. You can use our Twilio CDN for it:

  <script type="text/javascript" src="//media.twiliocdn.com/sdk/js/client/v1.3/twilio.min.js"></script>

Afterwards you have to let TypeScript know about it. For this you currently have to use declare const. Unfortunately this won't give you any of the neatness of TypeScript's type-checking until the bindings are done but it at least let's you use it. Just add the following line in the file where you are planning to consume the Twilio code:

declare const Twilio: any;

Hope that helps.

Cheers, Dominik

Upvotes: 12

Related Questions