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 (­čĹü4385)


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