onSameUrlNavigation doesn't re-load routed components

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I'm trying to use the new onSameUrlNavigation flag in 5.1.1, and while it does repeat the RouterEvent cycle, it doesn't trigger any lifecycle events in the routed components

Expected behavior

ideally if it's going to trigger a reload, it should re-initialize any routed components.

Minimal reproduction of the problem with instructions

imports: [RouterModule.forRoot([
{ path: "", component: HomeComponent, pathMatch: "full" },
{ path: "login", component: LoginComponent },
], { onSameUrlNavigation: "reload" })]

This configuration will not trigger lifecycle events in LoginComponent if there's a link to LoginComponent somewhere on the page

What is the motivation / use case for changing the behavior?

This flag was added to support refresh, but developers would still have to listen to the router event cycle to be able to refresh any components this way

Environment


Angular version: 5.1.1


Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ x] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ x] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

@TylerDev6

@TylerDev6 ... from where did you take that onSameUrlNavigation should introduce triggering of life-cycle hooks on components? As I know from source code it was introduced to re-invoke only guards & resolvers.

Sorry ... your issue is the feature issue. 👌

@mlc-mlapis

@mlc-mlapis the angular router documentation itself mentions "refresh".... it's not a real refresh if the components don't reload....

https://angular.io/api/router/ExtraOptions

@TylerDev6

@TylerDev6 ... you are right ... the formulation in the doc should be changed ...

Define what the router should do if it receives a navigation request to the current URL. By default, the router will ignore this navigation. However, this prevents features such as a "refresh" button. Use this option to configure the behavior when navigating to the current URL. Default is 'ignore'.

@mlc-mlapis

import { NgModule } from '@angular/core';
import { Routes, RouterModule, ExtraOptions } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { AppGuard } from './app.guard';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, canActivate: [AppGuard] },
  { path: 'product', component: ProductComponent, canActivate: [AppGuard] },
  { path: '**', redirectTo: '/home' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Angular CLI: 1.6.2
Node: 8.9.3
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

I tried to add onSameUrlNavigation to my routes but
both lifecycle and guard doesn't seem to trigger.

@mlc-mlapis

@rainstormza

@rainstormza ... simple http://Stackblitz.com reproduction?

@mlc-mlapis

@mlc-mlapis
https://stackblitz.com/edit/angular-wa3au2

when I click button route on same url guard does not console anything. ( click product when route is /product)
I think guard should console.log 'guard' when I click same url.

@rainstormza

@rainstormza ... hmm, just I forgot to say that there is another property which affects the behavior of re-running guards and resolvers ... when onSameUrlNavigation: true is set ... then ... it is runGuardsAndResolvers ... so there has to be runGuardsAndResolvers: 'always' (... there are also 'paramsChange' or 'paramsOrQueryParamsChange' possibilities) set on each route definition which you want to affect.

You can see it in action on this Stackblitz demo:
https://stackblitz.com/edit/onsameurlnavigation?file=app/app-routing.module.ts

Without runGuardsAndResolvers only Router events are invoked.

@mlc-mlapis

@mlc-mlapis it works, thanks
but I think it should trigger ngOninit in component too.

if I want go to the same route and invoke ngOninit too, do you have any solution ?

@rainstormza

@rainstormza ... no, it shouldn't. Not by design. Triggering of ngOnInit would mean creating a new instance of the same component ... and it's not true.

The question is why you need to run ngOnInit at all. You have probably some logic in you code that should be improved to allow you to react to data changes without the necessity of running ngOnInit again. But I don't know your exact case so I can't be more explicit.

@mlc-mlapis

@mlc-mlapis I got it.
I need to run ngOninit because when I click the same url
I want my component ( or lazyload component) re-render again which mean I want my component trigger my service again or do some logic in ngOninit again.

Do you have any solution to do anything like this ?
thanks.

@rainstormza

@rainstormza ... yes, you can run ngOnInit hook by yourself ... as you do it in unit tests. But I still think that you should improve the logic of your code ... so your component would be able to detect automatically that it is refreshed. One way could be via a resolver ... that can run some code and through a singleton service ... to which the component is subscribed ... emit something what the component understands and would be able to run what your need.

@kapunahelewong

As noted by @kapunahelewong, we need to clarify the expectations in the docs. As for being able to actually reload the components, this seems to be possible by providing your own RouteReuseStrategy along with {onSameUrlNavigation: 'reload'} as in this example: https://stackblitz.com/edit/angular-ivy-router-base-2hgd2t. Please correct me if I'm wrong, but this appears to accomplish the described goal.

Thanks for that solution, it kind of does what i would need in my case. Unfortunately i've noticed that when using nested routes, not only the child but also its parent component will be reloaded (though for some reason only the child resolver is triggered, not the parent resolver. What i need for my use-case (in my case a side by side master/detail view) is for only the child resolver and component to be reloaded, as i don't want my master list to be rebuilt every navigation.

Any chance you could help me extend your solution to accomplish this?
Thanks!

@AlexanderSesslerPorabo

What i need for my use-case (in my case a side by side master/detail view) is for only the child resolver and component to be reloaded, as i don't want my master list to be rebuilt every navigation.

Any chance you could help me extend your solution to accomplish this?
Thanks!

@AlexanderSesslerPorabo I believe what you want is for your shouldReuseRoute to be return future.children.length !== 0; rather than return false. i.e. reuse the activated route if it has children.
https://stackblitz.com/edit/angular-ivy-router-base-fund7g?file=src%2Fapp%2Fapp.module.ts

Amazing, works as intended. Thank you!

when i use shouldreuseroute return false, it has a lot of side effects for me, like all links in sidemenu like <a routerLink="myLink">My link</a> will become default ones <a href="/dashboard">My link</a>, in app.component.ts NavigationEnd event activatedroute.firstchild is undefined. Anyone knows why?

Maybe it's a bit hacky or something, but I found a guide that helped me work around this issue: https://medium.com/swlh/how-to-toggle-caching-for-routing-components-in-angular-5a327ea87310

Seems to fix the issue for me, assuming its the same issue?

docs: clarify onSameUrlNavigation behavior (#42275)

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

onSameUrlNavigation doesn't re-load routed components #21115

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

73 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

onSameUrlNavigation doesn't re-load routed components #21115

Description

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Activity

mlc-mlapis commented on Dec 20, 2017

TylerDev6 commented on Dec 21, 2017

mlc-mlapis commented on Dec 21, 2017

rainstormza commented on Dec 29, 2017

mlc-mlapis commented on Dec 29, 2017

rainstormza commented on Jan 3, 2018

mlc-mlapis commented on Jan 3, 2018

rainstormza commented on Jan 4, 2018

mlc-mlapis commented on Jan 4, 2018

rainstormza commented on Jan 10, 2018

mlc-mlapis commented on Jan 10, 2018

73 remaining items

AlexanderSesslerPorabo commented on Jan 8, 2021

atscott commented on Jan 8, 2021

AlexanderSesslerPorabo commented on Jan 13, 2021

sanjuroo commented on Jan 28, 2021

MHillier98 commented on Mar 18, 2021

angular-automatic-lock-bot commented on Jul 10, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions