How to run @zoomus/websdk with Angular 11.0.4

Description
@zoomus/websdk is getting issue with Angular 11.0.4

I setup websdk as per zoom/websdk-sample-angular on Angular 11.0.4 but the app showing lots of errors with the console.

Error
zoomus-websdk.umd.min.js:2 Uncaught TypeError: Cannot read property ‘Component’ of undefined
at zoomus-websdk.umd.min.js:2
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)

Which version?
Angular 11.0.4
WebSDK1.7.8

  • OS: Windows 10
  • Browser Chrome

Hey @dileepyadav4it,

Checkout the Angular Web SDK Sample App, it was just updated to Angular 11:

Let me know if you run into any issues! :slight_smile:

Thanks,
Tommy

Hi @tommy ,

All API successfully running and meeting joined. But your zoom UI interface is not loading with angular 11.0.4

Kindly check and suggest a solution.

Reproduce:
Create new ng 11.04. app from scratch. add zoom and run. because your existing app working fine.

Thanks
Dileep

Hey @dileepyadav4it,

Can you share your app.component.ts file so I can see if anything is misconfigured?

Also, make sure you have the following in angular.json:

Thanks,
Tommy

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

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

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

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

ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();

@Component({

selector: ‘app-zoom-int’,

templateUrl: ‘./zoom-int.component.html’,

styleUrls: [’./zoom-int.component.css’]

})

export class ZoomIntComponent implements OnInit {

constructor(public httpClient: HttpClient) {

}

ngOnInit() {

}

signatureEndpoint = ‘’

apiKey = ‘’

meetingNumber = ‘’

role = 0

leaveUrl = ‘http://localhost:4200

userName = ‘Dileep’

userEmail = ‘’

passWord = ‘’

getSignature() {

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)

})

}

startMeeting(signature: any) {

// document.getElementById(‘zmmtg-root’).style.display = ‘block’ This line of code not supporting angular 11.04

ZoomMtg.init({

  leaveUrl: this.leaveUrl,

  isSupportAV: true,

  success: (success: any) => {

    console.log(success)

    ZoomMtg.join({

      signature: signature,

      meetingNumber: this.meetingNumber,

      userName: this.userName,

      apiKey: this.apiKey,

      userEmail: this.userEmail,

      passWord: this.passWord,

      success: (success: any) => {

        console.log(success)

      },

      error: (error: any) => {

        console.log(error)

      }

    })

  },

  error: (error: any) => {

    console.log(error)

  }

})

}

}

{

“$schema”: “./node_modules/@angular/cli/lib/config/schema.json”,
“version”: 1,
“newProjectRoot”: “projects”,
“projects”: {
“SakDemo”: {
“projectType”: “application”,
“schematics”: {
@schematics/angular:application”: {
“strict”: true
}
},
“root”: “”,
“sourceRoot”: “src”,
“prefix”: “app”,
“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/SakDemo”,
“index”: “src/index.html”,
“main”: “src/main.ts”,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “tsconfig.app.json”,
“aot”: true,
“assets”: [
“src/favicon.ico”,
“src/assets”,
{
“glob”: “/*",
“input”: “./node_modules/@zoomus/websdk/dist/lib/”,
“output”: “./node_modules/@zoomus/websdk/dist/lib/”
}
],
“styles”: [
“./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css”,
“node_modules/angular-calendar/css/angular-calendar.css”,
“node_modules/@zoomus/websdk/dist/css/bootstrap.css”,
“node_modules/@zoomus/websdk/dist/css/react-select.css”,
“src/styles.css”
],
“scripts”: [
“node_modules/jquery/dist/jquery.min.js”
],
“allowedCommonJsDependencies”: [
@zoomus/websdk”
]
},
“configurations”: {
“production”: {
“fileReplacements”: [
{
“replace”: “src/environments/environment.ts”,
“with”: “src/environments/environment.prod.ts”
}
],
“optimization”: true,
“outputHashing”: “all”,
“sourceMap”: false,
“namedChunks”: false,
“extractLicenses”: true,
“vendorChunk”: false,
“buildOptimizer”: true,
“budgets”: [
{
“type”: “initial”,
“maximumWarning”: “500kb”,
“maximumError”: “1mb”
},
{
“type”: “anyComponentStyle”,
“maximumWarning”: “2kb”,
“maximumError”: “4kb”
}
]
}
}
},
“serve”: {
“builder”: “@angular-devkit/build-angular:dev-server”,
“options”: {
“browserTarget”: “SakDemo:build”
},
“configurations”: {
“production”: {
“browserTarget”: “SakDemo:build:production”
}
}
},
“extract-i18n”: {
“builder”: “@angular-devkit/build-angular:extract-i18n”,
“options”: {
“browserTarget”: “SakDemo:build”
}
},
“test”: {
“builder”: “@angular-devkit/build-angular:karma”,
“options”: {
“main”: “src/test.ts”,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “tsconfig.spec.json”,
“karmaConfig”: “karma.conf.js”,
“assets”: [
“src/favicon.ico”,
“src/assets”
],
“styles”: [
“./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css”,
“node_modules/angular-calendar/css/angular-calendar.css”,
“node_modules/angular-calendar/css/angular-calendar.css”,
“src/styles.css”
],
“scripts”: []
}
},
“lint”: {
“builder”: “@angular-devkit/build-angular:tslint”,
“options”: {
“tsConfig”: [
“tsconfig.app.json”,
“tsconfig.spec.json”,
“e2e/tsconfig.json”
],
“exclude”: [
"
/node_modules/**”
]
}
},
“e2e”: {
“builder”: “@angular-devkit/build-angular:protractor”,
“options”: {
“protractorConfig”: “e2e/protractor.conf.js”,
“devServerTarget”: “SakDemo:serve”
},
“configurations”: {
“production”: {
“devServerTarget”: “SakDemo:serve:production”
}
}
}
}
}
},
“defaultProject”: “SakDemo”,
“cli”: {
“analytics”: “309f954f-b098-41c9-b9a1-ff7fb7f607d2”
}
}

Hey @dileepyadav4it,

I just did a fresh clone of the Angular Web SDK Sample App, filled in the required variables, and it worked.

Do you mind sending me your GitHub repo so I can see if there is anything misconfigured in your code?

-Tommy