ng2-translate + 用于生产的 Webpack答案

【问题标题】：ng2-translate + Webpack for productionng2-translate + 用于生产的 Webpack
【发布时间】：2016-10-26 22:53:29
【问题描述】：

我正在尝试将 ng2-translate 包与 Webpack 一起使用。在开发模式下一切正常。当我开始构建时，它不会将语言文件复制到“dist”目录。

任何人都可以给我一些建议如何更改输出路径，我尝试跟进https://github.com/ocombe/ng2-translate 说明，但我没有为生产中的 webpack 提供任何工作示例，并且不太清楚如何使用TranslateStaticLoader 和更改18n/*.json.

如果我添加这个，库会出错

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

这是我的 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 { }

我的 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');
    }

}

我的 app.component.html

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

还有我的 json

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

感谢您的帮助。

【问题讨论】：

标签： json angular webpack ng2-translate

【解决方案1】：

你有什么错误？我在开发模式下使用它，它运行良好。

【讨论】：

我也有这个工作在开发中，我设法使它工作从 'ng2-translate' 导入 TranslateService, TranslateLoader, TranslateStaticLoader} ，但问题并没有就此结束，在 AppComponent 的构造函数中需要是constructor(private translate: TranslateService)，例子中加入private不是这样的。它最终可以工作，但构建应用程序是另一回事，我被困在那里。
顺便说一句，我最终使用了 angular2localization 并完美运行，文档更广泛且易于集成到您的应用程序中。