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

Question

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 txtTrsnalate 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 { }

Answer 1

Sometimes, the root cause of an issue lies upstream in the process. Failures in individual components during the compilation phase can cascade, leading to the failure of the entire module. You can check every individual component in SharedModule or CommonModule