Angular app with Identity server 4 signin-callback retuning 404 in Azure web app-CodePudding

I'm facing one problem with my Angular application which is deployed to Azure App Service. Here are the details of what is done and what is observed. This app is working perfectly in local, the only issue is after deploying to Azure App or even with GoDaddy hosting. there is something in common that I'm missing but unable to find out yet.

Angular 7 application which uses identity server 4 for authentication.
This client app has right route to handle the singin-callback and singout-callback.
When I sign in and then the identity server returns to this client app, the client app is throwing 404. since the route is present ideally it should handle it. I'm getting

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

as the message.

My observation is since the app is a client app and the route is handled by Angular application, the URL "https://website.azurewebsite.net/singin-call" is somehow app service is treated as URL and then return 404. because there is no such real URL (only from angular the URL is valid)

What is that I'm missing to address this issue?

CodePudding user response：

This is a common issue in single page applications. What is happening is that your request is going to azure and it is looking for a file in that route. since that route is a angular route and not a file route the azure server throws a 404 since it can't find that file. You can fix this in the app by using useHash: true.

DOCS

@NgModule({
  imports: [
    ...
    RouterModule.forRoot(
      ...
      { useHash: true }
    ),
    ...
  ],
  ...
})
export class AppModule {}

CodePudding user response：

I found the fix. As I suspected it is something to do with the configuration. Add the below in web.config file and deploy. It worked perfectly!

This ensures the app loads index.html always in return which solved the issue.

    <?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>