Core: The pipe 'translate' could not be found

[tuoitrexuquang]

HI,
I build the app with angular rc4, webpack.
Example: in the app.component.ts, i applied it follow https://github.com/ocombe/ng2-translate#usage
It's OK on the home page view, but in the register.component, i get error above (The pipe 'translate' could not be found).
How to i can apply it for all page

Many thanks,

[ocombe]

You can add it to your PLATFORM_PIPES at bootstrap:

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

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

[tuoitrexuquang]

It's work now. Thanks,

[twicejr]

Does not work anymore in 2.4? Or in Rc5 of AngularJs2.

[ocombe]

It does, did you import the TranslateModule ?
Where did you import it ? If you import it into a shared module, you need to export the TranslatePipe as well to make sure that it's available in other modules that import your shared module.

[twicejr]

Thanks for your reply ocombe, I am using Ionic v2 (thus in combination with AngularJs2).
The application is my first Angular / Ionic application, so it's probably my noobishness... and this application does not have any 'Module'

With Angular RC4 the following worked to have the TranslatePipe available in any Page:
`

import {TranslateService, TranslatePipe, TRANSLATE_PROVIDERS} from 'ng2-translate/ng2-translate';

ionicBootstrap(MyApp, [TRANSLATE_PROVIDERS,
{
    provide: PLATFORM_PIPES,
    useValue: TranslatePipe,
    multi: true
}], {
    tabsPlacement: "bottom"
});

`

[ocombe]

In RC5 they deprecated PLATFORM_PIPES, you're supposed to use ng modules for that, but I don't know if ionic 2 is already RC5 compatible

[twicejr]

Thanks man. I guess I should have a little patience before upgrading to the bleeding edge..
I thought, well because I'm just starting at it, better have the latest version of all those beta/rc parts.

[stephengeorgewest]

I got this too. The 'import' statement seemed to be enough.
app.module.ts (for access in all comonents):

import { TranslateModule, TranslatePipe } from 'ng2-translate/ng2-translate';

@NgModule({
    imports: [
        // Modules
        BrowserModule,
        FormsModule,
        routing,
        HttpModule,
        TranslateModule.forRoot()],
...

or in just the one component.ts that needs it.
import { TranslateService, TranslatePipe } from "ng2-translate/ng2-translate";
Putting in both places is not necessary.

[Raph246]

I am using RC5 and also getting this error when trying to use in a specific component other than app.component (The pipe 'translate' could not be found). How exactly can I solve this problem? You mentionned using ng modules.

[hypery2k]

getting this error also

[tabareh]

I'm getting this error in Angular 2 final release!

[sangecz]

yes, me too on angular 2 final

[tabareh]

Mine is solved by importing it to the other module that I was using in my app. So this might also be your case where you have more than one module in your app and this should be imported in all of them. The other way is to go with SharedModule solution

[sangecz]

i'm using SharedModule, so where exactly should I import TranslateService/TranslatePipe ? thx

[grapemix]

+1. Please clarify. I am using angular2 rc5/ioinc2 rc0

[thorsten]

Same issue on Angular 2.0.0 final, too.

[tabareh]

Guys as I said I didn't use SharedModule, and I just imported it in the new module, like mentioned in the readme page, and that solved the my issue. I believe the instructions for SharedModule on readme page should be valid as well.

[sangecz]

@grapemix, @thorsten, @tabareh: I solved the issue by reading readme two times again :)

As I'm using SharedModule, which is imported in every other module, I had to import TranslateModule in SharedModule, and _also_ export TranslateModule in SharedModule, the later one was the cause of my problems.

[vicknguyen1992]

I solved this issue. Following by this post: https://github.com/ocombe/ng2-translate/issues/209
Note: The SharedModule should not call TranslateModule.forRoot because this should happen at the AppModule level (at the root).

[grapemix]

sorry to reply so late. I resolved the issue a while ago, but I forget to post the ans back to here because there had so many problems in different plugins and lib and I tried to release our app before the deadline. There had so many problems, but most of them were resolved in ionic2 rc1. ng2-translate is really a small one. Ty @sangecz @vicknguyen1992

[namhq1989]

I'm using Angular 2.4.1 and ng2-translate 5.0.0, and after config exactly as README, I still met this error. It can only use in 1 page.
@ocombe noted with this:

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

but PLATFORM_PIPES was deprecated in newest angular 2 version, so can someone help me fix this?
Thanks!

[SamVerschueren]

Are you sure you used a SharedModule which you import in every module? That is the key to success. Ad don't look at that solution with the provider, it's deprecated since NgModule came in town.

[namhq1989]

@SamVerschueren thanks for noticed, i created SharedModule and imported in every module.

shared.module.ts

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

// Translate
import { TranslateModule } from 'ng2-translate';

@NgModule({
  imports: [
    CommonModule,
    TranslateModule
  ],
  exports: [
    CommonModule,
    TranslateModule
  ]
})

export class SharedModule {}

app.module.ts

@NgModule({
  bootstrap: [App],
  declarations: [
    ...
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES, { useHash: true }),
    TranslateModule.forRoot()
  ],
  ...

In dashboard.module.ts

import { SharedModule }  from '...';

...

@NgModule({
  imports: [ SharedModule, RouterModule.forChild(routes) ],
  declarations: [ Dashboard, Widget ]
})

And in html

<div>{{ 'HELLO' | translate }}</div>

TranslateService already init in app.component, and i18n folder created.
This code run without errors, but it does not show anything on page, I checked DOM and there is an empty div <div></div>. So i guess there's a mistake somewhere I do not know.
What should I do to fix this prolem?
Thanks!

[SamVerschueren]

Try setting the language in your root component

@Component({
    ....
})
export class AppComponent implements OnInit {

    constructor(
        private translateService: TranslateService
    ) { }

    ngOnInit() {
        // Configure the TranslateService
        this.translateService.setDefaultLang('en');
        this.translateService.use('en');
    }
}

Also make sure it downloads the correct JSON file in the network tab of your chrome developer tools. Make sure en.json is not marked in red (couldn't find the file) and is actually downloaded.

[namhq1989]

I tried again by import ng2-translate directly in my dashboard module, and everything worked as expected.
Then I tried with SharedModule and here is my final code:

shared.module

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

// Translate
import { TranslateModule } from 'ng2-translate';

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

app.module

// Shared module
import { SharedModule } from './shared/shared.module';
// Translate
import { TranslateModule } from 'ng2-translate';
....
@NgModule({
  bootstrap: [App],
  declarations: [
    ....
  ],
  imports: [ // import Angular's modules
    ....
    SharedModule,
    TranslateModule.forRoot()
  ]
....

app.component

import { Component, ViewEncapsulation } from '@angular/core';
import { TranslateService } from 'ng2-translate';

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './scss/application.scss'
  ],
  template: `<router-outlet></router-outlet>`
})
export class App {
  constructor(
    private translateService: TranslateService) {

  }

  ngOnInit() {
    // Configure the TranslateService
    this.translateService.setDefaultLang('en');
    this.translateService.use('en');
  }
}

dashboard.module

import { SharedModule }  from '../shared/shared.module';
...
@NgModule({
  imports: [
    SharedModule,
    RouterModule.forChild(routes)
  ],
  declarations: [Dashboard, Widget]
})
export class DashboardModule {
  static routes = routes;
}

dashboard.template.html

<div>{{ 'HELLO' | translate }}</div>

webpack

new CopyWebpackPlugin([{
  from: 'src/assets',
  to: 'assets'
}, {
  from: 'src/i18n',
  to: 'i18n'
}])

I also checked Network tab and there is no en.json file (it loaded when import directly in dashboard module). So I'm very confuse with this. Can you guys update readme again?
Thanks!

[SamVerschueren]

Could you change your app.module to this like suggested in the readme.

export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, './i18n', '.json');
}

@NgModule({
    imports: [
        SharedModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Can you guys update readme again?

No, because it works. It has to be something on your side. If you are able to replicate this in a plunkr, we would be happy to reconsider if something isn't clear.

[TeodorKolev]

Still not working

[bleuscyther]

@TeodorKolev
you have to import it in all the sub-Modules Where you use it:

@NgModule({
  declarations: [
    NetworkStatusComponent,
  ],
  imports: [
    IonicPageModule.forChild(NetworkStatusComponent), TranslateModule
  ],
  exports: [
    NetworkStatusComponent
  ]
})
export class NetworkStatusComponentModule {}

[bungbung2]

@namhq1989
Thank you for your guide

[noyessie]

You need to import TranslateModule in whatever module you need it.

[saravanakumargn]

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

and import into TranslateModule into all submodules

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

This is working perfectly. Thanks.

[sardapv]

year 2020, add TranslateModule.forChild(), in your child modules