Core: Translate Pipe couldn't found

[SamVerschueren]

Make sure to import TranslateModule in the module of your component.

[ZikZakJainy]

Thanks for reply SamVerschueren , In my project different sub modules so, I imported TranslateModule in app module component like :
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
})
but still translate pipe not fount.

[bc3]

i have the same issue, i also have a project with different sub modules and added the translatemodule to that specific component, no resolution ...

App.Modile also contains

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

when i remove code from template, it works, and when i try to access the translate service instance it gives me the correct info (chrome debug), i tried to add a translation to the service in code, no problem

i only have a problem when using the pipe in a template (not inline but with url)

using the 6.x version

[SamVerschueren]

It would be very helpful if one of you could create a plunkr to represent this problem.

Also make sure to import TranslateModule in your sub modules, not only in your app module.

[bc3]

@SamVerschueren , you are indeed correct, but i was adding the translate module into my component and not my sub module :-)

[jbgarr]

I was having this same issue as well. I have my main module (app.module.ts) and it handles the initial configuration. Then I have a shared module that is imported by all my other feature/page modules. In order for this to work for me I had to include the TranslateModule in my shared module's imports array as well as the exports. I would suggest adding this to the documentation because it's not obvious that the TranslateModule needs to be included in both arrays (unless I am doing something wrong here and this is not necessary).

[insanehong]

I have the same issue.

• @angular/[email protected]
• @ngx-translate/[email protected]
• @ngx-translate/[email protected]

// app.module.ts
import { 
  TranslateModule, 
  TranslateLoader, 
  MissingTranslationHandler,
} from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslationHandler } from './app.translation';

@NgModule({
  bootstrap: [ AppComponent ],
  imports: [ 
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [Http]
      },
      missingTranslationHandler: { 
        provide: MissingTranslationHandler, useClass: TranslationHandler 
      },
    }),
  ]
});

// template.html

<div>{{ 'CATEGORY.ALL' | translate }}</div>

[SamVerschueren]

@insanehong Did you read the answers? Are you 100% sure you added the TranslateModule to the imports array of your submodule as well? Recreate this with a plunkr and I will be happy to help.

[SamVerschueren]

I would suggest adding this to the documentation because it's not obvious that the TranslateModule needs to be included in both arrays

Yes this! And it is documented right here. This is not ngx-translate specific, you have to do it in for everything, that's just how the module system works. If you want to be able to use *ngFor in your templates for example, you have to import CommonModule every single time.