27

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 { }
simplelenz
  • 877
  • 1
  • 9
  • 22
  • 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` ? – Chris Sharp Nov 11 '17 at 04:20
  • @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? – simplelenz Nov 11 '17 at 14:40

3 Answers3

65

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([''])
  }
}
AT82
  • 71,416
  • 24
  • 140
  • 167
  • 1
    @JT_82, This works. Thanks. Could you briefly tell me the difference of the RouterModule and the Router? – simplelenz Nov 11 '17 at 15:36
  • 3
    Well, with RouterModule you provide routing to your app, and with Router you do the actual routing :) – AT82 Nov 12 '17 at 07:33
  • Here `AppComponent` is the root component, whose html file contains `` where the routed component is rendered. `AppComponent`'s `ngOnInit()` method doesn't gets called again since its not created again. – j4rey Sep 15 '18 at 20:20
  • Any ideas why this would work locally but when deployed does not work? – new_programmer_22 Aug 16 '19 at 18:35
12

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*/']) 
  }
}
Anandan K
  • 1,380
  • 2
  • 17
  • 22
-8

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

<a href="/page">Go to page</a>
Мирослав Стрельбицкий
  • 1
  • 5