SPA mit ASP.NET Core und Angular

Vorbereitungen treffen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Damit Sie in Ihr ASP.NET-MVC-Core-Projekt eine Angular-App integrieren können, müssen Sie einige vorbereitende Arbeiten durchführen.
04:51

Transkript

In meinem ASP.NET-MVC-Core-Projekt, welches ich auf Basis der Web-API-Projektvorlage angelegt habe, möchte ich nun gerne eine Angular-App integrieren. Dazu gibt es einige vorbereitende Arbeiten, die ich durchführen muss, zum einen weil Angular spezielle Anforderungen hat, zum anderen weil ich als Vorlage das Web-API-Projekt benutzt habe und nicht das Web-Anwendungsprojekt. Anfangen möchte ich mit der Installation einer neuen Abhängigkeit. Ich öffne dazu den NuGet-Paket-Manager und werde nun das Paket Microsoft. AspnetCoreStatic Files installieren. Hintergrund ist, dass die Angular-Dateien, die ich später ausführen möchte, es sind ja ganz normale JavaScript-Dateien, das sind HTML-Dateien, also statische Dateien, und standardmäßig kann Asp.NetCore keine statischen Dateien ausliefern, dazu müssen wir eine Erweiterung installieren, die wird zum Beispiel automatisch bei der Web-Projektvorlage mitinstalliert, bei der Web-API-Vorlage allerdings nicht. Darum muss ich dieses Paket jetzt einmal nachinstallieren. Es geht auch relativ flott die Installation. Nach der Installation muss ich dann außerdem noch meine Webseite entsprechend konfigurieren und zwar konfigurieren für die Nutzung von statischen Dateien. Dazu gehe ich hier in diesen unteren Bereich und vor app.UseMvc schreibe ich nun app.useStaticFiles. Damit ist Asp.NetCore in der Lage, statische Dateien in diesem wwwroot-Ordner liegen werden, auszuliefern. Das nächste, was ich nun noch einstellen werde, ist dass ich konfiguriere, dass automatisch Standarddokumente benutzt werden können, bedeutet wenn ich auf die Route einer Seite gehe, zum Beispiel www.meinedomain.de, danach nichts mehr angebe, also in diesem Fall automatisch die index.htm, index.html, default.htm oder default.html benutzt werden kann. Und dazu muss ich die Erweiterungsmethode DefaultFiles und diese muss ich vor app.UseStaticFiles aufrufen. NuGet führt die dann dazu, dass ich halt eben eine index.html ausführen kann, auch wenn ich sie nicht direkt aufrufe. So, das waren schon mal zwei der vorbereitenden Maßnahmen, eine weitere ist, dass ich den TypeScript-Compiler für dieses Projekt von Visual Studio deaktivieren möchte. Hintergrund ist, dass ich später das Angular Command Line Interface für die Kompilierung von TypeScript nutzen möchte und nicht Visual Studio. Bedeutet ich muss das einmal deaktivieren. Dazu bearbeite ich meine Projektdatei. Ich öffne also das Kontextmenü und wähle dann hier, dass die csproj-Datei bearbeitet werden soll. Früher in älteren Visual -Studio-Versionen müssten Sie übrigens das Projekt erst entladen und dann konnten Sie das bearbeiten. Ab Visual Studio 2017 können Sie das aber auch direkt über das Kontextmenü auswählen. Hier oben in dem Bereich der PropertyGroup, in der mein TargetFramework konfiguriert wird, werde ich jetzt einen neuen Eintrag einfügen und der heißt TypeScriptCompileBlocked. Und den stelle ich auf den Wert true. So, diese Einstellungen reichen bereits, um mein Projekt vorzubereiten. Die Schritte waren also, dass ich zum einen ein neues Paket installiert habe, nämlich das Paket AspNetCoreStaticFiles vom Microsoft. Das erlaubt es mir, dass statische Dateien, also solche die nicht dynamisch zur Laufzeit generiert werden, aus dem wwwroot-Ordner später auch vom Webserver herausgegeben werden. Neben der Installation dieses Pakets, war es dann wichtig auch die Nutzung des Pakets zu konfigurieren und das geht in der Klasse Startup, hier in der Methode Configure über den Aufruf von app.UseStaticFiles. Wichtig der muss vor appUseMvc stehen und davor muss da noch app.UseDefaultFiles stehen, wenn ich in der Lage sein möchte, Standarddateien wie die index.html oder so ähnliches ausliefern zu können. Ich gehe deswegen so stark darauf ein, weil eine Angular-Anwendung später eine Datei index.html beinhalten wird, die wir dann ausliefern möchten. Eine weitere Änderung, die ich durchführen möchte, war, dass ich die Projektdatei bearbeitet habe und hier den Typescript-Compiler deaktiviert habe, über den Eintrag TypeScriptCompileBlocked ist true. Nur dadurch ist sichergestellt, dass Visual Studio die TypeScript-Dateien nicht mehr kompilieren wird, sondern erst das Angular Command Line Interface das später übernehmen wird.

SPA mit ASP.NET Core und Angular

Lernen Sie die Bestandteile von modernen Webanwendungen kennen und nutzen.

5 Std. 21 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:25.09.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!