Angular2s Internationalisierung (i18n) funktioniert nicht mit templateUrls, die sich nicht im Stammverzeichnis des Projekts befinden.

Question

Ich untersuche derzeit, wie ich die Internationalisierung in meiner Angular2-App nach dem offiziellen Angular2-Handbuch here implementieren kann.

Meine app Struktur sieht wie folgt aus:

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

wo myComponent.ts wie folgt aussieht:

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

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

export class MyComponent {} 

und wo myComponent.html wie folgt aussieht:

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

Wie immer, ich bin der Begegnung einen Fehler, wenn ich versuche, die Übersetzung Quelldatei über

npm run i18n 

Wie i18n durchsucht die App erstellen für i18n-Tags suchen, es sieht aus wie eine filePath Variable aktualisiert. Wenn dann eine Komponente gefunden wird, die ein i18n -Tag hat, hängt sie einfach die in der Komponente definierte templateUrl an das Ende des filePath an.

Also in meinem Fall, I18n läuft auf der Suche nach i18n Tags. Sobald es myComponent schließlich erreicht, scheint die aktuelle filePath variabel zu sein:

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

Es dann einen i18n-Tag in der myComponent.html findet und fügt die templateUrl in myComponent.ts auf die filePath Variable, die in filePath seinen Satz ergibt zu:

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

dieser weil ich am Ende mit einem Fehler, weil offensichtlich nicht, dass Pfad existiert:

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

ich weiß nicht, ob ich vermisst etwas oder vielleicht ist es ein Bug mit Angular2 Internationalisierung, aber jede Hilfe wäre willkommen!

Danke!

Answer 1

Ich hatte das gleiche Problem. Ich habe es gelöst, indem Sie relative Pfade in templateUrl Parameter verwenden. Folgen Sie Ihrem Beispiel:

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