Question

我目前正在研究如何在我的Angular2应用程序中实现国际化，遵循位于here的官方Angular2指南。

我的应用结构如下所示：

my-angular2-app
  |
  +-- app
  |  |
  |  +-- myComponent
  |  |  |
  |  |  +-- myComponent.ts
  |  |  +-- myComponent.html

其中myComponent.ts如下所示：

import {Component} from '@angular/core';

@Component({
templateUrl: 'app/myComponent/myComponent.html',
selector: 'my-component'
})

export class MyComponent {}

并且myComponent.html看起来像这样：

<h3 i18n="User welcome|An introduction header for this sample">Hello i18n!</h3>

但是，当我尝试通过

创建翻译源文件时遇到错误

npm run i18n

当i18n在应用中搜索寻找i18n标签时，看起来它更新了一个filePath变量。然后，当它找到具有i18n标记的组件时，它只是将组件中定义的templateUrl附加到filePath的末尾。

所以在我的情况下，i18n运行寻找i18n标签。一旦它最终到达myComponent，当前的filePath变量似乎是：

C:/my-angular2-app/app/myComponent

然后在myComponent.html中找到一个i18n标签，并将myComponent.ts中的templateUrl追加到filePath变量，导致filePath设置为：

C:/my-angular2-app/app/myComponent/app/myComponent/myComponent.html

因此，我最终得到一个错误，因为显然该路径不存在：

Error: Compilation failed. Resource file not found: C:/my-angular2-app/app/myComponent/app/myComponent/myComponent.html

我不知道我是否遗漏了某些东西，或者这可能是Angular2国际化的错误，但任何帮助都将不胜感激！

谢谢！

Answer 1

我遇到了同样的问题。我已经通过使用 templateUrl 参数中的相对路径解决了这个问题。按照你的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

Angular2的国际化（i18n）不适用于不在根项目目录中的templateUrls

1 个答案: