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

Angular in ASP.Net Core einbetten

11.02.2021 (👁15717)

 

Dabei wird das Routing komplett von Angular übernommen

Hier in app.module.ts imports

RouterModule.forRoot([

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

  }

 

 

BASE_URL

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

 

1.    

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)

        {

            services.AddControllersWithViews();

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

            services.AddSpaStaticFiles(configuration =>

            {

                configuration.RootPath = "ClientApp/dist";

            });

        }

 

2.    

Asp.Net Core Routes

Im folgenden Code werden die Routen angepasst.

Configure..

app.UseRouting();   

 

 

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

           

            app.UseEndpoints(endpoints =>

            {

                endpoints.MapControllerRoute(

                    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 https://go.microsoft.com/fwlink/?linkid=864501

                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