Freigeben über

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

  • Artikel

In diesem Artikel erfahren Sie, wie Sie ein ASP.NET Core-Projekt erstellen, um als API-Back-End und als Angular-Projekt als UI zu fungieren.

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

Sie können die in diesem Artikel beschriebene Methode verwenden, um ASP.NET Core Single Page Applications zu erstellen, die:

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

Anmerkung

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 dem installierten ASP.NET- und Webentwicklungs--Workload. Wechseln Sie zur Visual Studio-Downloads Seite, um sie kostenlos zu installieren. Wenn Sie die Workload installieren müssen und bereits über Visual Studio verfügen, wechseln Sie zu Tools>Get Tools and Features..., wodurch der Visual Studio Installer geöffnet wird. Klicken Sie auf die Workload ASP.NET und Webentwicklung, und klicken Sie anschließend auf Ändern.
  • npm (https://www.npmjs.com/), das in Node.js enthalten ist
  • Angular CLI (https://angular.dev/tools/cli), die die Version Ihrer Wahl sein kann. Das Front-End-Projekt wird mit den Framework-CLI-Tools erstellt, die Sie auf Ihrem lokalen Computer installiert haben, sodass die in der Vorlage verwendete Angular-Version bestimmt wird.

Erstellen der Frontend-App

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

    Screenshot mit

  2. Suchen Sie in der Suchleiste oben nach Angular, und wählen Sie dann Angular und ASP.NET Coreaus.

    Screenshot mit der Auswahl einer Vorlage.

  3. Benennen Sie das Projekt AngularWithASP-, und wählen Sie dann Nextaus.

    Stellen Sie im Dialogfeld "Zusätzliche Informationen" sicher, dass Für HTTPS konfigurieren aktiviert ist. Behalten Sie in den meisten Szenarien die anderen Einstellungen bei den Standardwerten bei.

  4. Wählen Sie Erstellen aus.

    Der Projektmappen-Explorer zeigt Folgendes:

    Screenshot mit dem Projektmappen-Explorer.

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

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

    Weitere Informationen zu einigen dieser Projektdateien finden Sie unter Nächste Schritte.

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 mit offenen Projekteigenschaften.

  2. Öffnen Sie auf der Seite "Eigenschaften" die Registerkarte Debuggen und wählen Sie die Option "Benutzeroberfläche zum Öffnen von Debug-Startprofilen" aus. Deaktivieren Sie die Option Browser starten für das https-Profil oder das Profil, das nach dem ASP.NET Core-Projekt benannt ist, falls vorhanden.

    Screenshot der Benutzeroberfläche für Debug-Startprofile.

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

    Anmerkung

    In Visual Studio speichert launch.json die Starteinstellungen, die der Schaltfläche Start auf der Symbolleiste "Debuggen" zugeordnet sind. launch.json muss sich unter dem Ordner .vscode befinden.

  3. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektmappe, und wählen Sie Eigenschaften aus. Stellen Sie sicher, dass die Startprojekteinstellungen auf Mehrere Projekte festgelegt sind und dass die Aktion für beide Projekte auf Start festgelegt ist.

Starten des Projekts

Drücken Sie F5-, oder wählen Sie die Schaltfläche Start oben im Fenster aus, um die App zu starten. Es werden zwei Eingabeaufforderungen angezeigt:

  • Das ASP.NET Core-API-Projekt, das ausgeführt wird
  • Die Angular CLI, die den ng-Startbefehl ausführt

Anmerkung

Überprüfen Sie die Konsolenausgabe auf Nachrichten. Beispielsweise kann es möglicherweise eine Meldung geben, dass Node.jsaktualisiert werden soll.

Die Angular-App wird angezeigt und wird über die API aufgefüllt (der localhost-Port kann vom Screenshot abweichen).

Screenshot der Wettervorhersage-App.

Wenn die App nicht angezeigt wird, lesen Sie den Abschnitt Problembehandlung.

Veröffentlichen des Projekts

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

Anmerkung

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

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

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

  2. Wählen Sie OKaus.

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

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

  4. Stellen Sie in der .csproj Datei sicher, dass der Projektverweis ein <ReferenceOutputAssembly> Element enthält, wobei der Wert auf falsefestgelegt ist.

    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.cssicher, 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, wählen Sie Veröffentlichenaus, und wählen Sie Optionen aus, um Ihrem gewünschten Veröffentlichungsszenario wie Azure, dem Veröffentlichen in einem Ordner usw. zu entsprechen.

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

    Wenn Sie in einem Ordner veröffentlichen, finden Sie unter ASP.NET Core-Verzeichnisstruktur weitere Informationen zu den Dateien, die dem ordner veröffentlichen hinzugefügt wurden.

Fehlerbehebung

Proxyfehler

Möglicherweise wird 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 Frontend wahrscheinlich vor dem Back-End gestartet.

  • Sobald die Back-End-Eingabeaufforderung ausgeführt wird, aktualisieren Sie einfach die Angular-App im Browser.
  • Überprüfen Sie außerdem, ob das Back-End so konfiguriert ist, dass es vor dem Front-End gestartet wird. Um dies zu überprüfen, wählen Sie die Lösung im Projektmappen-Explorer aus und wählen Sie Eigenschaften aus dem Menü Projekt. Wählen Sie als Nächstes Konfigurieren von Startprojekten aus, und stellen Sie sicher, dass das Back-End-ASP.NET Core-Projekt zuerst in der Liste enthalten ist. Wenn dies nicht der erste Schritt ist, wählen Sie das Projekt aus, und verwenden Sie die Nach-OBEN-Taste, um es zum ersten Projekt in der Startliste zu machen.

Port überprüfen

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

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

    Wenn mehrere applicationUrl-Eigenschaften vorhanden sind, suchen Sie mit einem https-Endpunkt nach einer. Es sollte ähnlich aussehen wie https://localhost:7049.

  2. Wechseln Sie dann zur proxy.conf.js Datei für Ihr Angular-Projekt (suchen Sie im Ordner src). Aktualisieren Sie die Zieleigenschaft, sodass sie mit der applicationUrl-Eigenschaft in launchSettings.json übereinstimmt. Wenn Sie ihn aktualisieren, sollte dieser Wert wie folgt aussehen:

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

Docker

Wenn Sie das Projekt mit Docker-Unterstützung aktiviert erstellen, führen Sie die folgenden Schritte aus:

  1. Rufen Sie nach dem Laden der App den Docker HTTPS-Port mithilfe des Fensters Container in Visual Studio ab. Überprüfen Sie die Registerkarte Umgebung oder Ports.

    Screenshot mit Docker-Containerports.

  2. Öffnen Sie die proxy.conf.js Datei für das Angular-Projekt. Aktualisieren Sie die target Variable so, dass sie dem HTTPS-Port im Containerfenster entspricht. Beispiel: Im folgenden Code:

    const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
   env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7209';

    Ändern Sie https://localhost:7209 in den übereinstimmenden HTTPS-Port (in diesem Beispiel https://localhost:62958).

  3. Starten Sie die App neu.

Nächste Schritte

Weitere Informationen zu SPA-Anwendungen in ASP.NET Core finden Sie im Angular-Abschnitt unter Developing Single Page Apps. Der verknüpfte Artikel bietet zusätzlichen Kontext für Projektdateien wie aspnetcore-https.js und proxy.conf.js, obwohl details der Implementierung aufgrund von Projektvorlagenunterschieden unterschiedlich sind. Anstelle eines ClientApp-Ordners sind die Angular-Dateien beispielsweise in einem separaten Projekt enthalten.

MsBuild-Informationen speziell für das Clientprojekt finden Sie unter MSBuild-Eigenschaften für JSPS.