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.修改專案檔的的發行工作
大功告成
參考來源
