4

ng2-translate i18n を実装しようとしています。

ダッシュボード.コンポーネント.ts

import { Component } from '@angular/core';
import {TranslateService} from 'ng2-translate';
@Component({
    selector: 'dashboard-page',
    template:`<div>
      <h2>{{ 'HOME.TITLE' | translate }}</h2>
      <label>
        {{ 'HOME.SELECT' | translate }}
        <select #langSelect (change)="translate.use(langSelect.value)">
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
        </select>
      </label>
    </div>`
    
})

export class DashboardComponent {
    constructor(private translate: TranslateService) {
        translate.addLangs(["en", "fr"]);
        translate.setDefaultLang('en');

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

このファイルのパスはsrc/main/app/dashboard/dashboard.component.ts です

2 つの JSON ファイルのパス - en.json と fr.json はsrc/main/app/assets/i18nです。

TranslateModule を app.module.ts に含めました

しかし、アプリを実行すると、en.json file not found-404 エラーが発生します。私はwebpackを使用しており、webpack.common.jsにはこのようなJSONのプリローダーがあります

preLoaders:[
    {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: 'json-loader'
    }
]

それでも、JSON file not found エラーが発生します。

そして、私がフォローしていた例から、パス assests\i18n.json がどのファイルに記載されているのかわかりません。

4

2 に答える 2

5

この同じ問題が発生しました。Webpack には「require」されたファイルのみが含まれるため、require('./path/to/file.json')がない限り、ファイルは含まれません。さらに、そうすることで、ファイルもハッシュ化されることを意味するため、ファイルは ng2-translate ユーティリティによって認識されなくなります。

CopyWebpackPlugin を使用してこの問題を回避しました ( https://github.com/kevlened/copy-webpack-pluginを参照)。次の構成を webpack.config.js ファイルに追加します。

 var CopyWebpackPlugin = require('copy-webpack-plugin');

 ...

 plugins: [
     new CopyWebpackPlugin([ { from: 'src/assets/i18n', to: 'assets/i18n' } ])
 ]

また、リソースがデフォルトの/i18nフォルダーではなく/assets/i18nフォルダーの下にあるため、Translate モジュールを次のように構成しました。

app.translate.ts 内(関数のエクスポートに注意してください。これは AoT に必要です)

export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, 'assets/i18n', '.json');
}

export const AppTranslateModule: ModuleWithProviders = TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [ Http ]
});

そして私の app.module.ts では次のように

@NgModule({
    imports: [ AppTranslateModule, ... ],
    ...
})
export class AppModule {
}

注:執筆時点では、ng2-translate webpack の例は壊れています。実際、これには未解決の問題があります https://github.com/ocombe/ng2-translate/issues/325

于 2016-12-07T16:50:02.970 に答える