refresh page angular 2 router

Question

I have the following web with angular 2 routing (using vs 2015 as my IDE)

however, whenever i refresh the page, i get this:

Therefore, whenever i want to hard refresh my page, i have to go to the error page first then i need to enter the following url: http://localhost:57831/index.html

Is there any solution so whenever i hard refresh, it always go to http://localhost:57831/index.html instead of http://localhost:57831/index.html/search?

thanks

you need to handle routes at server side as well, so that all routes go to your default page. — Madhu Ranjan, May 08 '17 at 14:14

score 1 · Accepted Answer · answered May 25 '17 at 11:00

found the answer from here: Angular 2 : 404 error occur when i refresh through Browser

in app.module.ts:

Add imports:

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

And in NgMoudle provider, add:

{provide: LocationStrategy, useClass: HashLocationStrategy}

score 0 · Answer 2 · answered May 08 '17 at 14:15

Besides that you should try to redirect all 404 request inside your VC2015 webserver to index.html. If you have done that, there are two solutions for your problem.

Somehow find a way to change the web.conf file of your VC2015 application. There you should find a httpRuntime entry

Change it to allow the :, by removing the : entry:

<system.web>
    <httpRuntime requestPathInvalidCharacters="&lt;,&gt;,*,%,&amp;,\,?"/>
</system.web>

Perhaps this file is located here:

%userprofile%\Documents\IISExpress\config\web.conf

Do not use the : inside your URL, use a dash (-) or what ever is not illegal in the comma separated list above (I'd say go for this), there is a reason those characters are considered illegal:

refresh page angular 2 router

2 Answers2