AngularJS2: Relative Pfade zu Templates

AngularJS

© www.angularjs.org / CC BY-SA 3.0

Warum zum Teufel findet AngularJS2 meine Template-Dateien nicht, wenn ich relative Pfadangaben benutze? Genau das habe ich mich auch gefragt. Hier die Antwort…

Sagen wir, wir haben einen Dateibaum der in etwa so aussieht:

|-app
|–app.component.ts
|–app.component.css
|–app.component.html

Und nehmen wir an, wir haben ein Beispielmodul à la:

Dann werdet ihr bestimmt das gleiche Problem haben wie ich. Angular2 meckert darüber, dass es die Templates nicht finden kann und sucht im falschen Pfad. Woran liegt das?

Nun, der Systemloader geht standardmäßig davon aus, dass alle Komponenten die nicht in dem gleichen Modul wie die Applikation sind absolute Pfade zu ihren Templates angeben. Aus diesem Grund sucht der Systemloader standardmäßig auch immer absolut in eurem Projekt, es sei denn, ihr gebt explizit an, dass eure Komponente zum Applikationsmodul gehört. Die Vorgehensweise ist dafür für Commonjs und Systemjs unterschiedlich. Wer Visual Studio Code mit den TypeScript-Templates von John Papa verwendet, dem wird aufgefallen sein, dass das Template folgenden Code erzeugt:

Der erzeugte Code ist für CommonJS als Applikationsloader vorgesehen und funktioniert damit auch prächtig. Wer dagegen wie ich SystemJS benutzt, muss statt

moduleId: module.id,

die von SystemJS bereitgestellte Konstante __moduleName verwenden. Visual Studio Code erkennt diese aber nicht und erzeugt eine Warnung, das __moduleName nicht bekannt sei. Aus diesem Grund deklarieren wir __moduleName einfach in der Komponente und kommen so auf den folgenden Code, der anstandslos und Fehlerfrei akzeptiert wird:

et voilà: Schon können wir ohne Probleme relative Pfade in AngularJS2 benutzen 🙂

Marcel Cremer

Marcel Cremer

Consultant / Produktentwicklung bei CK7 GmbH
Marcel Cremer ist begeisterter Programmierer und Consultant. Mit "The Smart Programmer" bietet er Tipps und Informationen für smarte Programmierer an.
Google+ |
Marcel Cremer

Letzte Artikel von Marcel Cremer (Alle anzeigen)