Issue
I am working on an Ionic Aungular PWA project and I am consistently getting a failed Lighthouse audit in Chrome with a 404 error saying localhost page cant be found for the path I am redirecting to as the default path (/home in this example). I have included my auto generated src/app/app-routing.module.ts file below. If I replace the redirect path to load the “home” module instead of redirecting to the home path, the audit is successful. Can anyone help explain why redirectTo is not working?
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'create-restaurant-menu',
loadChildren: () => import('./pages/page2/page2.module').then( m => m.Page2Model)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Solution
Are you using http-server
for your tests as suggested by the Angular docs? If so: you should know that http-server
does not forward 404s to index.html
. During its audit Lighthouse will refresh several times. If your SPA changes the path in the mean time, http-server
will find no matching files for that path and simply return a 404.
This is of course pretty ironic, because both Lighthouse and Angular are developed by Google, yet they missed that their instructions could break their own tool. What's more ironic is that the Angular docs suggest using http-server
in the first place, while it's maintainer made clear (back in 2017) that it will not support SPAs.
Instead of http-server
I suggest using serve
. If you add the option --single
, it will "rewrite all not-found requests to index.html
". Let me know if this solves your audits.
Answered By - Hans Cronau
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.