error NG8004: No pipe found with name 'translate'

[Christoph1972]

Hello,

I try to use ngx-translate in a component of a module, but I can’t find a way to bring that to work. I opened a thread on StackOverflow (https://stackoverflow.com/questions/67553920/how-to-use-ngx-translate-in-module-components), but none of the answers brought the solution.

Today a started a new empty project, to avoid this issue caused by other problems, but I got the same error message in my component.html on running ng serve:

Error: src/app/home/home/home.component.html:2:22 - error NG8004: No pipe found with name 'translate'.

I already imported the TranslateModule in the imports array of my module. If I don’t add the TranslateModule to the imports array than the translate in -> <h1>{{‘home.title’ | translate }}</h1> will be underlined with the error message from above. If I add the TranslateModule to the imports array the message occurs on running ng serve.

I spent so many hours to fix that problem, but I have no idea what’s wrong here. Please can anyone of the experienced users have a look in to my demo project on GitHub? It’s just a simple project, only for testing purposes. https://github.com/Christoph1972/angular-i18n-demo

Kind Regards Christoph

[Christoph1972]

I got help on Stackoverflow: https://stackoverflow.com/questions/67553920/how-to-use-ngx-translate-in-module-components

I'll change to Transloco.

[DarioN1]

I'm having the same problem... No one of the suggestion searched on GitHub / StackOverFlow is working... I do want to change library

[Treedo]

You need import TranslateModule TO ALL MODULES IN STACK.

For example:

app/
|---pages/
|---|---home/
|---|---|---home.component.ts
|---|---|---home.module.ts     <----- import TranslateModule
|---|---pages.component.ts
|---|---pages.module.ts     <----- import TranslateModule
|---app.component.ts
|---app.module.ts    <----- import TranslateModule

home.module.ts:

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';        <--- add 

@NgModule({
  declarations: [
    HomeComponent,
  ],
  imports: [
    CommonModule,
    TranslateModule,        <--- add 
  ]
})
export class HomeModule { }

pages.module.ts:

import { PagesComponent } from './pages.component';
import { HomeModule } from './pages/home/home.module';
import { TranslateModule } from '@ngx-translate/core';        <--- add 

@NgModule({
  imports: [
    HomeModule,
    TranslateModule,       <--- add 
  ],
  declarations: [
    PagesComponent,
  ],
})
export class PagesModule {
}

And also app.module.ts:

import { NgModule } from "@angular/core";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { CoreModule } from "./@core/core.module";
import { AppComponent } from "./app.component";
import { TranslateModule, TranslateLoader, } from "@ngx-translate/core";
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

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

[BinovskiR]

YOU CAN IMPORT ONCE END EXPORT IN SHARED MODULE, SO YOU CAN ONLY IMPORT SHARED MODULE WHERE YOU NEED IT IN ANY OTHER MODULE

For example:

app/ |---pages/ |---|---pages.component.ts |---|---pages.module.ts |---app.component.ts |---app.module.ts
|---shared/ |---shared/shared.module.ts

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

// components
import { PageNotFoundComponent } from './page-not-found/page-not-found.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';

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    PageNotFoundComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
    // ngx-translate and the loader module
    HttpClientModule,
    TranslateModule.forRoot({           <---import TranslateModule
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    TranslateModule                         <---- export TranslateModule
  ]
})
export class SharedModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { SharedModule } from './shared/shared.module';                   <--- impot shared module

//component
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule                       <--- impot shared module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

pages.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PagesRoutingModule } from './pages-routing.module';
import { PagesComponent } from './pages.component';
import { SharedModule } from '../shared/shared.module';             <--- impord shared.module


@NgModule({
  declarations: [
    PagesComponent
  ],
  imports: [
    CommonModule,
    PagesRoutingModule,
    SharedModule                                                 <--- impord shared.module
  ]
})
export class PagesModule { }

[ahmad-ben]

Hi, EveryOne. If You Use The StandAlone Component Make Sure That You Import The TranslateModuleInside The imports Of The Component: imports: [ CommonModule, ... TranslateModule ], Have A Good Day !

[Tsalmas-Anastasios]

Same problem!

[worthy7]

You need import TranslateModule TO ALL MODULES IN STACK.

For example:

app/
|---pages/
|---|---home/
|---|---|---home.component.ts
|---|---|---home.module.ts     <----- import TranslateModule
|---|---pages.component.ts
|---|---pages.module.ts     <----- import TranslateModule
|---app.component.ts
|---app.module.ts    <----- import TranslateModule

home.module.ts:

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';        <--- add 

@NgModule({
  declarations: [
    HomeComponent,
  ],
  imports: [
    CommonModule,
    TranslateModule,        <--- add 
  ]
})
export class HomeModule { }

pages.module.ts:

import { PagesComponent } from './pages.component';
import { HomeModule } from './pages/home/home.module';
import { TranslateModule } from '@ngx-translate/core';        <--- add 

@NgModule({
  imports: [
    HomeModule,
    TranslateModule,       <--- add 
  ],
  declarations: [
    PagesComponent,
  ],
})
export class PagesModule {
}

And also app.module.ts:

import { NgModule } from "@angular/core";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { CoreModule } from "./@core/core.module";
import { AppComponent } from "./app.component";
import { TranslateModule, TranslateLoader, } from "@ngx-translate/core";
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

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

No you just need to export TranslateModule in your shared module....

[xiaoeason]

Module: Modules are a way to group related components and directives, along with the services, pipes, and other codes that they rely on, into a single cohesive unit. Modules provide a way to keep the code organized and make it easier to reuse components and directives across different parts of the application. Modules are defined using the Angular NgModule decorator, which takes an object that specifies the components, directives, and other code that the module contains.

Syntax:

import { NgModule } from '@angular/core'; import { TranslateModule } from '@ngx-translate/core';
import { SampleComponent } from './counter.component';

@NgModule({ declarations: [SampleComponent ], imports: [TranslateModule], exports: [Components] }) export class CounterModule { }

So, basically the problem is missing the import and declaration component in the module. For instance above, assume the pipe 'translate' is being used in the sample.component.html, the issue will be resolved after import and declaration the 'SampleComponent '.