CODEWITHSUNDEEP
angulartypescriptangular7ionic4ngx-translate
BenYsil
BenYsil

Reputation: 147

Ionic4 Angular7 ngx-translate pipe not found

I'm noob with this module.

I start New ionic project blank and I follow some tutorial.

app.module.ts

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(),
    AppRoutingModule,
       // configure the imports
       HttpClientModule,
       TranslateModule.forRoot({
           loader: {
               provide: TranslateLoader,
               useFactory: HttpLoaderFactory,
               deps: [HttpClient]
           }
          },)
    ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent ]
})
export class AppModule {}
// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private translate: TranslateService
  ) {
    translate.setDefaultLang('en');
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

}

the en.json

    {
        "welcometitle": "Welcome :)",
        "welcomejbaya": "Just be as you are !",
        "login": "Login",
        "password": "Password",
        "connect": "connect"
      }

the home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  {{'welcometitle' | translate }}
  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
</ion-content>

I got the error pipe translate not found.

Can you explain me slowly (I'm a beginner ^^) why it doesn't work ? ^^

It's searching correctly the en.json but not translate, i tried 

<p translate>id</p>
<p [translate]="'id'"></p>
 {{ 'id' | translate }}

Thank you all ^^

Upvotes: 2

Views: 734

Answers (2)

BenYsil
BenYsil

Reputation: 147

The only error is :

**private** translate: TranslateService

delete private and it works !

translate: TranslateService :)

Upvotes: 0

Sampath
Sampath

Reputation: 65870

Since Ionic 4 is lazy loaded by default you must implement TranslateModule on each and every page module where you'll use the TranslateService.

    import { NgModule } from '@angular/core';
    import { HomePage } from './home.page';
    import { TranslateModule } from '@ngx-translate/core';

    @NgModule({
       imports: [
         CommonModule,
         FormsModule,
         IonicModule,
         TranslateModule.forChild(),
         RouterModule.forChild([
          {
           path: '',
           component: HomePage
          }
    ])
  ],
  declarations: [HomePage]
 })
 export class HomePageModule { }

Upvotes: 1

Related Questions