Angular自訂後端Route

前言

原本開發的.Net Core程式,想要跟Angular並存,例如:路徑/kim開頭為Angular App,其他則使用MVC。

開發環境
  • Visual Studio 2019
  • .Net core 3.1
  • Angular 9

解決方式

修改Starup.cs,將原本的app.UseSpa 註解或移除
       //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");
            //    }
            //});

加入自訂Angular進入的Route,本例為 kim。
  • public-host:For Live Reload使用
        app.Map("/kim", client =>
            {
                client.UseSpa(spa =>
                {
                    spa.Options.SourcePath = "ClientApp";
                    if (env.IsDevelopment())
                    {
                        //開發時期,需要指定base-href為kim
                        spa.UseAngularCliServer(npmScript: "start --   --base-href=/kim/ --serve-path=/ --public-host=https://localhost:44387/kim/");
                    }
                });
            });

修改main.ts的getBaseUrl方法。由於在api的呼叫會取用上方的base href作root url,例如:/api/values,但現在已指定為/kim,所以叫用api給變 /kim/api/values。
懶人作法,直接將/kim 換成/
export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href.replace("/kim/","/");
}

以上在開發時期,已可以順利執行。但在發行到IIS後,還需作一些調整。

發行時期的修改

發行時也需要修改base-href,不同於上方的 UseAngularCliServer,是在開發時期指定的。發行時期,可以透過以下2種方式,選擇一個即可。

1.修改src/Index.html的base href,將app的最上層修改成kim。
<base href="/kim/" />

2.修改專案檔的的發行工作

大功告成

參考來源



這個網誌中的熱門文章

[TFS] 分支與合併