使用静态网站回退问题在 Azure 上部署 Angular

Question

I'm trying to deploy my Angular app to the Azure static websites. I configured the environment following this tutorial: Medium tutorial for Azure static websites

The problem that I have is the fallback in the case I try to access for example myurl.com/mypage (with only myurl.com is working correctly).

I'm building Angular with ng build --prod .

As it's running on IIS, I've tried the following web.config: web.config , I put it in /src folder and I've changed angular.json as follows:

"assets": [
     ...
     "src/web.config"
],

and it's placing the file in the root folder which is correct.

My problem is that I'm still getting 404 when I try to access myurl.com/mypage

Answer 1

Maybe this can help somebody else:

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

Both should be index.html

Answer 2

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

Answer 3

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}" ]
   }
 }

Answer 4

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