Core: pipe translate could not be found

[saisaraswathi]

zone.js:388 Unhandled Promise rejection: Template parse errors:
The pipe 'translate' could not be found ("an>-->
Select language
[ERROR ->]{{ 'Languages.English' | translate }}
{{ 'La"): DashboardComponent@12:45
The pipe 'translate' could not be found ("n')">{{ 'Languages.English' | translate }}
[ERROR ->]{{ 'Languages.Bahasa' | translate }}

DashboardComponent@13:47 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:
The pipe 'translate' could not be found ("an>-->
Select language
[ERROR ->]{{ 'Languages.English' | translate }}
{{ 'La"): DashboardComponent@12:45
The pipe 'translate' could not be found ("n')">{{ 'Languages.English' | translate }}
[ERROR ->]{{ 'Languages.Bahasa' | translate }}

DashboardComponent@13:47

[saisaraswathi]

app.component.ts:

import { Component } from '@angular/core';
import { TranslateService } from 'ng2-translate';
// import {DashboardComponent} from './dashboard/dashboard.component';
import {Subscription } from 'rxjs';
import {Router, ActivatedRoute} from '@angular/router';
import {OnInit, OnDestroy} from '@angular/core';

@Component({
selector: 'pm-app',
templateUrl : './app/app.component.html'
})
export class AppComponent {
private subscription: Subscription;

constructor(private translate: TranslateService, private activatedRoute: ActivatedRoute) {
translate.addLangs(["en", "id"]);
translate.setDefaultLang('en');

    let browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|id/) ? browserLang : 'en');
}

changeLanguage(lang: any){
    this.translate.use(lang);
}

ngOnInit() {
// subscribe to router event
this.subscription = this.activatedRoute.queryParams.subscribe(
  (param: any) => {
    let locale = param['locale'];
    if (locale !== undefined){
        this.translate.use(locale);
    }
  });

}

ngOnDestroy() {
// prevent memory leak by unsubscribing
this.subscription.unsubscribe();
}
}

[saisaraswathi]

can anyone plz help me to resolve this issue?

[SamVerschueren]

Make sure to import the TranslateModule as described here. If that doesn't work, try setting up a plunkr to reproduce this. Just throwing in component code isn't really helpful as this is most likely a problem with configuring the module.

Also, there is an issue template for a reason. Because it helps us to identify the problem faster.

[saisaraswathi]

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http } from '@angular/http';
import {RegistrationComponent} from './dashboard/user_registration/user_registration.component';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { TranslateService } from 'ng2-translate';
import { TranslateModule, MissingTranslationHandler } from 'ng2-translate';

import {DashboardComponent} from './dashboard/dashboard.component';
import {DeviceComponent} from './dashboard/device/device.component';
import {ResetDeviceComponent} from './dashboard/device/resetDevice/ResetDevice.component';
import {LoginComponent} from './login/login.component';
import { AuthenticationService} from './services/authentication.service';
import { DeviceService } from './services/device.service';
import { AlertService } from './services/alert.service';
import { MyMissingTranslationHandler } from './missingtemplate.component';

@NgModule({
imports: [ BrowserModule,
FormsModule,
HttpModule,
routing,
TranslateModule.forRoot()
],
declarations: [ AppComponent ,
LoginComponent,
DashboardComponent,
DeviceComponent,RegistrationComponent,
ResetDeviceComponent],
providers: [ AuthenticationService,
DeviceService,
AlertService,{ provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler}
],
exports: [
TranslateModule
],
bootstrap: [ AppComponent ]
})
export class AppModule { }

I imported translate module, can u plz check now?

[SamVerschueren]

I don't see any reason why it shouldn't work. The only way we can debug this decently is if you provide us with a git repository or a plunkr with a minimal application which reproduces this behaviour.

[SamVerschueren]

I also noticed that you still run ng2-translate, I'd recommend upgrading to ngx-translate.

[saisaraswathi]

i am behind corporate proxy unable to upload into github and angular2 files are many so not in plunker. Is there any other to reproduce the code?

[saisaraswathi]

i upgraded to ngx-translate

[SamVerschueren]

Here's a basic plunkr to start from. https://plnkr.co/edit/01UjWY3TKfP6pgwXKuEa?p=preview

[saisaraswathi]

i did exactly what they did in plunker example, still it is saying "The pipe 'translate' could not be found "

[phattranky]

I got this problem before, Then i try to import TranslateModule in children module. It's working

[vixeven]

in my case I have a submodule. I added TranslateModule in my imports and it works.
Thanks @phattranky 👍

[rajjaiswalsaumya]

Can someone post full code, i am getting same error

[bigsnowdrop]

i solved this problem and
added "TranslateModule" to exports
and now it works
my code:
`import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Select2Module } from 'ng2-select2';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { AppTranslationService, TranslateLanguageLoader } from './services';

@NgModule({
declarations: [],
imports: [
Select2Module,
HttpClientModule,
TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateLanguageLoader} })
],
exports: [TranslateModule],
providers: [AppTranslationService]
})
export class SharedModule {}`

[bigbharatjain]

app.module.ts

.....
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';
export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        NgbModule.forRoot(),
        CoreModule,
        AppRoutingModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        SharedModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [HttpClient]
            }
        })
    ],

    providers: [
        {provide: BrowserXhr, useClass: BrowserCredentials},
        {provide: RequestOptions, useClass: GlobalHttpOptions},
        Title
    ],
    bootstrap: [AppComponent],
    exports: []

})

app.component.ts

import {Component, OnInit} from '@angular/core';

import {Title} from '@angular/platform-browser';
import {ConfigurationService} from './shared/services/configuration.service';
import { TranslateService } from '@ngx-translate/core';
@Component({
    selector: 'cc-root',
    template: `
        <cc-authentication-loader></cc-authentication-loader>
        <router-outlet></router-outlet>`,
    styles: []
})
export class AppComponent implements OnInit {
    constructor(private title: Title, translate: TranslateService) {
        translate.setDefaultLang('en');
    }

    ngOnInit(): void {
        this.title.setTitle('Carcare');
    }
}

In other component, when I add
<h1>{{"Welcome"|translate}}</h1>
It gives me the error
The pipe 'translate' could not be found

I am using angular 5.
Please help what I am missing ?

[webeagle199066]

Привет
подключи TranslateModule в нужном модуле, где вызываешь | translate

dashboard.module.ts
@NgModule({ imports: [ CommonModule, RouterModule.forChild([{ path: '', component: DashboardComponent }]), TranslateModule ], declarations: [ DashboardComponent ], providers: [ {provide: MODULE_CONFIG, useValue: moduleConfig} ] })

dashboard.component.html
{{ 'dashboard.workStart.text' | translate }}

И ни каких ошибок =)

[HonzoBonzo]

Had the same issue, as described above. Couldn't find pipe translate... It happens with the newest versions:

"@ngx-translate/core": "^10.0.0",
"@ngx-translate/http-loader": "^3.0.1",

Downgrading to:
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",

solved this problem.

AppModule:

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

@NgModule({
imports: [    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })]
...

good luck

[CodeAndWeb]

ngx-translate requires Angular 6.
You have to use ngx-translate 9.x with Angular 5.

[saravanakumargn]

Downgrading to:
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",

and import into TranslateModule into submodule

import { TranslateModule } from "@ngx-translate/core";
imports: [
    ComponentsModule,
    CustomComponentsModule,
    TranslateModule,
    ...
]

This is working perfectly. Thanks.

[ishwaryanair]

i did downgrading to:
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",

and import into TranslateModule into submodule is also done. Still i dont see translated text shown.

[CodeAndWeb]

Can you put your project on github?

[ishwaryanair]

I got it working by using {{translate.instant('my text')}} but direct translate directive within html tag dint work for me.

[bleuscyther]

ionic/angular
For anyone that may find this helpful : sometimes you have to kill the ionic process and run it again. Happens on ionic serve if you install some new package

[sagrawal31]

I'm using

• Ionic 3.20.0
• Angular 5.2.10
• @ngx-translate/core 9.1.1 and
• @ngx-translate/http-loader 2.0.1

In the app.module.ts

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

@NgModule({
    declarations: [
        KidsApp
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        SignUpPageModule,
        LoginPageModule,
        IonicModule.forRoot(MyApp),
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        })
    ]
})

But when I'm using {{'HELLO' | translate }} in one of the view added in the SignUpPageModule, it fails with:

Uncaught Error: Template parse errors:
The pipe 'translate' could not be found ("c this app with your active subscription, please enter the details of the bill payer.
            {{[ERROR ->]'HELLO' | translate}}
        </div>

I tried killing the ionic process as well but this error still persist. I also went through issue #163 but nothing helped.

When I'm temporarly removing the line {{'HELLO' | translate }}, I end up with the following error:

ion-dev.js?v=3.1.9:156 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at HttpHeaders.applyUpdate (http.js:322)
    at http.js:269
    at Array.forEach (<anonymous>)
    at HttpHeaders.init (http.js:269)
    at HttpHeaders.forEach (http.js:368)
    at Observable._subscribe (http.js:2170)
    at Observable._trySubscribe (Observable.js:172)
    at Observable.subscribe (Observable.js:160)
    at Object.subscribeToResult (subscribeToResult.js:23)
    at MergeMapSubscriber._innerSub (mergeMap.js:132)
    at HttpHeaders.applyUpdate (http.js:322)
    at http.js:269
    at Array.forEach (<anonymous>)
    at HttpHeaders.init (http.js:269)
    at HttpHeaders.forEach (http.js:368)
    at Observable._subscribe (http.js:2170)
    at Observable._trySubscribe (Observable.js:172)
    at Observable.subscribe (Observable.js:160)
    at Object.subscribeToResult (subscribeToResult.js:23)
    at MergeMapSubscriber._innerSub (mergeMap.js:132)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)

When I remove the following lines from app.component.ts:

this.translateService.setDefaultLang('en');
this.translateService.use('en');

at least the above error removed but the translate pipe error is still there.

[tiberiumihai]

I've found what happend.

I had a SharedModule that imported and exported the TranslateModule.
Then I had this SharedModule imported in AppModule, and in other modules like ComponentsModule, PageModule etc.

I've fixed this by importing and exporting TranslateModule in SharedModule.

Then imported this SharedModule only in other modules like ComponentsModule, PagesModule etc.

And I've removed it from AppModule.

Now everything works fine. Good luck.

app.module.ts

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
  imports: [
  ...
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [ HttpClient ]
      }
    }),
    // SharedModule <<<<<< REMOVE THIS FROM APP MODULE AND IMPORT IT IN EACH SUB MODULE
    ComponentsModule,
    PagesModule
    ...
})
export class AppModule { }

shared.module.ts

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

pages.module.ts

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    SharedModule,
    ...
  ]
})
export class PagesModule { }

components.module.ts

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    SharedModule,
    ...
  ]
})
export class ComponentsModule { }

GOOD LUCK!

[BruneXX]

Hey guys I've followed the documentation instructions but using translate in other component than app.component is causing this error, the only solution is to make a downgrade? thanks

[BruneXX]

FYI: I've found a solution to this, take a look at this: https://github.com/ngx-translate/core/issues/566#issuecomment-323280513

[erperejildo]

@BruneXX is going to be used everywhere. Do we really need to modify every single module? Can't it be used as shared module?

[BruneXX]

@erperejildo No, we don't, the proper way indeed is to have a shared module as you mentioned. Currently I've managed to use this translate in template and controller and works really well!

[erperejildo]

Can you share it? I created this shared module and I added there my translation module and I can add different providers or other modules but I need to add this in every module anyway. I tried adding this on app.module but doesn't work

[BruneXX]

Hi @erperejildo That's the way angular works, take a look at this: https://angular.io/guide/sharing-ngmodules
AFAIK: You must add your SharedModule in the modules that you need to use "translate" or "any" other module/component.

Like @tiberiumihai show in his comment https://github.com/ngx-translate/core/issues/566#issuecomment-414062997

[erperejildo]

Thanks I got it working yesterday. My only question is: what about if we need a provider also? Do we need to load this provider inside the shared module, inside ModuleWithProviders or inside every component we need this shared module?

[tiberiumihai]

@erperejildo Than your SharedModule will look something like this, adding your providers in forRoot().providers array:

shared.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { FormsModule } from '@angular/forms';

import { MyProviderService } from "./services/my-provider.service.ts";

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

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
        MyProviderService
      ]
    }
  }
}

And use:

SharedModule.forRoot()

instead of

in your sub modules import array.

[erperejildo]

@tiberiumihai where do you move this (more info https://ionicframework.com/docs/developer-resources/ng2-translate/#lazy-loading-pages):

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

Also, when they say "DO NOT include providers inside shared modules" they only mean inside @NgModule? This doesn't apply to the exported class?

[matheusmurta]

For problemns with Jasmine test.

Its works for me guys 😉

Add this on MyComponent..component.spec.ts
import { TranslateModule } from "@ngx-translate/core";

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EmailMessageComponent ],
imports: [
TranslateModule.forRoot(),
]
})
.compileComponents();
}));

[artworkjpm]

what worked for me was adding TranslateModule toshared.module file:

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

@NgModule({
  imports: [TranslateModule, ],

  exports: [TranslateModule],
  providers: [],
})
export class SharedModule {}

[yoedusvany]

Hi guys, I have the same issue,
Angular 9.1.7
I downgrownded this packages...
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",

Before I had
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",

This is my app.module.ts
.... import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; imports: [ ... TranslateModule.forRoot({ loader: {provide: TranslateLoader, useFactory: TranslationLoaderFactory, deps: [HttpClient]} }) ]
My app.component.ts
`import { environment } from './../environments/environment';
import {TranslateService} from '@ngx-translate/core';
import { Component, Inject, PLATFORM_ID, Optional } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent{
title = 'falcon';

constructor(private translateService: TranslateService) {
this.translateService.addLangs(['es', 'en']);
this.translateService.setDefaultLang(environment.defaultLanguage);
this.translateService.use(environment.defaultLanguage);

this.translateService.get('VALIDATIONS.REQUIRED').subscribe((res: string) => {
    console.log(res);
});

}

public useLanguage(lang: string): void {
this.translateService.setDefaultLang(lang);
}

}
`
And the service is working!!!! but the pipe throw an exception

Any Idea?

[jboucly]

If you use shared.module made as shown @artworkjpm !

app.module.ts

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

@NgModule({
    declarations: [AppComponent],
    imports: [
        ...
        // Translate
        TranslateModule.forRoot({
            defaultLanguage: 'fr',
            useDefaultLang: true,
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient],
            },
        }),
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule { }

shared.module.ts

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

@NgModule({
  imports: [TranslateModule, ],

  exports: [TranslateModule],
  providers: [],
})
export class SharedModule {}

auth.module.ts

@NgModule({
    declarations: [LoginComponent],
    imports: [
        SharedModule,
    ],
})
export class AuthModule { }

And if not work once again _I just had to restart my local server and voila_ :)
Thanks 🔥