Von einer leeren Dateiordner zu einer laufenden Anwendung: Einrichtung eines modernen Angular 22-Projekts

Bevor Sie in Angular Komponenten, Templates, Services oder Routing erlernen können, benötigen Sie ein Projekt, das tatsächlich auf Ihrem Rechner läuft. Dafür sind einige Werkzeuge sowie ein Scaffold-Befehl und eine Ordnerrahmenstruktur erforderlich, die sich stark von dem unterscheidet, was in vielen älteren Tutorials gezeigt wird. Diese Anleitung führt Sie von einem sauberen Rechner zu einer laufenden Angular 22-Anwendung, erklärt, was jedes Werkzeug bewirkt, und zeigt, wie die generierten Bestandteile miteinander verbunden sind, damit der Rest des Frameworks eine Grundlage hat.

Was Sie vor dem Start benötigen

Eine lokale Angular-Einrichtung basiert auf vier Elementen: Node.js, der Angular CLI, einem Codeeditor (Visual Studio Code ist eine gängige Wahl) und einer Terminal-Anwendung. Es ist nicht notwendig, TypeScript separat zu installieren; bei der Erstellung eines Projekts werden Angular, TypeScript sowie alle anderen erforderlichen Pakete automatisch mitgeliefert.

Die Versionskompatibilität ist wichtig. Zum Zeitpunkt der Erstellung listet die Referenz für die Versionskompatibilität von Angular Node.js v22.22.3 oder neuer als Mindestanforderung für Angular 22 auf, zusammen mit neueren unterstützten Versionen. Diese Anforderungen ändern sich bei neuen Angular-Versionen, daher sollten Sie vor der Installation unbedingt die aktuelle Kompatibilitätsliste auf angular.dev prüfen.

Schritt 1: Node.js und npm installieren

Angular erstellt Browseranwendungen – daher ist die Frage nach der Notwendigkeit eines Server-Seitigen Laufzeitumfelds berechtigt. Die Antwort liegt in den Werkzeugen: Node.js ermöglicht es JavaScript außerhalb des Browsers auszuführen, und sowohl die Angular CLI als auch der Compiler, der Entwicklungsserver sowie die Testwerkzeuge sind JavaScript-Programme, die dies benötigen. Node.js enthält außerdem npm, den Paketmanager, den Angular zur Installation der Abhängigkeiten Ihres Projekts verwendet.

Laden Sie einen Installer von der offiziellen Node.js-Website herunter. Sobald dies abgeschlossen ist, öffnen Sie ein Terminal (oder das Eingabeaufforderungsfenster unter Windows) und überprüfen Sie, ob der Laufzeitumgebungspfad verfügbar ist:

node --version

Die Ausgabe sollte eine Versionszeichenfolge in dieser Form sein:

v22.22.3

Überprüfen Sie anschließend, ob auch npm verfügbar ist:

npm --version

Falls beide Befehle eine Versionsnummer ausgeben, ist die Grundlage gelegt. Widerstehen Sie dem Drang, einfach die vorhandene alte Node.js-Version beizubehalten, nur weil ein älteres Tutorial damit funktioniert hat. Jede große Angular-Version hat ihren eigenen unterstützten Node.js-Bereich, und eine Unvereinbarkeit zeigt sich in der Regel als verwirrende Installations- oder Kompilierfehler anstelle einer klaren Meldung. Tools wie nvm oder fnm erleichtern es, je nach Projekt zwischen verschiedenen Node.js-Versionen zu wechseln, falls mehrere benötigt werden.

Schritt 2: Verstehen, was die Angular CLI tut

Das nächste Werkzeug ist die Angular CLI (Command Line Interface). Sie ist die Hauptmethode, um Angular-Anwendungen zu erstellen und zu verwalten: Sie erstellt neue Projekte, generiert Komponenten und Dienste, startet den Entwicklungsserver, erzeugt Produktionsversionen, führt Tests durch und kümmert sich um viele weitere routinemäßige Aufgaben. Anstatt selbst Dutzende von Dateien manuell zu erstellen und eine Build-Konfiguration einzurichten, lässt man die CLI einen funktionsfähigen, standardmäßigen Ausgangspunkt erstellen und baut anschließend darauf auf.

Schritt 3: Angular CLI global installieren

Installieren Sie die CLI mit npm:

npm install -g @angular/cli@22

Jeder Teil des Befehls hat eine bestimmte Aufgabe. npm install installiert ein Paket. Der Flag -g führt die Installation global durch, wodurch der Befehl aus jedem Verzeichnis ausgeführt werden kann und nicht nur innerhalb eines Projekts. Der Suffix @22 fixiert die Installation auf die Angular 22-Version, sodass Sie eine CLI erhalten, die zur von Ihnen gewünschten Framework-Version passt.

Sobald die Installation abgeschlossen ist, überprüfen Sie sie:

ng version

Das gibt Details zur installierten CLI sowie zu den zugehörigen Paketen an. Beachten Sie, dass der Befehl nicht angular, sondern ng lautet – das ist die ausführbare Datei, die das CLI-Paket in Ihren Pfad aufnimmt. Sie werden diesen Befehl ständig eingeben müssen:

ng

Eine praktische Anmerkung: Sobald ein Projekt existiert, enthält seine package.json-Datei auch eine lokale Kopie der CLI, und das Ausführen von ng innerhalb des Projektverzeichnisses verwendet diese lokale Version. Die globale Installation dient hauptsächlich dazu, ng new ausführen zu können, bevor ein Projekt vorhanden ist.

Schritt 4: Ihr erstes Anwendungsprojekt erstellen

Gehen Sie ins Verzeichnis, in dem Sie Ihre Projekte speichern, zum Beispiel:

cd Desktop

Fragen Sie anschließend die CLI, ein neues Anwendungsprojekt zu erstellen:

ng new my-first-angular-app

Der letzte Parameter, my-first-angular-app, wird zum Namen des Projekts und der Verzeichnisstruktur; jeder gültige Name ist möglich. ng new ist interaktiv, wodurch es möglicherweise einige Fragen zur Konfiguration des Projekts stellt, beispielsweise welches Stylesheet-Format verwendet werden soll. Die genauen Anfragen ändern sich mit der Weiterentwicklung von Angular – überraschen Sie sich daher nicht, wenn Ihre abweichen von denen auf Screenshots oder älteren Anleitungen.

Für ein erstes Projekt ist es eine sinnvolle Entscheidung, die empfohlenen Standardwerte zu verwenden. Die aktuellen Standardwerte erzeugen eine Anwendung auf der Grundlage der standalone API und verwenden die kürzere, moderne Dateinamenskonvention, die Sie gleich sehen werden. Nach Abschluss des Befehls existiert ein neuer Ordner:

my-first-angular-app/

Gehen Sie in diesen Ordner ein:

cd my-first-angular-app

Schritt 5: Orientierung in den generierten Dateien

Öffnen Sie den Ordner in Ihrem Editor. Ein frisch generiertes Projekt sieht ungefähr so aus:

my-first-angular-app/
│
├── .vscode/
│
├── node_modules/
│
├── public/
│
├── src/
│   ├── app/
│   │   ├── app.ts
│   │   ├── app.html
│   │   ├── app.css
│   │   └── app.spec.ts
│   │
│   ├── index.html
│   ├── main.ts
│   └── styles.css
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

Kurze Einführung in die wichtigsten Dateien:

• src/main.ts ist der Einstiegspunkt, der die Anwendung startet.
• src/index.html ist die einzige HTML-Seite, die vom Browser geladen wird; Angular rendernt darin den Inhalt.
• src/styles.css enthält globale Styles, die in der gesamten Anwendung angewendet werden.

src/app/ enthält das Wurzelkomponente, die in app.ts (die TypeScript-Klasse), app.html (ihres Templates), app.css (Stile, die auf diese Komponente beschränkt sind) sowie app.spec.ts (ihren Unit-Test) unterteilt ist.

public/ enthält statische Ressourcen, die unverändert bereitgestellt werden.

angular.json konfiguriert, wie die CLI das Projekt erstellt, bereitstellt und testet.

package.json listet Abhängigkeiten und npm-Skripte auf; node_modules/ ist der Ort, an dem npm sie installiert hat.

tsconfig.json konfiguriert den TypeScript-Kompilator.

Ihnen ist es noch nicht notwendig, jeden Dateiinhalt zu verstehen. Es reicht aus, zu wissen, wo der Einstiegspunkt, die Wurzelkomponente und die Konfiguration liegen, um mit der Arbeit zu beginnen.

Schritt 6: Den Entwicklungsserver starten

Von innerhalb des Projektverzeichnisses aus starten Sie die Anwendung:

ng serve

Die CLI kompiliert die Anwendung und startet einen lokalen Entwicklungsserver. Zudem überwacht sie die Quelldateien und baut diese neu auf, sobald sich eine ändert. Wenn der Build abgeschlossen ist, sehen Sie Ausgaben im folgenden Stil:

Application bundle generation complete.
Local: http://localhost:4200/

Öffnen Sie diese Adresse in Ihrem Browser:

http://localhost:4200

Die Standard-Startseite sollte angezeigt werden. Wenn Sie die URL nicht jedes Mal eingeben möchten, fügen Sie den Flag --open hinzu – die CLI wird dann Ihren Standardbrowser für Sie starten:

ng serve --open

Falls Port 4200 bereits von einem anderen Prozess belegt ist, können Sie mit der Option --port einen anderen Port auswählen.

Schritt 7: Änderung vornehmen und den Neubau beobachten

Um zu beweisen, dass der gesamte Kreislauf funktioniert, bearbeiten Sie das Template der Wurzelkomponente:

src/app/app.html

Ersetzen Sie alles in dieser Datei durch einen kurzen Markup-Abschnitt:

<h1>Hello Angular 22!</h1>
<p>
  My first Angular application is running successfully.
</p>

Speichern Sie den Inhalt und wechseln Sie anschließend wieder zum Browser. Die Seite aktualisiert sich automatisch. Da der Entwicklungsserver Ihre Dateien überwacht und bei Änderungen neu kompiliert, ist es bei normalen Quellcode-Änderungen nie notwendig, ng serve anzuhalten und neu zu starten. Änderungen an Konfigurationsdateien wie angular.json sind die Ausnahme und erfordern in der Regel einen Neustart.

Ausgabe von Werten aus der Komponentenklasse

Statisches Markup ist nur die halbe Miete. Erweitern Sie nun das Template, damit es auch Werte aus der Komponente anzeigt. Die doppelten geschweiften Klammern sind Platzhalter, die Angular aus der Klasse einfügt:

<div class="container">
<h1>{{ title }}</h1>
  <p>{{ message }}</p>
  <h1>Hello Angular 22!</h1>
  <p>
    My first Angular application is running successfully.
  </p>
</div>

Damit diese Platzhalter gelöst werden können, benötigt die Komponentenklasse in app.ts entsprechende Eigenschaften. Der @Component-Decorator teilt Angular mit, dass es sich um eine Komponente handelt, in welchen Tag sie rendernt wird (app-root, das bereits in index.html vorhandene Element), sowie wo sich ihr Template und ihre Styles befinden:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  title = 'My First Angular 22 App';
  message = 'Angular project is running successfully!';
}

Sobald beide Dateien gespeichert sind, zeigt die Seite den Titel und die Nachricht der Klasse über dem statischen Inhalt an. Je nach genauer CLI-Version kann das erzeugte app.ts leicht anders aussehen (neuere Vorlagen verwenden manchmal Signale für den Titel), doch eine einfache Klassen-Eigenschaft wie diese funktioniert zu Lernzwecken auf dieselbe Weise. Wenn Sie vor der Installation etwas ausprobieren möchten, läuft eine StackBlitz-Version dieses Beispiels vollständig im Browser.

Wie die Komponenten beim Start miteinander verbunden sind

Bei einer laufenden Anwendung hilft es, den Pfad vom Browser zu Ihrer Vorlage zu sehen:

Browser
                   │
                   ▼
              index.html
                   │
                   ▼
                main.ts
                   │
                   ▼
              App Component
                   │
          ┌────────┴────────┐
          ▼                 ▼
       app.html          app.css
       (HTML)             (CSS)

Der Browser lädt index.html hoch. Die mitgelieferten Skripte führen main.ts aus, den Eingangspunkt der Anwendung, der das Root-Komponente initialisiert. Diese Komponente verknüpft ihre Klasse mit ihrem HTML-Template sowie ihren Styles, rendernt das Ergebnis im Element app-root und hält von da an die Benutzeroberfläche im Einklang, sobald sich die Daten der Komponente ändern. Dieses Bild ist absichtlich vereinfacht, gibt Ihnen aber eine mentale Übersicht, an die Sie späterere Themen anknüpfen können.

Ein minimales Beispiel für Datenbindung

Hier ist die kleinste, nutzbare Version dieser Idee. Die Komponentenklasse definiert eine einzige Eigenschaft:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  title = 'My First Angular App';
}

und das Template bezieht sich darauf:

<h1>{{ title }}</h1>
<p>
  Welcome to my Angular 22 journey!
</p>

Zwei Zeilen erfassen das gesamte Konzept. In der TypeScript-Klasse gibt es eine Eigenschaftszuweisung:

title = 'My First Angular App';

und im Template befindet sich eine Interpolationsausdruck:

{{ title }}

Angular liest den Wert aus der Klasse und fügt ihn in das gerenderte HTML ein. Das ist Interpolation, die einfachste Form von Angulars Datenbindung. Wenn Sie später title aufgrund von Benutzereingaben oder Daten vom Server ändern, aktualisiert Angular die Seite für Sie. Eigenschaftsbindung, Ereignisbindung und zweistufige Bindung basieren auf demselben Prinzip und verdienen eine eigene ausführliche Erklärung.

Warum ältere Tutorials anders aussehen

Falls Sie nach Angular-Tutorials suchen, finden Sie schnell Projekte mit einer anderen Struktur. Ein älterer Leitfaden zeigt in der Regel Dateien wie diese:

app.component.ts
app.component.html
app.component.css
app.module.ts

während ein mit der heutigen CLI generiertes Projekt Folgendes enthält:

app.ts
app.html
app.css

Und oft gibt es überhaupt kein app.module.ts. Das Framework hat sich im Laufe der Jahre erheblich verändert. Moderne Angular-Versionen verwenden standardmäßig eigenständige APIs: Komponenten deklarieren ihre eigenen Abhängigkeiten direkt, sodass neue Anwendungen selten eine NgModule benötigen, um sie zu gruppieren. Die aktuelle CLI erzeugt eigenständige Anwendungen und folgt standardmäßig bereits den neueren, kürzeren Benennungskonventionen.

Das macht älteren Code nicht falsch. Viele Produktivanwendungen verwenden weiterhin Module sowie die längeren .component.ts-Namen, und beide Ansätze werden unterstützt. Beim Lernen ist jedoch die Kombination beider Herangehensweisen eine häufige Quelle für Verwirrung. Wenn ein Tutorial vorschreibt, app.module.ts zu bearbeiten, Ihr Projekt jedoch keinen solchen Dateiinhalt enthält, arbeiten Sie mit dem älteren Stil – in diesem Fall sollten Sie nach einer eigenständigen Entsprechung suchen, anstatt die Datei manuell zu erstellen.

Zusammenfassung

Die Angular CLI macht die Projekt-Einrichtung zu einer kurzen, wiederholbaren Routine. Sobald Sie dies einmal durchgeführt haben, sieht der gesamte Ablauf wie folgt aus:

• Installieren Sie eine Node.js-Version, die von Ihrer Angular-Version unterstützt wird, und überprüfen Sie node sowie npm.
• Installieren Sie die CLI mit npm install -g @angular/cli@22 und bestätigen Sie die Installation mit ng version.

Erstellen Sie ein Projekt mit ng new, wobei Sie die Standardeinstellungen für eine erste Anwendung übernehmen.

Lernen Sie main.ts, index.html, die app.*-Dateien, angular.json sowie package.json kennen.

Führen Sie ng serve aus (optional mit --open) und verlassen Sie sich auf automatische Neubuilds während der Bearbeitung.

Betrachten Sie Tutorials, die auf NgModule-Strukturen und .component.ts-Dateien basieren, als ältere Vorgehensweise und wandeln Sie sie in standalone-APIs um.

Es ist nicht notwendig, bereits am ersten Tag jedes generierten Dateis verständen zu können. Wichtig ist, dass Sie ein funktionsfähiges Angular 22-Projekt haben und wissen, wo sich seine wichtigsten Bestandteile befinden – das bildet die Grundlage für ein tieferes Verständnis von Komponenten, Templates und Datenbindung.