Angular App Hosting Azure Storage Container - Azure Authentication Callback and Routing fails Angular App Hosting Azure Storage Container - Azure Authentication Callback and Routing fails azure azure

Angular App Hosting Azure Storage Container - Azure Authentication Callback and Routing fails


It looks like you're not using the HashLocationStrategy, so the 404 is likely because the webserver doesn't have any folder/files in auth/callback. You have two options:

  1. Configure your webserver to redirect to {root}/index.html when it gets a sub route like auth/callback
  2. Use the HashLocationStrategy, which will prefix your routes with #, for example:

https://<projectname>.z6.web.core.windows.net/#/auth/callback?access_token=eyJ0eXAiOiJKV1Q

https://<projectname>.z6.web.core.windows.net/#/auth/login?return=/#/pages/dashboard

Here's how you can enable hash location strategy:

@NgModule({       imports: [      /* more imports here */      RouterModule.forRoot(routes, { useHash: true })    ],       declarations: [       /* components here */     ],    providers: [          /* services here */     ],    bootstrap: [ AppComponent ] })  export class AppModule { }


You need to rewrite URLs in order use routes when you deploy an angular apps to a server. I'm assuming you are using an iis server and add following to web.config

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

Source

Or you can add Hash Location strategy, which results a # before route start (ex: https://sample.com/#/login)

In app.module.ts

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

After import add following line to providers.

{provide: LocationStrategy, useClass: HashLocationStrategy}

ex:

providers: [AuthService,             AuthGuard,             FlxUiDataTable,            {provide: LocationStrategy, useClass: HashLocationStrategy}] 

Source

Hope this helped. Thanks