ERROR in : The pipe 'translate' could not be found

Question

I am using Angular 7.1 but unfortunately I am not able to make the translate pipe of ngx-translate to work…

package.json

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/platform-server": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@angularclass/hmr": "~2.1.3",
    "@ngrx/store": "^7.0.0",
    "@nguniversal/express-engine": "~7.0.2",
    "@nguniversal/module-map-ngfactory-loader": "~7.0.2",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "core-js": "^2.5.7",
    "express": "^4.16.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
}

app.module.ts

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

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

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

export const APP_ID = 'test-app';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: APP_ID }),
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [ AppRoutingModule, TranslateModule ],
  providers: [],
  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 { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  template: `
    {{'demo.text' | translate}}
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    this.translate.get('demo.text').subscribe((text: string) => { console.log('HERE: ', text); });
  }
}

I can see that the TranslateService works fine as it properly translate and output to the console successfully, however the pipe nor the [translate] works.

ERROR in : The pipe 'translate' could not be found (" [ERROR ->] {{'demo.text' | translate}} ")

I see that this usually happens when the TranslateModule is not properly loaded in the imports, but it doesn't look to be the case since here it is properly loaded in app.module.ts and used in app.component.ts, which is bootstrapped by app.module.ts…

Any idea?

Answer 1

I had a similar issue which I resolved by importing and exporting the Translate module in my app's shared module. I don't think it should go in the routing module.

So my set up was as follows: app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularFireModule } from '@angular/fire';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { AngularFireAuth} from '@angular/fire/auth';

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

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

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    AngularFireModule.initializeApp(environment.firebase, 'VetCafe'),
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
  }),
    AppRoutingModule
  ],
  providers: [HttpClient, AngularFireAuth],
  bootstrap: [AppComponent]
})
export class AppModule { }

Shared module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

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

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    NgChatModule,
    TranslateModule
  ],
  exports: [
    CommonModule, FormsModule, ReactiveFormsModule, TranslateModule,
    RouterModule, NgChatModule
  ]
})
export class SharedModule { }

A shared-ui.module for ui stuff:

import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule,
         MatCardModule, MatInputModule, MatDialogModule, MatTableModule,
         MatMenuModule, MatProgressSpinnerModule
       } from '@angular/material';

import { NavigationComponent } from './navigation/navigation.component';
import { FooterComponent } from './footer/footer.component';
import { SideNavigationComponent } from './side-navigation/side-navigation.component';

const matModules = [
  MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule,
  MatCardModule, MatInputModule, MatDialogModule, MatTableModule,
  MatMenuModule, MatProgressSpinnerModule
];

const moduleComponents = [
  NavigationComponent, FooterComponent, SideNavigationComponent
];
@NgModule({
  declarations: [
    moduleComponents
  ],

  imports: [
    SharedModule,
    FlexLayoutModule,
    matModules
  ],

  exports: [
    FlexLayoutModule,
    matModules,
    moduleComponents
  ],
})
export class SharedUiModule { }

and finally my component template:

<nav class="app-navigation" [class.mat-elevation-z2]="!isActive" >
  <mat-toolbar color="primary">
    <div fxHide.gt-xs>
        <button mat-icon-button (click)="onToggleSidenav()"> 
            <mat-icon>menu</mat-icon>
        </button>
    </div>
    <div>
        <a routerLink="/">{{'HOME.Title' | translate}}</a>
    </div>
    <div fxFlex fxLayout fxLayoutAlign="end" fxHide.xs>
        <ul fxLayout fxLayoutGap="15px" class="navigation-items">
            <li>
              <a mat-button [routerLink]="['/forms/appointments']" routerLinkActive="router-link-active" >appointments</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/forms/clientreg']" routerLinkActive="router-link-active" >new client</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/forms/euthanasia']" routerLinkActive="router-link-active" >euthanasia</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/blog']" routerLinkActive="router-link-active" >blog</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/services']" routerLinkActive="router-link-active" >Services</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/legal/terms']" routerLinkActive="router-link-active" >terms</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/legal/privacy']" routerLinkActive="router-link-active" >privacy</a>
            </li>
            <li *ngIf="!isLoggedIn">
              <a mat-button [routerLink]="['/account/signup']" routerLinkActive="router-link-active" >signup</a>
            </li>
            <li *ngIf="!isLoggedIn">
              <a mat-button [routerLink]="['/account/login']" routerLinkActive="router-link-active" >login</a>
            </li>
            <li *ngIf="isLoggedIn">
              <a mat-button (click)="isLoggedIn = false">Log Out</a>
            </li>

            <li >
              <a mat-button (click)="changeLocale()">Language</a>
            </li>

          </ul>
    </div>
  </mat-toolbar>

</nav>

Answer 2

Sorry guys. That was an easy one... TranslateModule was well loaded in app.module, but not app-routing module which was an additional lazy router module to load app component. Adding it there simply corrected the problem:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found.component';
import {TranslateModule} from '@ngx-translate/core';

const routes: Routes = [
  { path: '', loadChildren: './welcome/welcome.module#WelcomeModule' },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent,
  ],
  imports: [
    RouterModule.forRoot(routes),
    TranslateModule
  ],
  exports: [
    RouterModule,
  ]
})
export class AppRoutingModule { }

Answer 3

I faced these issue on angular v12

Error scenario:

1. On Visual Code.
2. Created new project.
3. Added @ngx-translate stuffs.
4. Completed all configuration related translations.
5. Used {{ 'something' | translate}} i.e. Translate pipe.

Error shown as The pipe 'translate' could not be found.

I tried all solution and then I realized its issue of IDE because on terminal no error shown. All code is working smooth.

Simply I closed the Visual Code and Opened again.

Issue gone.

Answer 4

If using the translate directive in a template belonging to a feature module lazily loaded by the application routing module, then add the TranslateModule entry in the export array in the app-routing.module.ts file:

  exports: [
    RouterModule,
    TranslateModule
  ]

There is no need to add a TranslateModule entry in the import array of the same file.

There is also no need to add a TranslateModule entry in the export array of the app module.

Also, the TranslateModule can be imported from within a custom core module instead of from within the app module. In a core.module.ts file have the following entry in the import array:

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

There is no need to have any entry in the export array in this file.

In this same file, the httpLoaderFactory function is defined outside of the class:

export function httpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

The translate service can then be used in the app component:

export class AppComponent implements OnInit {
  constructor(
    private translateService: TranslateService,
  ) {
    // The default language used as a fallback if a translation isn't found for the current language
    translateService.setDefaultLang(LANGUAGE_CODE_ENGLISH);
    // The language to use
    translateService.use(LANGUAGE_CODE_ENGLISH);
  }

Answer 5

You can add it to your PLATFORM_PIPES at your bootstrap like this:

{provide: PLATFORM_PIPES, useValue: TranslatePipe, multi: true}

This way you won't have to add it to the pipes property of your components.

Answer 6

Use TranslateModule.forChild if the module is a lazy loading module.

imports: [
        TranslateModule.forChild({
          loader: {
              provide: TranslateLoader,
              useFactory: (createTranslateLoader),
              deps: [HttpClient]
          },
          isolate: true
      }),]

Answer 7

I had the same problem, my component wasn't declared in app.module.ts

Answer 8

It is worth mentioning that on a rare occasion getting this error may have nothing to do with your pipe implementation. In my case, a rogue mistyped parameter in some service method was the culprit. Rerunning the project gave me the right logs. So before you start desperately looking through all the local changes, give the restart a try.

Answer 9

This might happen because of missing dependency injection for ngx-translate service.

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

private translate: TranslateService add into your constructor() method on all the components where you are using translate pipe

It's working fine for me

Answer 10

I'm running a project with the following dependencies:

"dependencies": {
  ...
  "@angular/core": "~12.2.6",
  "@ionic/angular": "^5.5.2",
  "@ngx-translate/core": "^13.0.0",
  "@ngx-translate/http-loader": "^6.0.0",
  ...
}

And literally tried every single solution available on the internet including downgrading versions (for everything) with no luck.

Eventually ended up with something I don't yet understand, which is adding the module that is using the TranslateModule to my app.module.ts..

That solved my problem.