5

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?

CodyBugstein
  • 21,984
  • 61
  • 207
  • 363
  • What happens if you explicitly type the URL, http://localhost:4200/#/sign-in, on your browser address bar? – realharry Nov 16 '17 at 21:40
  • yes to be more clear, it works when I click a link to the page and when explicitly type it into the address bar. – CodyBugstein Nov 16 '17 at 21:41
  • 1
    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). – realharry Nov 16 '17 at 21:44
  • Just to be clear, you type the url and return, and it works. And, if you refresh, then what happens? – realharry Nov 16 '17 at 21:45
  • 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 – CodyBugstein Nov 16 '17 at 21:46
  • 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.) – realharry Nov 16 '17 at 21:50
  • @realharry added version info to question – CodyBugstein Nov 16 '17 at 21:53
  • 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. – realharry Nov 16 '17 at 22:09
  • I have three suggestions: – realharry Nov 16 '17 at 22:09
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159189/discussion-between-codybugstein-and-realharry). – CodyBugstein Nov 16 '17 at 22:10
  • (1) Try a different browser. (2) Try upgrading Angular to v5, if possible. (3) Try path strategy: RouterModule.forRoot(routes, {useHash: false}). – realharry Nov 16 '17 at 22:10

1 Answers1

6

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.

4b0
  • 21,981
  • 30
  • 95
  • 142
CodyBugstein
  • 21,984
  • 61
  • 207
  • 363
  • 1
    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 – codingbuddha Dec 26 '20 at 07:57