@ngx-translate with different module

Question

I have application with many modules. I am using ngx-translate for multilingual functionality. But, it's not working.

i18n.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { Http } from "@angular/http";
import { I18NComponent } from "./i18n.component";

@NgModule({
    declarations: [I18NComponent],
    imports: [
        BrowserModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (http: Http) => new TranslateHttpLoader(http, 'i18n/', '.json'),
                deps: [Http]
            }
        })
    ],
    exports: [I18NComponent]
})

export class I18NModule { }

i18n.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
declare var jQuery: any;
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'i18n-translate',
    template: `
        <select class="form-control" #langSelect (change)="translate.use(langSelect.value)">
                    <option value="en">English</option>
                    <option value="es">Spanish</option>
                </select>
    `
})
export class I18NComponent {

    constructor(private router: Router, private translate: TranslateService) {
        translate.addLangs(["en", "es"]);
        translate.setDefaultLang('en');

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

I am using something like this in my other module.

@NgModule({
    declarations: [TopnavbarComponent],
    imports: [BrowserModule, RouterModule, FormsModule, I18NModule],
    exports     : [TopnavbarComponent],
})

But, this is throwing "emplate parse errors: The pipe 'translate' could not be found" error.

Neck

Answer 1

Need to import TranslateModule where ever you use translate pipe

Change

@NgModule({
    declarations: [TopnavbarComponent],
    imports: [BrowserModule, RouterModule, FormsModule, I18NModule],
    exports     : [TopnavbarComponent],
})

to

@NgModule({
    declarations: [TopnavbarComponent],
    imports: [BrowserModule, RouterModule, FormsModule, I18NModule, TranslateModule],
    exports     : [TopnavbarComponent],
})

Olvera

Answer 2

You can export the TranslateModule, like explained in the documentation

Tabshey

Answer 3

Use forChild in your shared module

   imports: [
        BrowserModule,
        TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: (http: Http) => new TranslateHttpLoader(http, 'i18n/', '.json'),
                deps: [Http]
            }
        })
    ],

Also add TranslateStore in your mane module providers

providers: [TranslateStore]

Weighty