Angular & ASP.NET Core: Nahtlose Integration in VS

In der heutigen schnelllebigen Welt der Webentwicklung suchen Entwickler ständig nach Wegen, robuste und skalierbare Anwendungen zu erstellen, die sowohl eine beeindruckende Benutzeroberfläche als auch eine leistungsstarke Backend-Logik bieten. Die Kombination von Angular, einem führenden Frontend-Framework für Single Page Applications (SPAs), und ASP.NET Core, einem vielseitigen und hochperformanten Backend-Framework von Microsoft, bietet eine solche Synergie. Visual Studio, als integrierte Entwicklungsumgebung (IDE), vereinfacht diesen Prozess erheblich, indem es spezielle Vorlagen und Werkzeuge zur Verfügung stellt, die die Integration dieser beiden Technologien nahtlos gestalten.

Dieser Artikel führt Sie durch den gesamten Prozess der Erstellung einer ASP.NET Core Angular-Anwendung in Visual Studio. Von den notwendigen Voraussetzungen über die Projekterstellung bis hin zur Konfiguration und Fehlerbehebung decken wir alle wichtigen Schritte ab, damit Sie Ihre integrierte Webanwendung erfolgreich entwickeln und bereitstellen können.

Warum Angular mit ASP.NET Core? Die Vorteile einer leistungsstarken Kombination

Die Entscheidung, Angular und ASP.NET Core zusammen zu verwenden, ist oft eine strategische Wahl für Projekte, die sowohl eine reaktionsschnelle, moderne Benutzeroberfläche als auch ein robustes, sicheres und skalierbares Backend benötigen. Hier sind einige der Hauptvorteile:

• Trennung der Anliegen: Durch die separate Entwicklung von Frontend (Angular) und Backend (ASP.NET Core) können Teams effizienter arbeiten. Frontend-Entwickler können sich auf die Benutzeroberfläche konzentrieren, während Backend-Entwickler die API und Geschäftslogik implementieren.
• Leistungsstarke APIs: ASP.NET Core ist bekannt für seine hohe Leistung und Skalierbarkeit, was es zu einer ausgezeichneten Wahl für die Bereitstellung von APIs macht, die von Ihrer Angular-Anwendung genutzt werden.
• Entwicklerproduktivität: Visual Studio bietet hervorragende Unterstützung für beide Frameworks, einschließlich intelligenter Code-Vervollständigung, Debugging-Tools und Projektvorlagen, die den Entwicklungsprozess beschleunigen.
• Sicherheit: ASP.NET Core bietet integrierte Sicherheitsfunktionen, die einfach in Ihre Anwendung integriert werden können, um Daten und Benutzer zu schützen.
• Community und Ökosystem: Beide Frameworks verfügen über große, aktive Communities und umfangreiche Ökosysteme an Bibliotheken und Tools, die bei der Lösung von Problemen und der Erweiterung von Funktionalitäten helfen.

Voraussetzungen für den Start Ihres Projekts

Bevor Sie mit der Erstellung Ihrer integrierten Anwendung beginnen, stellen Sie sicher, dass Ihr Entwicklungssystem die folgenden Voraussetzungen erfüllt:

• Visual Studio 2022 (Version 17.8 oder höher): Installieren Sie die Arbeitslast „ASP.NET und Webentwicklung“. Sie können dies über den Visual Studio Installer überprüfen oder hinzufügen (Extras > Tools und Features abrufen...).
• Node.js und npm: Node.js ist eine Laufzeitumgebung, die für die Ausführung von JavaScript außerhalb des Browsers erforderlich ist, und npm (Node Package Manager) ist der Standard-Paketmanager für Node.js. Beide sind für die Ausführung und das Builden von Angular-Anwendungen unerlässlich. Sie können Node.js von der offiziellen Website herunterladen.
• Angular CLI: Die Angular Command Line Interface (CLI) ist ein leistungsstarkes Werkzeug zur Initialisierung, Entwicklung, Wartung und Fehlersuche von Angular-Anwendungen. Sie installieren es global über npm mit dem Befehl npm install -g @angular/cli. Die Version der Angular CLI auf Ihrem System bestimmt die Angular-Version, die in Ihrem Frontend-Projekt verwendet wird.

Ihr erstes Projekt erstellen: Eine Schritt-für-Schritt-Anleitung in Visual Studio

Visual Studio vereinfacht die Erstellung eines integrierten Angular- und ASP.NET Core-Projekts erheblich. Folgen Sie diesen Schritten:

1. Öffnen Sie Visual Studio.
2. Wählen Sie im Startfenster die Option „Neues Projekt erstellen“.
3. Geben Sie im Suchfeld oben „Angular“ ein. Wählen Sie die Vorlage „Angular und ASP.NET Core“ aus den Suchergebnissen aus und klicken Sie auf „Weiter“.
4. Geben Sie Ihrem Projekt einen Namen, zum Beispiel „AngularWithASP“, und wählen Sie einen Speicherort aus. Klicken Sie anschließend auf „Weiter“.
5. Im Dialogfeld „Zusätzliche Informationen“ stellen Sie sicher, dass die Option „Für HTTPS konfigurieren“ aktiviert ist. Dies ist für die sichere Kommunikation zwischen Frontend und Backend wichtig. Die anderen Einstellungen können Sie in den meisten Fällen auf den Standardwerten belassen. Klicken Sie auf „Erstellen“.

Visual Studio erstellt nun eine neue Projektmappe, die zwei separate Projekte enthält: ein ASP.NET Core-Backend-Projekt (z.B. AngularWithASP.Server) und ein Angular-Frontend-Projekt (z.B. angularwithasp.client). Im Projektmappen-Explorer sehen Sie, dass das Client-Projekt nicht mehr in einem ClientApp-Ordner innerhalb des Server-Projekts liegt, sondern als eigenständiges Projekt existiert. Dies fördert eine klarere Trennung und erleichtert die Verwaltung.

Wichtige Projektdateien verstehen

Nach der Erstellung des Projekts werden Sie einige neue und geänderte Dateien bemerken, die für die Integration mit ASP.NET Core wichtig sind:

• proxy.conf.js: Diese Datei im Angular-Projekt konfiguriert den Proxy-Server von Angular, um Anfragen an das ASP.NET Core-Backend weiterzuleiten. Dies ist entscheidend, um Cross-Origin Resource Sharing (CORS)-Probleme während der Entwicklung zu vermeiden.
• aspnetcore-https.js: Eine Hilfsdatei, die die HTTPS-Entwicklung für das ASP.NET Core-Backend unterstützt.
• package.json (geändert) und angular.json (geändert): Diese Dateien enthalten Konfigurationen und Abhängigkeiten, die für die Zusammenarbeit der beiden Projekte angepasst wurden.

Projekteinstellungen konfigurieren: Debugging und Startverhalten

Für eine reibungslose Entwicklung ist es wichtig, die Starteinstellungen Ihrer Projektmappe korrekt zu konfigurieren:

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das ASP.NET Core-Serverprojekt (z.B. AngularWithASP.Server) und wählen Sie „Eigenschaften“.
2. Navigieren Sie auf der Eigenschaftenseite zum Tab „Debuggen“ und wählen Sie die Option „Debug-Startprofile-Benutzeroberfläche öffnen“.
3. Deaktivieren Sie die Option „Browser starten“ für das Profil „https“ oder das Profil, das nach Ihrem ASP.NET Core-Projekt benannt ist. Dies verhindert, dass Ihr Browser automatisch die Backend-API-URL öffnet, die oft nur Rohdaten anzeigt und nicht die vollständige Angular-Anwendung.
4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektmappe (die oberste Ebene) und wählen Sie „Eigenschaften“.
5. Vergewissern Sie sich, dass unter „Starteinstellungen für Projekte“ die Option „Mehrere Startprojekte“ ausgewählt ist.
6. Stellen Sie sicher, dass die Aktion für beide Projekte (Ihr ASP.NET Core-Serverprojekt und Ihr Angular-Clientprojekt) auf „Starten“ eingestellt ist. Es ist auch ratsam, das Backend-Projekt vor dem Frontend-Projekt starten zu lassen, um Proxy-Fehler zu vermeiden. Verwenden Sie die Pfeiltasten, um die Reihenfolge bei Bedarf anzupassen.

Diese Konfiguration stellt sicher, dass beim Starten der Anwendung (z.B. durch Drücken von F5) sowohl das ASP.NET Core-Backend als auch die Angular-Entwicklungsserver gleichzeitig gestartet werden.

Die Anwendung starten und testen

Nachdem Sie die Projekteinstellungen konfiguriert haben, können Sie Ihre Anwendung starten:

Drücken Sie F5 oder klicken Sie auf die Schaltfläche „Starten“ oben im Visual Studio-Fenster.

Es sollten zwei Befehlsaufforderungsfenster erscheinen:

• Das eine zeigt das laufende ASP.NET Core API-Projekt an.
• Das andere zeigt die Angular CLI an, die den Befehl ng serve (oder ng start) ausführt, um den Angular-Entwicklungsserver zu starten.

Kurz darauf sollte die Angular-Anwendung in Ihrem Standardbrowser geöffnet werden. Wenn Sie die Standardvorlage verwendet haben, sehen Sie möglicherweise eine Beispielanwendung, die Wettervorhersagedaten von Ihrem ASP.NET Core-Backend abruft und anzeigt. Dies bestätigt, dass die Kommunikation zwischen Frontend und Backend erfolgreich hergestellt wurde.

Projekt veröffentlichen: Bereitstellung Ihrer integrierten Anwendung

Die Veröffentlichung einer integrierten Angular- und ASP.NET Core-Anwendung in Visual Studio 2022 (ab Version 17.3) ist ebenfalls ein optimierter Prozess:

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das ASP.NET Core-Serverprojekt (z.B. AngularWithASP.Server) und wählen Sie „Hinzufügen“ > „Projektverweis“. Stellen Sie sicher, dass Ihr Angular-Clientprojekt (z.B. angularwithasp.client) ausgewählt ist, und klicken Sie auf „OK“.
2. Klicken Sie erneut mit der rechten Maustaste auf das ASP.NET Core-Projekt und wählen Sie „Projektdatei bearbeiten“.
3. Stellen Sie in der .csproj-Datei sicher, dass der Projektverweis auf Ihr Angular-Clientprojekt ein <ReferenceOutputAssembly>-Element mit dem Wert false enthält. Dies ist wichtig, damit das Client-Projekt nicht als DLL in das Server-Projekt kompiliert wird, sondern seine Build-Ausgabe in den Veröffentlichungsordner kopiert wird. Der Verweis sollte etwa so aussehen:

   <ProjectReference Include="..\angularwithasp.client\angularwithasp.client.esproj"> <ReferenceOutputAssembly>false</ReferenceOutputAssembly> </ProjectReference>

4. Überprüfen Sie in Ihrer Program.cs-Datei (oder Startup.cs, je nach .NET Core-Version), dass die Middleware für statische Dateien vorhanden ist:

   app.UseDefaultFiles(); app.UseStaticFiles();

   Diese Zeilen stellen sicher, dass die gebuildeten Angular-Dateien vom Webserver bereitgestellt werden können.

5. Klicken Sie mit der rechten Maustaste auf das ASP.NET Core-Projekt, wählen Sie „Veröffentlichen“ und wählen Sie die gewünschten Veröffentlichungsoptionen (z.B. Azure, Ordner, IIS).

Der Veröffentlichungsprozess dauert länger als bei einem reinen ASP.NET Core-Projekt, da der npm run build-Befehl für Ihr Angular-Projekt während der Veröffentlichung aufgerufen wird. Dieser Befehl erstellt die optimierten, produktionsbereiten statischen Dateien Ihrer Angular-Anwendung, die dann in den Veröffentlichungsordner des ASP.NET Core-Projekts kopiert werden.

Häufige Probleme und Lösungen (Troubleshooting)

Bei der Entwicklung integrierter Anwendungen können verschiedene Probleme auftreten. Hier sind einige der häufigsten und deren Lösungen:

Häufig gestellte Fragen (FAQ)

Um die häufigsten Unsicherheiten zu klären, haben wir hier einige oft gestellte Fragen und ihre Antworten zusammengefasst:

Was ist eine Single Page Application (SPA)?

Eine Single Page Application (SPA) ist eine Webanwendung, die nur eine einzige HTML-Seite lädt und den Inhalt dynamisch aktualisiert, wenn der Benutzer mit der Anwendung interagiert. Im Gegensatz zu traditionellen Webanwendungen, bei denen für jede neue Ansicht eine vollständige Seitenaktualisierung erforderlich ist, bieten SPAs ein flüssigeres, Desktop-ähnliches Benutzererlebnis. Angular ist eines der führenden Frameworks zum Erstellen von SPAs.

Benötige ich Visual Studio Code oder Visual Studio?

Für die in diesem Artikel beschriebene Methode zur Erstellung eines integrierten Angular- und ASP.NET Core-Projekts mit den spezifischen Vorlagen und der automatischen Konfiguration ist Visual Studio (die vollständige IDE) erforderlich. Visual Studio Code ist ein leichterer Code-Editor, der zwar auch für die Entwicklung beider Technologien hervorragend geeignet ist, aber nicht die gleichen integrierten Projektvorlagen und Startfunktionen bietet, die Visual Studio für dieses Setup bereitstellt.

Kann ich React statt Angular verwenden?

Ja, Visual Studio unterstützt ebenfalls die Erstellung von ASP.NET Core React-Projekten mit ähnlichen Vorlagen und Integrationsmechanismen. Die Schritte zur Erstellung und Konfiguration sind sehr ähnlich, wobei React CLI anstelle von Angular CLI verwendet wird und die spezifischen React-Projektdateien die Angular-Dateien ersetzen.

Wie aktualisiere ich Node.js oder Angular CLI?

Es ist wichtig, Ihre Entwicklungsumgebung auf dem neuesten Stand zu halten. Sie können Node.js aktualisieren, indem Sie die neueste Version von der offiziellen Website herunterladen und installieren. Die Angular CLI können Sie global über npm aktualisieren, indem Sie den Befehl npm update -g @angular/cli in Ihrer Kommandozeile ausführen. Stellen Sie sicher, dass Sie alle erforderlichen Vorrausetzungen regelmäßig überprüfen.

Was sind die nächsten Schritte nach der Projekterstellung?

Nachdem Sie Ihr Projekt erfolgreich erstellt und gestartet haben, können Sie mit der eigentlichen Entwicklung beginnen. Die Angular-Anwendung befindet sich im angularwithasp.client-Ordner. Hier können Sie Komponenten, Services und Routen hinzufügen. Das ASP.NET Core-Backend im AngularWithASP.Server-Projekt kann um neue API-Endpunkte, Datenbankzugriffe und Authentifizierungslogik erweitert werden. Die nahtlose Integration ermöglicht es Ihnen, Änderungen in beiden Teilen der Anwendung vorzunehmen und sie gemeinsam zu testen.

Die Integration von Angular und ASP.NET Core in Visual Studio bietet eine leistungsstarke und effiziente Plattform für die Entwicklung moderner Webanwendungen. Mit den richtigen Werkzeugen und einem Verständnis der grundlegenden Konzepte können Sie komplexe Anwendungen mit Leichtigkeit erstellen und bereitstellen. Nutzen Sie die Leistungsfähigkeit dieser Kombination, um Ihre nächsten Projekte zu realisieren und die Produktivität Ihres Teams zu steigern. Happy Coding!

Wenn du andere Artikel ähnlich wie Angular & ASP.NET Core: Nahtlose Integration in VS kennenlernen möchtest, kannst du die Kategorie Wellness besuchen.