In einer Angular-App habe ich gesehen, dass @Component
Eigenschaft hat moduleId
. Was heißt das?
Und wenn module.id
nirgendwo definiert, funktioniert die App immer noch. Wie kann es noch funktionieren?
@Component({
moduleId: module.id,
selector: 'ng-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [AppComponent]
});
angular
systemjs
angular2-components
Nishchit Dhanani
quelle
quelle
Antworten:
Die Beta-Version von Angular (seit Version 2-alpha.51) unterstützt relative Assets für Komponenten wie templateUrl und styleUrls im
@Component
Decorator.module.id
funktioniert bei Verwendung von CommonJS. Sie müssen sich keine Sorgen machen, wie es funktioniert.Quelle aus Justin Schwartzenbergers Beitrag , danke an @Pradeep Jain
Update am 16. September 2016:
quelle
Update für (2017-03-13) :
Quelle: https://angular.io/docs/ts/latest/guide/change-log.html
Definition:
moduleId
Parameter innerhalb der@Component
Annotation nimmt einenstring
Wert an, der ist;" Die Modul-ID des Moduls, das die Komponente enthält. "
Commonjs Nutzung:
module.id
,SystemJS-Verwendung:
__moduleName
Verwendungsgrund
moduleId
:moduleId
wird verwendet, um relative Pfade für Ihre Stylesheets und Vorlagen aufzulösen, wie in der Dokumentation angegeben.ref (alt): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html
ref: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
Anwendungsbeispiel:
Ordnerstruktur:
Ohne module.id :
Mit module.id :
tsconfig.json:
quelle
map
Schlüsseln in Ihrer Konfiguration zugeordnet ist. Wieapp
.templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']
Wenn Sie erhalten
typescript error
, nurdeclare
die Variable in Ihrer Datei.UPDATE - December 08, 2016
Das
module
Schlüsselwort ist am verfügbarnode
. Wenn Sie also@types/node
in Ihrem Projekt installieren , ist dasmodule
Schlüsselwort automatisch in Ihren Typoskriptdateien verfügbar, ohne dass Siedeclare
es benötigen .npm install -D @types/node
Abhängig von Ihrer Konfiguration müssen Sie dies möglicherweise in Ihre
tsconfig.json
Datei aufnehmen, um das Tool zu erhalten :Viel Glück
quelle
ng build --prod --aot
Arbeitnpm install -D @types/node
moduleId: 'module.id'
(beachten Sie die einfachen Anführungszeichen um module.id)module.id
als Zeichenfolge hinzufügen müssen . Wenn es funktioniert hat, scheint etwas nicht zu stimmen. Möglicherweise müssen Sie dies weiter untersuchen.Zusätzlich zu den großartigen Erklärungen von
echonax
undNishchit Dhanani
ich möchte hinzufügen, dass ich die Population von Komponenten mit wirklich hassemodule.id
. Insbesondere wenn Sie Unterstützung für die (Ahead-of-Time) AoT-Kompilierung haben und für ein realistisches Projekt, das Sie anstreben sollten, gibt es keinen Platz für so etwas wiemodule.id
in Ihren Komponenten-Metadaten.Aus den Dokumenten :
Ich denke, diese Zeile in der Produktionsversion der
index.html
Datei zu haben, ist absolut nicht akzeptabel!Daher ist das Ziel eine (Just-in-Time) JiT-Kompilierung für die Entwicklung und eine AoT-Unterstützung für die Produktion mit der folgenden Definition von Komponentenmetadaten: (ohne
moduleId: module.id
Zeile)Gleichzeitig möchte ich Stile wie
my.component.css
und Vorlagendateienmy.component.html
relativ zu denmy.component.ts
Pfaden der Komponentendateien platzieren .Um all dies zu erreichen, verwende ich die Lösung, einen Webserver (Lite-Server oder Browser-Sync) während der Entwicklungsphase aus mehreren Verzeichnisquellen zu hosten!
bs-config.json
::Bitte nehmen Sie eine Antwort auf diese Antwort für mich Details.
Das beispielhafte Winkel 2 Schnellstart - Projekt, das auf diesem Ansatz beruht gehostet hier .
quelle
Gemäß Angular-Dokument sollten Sie @Component ({moduleId: module.id}) nicht verwenden.
Bitte beachten Sie: https://angular.io/docs/ts/latest/guide/change-log.html
Hier ist der relevante Text von dieser Seite:
Alle Erwähnungen von moduleId wurden entfernt. Kochbuch "Komponentenrelative Pfade" gelöscht (2017-03-13)
Wir haben
systemjs-angular-loader.js
unserer empfohlenen SystemJS-Konfiguration ein neues SystemJS-Plugin ( ) hinzugefügt. Dieses Plugin konvertiert dynamisch "komponentenbezogene" Pfade in templateUrl und styleUrls für Sie in "absolute Pfade".Wir empfehlen Ihnen dringend, nur komponentenbezogene Pfade zu schreiben. Dies ist die einzige Form der URL, die in diesen Dokumenten beschrieben wird. Sie müssen nicht mehr schreiben
@Component({ moduleId: module.id })
und sollten es auch nicht mehr tun .quelle
Sieht so aus, als ob Sie "module": "es6" in tsconfig.json verwenden, müssen Sie dies nicht verwenden :)
quelle
Dieser moduleId-Wert wird von den Angular Reflection-Prozessen und der metadata_resolver-Komponente verwendet, um den vollständig qualifizierten Komponentenpfad auszuwerten, bevor die Komponente erstellt wird.
quelle
Das Hinzufügen
moduleId: module.id
behebt verschiedene Probleme, die beim Erstellen von nativen Angular-Apps und eckigen Web-Apps auftreten können. Es wird empfohlen, es zu verwenden.Außerdem kann die Komponente im aktuellen Verzeichnis nach Dateien suchen, anstatt aus dem obersten Ordner
quelle