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]
});

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)

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

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

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
})

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

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 .

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 .

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

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.

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