Query for Web SDK Integration with Angular 7

Hi, Is there any Angular 7 web SDK for zoom meeting integration?
If yes please provide the solution.

Thanks

Hey @gourav,

You can use our Web SDK for this.

Please see this post for instructions,

Thanks,
Tommy

Hey @tommy,

Thanks for your update.
I am following above integrations steps with angular 7, but getting below error.
ERROR in ./node_modules/zoomus-jssdk/dist/zoomus-jssdk.umd.min.js
Module not found: Error: Can’t resolve ‘jQuery’ in ‘/home/gourav/working/bitbucket/ort-client/node_modules/zoomus-jssdk/dist’

I am also following below steps, but again receiving same error.
[When i install zoomus-jssdk for my react app, it gets an jquery error](http://When i install zoomus-jssdk for my react app, it gets an jquery error).

Could you please assist.

Thanks,
Gourav

Hi @gourav,

This may be due to the syntax capitalization of Jquery within our npm package. Please refer to this link When i install zoomus-jssdk for my react app, it gets an jquery error.

Let us know if this adding a webpack alias works for you.

Thanks

You can also try adding the jQuery CDN to your index.html file.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Let me know if this works!

1 Like

Hi, @tommy and @Michael_Purnell
i am adding the jQuery CDN to our index.html file.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Receiving same error.
ERROR in ./node_modules/zoomus-jssdk/dist/zoomus-jssdk.umd.min.js
Module not found: Error: Can’t resolve ‘jQuery’ in ‘/home/gourav/working/bitbucket/ort-client/node_modules/zoomus-jssdk/dist’

Hey @gourav, I was able to get it working in Angular 7.

Can you confirm you are adding it below your <app-root></app-root> tag in index.html?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>
</html>

If that does not help, can you send me the link to your code on github or exact steps to reproduce so I can help debug?

Thanks,
Tommy

Hi @tommy ,
I have used below steps.

npm i zoomus-jssdk --save

Add this line below the in your index.html

And then import Zoom into your component file like this,

import { ZoomMtg } from ‘zoomus-jssdk’;

app.component.ts

import { Component, OnInit } from ‘@angular/core’;
import { ZoomMtg } from ‘zoomus-jssdk’;

ZoomMtg.setZoomJSLib(‘https://dmogdx0jrul3u.cloudfront.net/1.4.2/lib’, ‘/av’)
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent implements OnInit {

meetConfig = {
apiKey: ‘API KEY HERE’,
apiSecret: ‘API SECRET HERE’,
meetingNumber: MEETING ID,
userName: ‘Angular’,
passWord: “”,
leaveUrl: “http://localhost:4200”,
role: 0
};

signature = ZoomMtg.generateSignature({
meetingNumber: this.meetConfig.meetingNumber,
apiKey: this.meetConfig.apiKey,
apiSecret: this.meetConfig.apiSecret,
role: this.meetConfig.role,
success: function(res){
console.log(res.result);
}
});

constructor() {

}

ngOnInit() {
ZoomMtg.init({
leaveUrl: ‘http://localhost:4200’,
isSupportAV: true,
success: (res) => {
ZoomMtg.join({
meetingNumber: this.meetConfig.meetingNumber,
userName: this.meetConfig.userName,
signature: this.signature,
apiKey: this.meetConfig.apiKey,
userEmail: ‘email@gmail.com’,
passWord: this.meetConfig.passWord,
success: (res) => {
console.log(‘join meeting success’);
},
error: (res) => {
console.log(res);
}
});
},
error: (res) => {
console.log(res);
}
});
}
}

index.html
<!doctype html>

MyDreamAp2

Thanks,
Gourav Pal

Hi tommy,
I have followed this post steps: https://devforum.zoom.us/t/error-in-integration-zoom-api-with-angular-6/4830/3

Thanks,
Gourav Pal

Hey @gourav,

Thanks for following the steps. Do you still see the error, or is it working now?

-Tommy

HI @tommy,
It is not working. I receive same error.
ERROR in ./node_modules/zoomus-jssdk/dist/zoomus-jssdk.umd.min.js
Module not found: Error: Can’t resolve ‘jQuery’ in ‘/home/gourav/working/bitbucket/ort-client/node_modules/zoomus-jssdk/dist’

Thanks,
Gourav Pal

Hey @gourav,

I am having trouble reproducing the Can't resolve jQuery error.

Here is my working Angular Zoom Web SDK code.

To run,

$ git clone https://github.com/tommygaessler/zoom-angular.git

$ cd zoom-angular

$ npm install

Add your JWT app credentials and meeting number to the /src/app/app.component.ts file

$ ng serve --open

Let me know if this works for you!

Thanks,
Tommy