Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

How to create an Asp Core . Net5 application with the LATEST Angular Client

 

A major problem with Asp.Net Core applications with SPA Clients Angular is that an outdated angular client is distributed through installations or scaffolding.

This Angular Client cannot be updated because version 8 is not upgradeable to version 11 and later.

 https://www.youtube.com/watch?v=u_Mio4Bfjgw

This post shows how to still create an Asp Core application with always the latest client.

 

Angular CLI, Angular Core, Bootstrap, Angular Material

 

Solution:

First, visual studio is currently creating a new Asp application with Angular as SPA Client in 2019.

It is especially important if you set the ASP Authentication Type  to Individual Accounts

 

After that, you rename the clientapp subfolder

 

Renaming ClientApp -> ClientApp-Org

 

 

Create the latest ANGULAR app

You then create a client app with the same name via VSCode in the terminal:

 

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

 

 

Afterwards you should also install bootstrap and Angular material

Npm install bootstrap@next --save

 

ng add @angular/material

Add the Angular Material UI as is common for Angular developers

 

Transfer all files to app

You can actually transfer all files in CLIENTAPP/src/app  from the template #org to the new ClientApp/src

 

 

Transfer App.module.ts

You can take the complete app.module.ts file from a Microsoft ASP Angular template

This inherits the components, nav-bar counter examples and the authorize modules

 

 

 

Transfer Main.ts

You need to transfer the file main.ts from a standard Asp-Angular template

This will take over the entry BASE_URL. This entry is required if you want to access The User Identiy Management of Microsoft.

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));

 

 

 

 

Enter Bootstrap in angular.json

Retrace Bootstrap

You need to insert bootstrap in the file angular.json in the 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

 

Mobile

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de