Freelance Project Requests 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.

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


Angular CLI, Angular Core, Bootstrap, Angular Material



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:









? 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 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) {





  .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": [








OIDC-Client in Client-App installieren

npm install oidc-client

npm install oidc-client




Contact for Jobs, Project Requests: