Deploy Angular on Azure with static website fallback problem

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

Jorciney's answer is amazing. – Federico Navarrete Jan 02 '22 at 14:15 — Federico Navarrete, Jan 02 '22 at 14:15

score 2 · Answer 1 · answered Jul 13 '20 at 01:52

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

answered Jul 13 '20 at 01:52

davidfmatheson

3,539
19
27

score 2 · Answer 2 · answered Dec 15 '21 at 21:27

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

This should be the correct answer! – Federico Navarrete Jan 02 '22 at 14:15 — Federico Navarrete, Jan 02 '22 at 14:15

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

Maybe this can help somebody else:

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

Both should be index.html

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 05 '20 at 13:30

NikNik

2,191
2
15
34

score 1 · Answer 4 · answered Aug 09 '21 at 16:00

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

i dont want to use hash in routing. – Sandeep Bhaskar Aug 10 '22 at 19:46 — Sandeep Bhaskar, Aug 10 '22 at 19:46

Deploy Angular on Azure with static website fallback problem

4 Answers4