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

[vishwajeetbhosale (Vishwajeet)]

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?
“@zoom1234/videosdk-ui-toolkit”: “^1.8.12”,

Video SDK Code Snippets

Screenshots

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

[rehema.zoom (Rehema)]

Hi @vishwajeetbhosale ,

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

Thanks,
Rehema

[vishwajeetbhosale (Vishwajeet)]

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

[vishwajeetbhosale (Vishwajeet)]

@rehema.zoom, any update on this?

[rehema.zoom (Rehema)]

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

[vishwajeetbhosale (Vishwajeet)]

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

[rehema.zoom (Rehema)]

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

[vishwajeetbhosale (Vishwajeet)]

@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.

[rehema.zoom (Rehema)]

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

[vishwajeetbhosale (Vishwajeet)]

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

[vishwajeetbhosale (Vishwajeet)]

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

[rehema.zoom (Rehema)]

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

[vishwajeetbhosale (Vishwajeet)]

Hey @rehema.zoom, is it possible to you share the sample angular application which you created to test this, because I’m facing the issue to add schemas:[ CUSTOM_ELEMENTS_SCEHMA ] in component.

Getting below error,

[vishwajeetbhosale (Vishwajeet)]

Hey @rehema.zoom any update on my sample app request.

[rehema.zoom (Rehema)]

Hi @vishwajeetbhosale ,

The error you’re getting seems to be associated with TypeScript, while the application I used + code I attached is using Javascript only. I’ve attached an article that may provide a solution.

Thanks,
Rehema