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

Followers 0
Login Register as User

Angular in ASP.Net Core einbetten

11.02.2021 (­čĹü14381)


Dabei wird das Routing komplett von Angular ├╝bernommen

Hier in app.module.ts imports


      { path: '', component: HomeComponent, pathMatch: 'full' },

      { path: 'counter', component: CounterComponent },

      { path: 'fetch-data', component: FetchDataComponent },



Angular zu Asp.Net Core

Der Verweis zur Asp.Net Core wird als Inject der Basis-URL ├╝bergeben



  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {

    http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {

      this.forecasts = result;

    }, error => console.error(error));





Die jeweilige Basis-URL wird ├╝ber main.ts ermittelt.


In main.ts

export function getBaseUrl() {

  return document.getElementsByTagName('base')[0].href;


const providers = [

  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }




In ASP.Net Core

In der Asp.Net Core Anwendung wird das Routing f├╝r die Angular Projekt als SPA Seite ├╝bergeben



Asp.Net Core erg├Ąnzen

Im 1. Teil wird die Funktionalit├Ąt von SPA Single Page Applications zu Asp.Net Core hinzugef├╝gt im ConfigureServices


        public void ConfigureServices(IServiceCollection services)



            // In production, the Angular files will be served from this directory

            services.AddSpaStaticFiles(configuration =>


                configuration.RootPath = "ClientApp/dist";





Asp.Net Core Routes

Im folgenden Code werden die Routen angepasst.





2a. erst werden den Asp.Net Core Controller Routen f├╝r Web API eingef├╝gt


            app.UseEndpoints(endpoints =>



                    name: "default",

                    pattern: "{controller}/{action=Index}/{id?}");



2b. dann die SPA Routen f├╝r Angular

app.UseSpa(spa =>


                // To learn more about options for serving an Angular SPA from ASP.NET Core,

                // see

                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())


                    spa.UseAngularCliServer(npmScript: "start");




Routing in Asp.Net Core Startup.cs

Aufteilung Web Api Controller und danach Angular Vue React Routes