Zoom video sdk error 'app-previewkit' is not a known element

Video SDK Web
1

Description
I’m trying to implement Zoom Video SDK in Angular Application and I’m getting below error.

Zoom video sdk error: ‘app-previewkit’ is not a known element

Browser Console Error
Getting error at the time of build

Which Web Video SDK version?
“@zoom/videosdk-ui-toolkit”: “^1.8.12”,

Video SDK Code Snippets
image

Screenshots

image
image1424×134 7.16 KB

Troubleshooting Routes
Referred linked is : GitHub - zoom/videosdk-ui-toolkit-web: The Zoom Video SDK UI toolkit is a prebuilt video chat user interface powered by the Zoom Video SDK.

Device (please complete the following information):

  • Device: Windows
  • OS: 10
  • Browser: Chrome
  • Browser Version: Version 116.0.5845.142 (Official Build) (64-bit)

Additional context
Share in working Zoom Video SDK application with Angular

2

Hi @vishwajeetbhosale ,

Can you share the snippet of where you imported the CSS styles?

Thanks,
Rehema

3

@rehema.zoom , in ‘angular.json’ and line number is 32

image
image1472×794 58.2 KB

4

@rehema.zoom, any update on this?

5

Hi @vishwajeetbhosale ,

Thank you for sharing the screenshot, I see that it has been imported exactly as done in the ReadMe instructions. I will see if I can replicate the issue and get back to you post-troubleshooting.

Thanks,
Rehema

6

@rehema.zoom, try to do it using Angular application, this will helpful.

7

Hi @vishwajeetbhosale ,

I wanted to let you know I was able to replicate the issue and that it seems to be angular-specific, in regards to using custom elements within the framework. I’m still working to find a solution, but here’s a piece of documentation I’ve been looking into to see what guidance it can provide: Angular Documentation. I will reach back out when I find a way to avoid this error.

Thanks,
Rehema

8

@rehema.zoom, Thank you for the response.

I’ll also check regards to using custom elements within the framework, with provided link, but please share the solution ASAP you sorted out.

9

Hi @vishwajeetbhosale ,

My apologies for the delayed response. I have found a workaround for this issue. In the component that you’re rendering the app preview tag and importing the UIToolKit, you’ll want to import CUSTOM_ELEMENTS_SCHEMA from angular/core by adding this line:

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'

You’ll also need to add this line to your component module on the same page:

schemas: [
CUSTOM_ELEMENTS_SCHEMA
],

Please let me know if this resolves the error. If not, we can continue to troubleshoot from there.

Thanks,
Rehema

10

Hey @rehema.zoom, thank you responding with solution, I’ll try it and let you know.

11

@rehema.zoom, I’m going to try it the solution you provided, it will be good if you provided sample in Angular for reference.

12

HI @vishwajeetbhosale ,

Here is a code snippet of how I integrated the UI toolkit into the Angular starter application (used in their documentation).

import { Component } from '@angular/core'
import {NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import { CommonModule } from '@angular/common'
import * as UIToolkit from '@zoom/videosdk-ui-toolkit'

console.log(UIToolkit)
@Component({
  selector: 'app-home',
  standalone: true, 
  imports: [CommonModule], 
  template: `
    <app-previewkit></app-previewkit>
  `,
  schemas: [
    CUSTOM_ELEMENTS_SCEHMA
  ],
  styleUrls: [
    './home.component.css',
  ]
})
export class HomeComponent {
}

Thanks,
Rehema