Translate Module Angular 10 The pipe 'translate' could not be found

Question

this is app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import {CommonModule} from "@angular/common";

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

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot(appRoutes),
        CommonModule,
        TranslateModule.forRoot({
            loader: {
              provide: TranslateLoader,
              useFactory: HttpLoaderFactory,
              deps: [HttpClient]
            }
          })
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}

this is toolbar.component.html where i'm using translation.

<span>{{'shared.settings' | translate}}</span>

In toolbar.component.ts I imported

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

I don't know why, I obtained this error (i'm using Angular 10)

ERROR Error: The pipe 'translate' could not be found!

Poul Kruijt Poul Kruijt · Accepted Answer · 2020-09-24T09:49:10

You have to import the TranslateModule (not with forRoot()) in whatever NgModule the ToolbarComponent is declared. So for instance, if it's declared in its own module, you would have to do the following. Otherwise the component does not have access to the pipe:

@NgModule({
  imports: [
    TranslateModule
  ],
  declarations: [
    ToolbarComponent
  ],
  exports: [
    ToolbarComponent
  ]
})
export class ToolbarModule {}

Or if you use a SharedModule that you import in multiple other feature modules, which is common practice, you can export the TranslateModule to make sure you don't have to import it in every module.

@NgModule({
  exports: [
    CommonModule,
    TranslateModule
  ]
})
export class SharedModule {}

Translate Module Angular 10 The pipe 'translate' could not be found

2 Answers