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

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


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

Hi @vishwajeetbhosale ,

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


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

@rehema.zoom, any update on this?

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.


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

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.


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

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: [

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


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

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

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'

  selector: 'app-home',
  standalone: true, 
  imports: [CommonModule], 
  template: `
  schemas: [
  styleUrls: [
export class HomeComponent {


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,

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

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.


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.