How to get Angular routing working when hosting on Azure blob storage

Question

I have created an Angular application which uses lazy loading and the standard angular routing set up and this set up works well when I run the application locally. But when I try to serve it from azure blob storage I get a 404 when I navigate around the application.

Azure storage static site is enabled and when I navigate to the root page, it is displayed.

What Azure configurations do I need to implement to resolve this issue?

Please note: In an attempt to keep this question concise as possible I have added my attempts below the code. Also I was not sure which Azure configs would be suitable to add so I have left them out until requested.

app-routing.module.ts

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
      { path: '', loadChildren: () => import('./feature-modules/home/home.module').then(h => h.HomeModule) },
      { path: 'roadmap', loadChildren: () => import('./feature-modules/roadmap/roadmap.module').then(h => h.RoadmapModule) },
      { path: 'games', loadChildren: () => import('./feature-modules/games/games.module').then(h => h.GamesModule) },
      { path: 'locations', loadChildren: () => import('./feature-modules/locations/locations.module').then(h => h.LocationsModule) },
      { path: 'tasks', loadChildren: () => import('./feature-modules/site-tasks/site-tasks.module').then(h => h.SiteTasksModule) },
      { path: 'contact', loadChildren: () => import('./feature-modules/contact/contact.module').then(h => h.ContactModule) },
      { path: '**', loadChildren: () => import('./feature-modules/not-found/not-found.module').then(h => h.NotFoundModule) },
    ];
    
    @NgModule({
      imports: [
        RouterModule.forRoot(routes)
      ],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

Roadmap-routing.module.ts

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { RoadmapComponent } from './roadmap/roadmap.component';
    
    const routes: Routes = [
      { path: '', component: RoadmapComponent }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class RoadmapRoutingModule { }

What I have tried

ATTEMPT 1

Set the error document path to index.html as suggested here and it allows the pages to be serve but still returns a 404 when you look in developer tools. This happens because the page refreshes the requested page cannot be found but the angular routing takes place and finds the requested page. Having a 404 is far from ideal so I continued looking

ATTEMPT 2

I saw this suggestion and altered my app-routing.ts as shown below

    imports: [RouterModule.forChild(routes, { useHash: true})],

ATTEMPT 3

I found this solution but it didn't really apply to my situation as they serve their application through a CDN, which is not what I need at this time

ATTEMPT 4

This suggestion did not work for me. I tried creating a routes.json then found that is deprecated and added staticwebapp.config.json neither worked for me

Any help or suggestions will be greatly received

Answer 1

You cannot use Azure Blob Storage with Static Site feature if you use Angular routing / SPA as it is not designed for that. So that's the answer to your question.

... And that's why Microsoft released Azure Static Web App

Regarding your attempt #4, which is the right approach (so, not related to your initial question). So you should post another question related to Azure Static Web App and provide some details of what you have tried to work with Angular routing.

I tried with "staticwebapp.config.json" and followed Microsoft documentations, I didn't get any issue for my Angular SPA application