it-swarm.com.de

Angular 2.0 translate Pipe konnte nicht gefunden werden

Ich habe eine Komponente, die den translateService verwendet, aber es ist nicht möglich, Elemente mit der Pipe im HTML-Code der Komponentenvorlage zu übersetzen. Ich erhalte folgenden Fehler:

Die Pipe 'translate' wurde nicht gefunden

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>

Die Übersetzung mit dem Dienst auf der Komponente funktioniert gut, aber ich muss auch die HTML mit Pipe übersetzen

18
Fabio

Du musst imports: [ TranslateModule ] in das Modul, in dem das BookingComponent deklariert ist. Durch den Import im App-Modul werden die Pipes nur den in diesem Modul deklarierten Komponenten zur Verfügung gestellt. Aber Provider/Services werden global vom Modul aus registriert (im Gegensatz zu Komponenten, Direktiven und Pipes).

42
Paul Samsotha

Hier sind die Schritte aufgeführt, die Sie kurz ausführen müssen, um das Problem zu beheben

  1. In der Datei app.module.ts muss die Übersetzungsmodullogik zusammen mit dem Übersetzungsladeprogramm und der Übersetzungsfabrik vorhanden sein

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

  2. Importieren und exportieren Sie in shared.module.ts (oder einem anderen Modul) das Modul Translate.
    d. h .: Das Übersetzungsmodul sollte sowohl Teil des Import- als auch des Export-Arrays sein. Die meisten Antworten in SO und github erwähnen, dass das Modul importiert, aber nicht exportiert wird.

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

7
Jonathan Cardoz