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
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.
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.