C. Garn C. Garn - 1 year ago 55
TypeScript Question

Angular2's Internationalization (i18n) does not work with templateUrls not located in the root project directory

I am currently researching how to implement internationalization in my Angular2 app following the official Angular2 guide located here.

My app structure looks like this:

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

where myComponent.ts looks like this:

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

templateUrl: 'app/myComponent/myComponent.html',
selector: 'my-component'

export class MyComponent {}

and where myComponent.html looks like this:

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

However, I am encountering an error when I am trying to create the translation source file via

npm run i18n

As i18n searches through the app looking for i18n tags, it looks like it updates a filePath variable. Then when it finds a component that has an i18n tag, it just appends the templateUrl defined in the component to the end of the filePath.

So in my case, i18n runs looking for i18n tags. Once it finally reaches myComponent, the current filePath variable seems to be:


It then finds an i18n tag in the myComponent.html and appends the templateUrl in myComponent.ts to the filePath variable which results in filePath being set to:


Because of this, I end up with an error because obviously that path does not exist:

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

I don't know if I am missing something or maybe it is a bug with Angular2's internationalization, but any help would be appreciated!


Answer Source

I've had the same problem. I've solved it by using relative paths in templateUrl parameter. Following your example:

templateUrl: './myComponent.html',
selector: 'my-component'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download