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
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! 
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
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
