Angular RouterModule - getting 404 on page refresh with path defined in routes Azure Static Web Apps

Question

I had created child components to lazy load based on nav menu click which has paths "HTML". The app-routing.module.ts has the following routes defined,

const routes: Routes = [{
        path: 'HTML',
        loadChildren: () => import('./html/html.module').then(m => m.HTMLModule)
    }
];

 @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

After building and hosting the "dist" folder in local IIS, child component "http://localhost:8011/HTML" is loading when I navigate from my welcome page. But when I refresh or directly load url with the route "HTML", its returning 404 Not Found.

The below snippet is from html-routing.module.ts

const routes: Routes = [{ path: '', component: HTMLComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HTMLRoutingModule { }

Any other way to load child component on page refresh.

package version	installed
angular cli	13.2.6
TS	4.5.5

Edit: Post installing URL Rewriter, in local IIS the site is loading as expected post refresh with same child component. But the issue again occurred inside Azure Static Web Apps.

If the sample Azure static web app url is https://.azurestaticapps.net/HTML, for first load page is loading as expected. But on refresh its returning 404 Response. I manually had to remove the "HTML" from the url and begin from welcome page.