a note. When I was using angular 10 this was working fine. Only after I upgraded to angular 13 did this become a problem.

require is put in constructor as this is a Injectable service and I believe that requires it to be in the contstructor.

notice the code in my TwilioSyncService

export class TwilioSyncService{

  constructor(private http: HttpClient, private router: Router){
    //@ts-ignore
    this.syncClientclass = require('twilio-sync');
  }
  syncClientclass;
  syncClient;

which is later used in code:

connect(token){
     this.syncClient = new this.syncClientclass(token);
     this.sendSyncClient(this.syncClient);
  }

the Twilio sync documentation says this is correct

var SyncClient = require('twilio-sync');
var syncClient = new SyncClient(token);

from the docs linked below.

https://media.twiliocdn.com/sdk/js/sync/releases/3.0.1/docs/index.html

CodePudding user response：

I just installed the latest version of Twilio Sync and tried to require it like you did and I was unable to initialize the client too.

But, inspecting the object I got when I required it showed that it was just an object that contained all the classes. You're looking for the Client class in this case, so you need:

this.syncClientclass = require('twilio-sync').Client;

I think that your version of twilio-sync probably updated as you updated Angular. It looks like this change came in the release of version 3.0.5 which described two changes that may have had an effect on this:

• Default exports removed — they didn’t work in the previous versions either.
• Fixed type resolution issues on Angular.