Angular 5 - redirect page to homepage on browser refresh

Question

Currently, when I refresh a page from a route like

http://localhost:4200/feedback

it stays on the same route. But I want the route to redirect to

http://localhost:4200

I saw people have asked how to implement the refresh to stay on the same route. So I guess, the default angular should redirect to homepage on browser refresh. Any idea why my angular default project does this otherwise?

Below is my AppRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SmileyFeedbackComponent } from '../smiley-feedback/smiley-feedback.component';
import { FeedbackFormComponent } from '../feedback-form/feedback-form.component';
import { ThankYouComponent } from '../thank-you/thank-you.component';

const routes: Routes = [
  { path: '', redirectTo: '/smiley', pathMatch: 'full' },
  { path: 'smiley', component: SmileyFeedbackComponent },
  { path: 'feedback', component: FeedbackFormComponent },
  { path: 'thank-you', component: ThankYouComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { }

Caterer

The router is doing what your route is telling it to do. If you want to go back to the root then you need to redirect. And if you do that then how are you going to hit the route for feedback ? – Misspeak

@ChrisSharp, actually i don't need anyone to hit a route by typing it in the browser url. Below code by AJT_82 does the trick. I am a newbie to angular. Can you tell me the difference of the RouterModule and the Router? What I understood is RouterModule is like a constructor for a Router and whatever the manipulations I need to do with routing, I have to use the Router. Is this correct? – Caterer

Answer 1

As mentioned by Chris Sharp, your app is doing exactly what it should do, routing to the place that the url is pointing to, since you have not told it otherwise.

What you can do, is that in your app.component you can in OnInit redirect to root. This then means that when app is (re)initialized, you are being redirected to root page.

export class AppComponent { 
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.navigate([''])
  }
}

Holloweyed

@JT_82, This works. Thanks. Could you briefly tell me the difference of the RouterModule and the Router? – Caterer

Well, with RouterModule you provide routing to your app, and with Router you do the actual routing :) – Holloweyed

Here AppComponent is the root component, whose html file contains <router-outlet> where the routed component is rendered. AppComponent's ngOnInit() method doesn't gets called again since its not created again. – Ian

Any ideas why this would work locally but when deployed does not work? – Exostosis

@Holloweyed This works when we test locally but when we deploy it gives 404 error message in any server. Can you suggest some alternate solution if you have any ? – Valenzuela

@Exostosis Did you find any alternate solution for this ? – Valenzuela

@SubashJ I suspect when deployed the routing is not working properly because of SPA. Depending on where you are deploying you need to check how to deal with SPA. For example if using azure static webapp you need to define navigation fallback: learn.microsoft.com/en-us/azure/static-web-apps/… – Holloweyed

@Holloweyed I have fixed this issue by HashLocationStrategy. #71094593 – Valenzuela

Answer 2

Import Router

import { Router } from '@angular/router';

Initiate Router in Constructor

export class LoginComponent implements OnInit {
 constructor(private router:Router) {}
  loginCheck() {
    /*Your HTTP REQUEST HERE */
    this.router.navigate(['/*Your Path Here*/']) 
  }
}

Hippel

Answer 3

If you need reload page in angular 8 then do following, it worked for me.

<a href="/page">Go to page</a>

Sacred

This is in terms of html, try to add code from ts/js perspective. – Kinchinjunga