Angular 7 - Browser Refresh always redirecting to homepage

Question

What's the best way to retain the user on same page after browser refresh.

Example: User is in www.domain.com/page1 . When he refreshes the browser, the router redirects to www.domain.com/home which is the default routing.

I can achieve this by using HashLocationStrategy . But it adds additional # in the url. Ex: www.domain.com/#/page1 , which I want to avoid.

const routes: Routes = [
  {
    path: "page1",
    component: page1Component
  },
  { 
    path: '',
    redirectTo: 'home', 
    pathMatch: 'full'
  }

];

providers: [{
   provide: LocationStrategy, 
   useClass: HashLocationStrategy
}]

Also, I have done the required apache web server configurations as per the https://angular.io/guide/deployment

I understand angular is SPA and after root everything is virtual. But still, is there a better way to achieve this without # ?

Answer 1

From my understanding of your question, you can consider using lazy loading feature modules for each feature you have.

See my my stackblitz for more details.

When you refresh the stackblitz page, it stay on the same page.