Angular translate Pipe could not be found

Question

I have a component that uses the translateService, but it's not possible to translate items with the pipe on the Component Template HTML, i get following error:

The pipe 'translate' could not be found

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>

The translation with the service on the component works fine, but i need to translate also the html with pipe

score 102 · Accepted Answer · answered Nov 10 '16 at 23:46

You need to imports: [ TranslateModule ] into whatever module the BookingComponent is declare in. The import in the app module only makes the pipes available to components declared in that module. But providers/services are globally registered from the module (unlike components, directives, and pipes)

score 30 · Answer 2 · edited May 09 '20 at 06:48

30

For those coming across this, here are the steps you need to do in a nutshell to fix the issue

Have the translate module logic along with translate loader and translateFactory present in the app.module.ts

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

In your shared.module.ts (or any other module), import and export the Translate module.
i.e.: Translate module should be a part of both the import and export arrays. Most answers in SO and github mention importing the module but not exporting it.

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

edited May 09 '20 at 06:48

Hakan Fıstık

16,800
14
110
131

answered Dec 09 '17 at 15:33

Jonathan Cardoz

874
9
12

The documentation only suggests having to export **TranslateModule** when using a **SharedModule**. There is no mention of having to add to the exports of the root module (I.e. AppModule). Though adding to exports got the **translate** pipe working for me. Reference in ngx-translate docs: https://github.com/ngx-translate/core#1-import-the-translatemodule – Glenster Jan 16 '18 at 06:28
export the module allow using pipe in other modules than shared; conversely, import the module in shared allow to use it and it's pipe _in shared module_. – netalex Mar 15 '19 at 13:39
there is no need of exporting TranslateModule. its only for components to be shared out of that module.only importing works. tested in angular11 project #2021 – minigeek Mar 23 '21 at 10:02
THANK YOU, it worked! My "translate" pipe was not working in the child module, adding also export fixed that for whatever reason. – Ap0st0l Jun 20 '23 at 08:49

score 8 · Answer 3 · answered Jul 13 '21 at 15:12

I had that issue only on a single "page". If the declaration for the component containing the translate pipe is missing, it will also not find it.

const routes: Routes = [
  {
    path: '',
    component: InventoryPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TranslateModule.forChild(),
    RouterModule.forChild(routes),
    SharedComponentModule
  ],
  declarations: [
    InventoryPage // << Check your declaration
  ]
})
export class InventoryPageModule {}

score 3 · Answer 4 · answered May 11 '21 at 23:27

I am working with Ionic 5. My HTML in home.page.html

<h2 > {{'HOME.title' | translate }}</h2>

I had the error

The pipe 'translate' could not be found

marked in red error in Visual Studio Code. But the Ionic App was compiling with ionic serve anyway and the translation was working.

Anyway I managed to remove the error. As already mentioned above some guides do not stress that it is important to export also the module. In my case in home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import {TranslateModule} from '@ngx-translate/core'; //IMPORT THE MODULE IN ANY PAGE 

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    TranslateModule     //IMPORT THE MODULE
  ],
  declarations: [HomePage],
  exports:[TranslateModule],     //REMEMBER TO ADD THIS TO EXPORT IT AS WELL!!!
})
export class HomePageModule {}

score 1 · Answer 5 · answered Feb 26 '21 at 22:15

1

Translate Module: to use translator as a pipe (on template)

import { TranslateModule } from '@ngx-translate/core';

imports: [
CommonModule,
RouterModule, //Router Module
TranslateModule //Translate Module**

]

answered Feb 26 '21 at 22:15

rohit.khurmi095

2,203
1
14
12

score 1 · Answer 6 · answered Sep 14 '22 at 08:42

1

A simple restart of Visual Studio Code resolved the issue for me.

answered Sep 14 '22 at 08:42

Jordec

1,516
2
22
43

score 1 · Answer 7 · answered May 21 '23 at 16:48

i have spent a couple hours trying to fix this as well in a new project, i'm using different multiple modules ( app.module.ts , client.module.ts, admin.module.ts )

i tried to import the translateModule everywhere but it never worked, until i figured out i didn't import clientModule and adminModule in my app.module.ts.

pay attention to this :

  imports: [
BrowserModule,
AppRoutingModule,
RouterModule,
ClientModule, // make sure this is imported
ClientRoutingModule,
AdminModule,  // make sure this is imported
AdminRoutingModule,
SharedModule
],
 exports: [
SharedModule  // where i imported my TranslateModule
 ]

score 0 · Answer 8 · answered Jun 24 '22 at 12:01

There is one more possible problem. If you work with newer versions of angular and ngx-translate, if you have 'Use legacy View Engine' checked in settings, then vs code will underline translate pipe with red showing that it cannot find it, though translations will work when app is running. So just uncheck this option and everyhting will be fine.

score 0 · Answer 9 · answered Jun 26 '23 at 04:21

0

If you are using the translate module within a lazy loaded module of angular, you need to add the TranslateModule import to module.ts file within the lazy loaded file as well. Then it will work.

answered Jun 26 '23 at 04:21

Manoj V

1

score 0 · Answer 10 · answered Aug 10 '23 at 20:20

In my situation, I had been using an incompatible version of @ngx-translate/core that was not suitable for my Angular version. I recommend referring to the following table, which outlines the compatibility of each Angular version: https://github.com/ngx-translate/core Ensure you install the version that aligns with the specific Angular version you are utilizing.

score 0 · Answer 11 · answered Aug 12 '23 at 08:27

I was facing the same error, Add TranslateModule in your respective module. Also, make sure your you have added the below points.

app.module.ts Outside of class:

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

Inside imports:

TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
}}),

Sub Module - imports:

TranslateModule

Output

Angular translate Pipe could not be found

11 Answers11