問題タブ [angular-i18n]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - Angular の国際化を本番環境で使用するためのワークフローとツール
Angular の国際化ソリューションはまだ開発中のようです。同時に、公式にドキュメントに記載されているため、本番アプリケーションで使用する準備ができていると思います。
私が理解できないのは、商用環境でこのソリューションでどのようなワークフローとツールを使用できるかということです.
ワークフローは、私にはある程度理にかなっています。開発者は、アプリケーションを開発し、翻訳用のソース文字列を生成し、翻訳者が最小限の技術的専門知識で文字列を翻訳するプログラムにロードできるファイルを生成します。ファイルを生成するには、エクストラクタ (xi18n) を使用して翻訳されていないテンプレート XLIFF を取得し、これを言語ごとにコピーします。翻訳者は XLIFF エディタを使用して、後で抽出したために変更が発生したときにテンプレートから各言語を更新します。ソース文字列の変更。これは、Gettext アプローチに似ています。これは Angular にとっても適切な戦略ですか、それとも翻訳ファイルはテンプレート XLIFF から Angular で他の方法で更新されますか?
私にとってより大きな問題は、Angular が XLIFF ファイルをどのようにつなぎ合わせるかということです。残念ながら、Angular が XLIFF 1.2 と ICU を組み合わせる方法はかなり複雑に思えますが、これを適切に処理できるツールをまだ見つけていません。Angular は、翻訳単位で XLIFF プレースホルダーを使用しているようで、単にテキスト「ICU」を ID として使用し、ICU のようなパターンを equiv-text で使用しています。これは、ランダム ID と完全な ICU 式を含む別の翻訳単位と何らかの方法で照合されます。補間は、ID "INTERPOLATION" のプレースホルダーと equiv-text 内の変数を使用して処理されます。
Angular が ICU 式のマッチングを行うために内部で何を行っているかを正確に理解するのが難しいだけでなく、XLIFF エディターでこれらすべての結果を理解することは、翻訳者はもちろん、開発者である私にとっても困難です。スクリーンショットでは、Virtaal XLIFF エディターを使用した ICU と補間の例を示しています。これは、以下の翻訳元文字列から生成され、その下の XLIFF に抽出されます。プレースホルダーを使ってできることはほとんどなく、VAR_PLURAL ICU 翻訳とそれが使用されている翻訳との間の関連性を確認することもできません。私は他のエディタを見てきましたが、同様の問題を抱えているようです。
Angular テンプレート:
XLIFF:
翻訳ファイルが実際に翻訳者にとって意味のあるものになるように、これらの問題を回避するために、本番環境での使用を目的としたAngularアプリケーションで通常どのツールを使用していますか? 多くの人が手作業でファイルを編集していると読んだことがありますが、それは翻訳者にとって使いやすいものではないと思います。
angular - ユニバーサル i18n サーバー側
Universal を i18n で使用しようとしています。
私はすでにアプリを構築し、サーバー構成を設定しているので、アプリがブラウザ側モードに移行すると、ユーザーはアプリの正しい翻訳にリダイレクトされます。それで問題ありません。
私が抱えている問題は、サーバー側のレンダリングにあります。
Express サーバーの設定方法では、ユニバーサルのサーバー側の正しい翻訳を提供する方法がわかりません。また、ローカル言語ではなくデフォルト言語のみが表示されます。
ブラウザ側と同様に、サーバー側モードで使用される main.bundle ファイルに対して、言語ごとに 1 つずつ、異なるビルドを作成しようとしました。問題は、アプリごとにこれらのファイルを複数設定できないことです。
Dist フォルダー構造:
server.ts ファイル
サーバー側アプリは、4 行目の main.bundle からレンダリングされます。しかし、翻訳ごとに 1 つ提供する可能性がありません。どうすれば修正できますか?
私のポイントは、Angular Universal がアプリの正しいサーバー側の翻訳を提供することです。
angular - 複数バージョンの Angular アプリを Azure App Service にデプロイする
問題なく Azure App Service にデプロイできる Angular アプリケーションがあります。
まず、次のコマンドを使用してアプリケーションをコンパイルします。
web.config
次に、以下をdist
フォルダーに追加します。
次に、dist
フォルダーの内容を圧縮して、Azure アプリケーションにドラッグします ( https://<site.scm.azurewebsites.net>/ZipDeploy
)。この時点で、アプリは正常に動作します。
私の問題は、さまざまなロケール用にさまざまなバージョンのアプリケーションをデプロイしたいということです。
次のコマンドを使用して、さまざまなバージョンをコンパイルします。
これにより、フォルダーが出力en
され、さまざまなバージョンのアプリが含まれますfr
。アプリの各バージョンに、たとえば とを/dist
追加します。web.config
/dist/en
dist/fr
次に、en & fr フォルダーを圧縮しZipDeploy
、上記のようにデプロイします。
アプリケーションのホームページが次の場所で正常に動作していることを確認できます。
ただし、(Azure B2C を使用してサインインしている) で自分のアプリケーションにリダイレクトされるとhttps://<site>.azurewebsites.net/fr/redirect.html#state....
、次のエラーが発生します。
You do not have permission to view this directory or page.
これは、Angular にルーティングを処理させるのではなく、iis が文字通り私の URL をディレクトリとして解釈しようとしているように感じますが、よくわかりません。
これを正しく行う方法を知っている人はいますか?