Noch ein weiterer Angular-Artikel, Teilekonfigurationen und Umgebungen

In meinem vorherigen Artikel haben wir gelernt, wie man eine Komponente generiert. Bevor wir fortfahren, sollten wir meiner Meinung nach einen Blick auf verschiedene Vorstellungen über Konfigurationen und Umgebungen werfen.

Es gibt verschiedene Konfigurationsmöglichkeiten: Angular-Verhalten und Typoskript-Compiler. Heute werfen wir einen Blick auf den Angular-Teil, und alles ist im Angular.json-Projekt enthalten.

Diese Datei beschreibt Ihr gesamtes Projekt und folgt einem Schema von Angular CLI: /@angular/cli/lib/config/schema.json

Die „Projekte“ sind der Hauptteil. Und in diesem sehen Sie „Schaltpläne“ und „Architekt“.

Der Architekt beschreibt das Verhalten der CLI: Erstellen, Bereitstellen, Testen, …

Schaltpläne beschreiben, wie Code generiert wird. Und das werden wir heute tun.

Hier ist meiner nach dem ersten Artikel:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

Wir können sehen, dass es „scss“ für den Stilschlüssel enthält. Das liegt daran, dass ich beim Erstellen des Projekts auf die CLI-Eingabeaufforderung mit „scss“ geantwortet habe.

Aber ich möchte mehr tun. Normalerweise bevorzuge ich es, Komponenten mit dem Single File Component-Muster zu erstellen. Das ist wie bei VueJS. Ihre Stile, HTML- und TypeScript-Code in einer Datei. Dies liegt daran, dass Sie gezwungen sind, kleine Komponenten zu bauen.
Fügen Sie dazu die folgenden Zeilen hinzu: inlineStyle und inlineTemplate

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

Wenn Sie nun „ng generic Component My-New-Component“ ausführen, wird nur die TypeScript-Datei erstellt.

Wir werden mit einigen Optimierungen fortfahren. Best Practices erklären, dass Sie Ihre Änderungserkennung immer auf „OnPush“ einstellen sollten. Dies sollte also während der Komponentengenerierung erfolgen.
Fügen Sie dazu diese Zeile hinzu: changeDetection

"@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true,
    "changeDetection": "OnPush"
  }
},

Das war's, Sie haben jetzt Ihre Standard-Projektcodegenerierung eingerichtet.

In der vorherigen Angular-Version konnten Sie „standalone: ​​true“ definieren. Aber es ist jetzt das Standardverhalten.

Ich werde mit dem Umweltkonzept enden. Wenn Sie eine Anwendung erstellen, sind Sie normalerweise auf APIs angewiesen. Diese APIs können lokal bereitgestellt werden (auf Ihrem Computer, wenn Sie Code schreiben), können aber auch vom Testserver, Vorproduktionsserver oder Produktionsserver bereitgestellt werden.
Sie müssen also den Hostnamen in einer Variablen festlegen.

Angular bietet hierfür eine freundliche Lösung: Umgebung.

Umgebungen generieren

Dieser Befehl fügt Ihrem Projekt zwei neue Dateien hinzu: Environment.ts und Environment.development.ts
Und es wird auch Ihre angle.json ändern, indem es ein „fileReplacements“-Array im Knoten „projects.my-new-project.architect.configurations.development“

hinzufügt

Während des Build-Prozesses ersetzt es die erforderliche Umgebungsdatei.ts durch die erforderliche Umgebungsdatei (z. B. environment.development.ts).

Sie können alle spezifischen Umgebungsvariablen darin speichern und die Datei „environment.ts“ überall dort importieren, wo Sie sie benötigen. Achten Sie jedoch darauf, keine anderen Umgebungen zu importieren.*.ts, da diese zur Laufzeit nicht verfügbar sind!

Hier ist ein Beispiel einer Umgebung:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

Sie müssen also nur eine neue „environment.produktion.ts“ mit den erforderlichen Variablen darin erstellen. Ändern Sie dann die Datei „angular.json“, um den Abschnitt „fileReplacements“ unter „project.architect.configurations.produktion“ wie folgt hinzuzufügen:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

Meiner Meinung nach hätte Angular sowohl Entwicklungs- als auch Produktionsdateien erstellen sollen. Das ist etwas seltsam.

Ho, ich habe vergessen zu sagen, dass man in Angular v19 beim Start globale Variablen definieren kann. Dies könnte eine Alternative zum Umgebungskonzept sein, erfordert jedoch mehr Setup für den Build-Prozess.

Einen schönen Tag noch ☁️

[Hinweis] Alle Artikel verwenden Befehle aus Angular v19*

Das obige ist der detaillierte Inhalt vonNoch ein weiterer Angular-Artikel, Teilekonfigurationen und Umgebungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!