CODEWITHSUNDEEP
angularasp.net-core.net-core
MRebati
MRebati

Reputation: 599

Angular + net Core Application with both SPA and MPA approaches

I have a aspnet Core application with angular which is created using the sample from the link below:

https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/angular

I want to serve some pages from server, how can I do that on my root application path and use the angular application in a subPath?

Upvotes: 1

Views: 734

Answers (1)

itminus
itminus

Reputation: 25350

Simply create a branch middleware to serve spa files:

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller}/{action=Index}/{id?}");
});

const string subappPath = "/subPath";

app.Map(subappPath,appBuilder =>{
    appBuilder.UseSpa(spa =>
    {
        spa.Options.DefaultPage = subappPath+"/index.html";
        spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions{
            RequestPath = subappPath,

        };
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });
});

And then change the <base> of ClientApp/src/index.html to /subPath/ :

<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="/subPath/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

(Note : the trailing / of /subPath/ is required!)

Lastly, you might need to edit some of your hard-coded api endpoints. For example, the default fetch-data component will send request to http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts'). It's likely that you might want to change the ajax call to '/api/SampleData/WeatherForecasts', or create server routes with a /subPath/api prefix if you like.

Upvotes: 3

Related Questions