我已将 .NET API 部署到 IIS10,并且在 .NET 文件所在的目录内有一个 wwwroot 文件夹,我在其中放置了已发布的角度文件。在同一个 wwwroot 文件夹中,在这些文件中,还有一个 Web 配置指定重写 URL,如下所示。
应用程序似乎登录并显示正常,直到我刷新然后收到 404。
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG, DELETE, PUT" type="System.Web.Handlers.TransferRequestHandler" resourceType="Unspecified" requireAccess="Script" preCondition="integratedMode,runtimeVersionv4.0" responseBufferLimit="0" />
</handlers>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<!--<action type="Rewrite" url="/index.html" />-->
<action type="Rewrite" url="wwwroot/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
在app.modules.ts中
providers: [
{provide : LocationStrategy , useClass: HashLocationStrategy}
]
RouterModule.forRoot
import { NgModule } from '@angular/core';
...
const routes: Routes = [//routes in here];
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes, { useHash: true })
],
bootstrap: [AppComponent]
})
export class AppModule { }
index.html 的片段
<html class="loading" lang="en" data-textdirection="ltr" data-critters-container>
<head><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="description" content="Modern admin is super flexible, powerful, clean & modern responsive Angular 15+ Bootstrap 5 Template with unlimited possibilities with bitcoin dashboard.">
<meta name="keywords" content="admin template, modern admin template, dashboard template, flat admin template, responsive admin template, web app, crypto dashboard, bitcoin dashboard">
<meta name="author" content="EvolVision & CleVision
根据你的描述,你有一个
asp.net core API
项目,还有一个Angular
前端项目,你当前想要编译Angular项目并将其放在.net core项目下的wwwroot
文件夹中.
所以我们可以参考SPA的结构进行处理。
namespace Angular_SPA
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
// add this line
app.UseStaticFiles();
app.UseRouting();
app.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
// add this line
app.MapFallbackToFile("index.html");
app.Run();
}
}
}
然后你可以构建/发布你的angualr项目,我们可以获取以下文件然后粘贴到
wwwroot
文件夹中(如果没有这个文件夹,我们需要手动创建它)。