1. Back To Blog

Angular 2 tips and tricks:- HashLocation strategy ( Handling Refresh)

Everyone loves hitting refresh ( f5) button if things are not working while surfing. In angular 2 applications when you hit refresh it hits the server and you end up with such exceptions. The exception is right because the hit has gone to MVC controller and controller does not have anything for defined as such.



So in order to handle the same we need to do use "HashLocationStratergy". So in your main module you need to define the strategy in the providers.


....
import HashLocationStrategy,LocationStrategy } from "@angular/common";
@NgModule(
.....
....    
providers: [        
 provide: LocationStrategy, useClass: HashLocationStrategy }    
]
})


Once you do that and when you start browsing the angular 2 application . you will see "#" sign as shown in the below figure which indicates that hash location strategy is in action.



"#" in a URL means that do not hit the server try to hit local HTML page. So now if you try refresh you will see that page refreshes but it does not hit MVC controller and does not show the not found page error.


I have also included this topic in my Angular 2 training Mumbaisyllabus as I feel it's a very important feature.


Below is step by step video from Angular 2 project series which is fully practical& easy to understand:


Shiv Prasad Koirala

Visit us @ www.questpond.com or call us at 022-66752917... read more

We are on Social