Angular Router redirecting back to base route on from certain routes, but fixes itself when you refresh the page

Put this in app-routing.module.ts

imports: [
    RouterModule.forRoot(
      routes,
      { enableTracing: true }
    )
]

The application will log out route behavior so you can investigate the issue.

For me, I think the problem is around Strange Issue #1, it can be cause by router function. Actions of router.navigate and router.navigateByUrl weren't be all the same.

This is really more appropriate as a comment, but when I've seen flickering in a front end app like that it was due to one of two things:

1. Some member of the app or component state that influences the rendering is updating before the page can finish loading ( page starts to load -> hook updates state -> page starts rendering -> state updates before rendering completes -> page starts rendering over again)
2. Something is triggering a cascade of redirects internally

I know it's not much of an answer, but I would recommend double checking the leaderboard and achievements components. If possible maybe add a log statement detailing component state. Any shared logic or sub-components seem like a good candidate for debugging.

If you haven't all ready, try opening dev tools and monitoring the network tab just to rule out the redirect option.

You should not use pathMatch: 'full' everywhere, it does not play well (especially if you have nested routes). The docs give you examples of the most common usages. It is usually a good idea to redirect empty string routes to avoid other issues.

Something like this should work:

const routes: Routes = [
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'dashboard',
        },
        {
            path: 'dashboard',
            component: DashboardComponent,
            canActivate: [LoggedInGuard],
        },
        {
            path: 'team-view',
            component: TeamViewComponent,
            canActivate: [LoggedInGuard],
        },
        {
            path: 'settings',
            component: SettingsComponent,
            canActivate: [LoggedInGuard],
        },
        {
            path: 'leaderboard',
            component: LeaderboardComponent,
            canActivate: [LoggedInGuard],
        },
        {
            path: 'achievements',
            component: AchievementsComponent,
            canActivate: [LoggedInGuard],
        },
        { path: 'register', component: RegisterComponent },
        { path: 'login', component: LoginComponent },
    ];

What happens with your jwt token after you refresh? Maybe you lose jwt during some process?

But from your description seems like CanActivate kicks in forces you to login where, perhaps, we find that user is logged in and login component by default moves you to /.

canActivate should always return boolean true/false, but here we just naviage user away:

        if (!isLoggedIn) {
            console.log('Returning to login screen');
            this.router.navigateByUrl('login');
        }

@Injectable()
export class LoggedInGuard implements CanActivate {
    constructor(private router: Router) {}

    canActivate(): Observable<boolean> | Promise<boolean> | boolean {
        const isLoggedIn = localStorage.getItem('jwt') !== null;

        if (!isLoggedIn) {
            console.log('Returning to login screen');
            this.router.navigateByUrl('login');
            return false;
        } else {
           return true;        
        }

    }
}