Translate Module missing into external component

Hi everyone. I have a strange issue with translate module. I try to describe the scenario:

1. Main page
2. ClubSettingsMenuComponent (it is a Popover Menu)

Main Page has a button that open popover Menu (Component Page).

ionic info                        

Ionic:

   Ionic CLI                     : 6.13.1 (C:\Users\luca\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.8
   @angular-devkit/build-angular : 12.0.3
   @angular-devkit/schematics    : 12.0.3
   @angular/cli                  : 12.0.3
   @ionic/angular-toolkit        : 4.0.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : 6.0.0, browser
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.16.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.12
   OS     : Windows 10

In Main Page

  import { ClubSettingsMenuComponent } from 'src/components/club-settings-menu/club-settings-menu.component';

  async openSettingsMenu(ev: any) {
    const popover = await this.popoverController.create({
      component: ClubSettingsMenuComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    });
    await popover.present();

    const { role } = await popover.onDidDismiss();
    console.log('onDidDismiss resolved with role', role);
  }

In ClubSettingsMenuComponentModule

@NgModule({
  imports: [ 
    CommonModule, 
    IonicModule,
    TranslateModule.forChild()
  ],
  declarations: [ClubSettingsMenuComponent],
  exports: [ClubSettingsMenuComponent]
})
export class ClubSettingsMenuComponentModule {}

In html page

<ion-list>
    <ion-item (click)="goToSearchUsers()">
        <ion-icon name="custom-add-users" slot="start"></ion-icon>
        <ion-label>{{ "searchUsersAction" | translate }}</ion-label>
    </ion-item>

</ion-list>

When I open page, in console:

core.js:6456 ERROR Error: Uncaught (in promise): Error: NG0302: The pipe 'translate' could not be found!. Find more at https://angular.io/errors/NG0302
Error: NG0302: The pipe 'translate' could not be found!. Find more at https://angular.io/errors/NG0302

Can you help me to understand the issue please?

Thanks in advance
Luca

1 post - 1 participant

Read full topic