ng2-translate + Webpack for production

Question

I'm trying to use the ng2-translate package with Webpack. In development mode it all works fine. When i'm starting a build, it doesn't copy the language files to the "dist" directory.

Can anyone give me some advices how to change the output path, I tried to follow up https://github.com/ocombe/ng2-translate instructions but I doesnt provide any working example for webpack in production, and its not very clear how to use TranslateStaticLoader and change 18n/*.json.

If I add this I get an error with the libraries

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        TranslateModule.forRoot({ 
          provide: TranslateLoader,
          useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
          deps: [Http]
     })
    ],
    bootstrap: [AppComponent]
})

This is my app.module.ts

import {BrowserModule} from "@angular/platform-browser";
import { NgModule } from '@angular/core';
import {HttpModule} from '@angular/http';
import { AppComponent } from './app.component';
import {TranslateModule} from 'ng2-translate';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot()
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

My app.component.ts

import { Component } from '@angular/core';
import {TranslateService} from 'ng2-translate';

import '../../public/css/styles.css';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 

    param: string = "world";

    constructor(translate: TranslateService) {
        // this language will be used as a fallback when a translation isn't found in the current language
        translate.setDefaultLang('en');

         // the lang to use, if the lang isn't available, it will use the current loader to get them
        translate.use('en');
    }

}

My app.component.html

  <div>{{ 'HELLO' | translate:{value: param} }}</div>

and my json

{
    "HELLO": "hello {{value}}"
}

Thanks for your help.

Julien Moreau Julien Moreau · Accepted Answer · 2016-11-02T20:25:26

0

votes

What errors do you have ? I'm using it in development mode and it's working perfectly.

ng2-translate + Webpack for production

1 Answers