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