ASP.NET Core mit Angular 12 - Visual Studio - Angular 8 Update

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

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 'xxx'.


Applying existing migrations may resolve this issue

There are migrations that have not been applied to the following database(s):

ApplicationDbContext
  • 00000000000000_CreateIdentitySchema

 Try refreshing the page

In Visual Studio, you can use the Package Manager Console to apply pending migrations to the database:

PM> Update-Database

Alternatively, you can apply pending migrations from a command prompt at your project directory:

> dotnet ef database update

 

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 
positive Bewertung({{pro_count}})
Beitrag bewerten:
{{percentage}} % positiv
negative Bewertung({{con_count}})

DANKE für deine Bewertung!


veröffentlicht am 10.08.2021 von Bernhard
geändert am 25.08.2021 von Bernhard



Fragen / Kommentare


Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf unsere Website zu analysieren. Außerdem geben wir Informationen zu Ihrer Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Details anzeigen.