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)