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:
- Configure your webserver to redirect to
{root}/index.html
when it gets a sub route likeauth/callback
- 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>
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}]
Hope this helped. Thanks