Core: translate pipe not found

[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 html file, 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 ?

[SamVerschueren]

Have you imported TranslateModule in you feature module?

[bigbharatjain]

Yes I have imported in
shared.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {DateDiffPipe} from './pipes/date-diff.pipe';
import {BASE_PATH} from '../../api/variables';
import {SHARED_APIS} from '../../api/api/api';
import {environment} from '../../environments/environment';
import {DateReadable} from './pipes/date-readable.pipe';
import {IsGrantedDirective} from './directives/is-granted.directive';
import {DateCarcareFormat} from './adapters/date-carcare.adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material';
import {MomentDateAdapter} from '@angular/material-moment-adapter';
import {ConfigurationService} from './services/configuration.service';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
    imports: [
        CommonModule,
        TranslateModule
    ],
    declarations: [
        DateDiffPipe,
        DateReadable,
        IsGrantedDirective
    ],
    providers: [
        ConfigurationService,
        SHARED_APIS,
        {provide: BASE_PATH, useValue: environment.apiUrl},
        {provide: DateAdapter, useClass: MomentDateAdapter},
        {provide: MAT_DATE_FORMATS, useValue: DateCarcareFormat},
        {provide: MAT_DATE_LOCALE, useValue: 'sv-SE'}
    ],
    exports: [
        DateDiffPipe,
        DateReadable,
        IsGrantedDirective,
        TranslateModule
    ]
})
export class SharedModule {
}

and also tried by importing in feature module like this
import { TranslateModule } from '@ngx-translate/core';

[bigbharatjain]

@SamVerschueren Can you please look, what I am missing here?

[SamVerschueren]

Did you add SharedModule to your feature module imports array? Just importing like import { TranslateModule } from '@ngx-translate/core'; is not enough, you need to add it as well to your imports list. Just checking if you did everything :).

[bigbharatjain]

Thanks @SamVerschueren .
I am having Shared module in my feature module as well and that shared module imports SharedModule.
I don't know why it didn't work if I import TranslateModule in outer SharedModule instead of my feature module SharedModule as I am importing it in it.
It worked when I have imported in my feature module's SharedModule.

[markgoho-EDT]

I'm seeing the same behavior. I've imported it in the shared module and it's still saying pipe not found.

[brunano21]

Same problem here. Works in one project, it doesn't into another :/

I have SharedModule that exports TranslateModule.

[vov4ik08]

Hello All. This problem reproduced for me too. I use angular 5 cli cleen project. Configure all as documentation, and after start i see error The pipe 'translate' could not be found . Please help

[jlberrocal]

@bigbharatjain could you please validate if adding TranslateModule to your FeatureModule fix the issue?

[bigbharatjain]

@jlberrocal Yes, importing TranslateModule to FeatureModule fixed the issue.

[evansdianga]

What worked for me was to export the TranslateModule in my SharedModule. I didn't have to import the TranslateModule in a FeatureModule

I have deleted irrelevant imports, declarations and providers.

import { TranslateModule } from '@ngx-translate/core';// Import the TranslateModule

@NgModule({
  imports: [
    CommonModule,
    MatTooltipModule
  ],
  providers: [AppConfigService],
  declarations: [.....],

  exports: [ TranslateModule]// **This is the Key**
})
export class SharedModule { }

[jiagouview]

@jlberrocal Same problem here.thanks you.importing TranslateModule to myModule fixed the issue.