Core: The pipe 'translate' could not be found

[sajeetharan]

I'm submitting a ... (check one with "x")

[ x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
Translate does not work on the child components

Expected/desired behavior
Translate does not work on the child components

Reproduction of the problem
I am using translation pipe on the home page it works fine, but when i add it on the child component , it says The pipe 'translate' could not be found

I looked at this issue,

https://github.com/ngx-translate/core/issues/163

but when i import

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

it is not supported with the angular version. How can i solve this issue?

Please tell us about your environment:

• ngx-translate version:5.0.0

• Angular version: 2.4.0

• Browser: [all | Chrome XX

[ocombe]

How did you import the TranslateModule into your module?
Is the child component in the same module?

[sajeetharan]

This is how i have imported

import './rxjs-extensions';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UsersModule } from './users/users.module';
import { MainModule } from './main/main.module';
import { DiscoveryModule } from './discovery/discovery.module';
import { AppConfigService } from './services/appconfig.service';
import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate';
import { HttpModule, Http } from '@angular/http';
export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
        DiscoveryModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
        })
    ],

    declarations: [
      AppComponent
    ],
    providers: [
      AuthGuard,
      AuthService,
      AppConfigService
    ] ,
    bootstrap: [AppComponent]
})
export class AppModule {}

No child component is in the discovery module

[SamVerschueren]

Attaching pipes to the platform pipes like you are trying to do does not work anymore in Angular.

Because it is in a separate module, you will probably have to work with a SharedModule. If you don't want to work with a SharedModule (which is best practice though), just make sure you import TranslateModule in the DiscoveryModule.

[sajeetharan]

only importing would work or do i have to repeat what i did in the app.module.ts?

[SamVerschueren]

From the docs

Note: Never call a forRoot static method in the SharedModule. You might end up with different instances of the service in your injector tree. But you can use forChild if necessary.

Thus, only import TranslateModule.

You can find more about the SharedModule approach on the Angular documentation.

[ocombe]

forChild is not available in the 5.x version that he's using.
Just importing the module (without calling forRoot on it) should work for the pipe/directive.

[sajeetharan]

@ocombe @SamVerschueren how do i change the app module ?

TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
})

[SamVerschueren]

Just keep app module with what you have. It configures ngx-translate and sets up all the services which is fine. And then in your sub-module, just import TranslateModule and it should work.

[sajeetharan]

Ok that worked, i will close this issue with the last question, is there a way we can use translation without adding the pipe |trasnalate in each line?

[SamVerschueren]

Yes, by using the translate pipe.

[sajeetharan]

using translate pipe? my question is same , is there a way without using pipe in each line?

[TeodorKolev]

Not working!. I am using this plugin, and when I add 'Something' | translate in template of plugin not working

[aminemaarouf]

I have one module on my app, and the issue still exist

[KlaudiaAnnaM]

You should add in child module:
TranslateModule.forChild({...})

[jcardoz]

For those coming across the pipe translate could not be found, here are the steps you need to do in a nutshell to fix the issue when using in a different module.

1. Have the translate module logic along with translate loader and translateFactory present in the app.module.ts
   TranslateModule.forRoot({ provide: TranslateLoader, useFactory: (http: Http) => new TranslateStaticLoader(http, './assets/i18n', '.json'), deps: [Http] }) ],

2. In your shared.module.ts (or any other module), import and export the Translate module.
i.e.: Translate module should be a part of both the import and export arrays. Most answers in SO and github mention importing the module but not exporting it.

@NgModule({ imports: [ TranslateModule ], exports: [ TranslateModule]