How to redirect user to a custom page when clicking reload button on a url with parameter

I have an Angular application that generates a 404 error when the user clicks the browser reload button in a url that has parameter generatedid.

http://localhost:4200/abc/generatedid/xyz

That url is generated in abc-routing.module.ts like this:

const routes: Routes = [
{ path: ':generatedId/xyz', component: XyzComponent, resolve: { my: CarResolver } }
];


CarResolver

@Injectable({
providedIn: 'root'
})
export class CarResolver implements Resolve<Car> {

constructor(private carService: CarService){ }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Car> {

if(route.params && route.params['generatedId']){
return this.myService.getMyId(route.params['generatedId'])
.pipe(shareReplay(),
catchError(error => {
this.onError();
return of({} as Car);
})
);

}

let car = {} as Car;
return of(car);

}

}


The problem happens only on urls with parameter. The other ones reload fine.

For the ones with parameter I'd like to, at least, redirect the user to a custom page instead of displaying a 404 message.

Continue reading...