Winkel - Was bedeutet module.id in der Komponente?

221

In einer Angular-App habe ich gesehen, dass @ComponentEigenschaft hat moduleId. Was heißt das?

Und wenn module.idnirgendwo 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]
});
Nishchit Dhanani
quelle
7
Beste Kunst bisher gefunden, für gleiche schwarty.com/2015/12/22/…
Pardeep Jain

Antworten:

182

Die Beta-Version von Angular (seit Version 2-alpha.51) unterstützt relative Assets für Komponenten wie templateUrl und styleUrls im @ComponentDecorator.

module.idfunktioniert bei Verwendung von CommonJS. Sie müssen sich keine Sorgen machen, wie es funktioniert.

Denken Sie daran : Das Setzen von moduleId: module.id im @ Component-Dekorator ist hier der Schlüssel. Wenn Sie das nicht haben, sucht Angular 2 auf Root-Ebene nach Ihren Dateien.

Quelle aus Justin Schwartzenbergers Beitrag , danke an @Pradeep Jain

Update am 16. September 2016:

Wenn Sie Webpack zum Bündeln verwenden, benötigen Sie keinen module.idDekorateur. Webpack-Plugins werden module.idim endgültigen Bundle automatisch verarbeitet (hinzugefügt)

Nishchit Dhanani
quelle
Ihr Willkommen, bitte schauen Sie sich diese Frage an und hoffen Sie, dass Sie mir helfen können. stackoverflow.com/q/36451917/5043867
Pardeep Jain
29
+1 für die Webpack-Referenz, ich hatte keine Ahnung, warum Dinge brechen, wenn sie funktionieren sollten und arbeiten, wenn sie brechen sollten ...
João Mendes
9
Ich kann mir keine kontraintuitivere Sache
vorstellen
15
Wie erklärt dies, was module.id ist?
Gyozo Kudor
1
@gyozokudor Wenn Sie das nicht haben, sucht Angular 2 Ihre Dateien auf der Stammebene.
Nishchit Dhanani
89

Update für (2017-03-13) :

Alle Erwähnungen von moduleId wurden entfernt. Kochbuch "Komponentenrelative Pfade" gelöscht

Wir haben unserer empfohlenen SystemJS-Konfiguration ein neues SystemJS-Plugin (systemjs-angle-loader.js) 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: https://angular.io/docs/ts/latest/guide/change-log.html

Definition:

moduleId?: string

moduleIdParameter innerhalb der @ComponentAnnotation nimmt einen stringWert an, der ist;

" Die Modul-ID des Moduls, das die Komponente enthält. "

Commonjs Nutzung: module.id,

SystemJS-Verwendung: __moduleName


VerwendungsgrundmoduleId :

moduleId wird verwendet, um relative Pfade für Ihre Stylesheets und Vorlagen aufzulösen, wie in der Dokumentation angegeben.

Die Modul-ID des Moduls, das die Komponente enthält. Muss in der Lage sein, relative URLs für Vorlagen und Stile aufzulösen. In Dart kann dies automatisch ermittelt werden und muss nicht eingestellt werden. In CommonJS kann dies immer auf module.id gesetzt werden.

ref (alt): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

Sie können die Speicherorte der Vorlagen- und Stildateien relativ zur Komponentenklassendatei angeben, indem Sie einfach die moduleId-Eigenschaft der @ Component-Metadaten festlegen

ref: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html


Anwendungsbeispiel:

Ordnerstruktur:

RootFolder
├── index.html
├── config.js
├── app
│   ├── components
│   │   ├── my.component.ts
│   │   ├── my.component.css
│   │   ├── my.component.html


Ohne module.id :

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html', <- Starts from base path
  styleUrls:  ['app/components/my.component.css'] <- Starts from base path
})

Mit module.id :

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs", <- need to change this if you want to use module.id property
...


@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})
eko
quelle
8
Aber wie es funktioniert, wo ist die Referenz von module.id
Nishchit Dhanani
1
@NishchitDhanani es ist nicht notwendig, aber ich schlage vor, github.com/angular/angular/issues/6053 zu überprüfen , das Ihren mapSchlüsseln in Ihrer Konfiguration zugeordnet ist. Wie app.
eko
1
Der Link von echonax zu den Dokumenten funktioniert derzeit nicht - obwohl es sich um den Link auf der Angular.io-Komponentenseite handelt. Versuchen Sie: angular.io/docs/js/latest/api/core/index/…
John Pankowicz
1
Es sieht so aus, als hätten Sie das Unterverzeichnis 'Komponenten' des Stammverzeichnisses 'App' im Ansatz ohne module.id vergessen, nicht wahr? Ich denke, es sollte sein: templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']
Ilker Cat
23

Wenn Sie erhalten typescript error, nur declaredie Variable in Ihrer Datei.

// app.component.ts
declare var module: {
   id: string;
}
//
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

UPDATE - December 08, 2016

Das moduleSchlüsselwort ist am verfügbar node. Wenn Sie also @types/nodein Ihrem Projekt installieren , ist das moduleSchlüsselwort automatisch in Ihren Typoskriptdateien verfügbar, ohne dass Sie declarees benötigen .

npm install -D @types/node

Abhängig von Ihrer Konfiguration müssen Sie dies möglicherweise in Ihre tsconfig.jsonDatei aufnehmen, um das Tool zu erhalten :

//tsconfig.json
{
   ...
   "compilerOptions": {
       "types" : ["node"]
   }
   ...
}

// some-component.ts
// now, no need to declare module
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

Viel Glück

Akash
quelle
1
tnq so viel! Endlich habe ich meine ng build --prod --aotArbeit npm install -D @types/node
erledigt
Eine weitere Sache, die ich getan habe, war moduleId: 'module.id'(beachten Sie die einfachen Anführungszeichen um module.id)
Anand Rockzz
@AnandRockzz Ich bin froh, dass Sie diesen Beitrag hilfreich fanden. Ich glaube nicht, dass Sie module.idals Zeichenfolge hinzufügen müssen . Wenn es funktioniert hat, scheint etwas nicht zu stimmen. Möglicherweise müssen Sie dies weiter untersuchen.
Akash
3

Zusätzlich zu den großartigen Erklärungen von echonaxund Nishchit Dhananiich möchte hinzufügen, dass ich die Population von Komponenten mit wirklich hasse module.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 wie module.idin Ihren Komponenten-Metadaten.

Aus den Dokumenten :

JiT-kompilierte Anwendungen, die den SystemJSLoader und komponentenbezogene URLs verwenden, müssen die @Component.moduleIdEigenschaft auf festlegen module.id. Das Modulobjekt ist undefiniert, wenn eine AoT-kompilierte App ausgeführt wird. Die App schlägt mit einem Nullreferenzfehler fehl, es sei denn, Sie weisen der index.html einen globalen Modulwert wie folgt zu:

<script>window.module = 'aot';</script>

Ich denke, diese Zeile in der Produktionsversion der index.htmlDatei 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.idZeile)

@Component({      
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

Gleichzeitig möchte ich Stile wie my.component.cssund Vorlagendateien my.component.html relativ zu den my.component.tsPfaden 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::

{
  "port": 8000,
  "server": ["app", "."]
}

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 .

Evgeny Bobkin
quelle
3

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.jsunserer 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 .

Prasanth Bendra
quelle
1
Ich werde dies auch als Haftungsausschluss zu meiner Antwort hinzufügen, danke für das Update.
eko
1

Sieht so aus, als ob Sie "module": "es6" in tsconfig.json verwenden, müssen Sie dies nicht verwenden :)

Steffan
quelle
wird es nicht transpile in ES6 , wenn wir das tun?
Akash
0

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.

Krishna Ganeriwal
quelle
-2

Das Hinzufügen moduleId: module.idbehebt 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

mast3rd3mon
quelle