Freigeben über

Tutorial: Erstellen einer ASP.NET Core-App mit Angular in Visual Studio

  • Artikel

In diesem Artikel wird erläutert, wie Sie ein als API-Back-End fungierendes ASP.NET Core-Projekt und ein als Benutzeroberfläche fungierendes Angular-Projekt erstellen.

Derzeit enthält Visual Studio ASP.NET Core-SPA-Vorlagen (Single Page Application), die Angular und React unterstützen. Die Vorlagen stellen einen integrierten Client-App-Ordner in Ihren ASP.NET Core-Projekten bereit, der die Basisdateien und Ordner der einzelnen Frameworks enthält.

Sie können die in diesem Artikel beschriebene Methode verwenden, um Single-Page-Anwendungen von ASP.NET Core zu erstellen, für die Folgendes gilt:

  • Platzieren Sie die Client-App in einem separaten Projekt außerhalb des ASP.NET Core-Projekts.
  • Erstellen Sie das Clientprojekt basierend auf der auf Ihrem Computer installierten Framework-CLI.

Hinweis

In diesem Artikel wird der Projekterstellungsprozess mithilfe der aktualisierten Vorlage in Visual Studio 2022, Version 17.8, beschrieben.

Voraussetzungen

Stellen Sie sicher, dass Sie Folgendes installieren:

  • Visual Studio 2022, Version 17.8 oder höher, mit installierter Workload für ASP.NET und Webentwicklung. Sie können die Visual Studio 2022 Vorschauversion von der Seite Visual Studio-Downloads kostenlos herunterladen und installieren. Wenn Sie die Workload installieren müssen und bereits Visual Studio besitzen, navigieren Sie zu Extras>Extras und Funktionen abrufen… . Dadurch wird der Visual Studio-Installer geöffnet. Klicken Sie auf die Workload ASP.NET und Webentwicklung, und klicken Sie anschließend auf Ändern.
  • npm (https://www.npmjs.com/), das im Lieferumfang von Node.js enthalten ist
  • Angular CLI (https://angular.io/cli). Sie können die gewünschte Version verwenden.

Erstellen der Front-End-App

  1. Wählen Sie im Startfenster (mit Datei>Startfenster öffnen) die Option Neues Projekt erstellen aus.

    Screenshot showing Create a new project

  2. Suchen Sie in der Suchleiste oben nach Angular, und wählen Sie dann Angular und ASP.NET Core (Vorschau) aus.

    Screenshot showing choosing a template.

  3. Benennen Sie das Projekt AngularWithASP und wählen Sie dann Erstellen aus.

    Der Projektmappen-Explorer zeigt Folgendes:

    Screenshot showing Solution Explorer.

    Im Vergleich zur eigenständigen Angular-Vorlage werden einige neue und geänderte Dateien für die Integration mit ASP.NET Core angezeigt:

    • aspnetcore-https.js
    • proxy.conf.js
    • package.json (geändert)
    • angular.json (geändert)
    • app.components.ts
    • app.module.ts

Festlegen der Projekteigenschaften

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das AngularWithASP.Server-Projekt, und wählen Sie Eigenschaften aus.

    Screenshot showing Open project properties.

  2. Öffnen Sie auf der Eigenschaftenseite die Registerkarte Debuggen, und wählen Sie die Option UI für Debugstartprofile öffnen aus. Deaktivieren Sie die Option Browser starten für das Profil, das nach dem ASP.NET Core-Projekt (oder https, sofern vorhanden) benannt ist.

    Screenshot showing Debug launch profiles UI.

    Dieser Wert verhindert das Öffnen der Webseite mit den Quellwetterdaten.

    Hinweis

    In Visual Studio speichert launch.json die Starteinstellungen, die der Schaltfläche Start in der Debugsymbolleiste zugeordnet sind. launch.json muss unter dem Ordner .vscode liegen.

Starten des Projekts

Drücken Sie zum Starten des Projekts F5 oder klicken Sie oben im Fenster auf die Schaltfläche Starten. Es werden zwei Eingabeaufforderungen angezeigt:

  • Das ausgeführte ASP.NET Core-API-Projekt
  • Die Angular CLI, die den Befehl „ng start“ ausführt

Hinweis

Überprüfen Sie die Konsolenausgabe auf Nachrichten. So könnte beispielsweise eine Meldung zum Aktualisieren von Node.js vorhanden sein.

Die Angular-App wird angezeigt und wird über die API aufgefüllt. Wenn die App nicht angezeigt wird, lesen Sie den Abschnitt Problembehandlung.

Veröffentlichen des Projekts

Ab Visual Studio 2022 17.3 können Sie die integrierte Lösung mit dem Visual Studio-Veröffentlichungstool veröffentlichen.

Hinweis

Um die Veröffentlichung zu verwenden, müssen Sie Ihr JavaScript-Projekt mit Visual Studio 2022 17.3 oder höher erstellen.

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das AngularWithASP.Server-Projekt, und wählen Sie Projektverweis>hinzufügen aus.

    Stellen Sie sicher, dass das Projekt angularwithasp.client ausgewählt ist.

  2. Klicken Sie auf OK.

  3. Klicken Sie erneut mit der rechten Maustaste auf das ASP.NET Core Projekt, und wählen Sie Projektdatei bearbeiten aus.

    Dadurch wird die CSPROJ-Datei für das Projekt geöffnet.

  4. Aktualisieren Sie in der .csproj-Datei den Projektverweis, und fügen Sie das Element <ReferenceOutputAssembly> mit dem Wert false hinzu.

    Dieser Verweis sollte wie folgt aussehen.

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

  5. Klicken Sie mit der rechten Maustaste auf das ASP.NET Core-Projekt, und wählen Sie dann Projekt neu laden aus, wenn diese Option verfügbar ist.

  6. Stellen Sie in Program.cs sicher, dass der folgende Code vorhanden ist.

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

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

  7. Klicken Sie zum Veröffentlichen mit der rechten Maustaste auf das ASP.NET Core-Projekt, und wählen Sie Veröffentlichen und dann die Optionen für das gewünschte Veröffentlichungsszenario (z. B. in Azure oder in einem Ordner) aus.

    Der Veröffentlichungsprozess dauert länger als für ein gewöhnliches ASP.NET Core-Projekt, da der Befehl npm run build beim Veröffentlichen aufgerufen wird. BuildCommand führt npm run build standardmäßig aus.

Problembehandlung

Proxyfehler

Es wird möglicherweise der folgende Fehler angezeigt:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Wenn dieses Problem angezeigt wird, wurde das Front-End wahrscheinlich vor dem Back-End gestartet. Sobald die Back-End-Eingabeaufforderung ausgeführt wird, aktualisieren Sie einfach die Angular-App im Browser.

Überprüfen des Ports

Wenn die Wetterdaten nicht ordnungsgemäß geladen werden, müssen Sie möglicherweise auch überprüfen, ob Sie die richtigen Ports verwenden.

  1. Wechseln Sie zur Datei launchSettings.json in Ihrem ASP.NET Core-Projekt (im Ordner Eigenschaften). Rufen Sie die Portnummer aus der applicationUrl-Eigenschaft ab.

    Wenn mehrere applicationUrl-Eigenschaften vorhanden sind, suchen Sie mit einem https-Endpunkt nach einer. Dies sollte in etwa wie folgt aussehen: https://localhost:7049.

  2. Navigieren Sie dann zur Datei proxy.conf.js für Ihr Angular-Projekt (siehe src-Ordner). Aktualisieren Sie die Zieleigenschaft, sodass sie mit der applicationUrl-Eigenschaft in launchSettings.json übereinstimmt. Nach der Aktualisierung sollte der Wert in etwa so aussehen:

    target: 'https://localhost:7049',

Nächste Schritte

Weitere Informationen zu SPA-Anwendungen in ASP.NET Core finden Sie im Abschnitt „Angular“ unter Entwickeln von Single-Page-Apps. Der verlinkte Artikel bietet zusätzlichen Kontext für Projektdateien wie aspnetcore-https.js und proxy.conf.js, auch wenn sich die Details der Implementierung aufgrund der Unterschiede zwischen den Projektvorlagen unterscheiden. Beispielsweise befinden sich die Angular-Dateien nicht in einem ClientApp-Ordner, sondern in einem separaten Projekt.

Für das Clientprojekt spezifische MSBuild-Informationen finden Sie unter MSBuild-Eigenschaften für JSPS.