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