Angular + net Core Application with both SPA and MPA approaches

时间:2019-05-31 11:41:03

标签: angular asp.net-core .net-core

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

https://docs.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?

1 个答案:

答案 0 :(得分:2)

只需创建分支中间件来提供spa文件

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");
        }
    });
});

然后<base>的{​​{1}}更改为ClientApp/src/index.html

<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>

(注意:必须紧跟/subPath/的结尾/ !)


最后,您可能需要编辑一些硬编码的api端点。例如,默认的/subPath/组件将向fetch-data发送请求。您可能想要将ajax调用更改为http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts'),或者根据需要创建带有'/api/SampleData/WeatherForecasts'前缀的服务器路由。