NG0302: The pipe 'translate' could not be found!

Ionic Framework
1

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

2

can someone help me please?

3

Hello,

Kindly import TranslateModule in your page.module.ts file as shown below

import { TanslateModule } from ‘@ngx-translate/core’;

imports : [ …,
TranslateModule]

4

Already imported. ClubPage in my Main Page.

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ClubPageRoutingModule,
    HeaderComponentModule,
    ClubSettingsMenuComponentModule,
    TranslateModule.forChild()
  ],
  declarations: [ClubPage]
})
export class ClubPageModule {}

Not works

5

Please help me to solve the issue.

6

lsantaniello
Let’s start from the beginning.
1- make sure you installed those libraries
npm install @ngx-translate/http-loader –save
npm install @ngx-translate/core –save

2- Edit app.module.ts and add these imports
import { HttpClient, HTTP_INTERCEPTORS } from ‘@angular/common/http’
import { TranslateModule ,TranslateLoader} from ‘@ngx-translate/core’;
import {TranslateHttpLoader} from ‘@ngx-translate/http-loader’;

3- in the app.Module.ts , add this function, addit just after the imports
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
4- in the imports array of the app.Module.ts ,add this
TranslateModule.forRoot({
defaultLanguage: ‘en’,
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
},
}),
the app.Module.ts should be looks like this

image
image609×515 15.4 KB

5- create a shared module:
ionic generate module shared
6- open the shared module and add the following imports
import { TranslateModule } from ‘@ngx-translate/core’;
import { HttpClientModule } from ‘@angular/common/http’;
7- in th imports array add TranslateModule and HttpClientModule
8- in the exports array add TranslateModule and HttpClientModule
the shared module should be something like this
image

9- make sure to add your ClubSettingsMenuComponent to the Shared module in both declarations array and exports array.
10- now back to app.Module.ts file, open it and add SharedModule to its imports array.
11- in the page.module.ts , add the Shared module to the imports array
note: Do not forget step number 9 it is very important
Good luck

2 Likes
7

I have read and try to follow your directions. however the pipe translate works in my app. it does not work only in the specific component that has a different hierarchy.

thanks @tarekfathi2003

8

Make sure you add the component to both the declarations array of the shared module and the exports array too. And also make sure you added the shared module to the import array of the app.Module.ts