Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
update 2
This answer is only for a long ago discontinued router version.
See https://angular.io/api/router/RouteReuseStrategy for how to do it in the current router.
update 1
That's now fixed (Angular 2.3) for the new router by https://github.com/angular/angular/pull/13124 which allows to provide a custom reuse strategy.
For an example see also https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx
original
https://github.com/angular/angular/issues/9811
That's a known issue.
Currently there is no way to make the router re-create the component on parameter-only route changes.
They discussed plans to implement some reuse-strategies eventually.
You can subscribe to params changes and execute your code there instead of in ngOnInit()
Navigating to the same route not refreshing the component?
If only the params has changes the component itself won't be initialize again. But you can subscribe to changes in the parameters that you send.
For example on ngOnInit method you can do something like this:
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
const term = params['term'];
this.service.get(term).then(result => { console.log(result); });
});
}
Router Navigate does not call ngOnInit when same page
You can inject the ActivatedRoute
and subscribe to params
constructor(route:ActivatedRoute) {
route.params.subscribe(val => {
// put the code from `ngOnInit` here
});
}
The router only destroys and recreates the component when it navigates to a different route. When only route params or query params are updated but the route is the same, the component won't be destroyed and recreated.
An alternative way to force the component to be recreated is to use a custom reuse strategy. See also Angular2 router 2.0.0 not reloading components when same url loaded with different parameters? (there doesn't seem to be much information available yet how to implement it)
Angular 2.0 router not working on reloading the browser
The error you are seeing is because you are requesting http://localhost/route which doesn't exist. According to Simon.
When using html5 routing you need to map all routes in your app(currently 404) to index.html in your server side. Here are some options for you:
using live-server: https://www.npmjs.com/package/live-server
$live-server --entry-file=index.html`
using nginx: http://nginx.org/en/docs/beginners_guide.html
error_page 404 /index.html
Tomcat - configuration of web.xml. From Kunin's comment
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
Want to prevent Component recreation while routing in Angular 2
Currently components are reused only when only route parameters change while staying on the same route.
If the route is changed, event when the new route adds the same component, the component is recreated.
The preferred workaround is to keep the model in a shared service that stays alive during route changes and use the data from this service to restore the previous state of the component.
It was mentioned that there are plans to support custom reuse strategies with the router but no timeline when this will become available.
Update
Support for custom reuse strategy was added to Angular2.
See also
- https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx
https://github.com/angular/angular/issues/7757#issuecomment-236737846
Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
Related Topics
Difference Between Defer().Promise and Promise
Find Dom Element by Id When Id Contains Square Brackets
How to Refer to a Variable Using a String Containing Its Name
Es6/Es2015 Object Destructuring and Changing Target Variable
Meteor.Publish: Publish Collection Which Depends on Other Collection
How to Destructure All Properties into the Current Scope/Closure in Es2015
Is It True That Every Function in JavaScript Is a Closure
Sequelize Model Association Won't Create a New Column
Cannot Use Attr with an Object in D3 V4
How to Display a Modal Dialog in Redux That Performs Asynchronous Actions
Check If Element Exists in Jquery
JavaScript Promises - Reject VS. Throw
Correct Way to Convert Size in Bytes to Kb, Mb, Gb in JavaScript