In angular 4 project, When I removed # from url. After removing # I am facing page refresh related issue

Question

When I removes # from angular 4 project using following code. in app.module.ts file

imports: [
...
RouterModule.forRoot(routes, { useHash: true })  // remove second argument
]

and in providers

@NgModule({
.....
providers: [
  // Below line is optional as default LocationStrategy is 
PathLocationStrategy
{provide: LocationStrategy, useClass: PathLocationStrategy} 
 ]
})

using this code I am able to remove # from url. But when I refresh page it goes to localhost:4200. Previously (with # when I had refresh page) it not goes to default page localhost:4200.how to handle this refresh error without # in url in angular 4

Answer 1

Add this in App component 

When refresh it will load app component ngOninit

get token or Return url values using router

      const id = this.route.snapshot.params['token'];
        const returnUrl = this.route.snapshot.params['returnUrl'];
        if (id && returnUrl) {
            const appUser = new AppUser();
            appUser.id = id;
            appUser.user = new UserInfo();
            this._storage.setObj('token', appUser);
            const encodedReturnUrl = decodeURIComponent(returnUrl);
            this._authService.populate(encodedReturnUrl);
        } else {
            this._authService.populate();
        }

Auth service is a core modules it will autherise when login and refresh time.

Get current user details with token values in App component.

 populate(returnUrl: string = '') {

      if (!returnUrl) {
              this.router.navigate([/login]);
                        } else {
       this.router.navigate([returnUrl]);
                        }
        }