Angular 8 - 路由在本地工作，但在生产环境中部署时，路由不起作用 - .NET 核心 C# 后端

Question

In my app I created routes, they work perfectly on localhost, I can navigate to:

localhost:4200/about

but when deployed on Production, if I navigate to:

myapp.com/about

what will happen is, the browser would almost instantly rewrite the URL to: myapp.com/index.html and then right afterwards the final url I will see displayed in the navigation bar of the browser, will be the default path: "myapp.com/"

My routing code is:

const appRoutes: Routes = [
  { path: "", redirectTo: "/", pathMatch: "full" },
  { path: "about", component: AboutComponent },
  { path: "**", redirectTo: "/" },
];

@NgModule({
  imports: [
      RouterModule.forRoot(appRoutes)
  ],
  exports: [
      RouterModule
  ]
})
export class AppRoutingModule {}

and I app module I also added, as I read it could help:

providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}] ,

on the backEnd side (frontend and backend are in the same project) this is the code:

public void Configure(
....
            app.UseDefaultFiles();
            app.UseSpaStaticFiles();
            app.UseMvc(routes => {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
                routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" 
            });
            });
           app.UseSpa(spa => {
                spa.Options.SourcePath = "FrontEnd";
                if (env.IsDev()) {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });

the HomeController :

  public IActionResult Index() => Redirect("index.html");

the web.config file:

<configuration>
  <system.webServer>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified"/>
    </handlers>
    <aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false"/>
  </system.webServer>
</configuration>

So basically whenever deployed, if I try to navigate to my route " /about ", it will just rewrite to index.html and then redirect to "/"

Any ideas?

Answer 1

This works for me but on an IIS server. Create a web.config file and place it in the root folder of Angular dist files.

    <?xml version="1.0" encoding="utf-8"?>
       <configuration>
         <system.webServer>
           <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="/frontend/" />//Folder with my Angular files
          </rule>
         </rules>
       </rewrite>
         </system.webServer>
      </configuration>