How to not return to the page I was redirect from?

April 4, 2022

I want to have foo facade instance for a foo component:

@Component({
  selector: 'foo',
  template: `in foo component. state: {{state$ | async |json}}`,
  providers: [FooFacade], //<---- instance belong to the component.
})

And FooFacade is load the data from the server at the constructor.

But when the data is not exist I want to redirect to not found page (I defined it by the route):

load() {
    of([{ id: 1, name: 'foo' }]).subscribe((d) => {
      this.state.next(d);

      // fake, the data is not exist  so I redirect to fake url and angular will redirect by route rule.
      this.router.navigateByUrl('/fake-not-found');
    });
  }

.......
  RouterModule.forRoot([
      { path: 'foo', component: FooComponent },
      { path: '**', component: NotFoundComponent },
    ]),

It’s working as expected.

In not found page, I hit "back" button from the browser I return to the /foo page. and then the redirect happens again.

I want when I redirect to not found page then this page that im on not to be in the route history.

How do I config the route to not return to the foo page?

stackblitz example

please note:
I know I should do it with canActive/resolver but I just can’t do it because I load the data from the service and the instance is not created yet.