Angular 2.0 translate Pipe could not be found

Question

I have a component that uses the translateService, but it's not possible to translate items with the pipe on the Component Template HTML, i get following error:

The pipe 'translate' could not be found

app.module.ts

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {HttpModule, Http} from "@angular/http";
import {TranslateModule, TranslateLoader, TranslateStaticLoader} from 'ng2-translate';
import {AppComponent} from "./app.component";

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, './assets/i18n', '.json'),
    deps: [Http]
   })
],
bootstrap: [AppComponent]
})
export class AppModule {
}

booking.component.ts

import {Component, OnInit} from '@angular/core';
import {BookingComponent} from './booking.component';
import {TranslateService} from 'ng2-translate';

@Component({
   selector: 'app-booking',
   templateUrl: './booking.component.html',
   styleUrls: ['./booking.component.css']
})

export class BookingComponent implements OnInit {
  constructor(private translate: TranslateService
  ) {
    translate.setDefaultLang('de');
    translate.use('de');
};

ngOnInit() {
}
}

booking.component.html

<p>{{'TESTKEY' | translate }}</p>

The translation with the service on the component works fine, but i need to translate also the html with pipe

Answer 1

You need to imports: [ TranslateModule ] into whatever module the BookingComponent is declare in. The import in the app module only makes the pipes available to components declared in that module. But providers/services are globally registered from the module (unlike components, directives, and pipes)

Answer 2

For those coming across this, here are the steps you need to do in a nutshell to fix the issue

1. Have the translate module logic along with translate loader and translateFactory present in the app.module.ts

    TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: (http: Http) => 
        new TranslateStaticLoader(http, './assets/i18n', '.json'),
        deps: [Http]
       })
    ],`

1. In your shared.module.ts (or any other module), import and export the Translate module.
   i.e.: Translate module should be a part of both the import and export arrays. Most answers in SO and github mention importing the module but not exporting it.

    @NgModule({
     imports: [
       // other imported modules here
       TranslateModule
    ],
    exports: [
    // other exported modules here
    TranslateModule]`

Answer 3

I had that issue only on a single "page". If the declaration for the component containing the translate pipe is missing, it will also not find it.

const routes: Routes = [
  {
    path: '',
    component: InventoryPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TranslateModule.forChild(),
    RouterModule.forChild(routes),
    SharedComponentModule
  ],
  declarations: [
    InventoryPage // << Check your declaration
  ]
})
export class InventoryPageModule {}

Answer 4

Translate Module: to use translator as a pipe (on template)

import { TranslateModule } from '@ngx-translate/core';

imports: [
CommonModule,
RouterModule, //Router Module
TranslateModule //Translate Module**

]

Answer 5

I am working with Ionic 5. My HTML in home.page.html

<h2 > {{'HOME.title' | translate }}</h2>

I had the error

The pipe 'translate' could not be found

marked in red error in Visual Studio Code. But the Ionic App was compiling with ionic serve anyway and the translation was working.

Anyway I managed to remove the error. As already mentioned above some guides do not stress that it is important to export also the module. In my case in home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import {TranslateModule} from '@ngx-translate/core'; //IMPORT THE MODULE IN ANY PAGE 

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    TranslateModule     //IMPORT THE MODULE
  ],
  declarations: [HomePage],
  exports:[TranslateModule],     //REMEMBER TO ADD THIS TO EXPORT IT AS WELL!!!
})
export class HomePageModule {}