0

angular (2.4.1) + typescript (2.0.3) + webpack (2.1.0-beta.25) プロジェクトにng2-translate (5.0.0) を追加しました。私は、構築時の早い段階で、メモリ内のいくつかの辞書を介して手動で翻訳を定義しています。setTranslation

TranslateServiceコンポーネントコード内で使用すると、すべて正常に動作します。HTMLテンプレート内のディレクティブにもパイプにも正しい構文を見つけることができません。

翻訳の 1 つのセットには、たとえば次のようなものがあります。

en = {
  ...
  loginTitle: 'Please log in',
  ...
}

1) パイプ

テンプレートが次の場合:

<h3 class="panel-title">{{ 'loginTitle' | translate }}</h3>

アプリケーションは実行時に、非常に早い段階で中断しますplatformBrowserDynamic().bootstrapModule(AppModule)。

アプリケーションのブートストラップ中にエラーが発生しました。構文エラー

2) 指令 + 内容

テンプレートが次の場合:

<h3 class="panel-title" translate>loginTitle</h3>

アプリケーションは壊れませんが、ページには翻訳されていないキーが表示されるだけloginTitleです。

3) 指令

テンプレートが次の場合:

<h3 class="panel-title" [translate]="'loginTitle'"></h3>

アプリケーションは壊れませんが、ページは本来あるべき場所にテキストを表示せず、DOM ノードはテキストをラップしません。

ドキュメントで推奨されているようにTranslateModule、アプリ モジュール レベル ( を使用forRoot) と共有モジュールの両方でインポートしました。共有モジュールは、他の領域モジュールによってインポートされます。

ネストされた翻訳、一重引用符なしなど、他のバリエーションも試しましたが、うまくいきませんでした。私は何を間違っていますか？

編集シナリオ＃1では、初期エラーに関する詳細情報を記録できました：

エラー: テンプレート解析エラー: パイプ 'translate' が見つかりませんでした

しかし、それはすでに ng2-translate の一部である必要があります

4

1 に答える 1

1

いくつかの試行錯誤の後、段階的にプランカーに取り組んだ後、私は問題を見つけました。共有モジュールはインポートしTranslateModuleていましたが、他のユーザーが使用できるようにエクスポートしていませんでした (doh!)

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
import { TranslateModule } from 'ng2-translate';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ...
    TranslateModule,
    ...
  ],
  exports: [
    ...
    TranslateModule, // <-- this was missing initially
  ],
})
export class SharedModule {
 ...
}
于 2016-12-29T20:23:11.757 に答える