Deploy Angular on Azure with static website fallback problem

You can specify your fallback route by creating a file called routes.json in src/assets. It should contain:

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

Using the below provider in your app.module.ts should be enough:

{provide: LocationStrategy, useClass: HashLocationStrategy}

Example:

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

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
})
export class AppModule {}

Maybe this can help somebody else:

On your Storage Account -> Static website you will find:

Both should be index.html

I specified staticwebapp.config.json file with the following contents in the src folder. This worked for me and resolved the deep linking issue on the Angular site. I also had "useHash" enabled. Hope this helps someone. I initially tried this fix on the new Azure Static Web App but this rewrite is also working on Azure Storage-Static Web site.

 {
   "navigationFallback": {
    "rewrite": "index.html",
     "exclude": [ "/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}" ]
   }
 }