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

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.

How do I 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

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.