Core: Translate pipe not working with angular universal

Created on 20 Oct 2017  路  1Comment  路  Source: ngx-translate/core

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http, RequestOptions } from '@angular/http';

// TRANSLATE
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
// AOT Export
export function HttpLoaderFactory(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule(
  {
  imports: [
    HttpModule,
    AppRoutingModule,

    // UNIVERSAL
    BrowserModule.withServerTransition({appId: 'd'}),

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

  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.server.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Http } from '@angular/http';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

@NgModule({
imports: [
    ServerModule,
    AppModule
],
bootstrap: [AppComponent]
})
export class AppServerModule { }

package.json

"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "build:dynamic": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:dynamic": "npm run build:dynamic && node dist/server"

I have a few languages set in my project and a select to switch between one language and another using
translate.use(...)

Unfortunately, despite having no errors when I use npm run serve:dynamic the first language is displayed and when I do another translate.use to another language, nothing is happening.

If I just try launching my project with a ng serve the translate.use is working just fine.

Most helpful comment

I have the translation working with a translate pipe, changing languages changes the translation. But in the source code (ctrl+u) it still shows up as page.home.title I was expecting the server to do the translation and send it back already rendered with the translation

>All comments

I have the translation working with a translate pipe, changing languages changes the translation. But in the source code (ctrl+u) it still shows up as page.home.title I was expecting the server to do the translation and send it back already rendered with the translation

Was this page helpful?
0 / 5 - 0 ratings