Back To Blog

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

By Shiv Prasad Koirala in Angular
May 4th, 2017
13959
0

Clear Angular basic concepts with this latest tutorial for Angular fresher and developer :-

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.

Here is the latest interview Questions with answers video