When refreshing Angular app, it ignores current URL and goes back to root URl

Question

If my Angular app, if I navigate (via explicitly typing in the URL or clicking a page link to it) to http://localhost:4200/#/sign-in the page loads fine and shows my sign in form. If I then click Refresh in my browser, I am taken back to the root page http://localhost:4200/#/.

My router is simple:

export const routes: Route[] = [
  { path: 'sign-up', component: SignUpComponent},
  { path: 'sign-in', component: SignInComponent},
  { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule'},
  { path: 'dashboard', loadChildren: 'app/user/user.module#UserModule', canActivate: [ UserLoggedInGuard ]},
  { path: '', pathMatch: 'full', component: HomeComponent},
  { path: '**', pathMatch: 'full', component: PageNotFoundComponent},
]

I am using

• Windows 8
• Chrome 62
• @angular/core": "^4.2.4
• @angular/router": "^4.2.4

Any ideas why this is happening?

Unquestionable

What happens if you explicitly type the URL, localhost:4200/#/sign-in, on your browser address bar? – Primordium

yes to be more clear, it works when I click a link to the page and when explicitly type it into the address bar. – Unquestionable

I had a similar issue with an Ionic app (built on top of Angular) a few months ago. I'll try to remember what the issue was, and I'll let you know if I do (in case your problem was caused by a similar issue). – Primordium

Just to be clear, you type the url and return, and it works. And, if you refresh, then what happens? – Primordium

I type the URL and it works. It goes to the sign-in page. Then I click Refresh and it takes me back to the root. It goes back to the root regardless of what component/page I'm on when I click Refresh – Unquestionable

BTW, what version of angular (and angular/router) are you using? (I just created a new Angular app with Angular v5 and my route does not include "#" by default. When I used it last time, there were options for using hash or not, if I remmeber correctly.) – Primordium

@Primordium added version info to question – Unquestionable

Your problem seems a bit different from what I was having. I was able to navigate with correct page url on the address bar (with # and everything). But if I typed the url directly, I got 404. Your problem may or may not be an Angular issue. – Primordium

I have three suggestions: – Primordium

Let us continue this discussion in chat. – Unquestionable

(1) Try a different browser. (2) Try upgrading Angular to v5, if possible. (3) Try path strategy: RouterModule.forRoot(routes, {useHash: false}). – Primordium

Answer 1

The problem ended up being some code I had in my app.component.ts that checked if the user was logged in and if not, navigated to the home page.

Unquestionable

Mate, you literally save my christmas. I was struggling for3 hours now and it never occured to me that I MAYBE should not redirect to my homescreen in my AuthGuard xD – Elizabetelizabeth