# Query for Web SDK Integration with Angular 7

**URL:** <https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819>\
**Category:** Web\
**Created:** [September 9, 2019, 6:32am UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819 "2019-09-09T06:32:34Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![gourav](https://avatars.discourse-cdn.com/v4/letter/g/278dde/32.png) [@gourav](https://devforum.zoom.us/u/gourav)\
**Post date:** [September 9, 2019, 6:32am UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/1 "2019-09-09T06:32:34Z")

</div>

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

Thanks

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 9, 2019, 3:17pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/2 "2019-09-09T15:17:57Z")

</div>

Hey @gourav,

You can use our [Web SDK](https://marketplace.zoom.us/docs/sdk/native-sdks/Web-Client-SDK/overview) for this.

Please see this post for instructions,

> [@Error in integration zoom API with angular 6](https://devforum.zoom.us/t/error-in-integration-zoom-api-with-angular-6/4830/5):
>
> Hey @sachinpawar8750, Zoom currently does not have a facial recognition API. To integrate Zoom with an Angular app, you can use our [JS SDK on NPM](https://www.npmjs.com/package/zoomus-jssdk). $ npm i zoomus-jssdk --save Add this line \<script src="https://code.jquery.com/jquery-3.4.1.min.js"\>\</script\> below the \<app-root\>\</app-root\> in your index.html And then import Zoom into your component file like this, import { ZoomMtg } from 'zoomus-jssdk'; Here is an example of joining/starting a meeting in Angular, app.component.ts import {…

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![gourav](https://avatars.discourse-cdn.com/v4/letter/g/278dde/32.png) [@gourav](https://devforum.zoom.us/u/gourav)\
**Post date:** [September 10, 2019, 6:15am UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/3 "2019-09-10T06:15:49Z")

</div>

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](https://devforum.zoom.us/t/when-i-install-zoomus-jssdk-for-my-react-app-it-gets-an-jquery-error/5224/4)]([http://When](http://When) i install zoomus-jssdk for my react app, it gets an jquery error).

Could you please assist.

Thanks,  
Gourav

---

<div class="post-metadata">

**Author:** ![michael\_p.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/michael_p.zoom/32/18105_2.png) [@michael\_p.zoom](https://devforum.zoom.us/u/michael_p.zoom)\
**Post date:** [September 10, 2019, 3:04pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/4 "2019-09-10T15:04:30Z")

</div>

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 - #9 by xander.dumaine](https://devforum.zoom.us/t/when-i-install-zoomus-jssdk-for-my-react-app-it-gets-an-jquery-error/5224/9).

> [@When i install zoomus-jssdk for my react app, it gets an jquery error](https://devforum.zoom.us/t/when-i-install-zoomus-jssdk-for-my-react-app-it-gets-an-jquery-error/5224/9):
>
> The node package is jquery with no capitalization. In order to build with ‘jQuery’ I had to add a webpack alias

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

Thanks

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 10, 2019, 3:26pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/5 "2019-09-10T15:26:52Z")

</div>

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

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

```

Let me know if this works!

---

<div class="post-metadata">

**Author:** ![gourav](https://avatars.discourse-cdn.com/v4/letter/g/278dde/32.png) [@gourav](https://devforum.zoom.us/u/gourav)\
**Post date:** [September 11, 2019, 5:43am UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/6 "2019-09-11T05:43:47Z")

</div>

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

```auto
<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’

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 11, 2019, 5:16pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/7 "2019-09-11T17:16:51Z")

</div>

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?

```auto
<!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

---

<div class="post-metadata">

**Author:** ![gourav](https://avatars.discourse-cdn.com/v4/letter/g/278dde/32.png) [@gourav](https://devforum.zoom.us/u/gourav)\
**Post date:** [September 12, 2019, 8:53am UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/8 "2019-09-12T08:53:54Z")

</div>

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](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](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](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

---

<div class="post-metadata">

**Author:** ![gourav](https://avatars.discourse-cdn.com/v4/letter/g/278dde/32.png) [@gourav](https://devforum.zoom.us/u/gourav)\
**Post date:** [September 12, 2019, 9:00am UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/9 "2019-09-12T09:00:51Z")

</div>

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

Thanks,  
Gourav Pal

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 12, 2019, 3:18pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/10 "2019-09-12T15:18:37Z")

</div>

Hey @gourav,

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

-Tommy

---

<div class="post-metadata">

**Author:** ![gourav](https://avatars.discourse-cdn.com/v4/letter/g/278dde/32.png) [@gourav](https://devforum.zoom.us/u/gourav)\
**Post date:** [September 13, 2019, 5:44am UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/11 "2019-09-13T05:44:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 13, 2019, 9:29pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/12 "2019-09-13T21:29:55Z")

</div>

Hey @gourav,

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

Here is my working Angular Zoom Web SDK code.

> **[tommygaessler/zoom-angular](https://github.com/tommygaessler/zoom-angular)**
>
> Zoom Angular Web SDK Sample App. Contribute to tommygaessler/zoom-angular development by creating an account on GitHub.

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

---

<div class="post-metadata">

**Author:** ![gourav](https://avatars.discourse-cdn.com/v4/letter/g/278dde/32.png) [@gourav](https://devforum.zoom.us/u/gourav)\
**Post date:** [September 17, 2019, 3:01pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/13 "2019-09-17T15:01:01Z")

</div>

How to hide invitation icon, when we use zoom in iframe?  
Please suggest.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 17, 2019, 3:41pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/14 "2019-09-17T15:41:42Z")

</div>

Hey @gourav,

You can only hide the invitation button using the [Web SDK](https://zoom.github.io/sample-app-web/ZoomMtg.html#showInviteFunction).

Or you can use [CSS to hide it](https://stackoverflow.com/q/6494721/6592510), but we do not recommend this.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![gourav](https://avatars.discourse-cdn.com/v4/letter/g/278dde/32.png) [@gourav](https://devforum.zoom.us/u/gourav)\
**Post date:** [September 18, 2019, 2:36am UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/15 "2019-09-18T02:36:11Z")

</div>

You know currently web SDK not supported with angular 7. Because jquery error

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 18, 2019, 9:12pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/16 "2019-09-18T21:12:48Z")

</div>

Hey @gourav,

Have you tried creating/installing an alias for jQuery in your angular config?

`$ npm i jQuery@npm:jquery`

> <https://stackoverflow.com/questions/17127054/how-do-i-install-a-package-with-npm-with-a-different-custom-module-name/55099347#55099347>

> <https://stackoverflow.com/questions/51476416/webpack-alias-with-angular-cannot-use-namespace-utilsservice-as-a-type/51573032#51573032>

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![gourav](https://avatars.discourse-cdn.com/v4/letter/g/278dde/32.png) [@gourav](https://devforum.zoom.us/u/gourav)\
**Post date:** [September 19, 2019, 5:49am UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/18 "2019-09-19T05:49:15Z")

</div>

Hi @tommy,  
Thank for your update. According to your last update, join meeting is working in my sample app from given angular code.  
Could you please suggest the sample angular code to start a meeting.

Thanks,  
Gourav Pal

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 19, 2019, 3:40pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/19 "2019-09-19T15:40:30Z")

</div>

Hey @gourav,

All you have to do to start a meeting via the Web SDK is set `role:1` in the `meetConfig` object.

Duplicate post:

> [@Is it possible to start the meeting from web sdk like joining meeting?](https://devforum.zoom.us/t/is-it-possible-to-start-the-meeting-from-web-sdk-like-joining-meeting/5772/2):
>
> Hey @tech1, thanks for posting. Yes you can start a meeting via the Web SDK. Just change the role in the meetConfig object to 1 Thanks, Tommy

This will allow the user to join the meeting as a host which starts the meeting.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![gourav](https://avatars.discourse-cdn.com/v4/letter/g/278dde/32.png) [@gourav](https://devforum.zoom.us/u/gourav)\
**Post date:** [September 30, 2019, 8:58am UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/20 "2019-09-30T08:58:42Z")

</div>

@tommy,  
I am receiving “[zoom.okta.com](http://zoom.okta.com) refused to connect.”, when i am using zoom meeting in iframe.  
Please suggest.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 30, 2019, 2:51pm UTC](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/21 "2019-09-30T14:51:53Z")

</div>

Hey @gourav,

Can you please share your iFrame code and a screenshot of the error?

Thanks,  
Tommy

[Next page](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819.md?page=2)