Ngx-translate: The pipe 'translate' could not be found

RobertLinde · July 9, 2018, 10:23pm

Hi there,

recently I added ngx-translate to my app. I completely followed the github (https://github.com/ngx-translate) and ionic docs tutorial but I get the error “The pipe ‘translate’ could not be found”. I already asked google for this error and also other person seem to have it, but their solutions aren´t working for me.

Does anybody here know how to solve this??

If you need to see some of my code, just message me here.

Greetings

rapropos · July 9, 2018, 10:29pm

Things that would be helpful to know:

whether or not there is an @IonicPage decorator on the page that is throwing this error
if so, the contents of the corresponding page module
if not, the contents of app.module.ts.

RobertLinde · July 9, 2018, 10:44pm

okk than start with app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, Component, enableProdMode } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { LoginPage } from '../pages/login/login';

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

@NgModule({
  declarations: [
    MyApp  
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (HttpLoaderFactory),
            deps: [HttpClient]
        }
    }),
  ],
  bootstrap: [
    IonicApp,
  ],
  entryComponents: [
    MyApp
],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})
export class AppModule {}
enableProdMode();

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

(shortened)

The page´s I am using it on ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { TranslateService } from "@ngx-translate/core";

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})

export class LoginPage {

  	constructor(public translate: TranslateService, public navCtrl: NavController, public navParams: NavParams) {
	}
}

(shortened)

and in login.module.ts I haven´t changed anything.
If you need to see the app.components.ts or anything else, just tell me.

rapropos · July 9, 2018, 11:07pm

That, I expect, is your problem. Try importing TranslateModule.forChild() into there.

RobertLinde · July 9, 2018, 11:12pm

Thanks for your fast response.

Now my login.module.ts looks like this:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
import { TranslateModule} from "@ngx-translate/core";

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
    TranslateModule.forChild()
  ],
})
export class LoginPageModule {
  constructor(public translatemodule: TranslateModule){  
  }
}

But now, I get this error:

Error: Uncaught (in promise): TypeError: Object(…) is not a function
TypeError: Object(…) is not a function

edit:
also changed the login.module.ts to

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';

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

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (HttpLoaderFactory),
            deps: [HttpClient]
        }
    }),
  ],
})
export class LoginPageModule {
}

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

But now I get this error:

Error: Module build failed: Error: ENOENT: no such file or directory, open ‘C:\Users\Robert Notebook\Dropbox\Prillan_gesamt\node_modules@ngx-translate\http-loader\esm5\ngx-translate-http-loader.js’

And additionaly this one:

Argument of type ‘HttpClient’ is not assignable to parameter of type ‘Http’. Property ‘_backend’ is missing in type ‘HttpClient’.

in

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

Which import should I use and how to deal with the problem occuring??

rapropos · July 10, 2018, 4:11am

Sounds like a version mismatch. See the ngx-translate docs.

RobertLinde · July 10, 2018, 8:19am

Loaded a backup and installed everything from the beginning again.
Now I still have following error:

Typescript Error
Argument of type ‘HttpClient’ is not assignable to parameter of type ‘Http’. Property ‘_backend’ is missing in type ‘HttpClient’.

in error1

If I reload ionic lab I get this error:

and this is my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, Component, enableProdMode } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home'
import { Baum0PageModule } from '../pages/Baum0/Baum0.module'
import { Baum1PageModule } from '../pages/Baum1/Baum1.module'
import { Baum2PageModule } from '../pages/Baum2/Baum2.module';

import { IonicStorageModule } from '@ionic/storage'
import { ThemeProvider } from '../providers/theme/theme';
import { SocialSharing } from '@ionic-native/social-sharing';
import { Clipboard } from '@ionic-native/clipboard';
import { Geolocation } from '@ionic-native/geolocation';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { Keyboard } from '@ionic-native/keyboard';

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

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
      TranslateModule.forRoot({
          loader: {
              provide: TranslateLoader,
              useFactory: (HttpLoaderFactory),
              deps: [HttpClient]
          }
      }),
    IonicModule.forRoot(MyApp,{
      mode: 'ios'
      }),
    IonicStorageModule.forRoot(), 
  Baum2PageModule,
  SuperTabsModule.forRoot(),
	Baum1PageModule,
  Baum0PageModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Storage,
    SocialSharing,
    Geolocation,
    Clipboard,
    Keyboard,
    ThemeProvider
  ]
})
export class AppModule {}
enableProdMode();

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

Any Ideas how to solve this??

RobertLinde · July 10, 2018, 1:24pm

Update: got it working, had to use

npm install @ngx-translate/http-loader@latest

Thanks for your effort!