Angular routing does not work in progressive web apps-CodePudding

I have added PWA functionality to my angular app. However, since then, the routes are not working as they would do usually in the angular app. I couldn't find any help online as they all say when using ng add, everything should work find.

I'm wokring in a nx monorepo with Angular 14.

For example: when I first start the app, it navigates correctly to /login. When I reload the page at /login, I recieve 404 /login not found

Here is my app.routing.module

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => import('@blabla/login').then((m) => m.LoginModule),
  },
  {
    path: 'dashboard',
    loadChildren: () =>
      import('@blabla/dashboard').then((m) => m.DashboardModule),
    canLoad: [AuthGuard],
  },
  {
    path: 'error',
    loadChildren: () => import('@blabla/error').then((m) => m.ErrorModule),
    canLoad: [],
  },
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: '/error',
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      enableTracing: false,
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

my ngsw-config.json

   {
      "$schema": "../../node_modules/@angular/service-worker/config/schema.json",
      "index": "src/index.html",
      "assetGroups": [
        {
          "name": "app",
          "installMode": "prefetch",
          "resources": {
            "files": [
              "src/favicon.ico",
         

     "src/index.html",
          "src/manifest.webmanifest",
          "src/*.scss",
          "src/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ]}

and my manifest file

{
  "name": "EKC",
  "short_name": "EKC",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

CodePudding user response：

The issue has nothing to do with Angular Routing failing after installing PWA. The error is due to you're running your app on http-server, and when you are trying to load the /login page, the /login page route does not exist on the server and it throws 404 error.

To fix this issue you can http-server with proxy option.

http-server -P http://localhost:8080?

? at the URL end, to make sure it Catch-all redirect.