'ng-waveform' is not a known element in angular

Question

I was trying to use ng-waveform

Link: https://www.npmjs.com/package/ng-waveform

In app.module file added

import { NgWaveformModule } from 'ng-waveform';

in import section

imports: [  
    NgWaveformModule,
  ],

in my ts file included

import { ITimeUpdateEvent, NgWaveformComponent, IRegionPositions } from 'ng-waveform';

export class WaveComponent implements OnInit {

  @ViewChild('waveform', { static: false }) waveform: NgWaveformComponent;

html Component added

 <ng-waveform #waveform class="waveform"
                                                [src]="src"
                                                [height]="150"
                                                [useRegion]="true"
                                                backgroundColor="#d3d3d3"
                                                regionBackgroundColor="rgba(255, 255, 255, 0.7)"
                                                regionStartStickColor="#21f032"
                                                regionEndStickColor="red"
                                                regionTextColor="#09417e"
                                                [withRegionLabels]="true"
                                                waveColor="#ff11ff"
                                                (trackLoaded)="onTrackLoaded($event)"
                                                (rendered)="onTrackRendered($event)"
                                                (durationChange)="onDurationChange($event)"
                                                (timeUpdate)="onTimeUpdate($event)"
                                                (paused)="onPaused()"
                                                (regionChange)="onRegionChange($event)"
                                              >

but still getting

'ng-waveform' is not a known element:

1. If 'ng-waveform' is an Angular component, then verify that it is part of this module.
2. If 'ng-waveform' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Any solution to resolve this issue Thanks

Answer 1

You probably forgot to add your WaveComponent in your module.

@NgModule({
  imports: [BrowserModule, FormsModule, NgWaveformModule],
  declarations: [
   ....
   WaveComponent // don't forget to declare your components 
 ],
  bootstrap: [AppComponent],
})
export class AppModule {}