Angular 8 + Angular PWA Routing doesn't work with direct URL

Question

I am developing in Angular 8 with Angular PWA. Here you can find what I am talking (for now test it in mobile version by chrome debugger, or you'll see nothing): https://www.yeswelazio.it/test

I correctly set my routing rules so:

const routes: Routes = [
  { path: '',                 component: AppComponent },

  // Mobile
  { path: 'mobile/home',      component: MobileHomeComponent },
  { path: 'mobile/archivio',  component: MobileArchiveComponent },
  { path: 'mobile/news/:id',  component: MobileNewsComponent },
  { path: 'mobile/contatti',  component: MobileContactsComponent },

  // Desktop
  { path: 'desktop/home',     component: DesktopHomeComponent },

  // Error
  { path: '**',               redirectTo: '' }
];

This is my manifest.webmanifest file:

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

Unfortunatelly I can't access directly to a URL like https://www.yeswelazio.it/test/mobile/archivio because every time I try the browser redirect me to https://www.yeswelazio.it/test/mobile/home .

I tried also with {useHash: true} and also commenting { path: '**', redirectTo: '' } from my routing rules.

I know Angular routing so I think it's because of PWA. What can I do to access to some URL directly?

Answer 1

I had the same issue with PWA and found one solution for myself . Just remove redirection { path: '**', redirectTo: '/home', pathMatch: 'full' } from you root app.routing.module.ts .

Than create a component 404 for example and use it for routes **. In this case, users will see 404 component on any unknown route, but url in browser won't change.

In 404 component i check for updates with:

import { SwUpdate } from '@angular/service-worker';
...
constructor(private swUpdate: SwUpdate) {}
...
this.swUpdate.available.subscribe(() => {
   // here you can reload your page
   window.location.reload();
});

Now your app will be reloaded and users will see new page instead of 404 component.

On my app i added some information for users while checking for updates. You can check it on methodist.io , try to write any custom route.