# Getting black screen with no errors on integrating with angular application

**URL:** <https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346>\
**Category:** Web\
**Created:** [August 27, 2020, 4:21pm UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346 "2020-08-27T16:21:08Z")\
**Posts on this page:** 20\
**Page:** 1

<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 27, 2020, 4:21pm UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/1 "2020-08-27T16:21:08Z")

</div>

I have created a simple angular application with zoom integrated with it, it is working fine so, I integrated it with the actual angular application. It is now showing a black screen on the login page itself but has no errors. I have updated the version of the browser.

I am using 1.8.0 version

this is my signature

Following are my code snippets

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

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

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/5/53ce51fb6020601015f323e6574123808c80cb67.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 28, 2020, 7:51pm UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/2 "2020-08-28T19:51:25Z")

</div>

Hey @ragipallyalekya3,

Your signature looks correct. Can you share your full component file with the Web SDK code?

Have you compared your code with the Angular Web SDK sample app?

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

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 29, 2020, 7:18am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/3 "2020-08-29T07:18:35Z")

</div>

@tommy  
Following is my component file

import { Component, OnInit, Inject } from ‘@angular/core’;

import { AngularAgoraRtcService, Stream } from ‘angular-agora-rtc’;

import { ToastrService } from ‘ngx-toastr’;

import { HttpClient } from ‘@angular/common/http’;

import { DOCUMENT } from ‘@angular/common’;

import { ZoomMtg } from ‘@zoomus/websdk’;

ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();

@Component({

selector: ‘app-teacher-live-class’,

templateUrl: ‘./teacher-live-class.component.html’,

styleUrls: [’./teacher-live-class.component.css’]

})

export class TeacherLiveClassComponent implements OnInit {

channelName: string;

localStream: Stream;

remoteCalls: any = ;

showImage: boolean = true;

showStopBtn = false;

spinnerFlag: boolean;

signatureEndpoint = ‘’

apiKey = ‘’

meetingNumber =

role = 1

leaveUrl = ‘[http://localhost:4201](http://localhost:4201)’

userName = ‘Daily Standup Meeting’

userEmail = ‘’

passWord = ‘’

signature: any;

constructor(

```
private toaster: ToastrService,

public httpClient: HttpClient, 

@Inject(DOCUMENT) document

```

) {

}

ngOnInit() {

```
this.showImage = true;

this.getSignature();

```

}

goLive(){

```
console.log("Signature = "+this.signature)

document.getElementById('zmmtg-root').style.display = 'block'

ZoomMtg.init({

  leaveUrl: this.leaveUrl,

  isSupportAV: true,

  success: (success) => {

    console.log(success)

    ZoomMtg.join({

      signature: this.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)

  }

})

```

}

getSignature() {

```
//alert("Entered")

this.signature = ZoomMtg.generateSignature({

  meetingNumber: this.meetingNumber,

  apiKey: this.apiKey,

  apiSecret: '',

  role: 1,

  success: function(res){

  console.log(res.result);

  }

  });

```

}  
}

And yes I have compared the code, everything’s similar

---

<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 29, 2020, 7:30am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/4 "2020-08-29T07:30:32Z")

</div>

The difference what I found is

from separate project (in which it is working fine)

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

from integrated project

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

As you can see, in the integrated projected it is loading from 5628\_audio.encode.wasm  
where as in separate application it is loading from just audio.encode.wasm

Is it any issue?

---

<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 29, 2020, 7:44am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/5 "2020-08-29T07:44:24Z")

</div>

Also I have this component inside login page, why is it getting loaded on the login page?

---

<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 31, 2020, 1:22pm UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/6 "2020-08-31T13:22:59Z")

</div>

@tommy I have found one difference in the components tab

**Working example Image**

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

**Non-working example**

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

Is it any issue?

---

<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 3, 2020, 12:21am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/7 "2020-09-03T00:21:07Z")

</div>

Hey @ragipallyalekya3,

Can you share a sample github repo with the issue so I can help debug?

Also checkout this thread, let me know if it helps:

> [@Error on QuasarFramework integration](https://devforum.zoom.us/t/error-on-quasarframework-integration/28007/5):
>
> Hi Tommy, i solved the error logs with your assistance. For any reason the server module downloaded different files (files who starts with numbers 5628 and not 5510), but the front-end tools downloaded the right files, look at the difference bellow: I just copy and cut these files, and put the setZoomJSLib() to start the functions: \*\*Missing files to search engines: -5510\_js\_media.min.js -5510\_audio.encode.wasm -5510\_video.decode.wasm -5510\_video.mt.wasm -webim.min.js.mp innit…

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:** [September 3, 2020, 7:42am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/8 "2020-09-03T07:42:41Z")

</div>

@tommy  
I have tried the example you have provided it didn’t work. Below is the link to sample Github repo,

---

<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 8, 2020, 10:12pm UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/9 "2020-09-08T22:12:38Z")

</div>

Hey @ragipallyalekya3,

There were a few things wrong with your implementation.

1. You were not calling the startMeeting function.
2. You had some scoping issues with your variables.

Please try using the following code for your `login.component.ts` file:

```auto
import { Component, OnInit, OnDestroy } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AppService } from '../app.service';
import { error } from 'util';
import { Observable, Subscription } from 'rxjs';
import { AuthResponseData } from '../models/auth.model';
import { Router } from '@angular/router';

import { ZoomMtg } from '@zoomus/websdk';

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {

    isLogInMode: boolean = true;
    isLoading = false;
    errorMsg: string;
    loginForm: FormGroup;

    apiKey = ''
    meetingNumber = 123456789
    role = 1
    leaveUrl = 'http://localhost:4202'
    userName = 'Daily Standup Meeting'
    userEmail = ''
    passWord = ''
    signature: any;

    constructor(
        private fb: FormBuilder,
        private appService: AppService,
        private router: Router) {
        this.loginForm = fb.group({
            'email': ['', [Validators.required, Validators.email]],
            'password': ['', [Validators.required, Validators.minLength(8)]]
        })
    }

    ngOnInit() {
        this.getSignature();
    }

    getSignature() {
        this.signature = ZoomMtg.generateSignature({
            meetingNumber: this.meetingNumber,
            apiKey: this.apiKey,
            apiSecret: '',
            role: 1,
            success: (res) => {
                console.log(res.result);
                this.startMeeting(res.result)
            }
        });

    }

    startMeeting(signature) {
        console.log("Signature = " + signature)
        document.getElementById('zmmtg-root').style.display = 'block'

        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)
            }
        })
    }

    onSwitchLogin() {
        this.isLogInMode = !this.isLogInMode;
    }

    onsubmit() {
        if (!this.loginForm.valid) {
            return;
        }
        let email = this.loginForm.value.email;
        let password = this.loginForm.value.password;

        this.isLoading = true;

        let loginObservable: Observable<AuthResponseData>;

        if (this.isLogInMode) {
            loginObservable = this.appService.signIn(email, password);
        } else {
            loginObservable = this.appService.signUp(email, password);
        }
        loginObservable.subscribe(res => {
            console.log(res);
            this.isLoading = false;
            this.router.navigate(['/recipes']);
        },
            errorMsg => {
                this.isLoading = false;
                this.errorMsg = errorMsg;
                console.log(this.errorMsg)
            }
        )
        this.loginForm.reset();
    }

}

```

Notice I have removed all the sensitive info like the API credentials and meeting number, so please replace with yours when testing locally.

Please **delete or set that github repo to private** since it included your credentials.

Let me know if the update code works! 🙂

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:** [September 9, 2020, 7:00am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/10 "2020-09-09T07:00:13Z")

</div>

@tommy yeah this has worked for me, but now when I am trying to do the exact same thing with the original project, it isn’t working. I will mail you the Github link to the original project.

Thank you.

---

<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:** [September 9, 2020, 7:17am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/11 "2020-09-09T07:17:04Z")

</div>

@tommy below is the link to Github, we have already given you access, the code is in teacher-live.component.ts file  
[https://github.com/archit1496/VamSchool/tree/trunk](https://github.com/archit1496/VamSchool/tree/trunk)

---

<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, 2020, 8:26pm UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/14 "2020-09-11T20:26:25Z")

</div>

Hey @ragipallyalekya3,

> [@ragipallyalekya3](#):
>
> yeah this has worked for me, but now when I am trying to do the exact same thing with the original project, it isn’t working. I will mail you the Github link to the original project.

Is there a new issue? What exactly is not working?

Can you please provide instructions in the readme to login and reproduce the issue?

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:** [September 12, 2020, 6:18am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/15 "2020-09-12T06:18:22Z")

</div>

@tommy I am having the same problem, black screen with no errors. I have used exactly what you’ve said but with the actual application we are facing the same problem

---

<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 15, 2020, 5:41pm UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/16 "2020-09-15T17:41:12Z")

</div>

Hey @ragipallyalekya3,

Gotcha. If you can provide steps to login to your app and how to start the Zoom Web SDK piece that would be helpful. 🙂

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:** [September 16, 2020, 5:47am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/17 "2020-09-16T05:47:59Z")

</div>

We aren’t able to login also, we can see a black screen in the login page itself, the component where we have zoom code is teacher-live.component

---

<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:** [September 16, 2020, 6:17am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/18 "2020-09-16T06:17:00Z")

</div>

P.S: The code is in trunk branch, and the credentials are [ak.das@gmail.com](mailto:ak.das@gmail.com), pwd- admin. I tried having zoom code in login page, it’s working fine on page load, but if assign it to a button we can see black screen only, why is this happening? Zoom Websdk it should load on request but it is loading on the very first page of the application.

---

<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:** [September 17, 2020, 5:55am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/19 "2020-09-17T05:55:10Z")

</div>

When you login there will be live class tab that is the page

---

<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, 2020, 7:25pm UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/20 "2020-09-18T19:25:05Z")

</div>

Thanks @ragipallyalekya3,

I will take a look and let you know what I find.

-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:** [September 18, 2020, 9:30pm UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/25 "2020-09-18T21:30:32Z")

</div>

Hey @ragipallyalekya3,

To fix your issue, I have hid the Web SDK by default like in the Sample App. Add the following code to your styles.css file:

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

```

Here is the example in the Angular Sample App:

> <https://github.com/zoom/websdk-sample-angular/blob/master/src/styles.css#L7>

 ![Screen Shot 2020-09-18 at 3.30.47 PM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/7/7fa801c3931423d2e2908b269b03c49126773e8e.jpeg)

And then once you want to display the Web SDK, set the display to block:

> <https://github.com/zoom/websdk-sample-angular/blob/master/src/app/app.component.ts#L53>

Let me know if that helps! 🙂

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:** [September 19, 2020, 7:45am UTC](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346/26 "2020-09-19T07:45:30Z")

</div>

@tommy thank you very much for your patience and valuable time, this has worked thanks a lot.

[Next page](https://devforum.zoom.us/t/getting-black-screen-with-no-errors-on-integrating-with-angular-application/28346.md?page=2)