# Zoom component added to Angular project screen turn black

**URL:** <https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940>\
**Category:** Web\
**Created:** [June 2, 2020, 8:37am UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940 "2020-06-02T08:37:05Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![keerthimys.48](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/keerthimys.48/32/9669_2.png) [@keerthimys.48](https://devforum.zoom.us/u/keerthimys.48)\
**Post date:** [June 2, 2020, 8:37am UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/1 "2020-06-02T08:37:06Z")

</div>

Hi All,  
I am using Zoom SDK to integrate the zoom to my Angular application, i just followed the github link [https://github.com/zoom/websdk-sample-angular](https://github.com/zoom/websdk-sample-angular) , when i just tried as new angular project everything worked fine, as soon as i integrated to application, my home page goes blank with black screen, and also checked the for errors in the console, there aren’t any errors at all , if anybody has any idea why or how this might be happening. please help me out.

---

<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:** [June 8, 2020, 5:30pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/2 "2020-06-08T17:30:48Z")

</div>

Hey @keerthimys.48,

Double check you have the Zoom Web SDK files reference:

> <https://github.com/zoom/websdk-sample-angular/blob/master/angular.json#L25>

Also if you share your ZoomMtg.init and ZoomMtg.join functions I can help debug. 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![micepadapp](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@micepadapp](https://devforum.zoom.us/u/micepadapp)\
**Post date:** [July 15, 2020, 1:55am UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/3 "2020-07-15T01:55:04Z")

</div>

HI am having the same problem, I added the style to angular.json, and it was working fine yesterday and today it doesnt work without any code change. It just black screen.

```
@zoomus/websdk": "^1.7.9"

    ZoomMtg.init({
  leaveUrl,
  isSupportAV: true,
  success: () => {
    // noinspection TypeScriptValidateJSTypes
    ZoomMtg.join({
        signature,
        meetingNumber,
        userName,
        apiKey,
        userEmail,
        role,
        passWord: password,
        success() {
          console.log('join meeting success');
        },
        error(res) {
          console.log(res);
        }
      }
    );
  },
  error(res) {
    console.log(res);
  }
});

```

The browser console log

 ![Screenshot 2020-07-15 at 9.59.06 AM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/2/20d591f086b43a4ee3942bef245ed5125c1fe1c0.png)

---

<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:** [July 16, 2020, 7:46pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/4 "2020-07-16T19:46:28Z")

</div>

Hey @micepadapp,

Can you share a screenshot of the issue?

Also, the black screen issues were fixed in version 1.7.10 if you want to upgrade. 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![arash.ajam](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@arash.ajam](https://devforum.zoom.us/u/arash.ajam)\
**Post date:** [July 17, 2020, 7:36pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/5 "2020-07-17T19:36:24Z")

</div>

Same issue here. I’m using the same code as in the sample app but i get a black screen and invalid signature.

 ![Screen Shot 2020-07-17 at 2.37.23 PM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/b/b9d44e382331641a469a900357cf48d7f616361c.png)

Been checking out all the answers but nothing has worked.  
Project info:  
Angular 8

Code:

```
  meetingNumber = ''
  signatureEndpoint = ''
  role = 0
  leaveUrl = 'http://localhost:4200'
  userName = ''
  userEmail = ''
  passWord = ''
this.httpClient.post(this.signatureEndpoint, {
  meetingNumber: this.meetingNumber,
  role: this.role
}).toPromise().then((data: any) => {
  if (data.signature) {
    console.log(data.signature)
    this.startMeeting(data.signature)
  } else {
    console.log(data)
  }
}).catch((error) => {
  console.log(error)
})

```

Joining code:

```
   ZoomMtg.init({
   leaveUrl: this.leaveUrl,
   isSupportAV: true,
   success: (success) => {
    console.log(success)

    ZoomMtg.join({
      signature: signature,
      meetingNumber: this.meetingNumber,
      userName: this.userName,
      apiKey: this.apiKey,
      userEmail: this.userEmail,
      passWord: this.passWord,
      success: (success) => {
        console.log(success)
      },
      error: (error) => {
        console.log(error)
      }
    })

  },
  error: (error) => {
    console.log(error)
  }
})
```

---

<div class="post-metadata">

**Author:** ![arash.ajam](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@arash.ajam](https://devforum.zoom.us/u/arash.ajam)\
**Post date:** [July 18, 2020, 10:43pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/6 "2020-07-18T22:43:44Z")

</div>

@tommy . . . . . . . . . . . . . . . . . . .

---

<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:** [July 21, 2020, 9:56pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/7 "2020-07-21T21:56:15Z")

</div>

Hey @arash.ajam,

Please send your signature to [developersupport@zoom.us](mailto:developersupport@zoom.us) so I can help you debug it.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![arash.ajam](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@arash.ajam](https://devforum.zoom.us/u/arash.ajam)\
**Post date:** [July 28, 2020, 3:21pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/8 "2020-07-28T15:21:58Z")

</div>

[signature redacted]

---

<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:** [July 30, 2020, 4:44pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/9 "2020-07-30T16:44:53Z")

</div>

Hey @arash.ajam,

You are using an SDK App credentials to generate your signature. You need to use a [JWT App type](https://marketplace.zoom.us/docs/guides/build/jwt-app).

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![ragipallyalekya3](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ragipallyalekya3/32/5445_2.png) [@ragipallyalekya3](https://devforum.zoom.us/u/ragipallyalekya3)\
**Post date:** [August 20, 2020, 4:12pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/10 "2020-08-20T16:12:20Z")

</div>

@tommy I am facing the same issue, it is working fine as a separate application, on integrating with my application this is not working only black screen with no errors.

angular.json

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/2/221a4981e66a19fb45ad981e6c6c5c4bf584f85c.png)

---

<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:** [August 24, 2020, 5:41pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/11 "2020-08-24T17:41:56Z")

</div>

Hey @ragipallyalekya3,

Please create a new topic and fill out the post template so we have enough info to help.

Be sure to include your Web SDK code snippets.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![miloudi2439](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/miloudi2439/32/32784_2.png) [@miloudi2439](https://devforum.zoom.us/u/miloudi2439)\
**Post date:** [November 23, 2021, 10:41am UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/12 "2021-11-23T10:41:00Z")

</div>

@keerthimys.48 make sure that you added the below code in your style.css file

```auto
#zmmtg-root {
  display: none;
}

```

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [November 30, 2021, 11:32pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/13 "2021-11-30T23:32:52Z")

</div>

Hey @miloudi2439,

Thank you for sharing what worked for you!

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [November 30, 2021, 11:32pm UTC](https://devforum.zoom.us/t/zoom-component-added-to-angular-project-screen-turn-black/19940/14 "2021-11-30T23:32:55Z")

</div>