刷新已发布到 IIS 10 的 Angular 应用程序时如何防止 404 错误

Question

我已将 .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 &amp; 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 &amp; CleVision

Answer 1

根据你的描述，你有一个

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

文件夹中（如果没有这个文件夹，我们需要手动创建它）。

刷新已发布到 IIS 10 的 Angular 应用程序时如何防止 404 错误

问题描述投票：0回答：1

1个回答

最新问题

刷新已发布到 IIS 10 的 Angular 应用程序时如何防止 404 错误

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1