After Angular upgrade to 16 - error NG8004: No pipe found with name 'txtTranslate'

I have updated my Angular app from Angular 15 to 16. I got few compilation errors with few node packages and i resolved them. Even after that getting many errors as below as ng serve

error NG8004: No pipe found with name 'txtTranslate'


error NG8002: Can't bind to 'src' since it isn't a known property of 'svg-icon'.
1. If 'svg-icon' is an Angular component and it has 'src' input, then verify that it is part of this module.
2. If 'svg-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

75 <svg-icon class="width100" src="{{'eca_phone' | imgTranslate}}" [class]="'icon-size-10 icon-color'" [applyClass]=true></svg-icon>


I have a sharedModule and appModule and imported commonModule in both.

And this custom txtTranslate pipe as well declared in both.

@NgModule({
declarations: [...]
imports: [
CommonModule,
BrowserModule,
HttpClientModule,
CoreModule,
SharedModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
ToastyModule.forRoot(),
AccordionModule.forRoot(),
CollapseModule.forRoot(),
ColorPickerModule,
AngularMyDatePickerModule,
AngularDraggableModule,
NgDragDropModule.forRoot(),
UiSwitchModule,
NgIdleModule.forRoot(),
ScrollingModule,
MsiCommonModule,
NgbModule,
AngularSvgIconModule.forRoot(),
TranslocoRootModule
]
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
bootstrap: [DockContainerComponent]
})
export class AppModule { }


import {TxtTranslatePipe} from './resource/txt-translate.pipe';
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule,
FormsModule,
...
],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
declarations: [
LoginModalComponent,
TxtTranslatePipe,
...
],
exports: [
LoginModalComponent,
TxtTranslatePipe,
...
],
})
export class SharedModule { }

Continue reading...