Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Anleitung: ASP Core .Net5 mit Neuem Angular Client @Latest

05.04.2021 (👁17955)


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.

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

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: getBaseUrldeps: [] }

];

 

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

npm install oidc-client