Angular 2 i18n提供了翻译不可用的控制台消息
[英]Angular 2 i18n gives Translation unavailable console messages
问题描述
The early Angular documentation for i18n that I'm aware of is Stephen Fluin's example code. 
我知道的i18n的早期Angular文档是Stephen Fluin的示例代码。 https://github.com/StephenFluin/i18n-sample/commit/e2cb2006c614fce0f6d623def5f13174583233d3 https://github.com/StephenFluin/i18n-sample/commit/e2cb2006c614fce0f6d623def5f13174583233d3
I've tried to follow it closely. 我一直试图密切关注它。 Atom-typescript says no errors, but I get Translation unavailable console messages for every element, like the following with < and > removed - Atom-typescript没有显示任何错误，但是我得到了每个元素都无法使用的翻译控制台消息，例如以下内容，其中<和>已删除-
zone.js:355 Unhandled Promise rejection: Template parse errors: zone.js：355未处理的承诺拒绝：模板解析错误：
md-grid-tile [ERROR ->] button id="terms" md-button aria-label="TERMS" i18n="button for Terms of Service" TERMS /button /md"): AppComponent@63:19 Translation unavailable for message id="8476fc13627507c3d0ec6b85dae533f0c5e44eef" ("-label="TERMS" i18n="button for Terms of Service" TERMS /button /md-grid-tile md-grid-tile [错误->]按钮id =“ terms” md-button aria-label =“ TERMS” i18n =“服务条款按钮” TERMS / button / md“）：AppComponent @ 63：19无法提供翻译for message id =“ 8476fc13627507c3d0ec6b85dae533f0c5e44eef”（“ -label =” TERMS“ i18n =”服务条款按钮“条款/ button / md-grid-tile
My relevant code is: 我的相关代码是：
package.json The same as shown except I do not include @angular/tsc-wrapped because it seems unnecessary here. package.json与显示的相同，除了不包含@ angular / tsc-wrapped，因为这里似乎没有必要。
component.html - Examples of my HTML look like: component.html -HTML的示例如下所示：
<h4 id="motto" i18n="our motto stating the value of using this site">MOTTO</h4>
<md-grid-tile><button id="terms" md-button aria-label="TERMS" i18n="button for Terms of Service">TERMS</button></md-grid-tile>
main.ts I left out production environment lines & polyfills 我忽略了main.ts的生产环境线和polyfills
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
import { AppModule } from './app.module';
import { TRANSLATION } from './components/navigation/language/messages.en';
platformBrowserDynamic().bootstrapModule(
AppModule,
{providers: [
{ provide: TRANSLATIONS, useValue:TRANSLATION },
{ provide:TRANSLATIONS_FORMAT, useValue:'xlf' },
{ provide:LOCALE_ID, useValue:'en' }
]});
messages.en.ts examples of repeated elements are: messages.en.ts重复元素的示例是：
export const TRANSLATION = `
<?xml version='1.0' encoding='utf-8'?>
<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="motto" datatype="html" approved="yes">
<source>MOTTO</source> <target state="translated">Find a home, save time</target>
<note priority="1" from="description">our motto stating the value of using this site</note>
</trans-unit>
<trans-unit id="terms" datatype="html" approved="yes">
<source>TERMS</source> <target state="translated">Terms of Service</target>
<note priority="1" from="description">button for Terms of Service</note>
</trans-unit>
messages.en.xlf again example of repeated elements messages.en.xlf再次是重复元素的示例
<?xml version='1.0' encoding='utf-8'?>
<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="motto" datatype="html" approved="yes">
<source>MOTTO</source> <target state="translated">Find a home, save time</target>
<note priority="1" from="description">our motto stating the value of using this site</note>
</trans-unit>
messages.xlf again an example of repeated elements messages.xlf再次是重复元素的示例
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="motto" datatype="html">
<source>MOTTO</source>
<target/>
<note priority="1" from="description">our motto stating the value of using this site</note>
</trans-unit>
Stephen's code has 40 digit hex numbers for trans-unit id s. 斯蒂芬（Stephen）的代码中有40位十六进制数字，代表反式单位ID。 I don't know how they were generated. 我不知道它们是如何产生的。 My code has things like id="motto". 我的代码有id =“ motto”之类的内容。 My console messages contain 40 digit hex, but they seem to change each time I try something. 我的控制台消息包含40位十六进制，但每次尝试尝试时它们似乎都在变化。 This part is a mystery. 这部分是个谜。
This is pretty bleeding edge with no real docs, but does anyone know how to fix this? 没有真正的文档，这是非常前沿的，但是有人知道如何解决吗？ I am out of town until 10/17, but I will eagerly try good ideas when I return. 我一直在城里直到10/17，但是当我回来时，我会热切地尝试一些好主意。
1 个解决方案
解决方案1
0 2016-10-20 21:02:38
It turns out the files in Stephen Fluin's post, cited above, are generated by an Angular translation process. 事实证明，上面引用的Stephen Fluin帖子中的文件是由Angular翻译过程生成的。 Do not try copy, modify, and paste - as I did above! 不要像我上面那样尝试复制，修改和粘贴！ After much searching, I found the process set up descriptions snuggled away in the Cookbook section of Angular2's devdocs. 经过大量搜索之后，我在Angular2的devdocs的Cookbook部分中找到了对过程设置的描述的描述。 http://devdocs.io/angular~2_typescript/cookbook/i18n http://devdocs.io/angular~2_typescript/cookbook/i18n
It is a complex (for me, anyway), multi-step set up of code and translation files. 这是一个复杂的（无论如何对我而言）的代码和翻译文件的多步骤设置。 But it works. 但这有效。 You have a choice of just in time jiT or ahead of time AoT translation. 您可以选择即时jiT或提前进行AoT转换。 That is also a multi-step research to make a decision. 这也是一个多步骤的研究，可以做出决定。 At the moment, Google suggests using jiT for development (though it is slower to paint the page) and AoT for production. 目前，Google建议使用jiT进行开发（尽管绘制页面较慢），而使用AoT进行生产。 AoT is currently extremely complex to set up. 目前，AoT的设置非常复杂。 Google says they are working to make it simpler. 谷歌表示，他们正在努力使其更简单。 Hope that saves you some time. 希望可以节省您一些时间。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.