Translation Pipe (ngx-translate) not found in Ionic Framework 6

Issue

I want to use the ngx-translate Pipe for translate my ionic app.

app.module.ts

export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    HttpClientModule,
    CookieModule.withOptions(),
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  exports: [TranslateModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  { provide: LocationStrategy, useClass: HashLocationStrategy },
  { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

app.component.ts

  constructor(
    private translate: TranslateService
  ) {

    translate.setDefaultLang('de');
    translate.use('de');
  }

I can use the pipe in app.component.html but not in my page HomePage (home.page.ts)

How can I fix this? Do I have to make a workaround for Ionic?

Solution

You need to import TranslateModule in the module of a specific component that you want to use translate pipe. For your case, you should add the below lines inside home.module.ts

import { HomePage } from './home.page';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
imports: [
...,
TranslateModule
],
declarations: [HomePage]
})
export class HomePageModule {}

Answered By - Gheyath Nasani