Routing IIS - Angular - Asp.Net Core

Question

I'm posting this message because I didn't find any workable answer. I'm developing a web site using Angular 6, Asp.net Core 2.2 and IIS 10. My problem concerns the routing when directly imputing the address in the Browser url input area. Using the website, inside navigation, everything is working properly. My website plan is:

/ 
--> /upload
--> /admin
----> /admin/admincreateuser
----> /admin/manageuserlicencepanel

Here are my settings:

Angular 6

export const appRoutes: Routes = [
  {
    path: 'upload',
    runGuardsAndResolvers: 'always',
    canActivate: [AuthGuard],
    children: [
        {path: '', component: UploadComponent, data: {roles: ['Customer']} },
    ]
  },
  {
    path: 'admin',
    runGuardsAndResolvers: 'always',
    canActivate: [AuthGuard],
    children: [
        {path: '', component: AdminComponent, data: {roles: ['Admin', 'Moderator']}},
        {path: 'admincreateuser', component: AdminCreateUserComponent, data: {roles: ['Admin', 'Moderator']}},
        {path: 'manageuserlicencepanel', component: ManageUserLicencePanelComponent, data: {roles: ['Admin', 'Moderator']}}}}
    ]
  },
  {path: '', component: HomeComponent},
  {path: '**', redirectTo: '', pathMatch: 'full'}
];

ASP.Net Core 2.2

Startup.cs

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseMvc(routes =>
    {              
        routes.MapSpaFallbackRoute(
                    name: "spa-fallback",
                    defaults: new { controller="FallbackController", action = "Index"}
        );
    }
}

FallbackController.cs

public class FallbackController : Controller
{
    public IActionResult Index()
    {
        return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "index.html"), "text/HTML");
    }
}

This configuration is working properly even on IIS deployement. But it's impossible to input directly the url ( i.e https://www.dzfzx.com/upload ) in the address bar because I get a 404 error. To solve this I've tried to add URL Rewrite in IIS like this

   <system.webServer>
        <rewrite>
            <rewriteMaps>
              <rewriteMap name="^(.*)$" />
            </rewriteMaps>
            <rules>
                <rule name="All routes" stopProcessing="true">
                    <match url="^(.*)$" />
                    <action type="Rewrite" url="/" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_URI}" pattern="/api(.*)$" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^api/" negate="true" /> 
                    </conditions>
                </rule>
            </rules>
        </rewrite>
    </system.webServer>

By implementing that I get directly on home page an error:

Uncaught SyntaxError: Unexpected token <

Notice also that it seems I never fallback in my FallbackController which seems to be not normal.

Have you an idea on how I can make it work ( Direct address bar inputing ) ?

Thanks.

Vladimir Prudnikov Vladimir Prudnikov · Accepted Answer · 2019-02-11T10:52:10

It seems like your configuration is bad. You should direct all requests to index.html, which is angular's index file.

Try this configuration:

<?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="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

Deploy an Angular Application to IIS

Routing IIS - Angular - Asp.Net Core

1 Answers