web-dev-qa-db-fra.com

Angular 2.0 translate Pipe est introuvable

J'ai un composant qui utilise le translateService, mais il n'est pas possible de traduire des éléments avec le tuyau sur le HTML du modèle de composant, j'obtiens l'erreur suivante:

Le tuyau "traduire" est introuvable

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>

La traduction avec le service sur le composant fonctionne bien, mais j'ai besoin de traduire aussi le html avec pipe

angulartranslation
18
Fabio

Tu dois imports: [ TranslateModule ] dans n'importe quel module dans lequel BookingComponent est déclaré. L'importation dans le module d'application rend uniquement les canaux disponibles pour les composants déclarés dans ce module. Mais les fournisseurs/services sont globalement enregistrés à partir du module (contrairement aux composants, directives et canaux)

42
Paul Samsotha

Pour ceux qui rencontrent ce problème, voici les étapes à suivre pour résoudre le problème

  1. Avoir la logique du module de traduction ainsi que le chargeur de traduction et translateFactory présents dans app.module.ts

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

  2. Dans votre shared.module.ts (ou tout autre module), importez et exportez le module Translate.
    c'est-à-dire: le module de traduction doit faire partie des tableaux d'importation et d'exportation. La plupart des réponses dans SO et github mentionnent l'importation du module mais pas son exportation.

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

7
Jonathan Cardoz