Angular Not Recognizing Webcam Element

[cgutierrez365]

I am working on an ionic cordova Angular app and am trying to use this plugin but I keep getting the error:

1. If 'webcam' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

This is the case even though I added WebcamModule to my app.module.ts file like the docs recommended.

app.module.ts

import {WebcamModule} from 'ngx-webcam';
...

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(),
    IonicStorageModule.forRoot({driverOrder: ['localstorage']}),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    WebcamModule
    ...
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Keyboard,
    LocalNotifications,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: DEFAULTS, useValue: { new_blossom_ui: true, klaviyo_in: true } },
    { provide: SETTINGS, useFactory: () => {} },
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

I also tried adding it to the spec.ts file associated with the component I am using the plugin in and also tried changing the schema to "NO_ERRORS_SCHEMA" but still got the same error about it not recognizing the webcam element.

track-card.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';

import { TrackCardComponent } from './track-card.component';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { WebcamModule } from 'ngx-webcam';

describe('TrackCardComponent', () => {
  let component: TrackCardComponent;
  let fixture: ComponentFixture<TrackCardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TrackCardComponent ],
      imports: [WebcamModule, IonicModule.forRoot()],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();

    fixture = TestBed.createComponent(TrackCardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

For reference, I am simply using the sample html used in the live demo and I installed the plugin with npm install --save ngx-webcam.

track-card.component.html

 <webcam [height]="500" [width]="500" [trigger]="triggerObservable" (imageCapture)="handleImage($event)" *ngIf="showWebcam"
              [allowCameraSwitch]="allowCameraSwitch" [switchCamera]="nextWebcamObservable"
              [videoOptions]="videoOptions"
              [imageQuality]="1"
              (cameraSwitched)="cameraWasSwitched($event)"
              (initError)="handleInitError($event)"
 ></webcam>

This is my package.json

{
  "name": "my-app",
  "version": "3.0.7",
  "author": "Clarissa",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/fire": "^7.4.1",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@ionic-native/camera": "^5.36.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/photo-viewer": "^5.36.0",
    "@ionic/angular": "^6.1.10",
    "@ionic/angular-server": "^6.1.10",
    "@ionic/cordova-builders": "^6.1.0",
    "@ionic/storage": "^2.3.1",
    "ngx-webcam": "^0.4.1",
     ...
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.1302.6",
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular/cli": "14.2.10",
    "@angular/compiler": "^14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@angular/language-service": "^14.0.0",
    "@ionic/angular-toolkit": "^6.1.0",
    "@types/cordova": "^11.0.0",
    "@types/jasmine": "~3.8.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.2",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.7.3"
    ...
  },
  "description": "description",
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-custom-config": {},
      "cordova-android-support-gradle-release": {
        "ANDROID_SUPPORT_VERSION": "27.+"
      },
     ...
    },
    "platforms": [
      "android"
    ]
  }
}

Thank you to anyone who can help me resolve this.