web-dev-qa-db-fra.com

Ionic3 La pipe 'translate' est introuvable

salut ça fait des jours que j'ai essayé de résoudre ce problème sans succès. Lorsque j'essaie d'utiliser le tuyau traduire, j'obtiens cette erreur

Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'translate' could not be found ("
<ion-content padding>
<h2>{{[ERROR ->]"HELLO" | translate }}</h2>
</ion-content>
"): ng:///AdminPannelPageModule/AdminPannelPage.html@11:8

J'utilise angular 5.

ce sont les versions que j'utilise pour la traduction

"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",

Installation de Npm

npm install @ngx-translate/core @ngx-translate/http-loader --save

Ceci est ma page Home.html

<h2>{{"HELLO" | translate }}</h2>

Fichier JSON à traduire:

assets/i18n/en.json

{
"HELLO": "hello"
}

assets/i18n/it.json

{
"HELLO": "ciao"
}

dans l'export j'ai utilisé la export function setTranslateLoader (http: HttpClient) au lieu d'utiliser la export function setTranslateLoader (http: Http) car sinon ça m'a donné cette erreur: Argument of type 'Http' is not assignable to parameter of type 'HttpClient '. Property 'handler' is missing in type 'Http'.

Il y a mon importation dans app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function setTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}


@NgModule({
imports: [
HttpClientModule,
IonicModule.forRoot(MyApp),
TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (setTranslateLoader),
    deps: [HttpClient]
  }
}),
],

Et ceci est mon constructeur app.component.ts

constructor(..., translate: TranslateService) {
     translate.setDefaultLang('en');
     ...
}
10

Nous pouvons voir que vous avez un sous-module AdminPannelPageModule, où l'erreur est réellement levée. Vous devez également marquer TranslateModule dans ce module, mais ignorez forRoot(). Donc dans votre AdminPannelModule:

imports: [
  ....
  TranslateModule
],
12
AJT82