Angular Routing problems with Refresh

Question

here: https://stackblitz.com/edit/planificador?file=src/app/partehoras/components/detail/detail.component.html

The first route loaded is this one

in app.module I have this

in partehoras.module I have this

When I click here

I go to this route

But When I refresh this page I go to this one again

Any idea, please?

Thanks

Answer 1

The main problem is in the main.component.ts:

@Component(...)
export class MainComponent implements OnInit {
  ...

  ngOnInit(): void {
     ...;

     this.sharedDataService
      .getEmpleado(this.empleadoID)
      .pipe()
      .subscribe(data => {
          
          this.nombreEmpleado = data.nombre;

          console.log('Empleado', this.nombreEmpleado);

          this.router.navigate(['/partehoras', this.empleadoID]); // Problem here!
        },
        err => console.log(err),
        () => {})
  }
}

Now, why is this line a problem?

Angular starts loading the components in your application and resolving their routes. One of these components is the MainComponent and it's ngOnInit method you have:

this.router.navigate(['/partehoras', this.empleadoID]);

This means that once the subscribe emits information, you will perform a redirect if this component is appearing in the screen.

Since this component contains the DetailComponent via the <router-outlet></router-outlet> this means when you want to load the DetailComponent you must always pass by it first.

Under normal navigation this is not a problem, but when we refresh, we trigger the ngOnInit method, which prevents us from ever reaching the DetailComponent.

There is no simply resolution to this. The problem is you are performing a redirect in the ngOnInit method, which is usualy a bad approach. Every time the component is created, a redirect will occur. This includes refresh events and possibly other types outside of normal navigation.

• Solution

I would consider creating a guard that checks when is it required to redirect or not. However, this depends on the logic of your application since it this case so I can't help much more.