Mit Hilfe des in Visual Studio integrierten Beispiels für "ASP.NET Core mit Angular" kann mit wenigen Mausklicks eine Angular SPA-Applikation mit ASP.NET Core Backend erstellt werden. Die Demo-Applikation dieser Vorlage beinhaltet alle notwendigen Backend und Frontendmodule bzw. Templates für eine einfache Applikation inklusive Authentifizierung: Registrierung, Anmeldung, Userlogin. Das Beispiel verwendet die veraltete Angular Version 8, wir haben Angular auf Version 12 upgedated.

Als zusätzliche Sicherheit könnte auch eine Zweifaktor-Authentizierung verwendet werden:

Die registrierten Benutzer werden in der angegebenen SQL-Datenbank hinterlegt.

Voraussetzungen

• MS SQL Server Express

• Visual Studio Community visualstudio.microsoft.com/de/free-developer-offers/
  
• nodejs

Neues Projekt erstellen

Beim Starten von Visual Studio kann über den Menüpunkt "Neues Projekt erstellen" eine fertige Applikation von einer Vorlage erstellt werden:

Als Beispiel: "ASP.NET Core mit Angular", also ASP.NET Core Backend, optional inklusive Authentifierung und als Frontend Angular:

Angular App starten

Vor dem Start der Applikation sollte die SQL-Datenbank angelegt werden, dazu in der Paket Manager-Konsole den Befehl "Update-Database" ausführen:

PM> Update-Database
Build started...
Build succeeded.
Done.
PM> 

Der Start der Applikation Backend und Frontend erfolgt mittels

Alternativ kann die Applikation mit dem Befehl "dotnet run" gestartet werden

PS C:\temp\netcore-angular\Angular> dotnet run
info: IdentityServer4.Startup[0]
      Starting IdentityServer4 version 4.1.0+5a4433f83e8c6fca7d8979141fa5a92684ad56f6
info: IdentityServer4.Startup[0]
      Using explicitly configured authentication scheme Identity.Application for IdentityServer
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\temp\netcore-angular\Angular

Der Aufruf der Applikation erfolgt über https://localhost:5001:

DB-Fehler beim Registrieren:

A database operation failed while processing the request.

SqlException: Cannot open database "aspnet-Angular-53bc9b9d-9d6a-45d4-8429-2a2761773502" requested by the login. The login failed. Login failed for user '???'.

Datenbank

Nach erfolgreicher Migration wird eine Datenbank auf dem lokal installierten SQL-Server erstellt und die entsprechenden Tabellen angelegt:

siehe auch: docs.microsoft.com/en-us/aspnet/core/security/authentication/social/?view=aspnetcore-5.0&tabs=visual-studio

Angular Version 8 Update

Eigentlich wollte ich nur die Angular DevTools installieren, damit ich die Applikation im Browser debuggen kann: chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh. Dabei habe ich bemerkt, dass für das Beispiel - mit Stand August 2021- die veraltete Version 8 von Angular verwendet wird, womit die DevTools noch nicht funktionieren. Bei dieser Gelegenheit habe ich das Beispiel auf eine neuere Version gehoben: Der Upgrade-Pfad ist auf den Seiten des Herstellers zu finden: update.angular.io/?v=8.2-12.0

Update auf Version 9

PM> ng update @angular/core@9 @angular/cli@9

Ich musste dabe folgendes Paket aus der package.json Datei entfernen: https://www.npmjs.com/package/@nguniversal/module-map-ngfactory-loader 

Zudem war das Paket als Abhängigkeit in folgender Datei hinterlegt: ..\ClientApp\src\app\app.server.module.ts 

 (import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';)

So sollte die Datei nach dem Entfernen des Paketes aussehen:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';

@NgModule({
    imports: [AppModule, ServerModule],
    bootstrap: [AppComponent]
})
export class AppServerModule { }

Im Anschluss habe ich ein "npm install -f" ausgeführt

PM> npm install -f

Update auf Version 10

PM> ng update @angular/core@10 @angular/cli@10
PM> npm install -f

Update auf Version 11

PM> ng update codelyzer@latest
PM> ng update @angular/core@11 @angular/cli@11 
PM> npm uninstall node-sass
PM> npm install -f

Error: Add only entry points to the 'files' or 'include' properties in your tsconfig.

Microsoft.AspNetCore.SpaServices: Error: Warning: C:/Users/Bernhard/source/repos/ASPAngular/ClientApp/src/test.ts is part of the TypeScript compilation but it's unused.

Microsoft.AspNetCore.SpaServices: Error: Add only entry points to the 'files' or 'include' properties in your tsconfig.

Microsoft.AspNetCore.SpaServices: Error: Warning: C:/Users/Bernhard/source/repos/ASPAngular/ClientApp/src/app/app.server.module.ts is part of the TypeScript compilation but it's unused.

Microsoft.AspNetCore.SpaServices: Error: Add only entry points to the 'files' or 'include' properties in your tsconfig.

Microsoft.AspNetCore.SpaServices: Error: Warning: C:/Users/Bernhard/source/repos/ASPAngular/ClientApp/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.

Microsoft.AspNetCore.SpaServices: Error: Add only entry points to the 'files' or 'include' properties in your tsconfig.

Folgenden Block in die Datei ..\ASPAngular\ClientApp\src\tsconfig.app.json hinzufügen:

"files": [
    "main.ts",
    "polyfills.ts"
  ]

Die Datei "tsconfig.app.json" sollte dann wie folgt aussehen:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

Update auf Version 12

Ein Update von Version 11 auf 12 ging dann wieder reibungslos:

PM> ng update @angular/core@12 @angular/cli@12
PM> npm install -f