Wie erstellt man eine Asp Core .Net5 Anwendung mit dem
NEUESTEN Angular Client
Ein ganz großes Problem bei Asp.Net Core Anwendungen mit SPA
Clients Angular ist, dass ein veralteter Angular Client über Installationen bzw.
Scaffolding verteilt wird.
Dieser Angular Client lässt sich nicht updaten, da die
Version 8 nicht upgrade fähig ist zu Version 11 und höher.
https://www.youtube.com/watch?v=u_Mio4Bfjgw
Dieser Beitrag zeigt, wie man dennoch eine Asp Core
Anwendung mit immer dem neuesten Client erstellen kann.
Angular
CLI, Angular Core, Bootstrap, Angular Material
Lösungsweg:
Zunächst erstellt man über Visual Studio aktuell 2019 eine
neue Asp Anwendung mit Angular als SPA Client.
Wichtig ist es besonders wenn man dabei den ASP Authentication Type auf Individual Accounts einstellt
Danach benennt man den Unterordner ClientApp um
Umbenennen ClientApp -> ClientApp#Org
Neueste ANGULAR App erstellen
Anschließend erstellt man über VSCode im Terminal eine
namensgleiche ClientApp:
|
cd..
ng new CLIENTAPP
? Do you want to enforce stricter type checking and
stricter bundle budgets in the workspace?
This setting
helps improve maintainability and catch bugs ahead of time.
For more
information, see https://angular.io/strict No
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
|
Anschließend sollte man auch bootstrap und Angular Material
installieren
Npm install bootstrap@next --save
ng add @angular/material
Das Angular Material UI hinzuholen, wie es für Angular
Entwickler üblich ist
Alle Dateien in App übertragen
Man kann eigentlich alle Dateien in CLIENTAPP/src/app
von der vorlage #org in die neue ClientApp/src übertragen
App.module.ts
übertragen
Man kann die komplette Datei app.module.ts aus einer
Microsoft ASP Angular Vorlage übernehmen
Dadurch werden die Componenten, Nav-Bar Counter Beispiele
und die Authorize Module übernommen
Übertragen Main.ts
Man muss die Datei main.ts übertragen aus einer Standard
Asp-Angular Vorlage
Dadurch wird der Eintrag BASE_URL übernommen. Dieser Eintrag
wird benötigt, wenn man auf die User Identiy Verwaltung von Microsoft zugreifen
möchte.
|
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
export function getBaseUrl() {
return document.getElementsByTagName('base')[0].href;
}
const providers = [
{ provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic(providers).bootstrapModule(AppModule)
.catch(err => console.log(err));
|
Bootstrap eintragen
in angular.json
Bootstrap nachführen
Man muss Bootstrap in der Datei angular.json einfügen im Block:
architect->build->styles
|
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
|
OIDC-Client in Client-App installieren
npm install
oidc-client
