On browser reload the angular app is redirected to previous component

In my Angular application I have 2 routes as below.

1. http://localhost:4200/lectures 
2. http://localhost:4200/lectures/{id}

The first route displays a list of lectures and the second route show a single lecture component. When I try to perform a browser reload on the second route it redirects to the first route or maybe a root route because I only have 2 routes and the root/empty route defaults to the first one. These routes/components don’t have parent/child relationship and are independent of each other.

Both the routes have some resolvers to fetch required data from service before the component gets rendered.

How do I stop the application from redirecting to its previous component or I guess its a root component on a browser reload?

I am also not able to go to the second route directly.

I am using ‘microsoft-adal-angular6’ AuthenticationGuard on both the routes.

I have read this blog and tried already but it didn’t work.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LectureDetailsComponent } from './lecture-details/lecture-details.component';
import { LectureListComponent } from './lecture-list/lecture-list.component';
import { LectureDetailResolver } from './_resolvers/lecture-detail.resolver';
import { LectureListResolver } from './_resolvers/lecture-list.resolver';
import { AppComponent } from './app.component';
import { AuthenticationGuard } from 'microsoft-adal-angular6';

const routes: Routes = [
  { path: '', redirectTo: '/lectures', pathMatch: 'full', canActivate: [AuthenticationGuard] },
  { path: 'lectures', component: LectureListComponent, resolve: { lectures: LectureListResolver }, canActivate: [AuthenticationGuard] },
  { path: 'lectures/:id', component: LectureDetailsComponent, resolve: { lecture: LectureDetailResolver }, canActivate: [AuthenticationGuard] },

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthenticationGuard]
export class AppRoutingModule {


the expectation is that the page refreshes on the same route/component but the actual result is the application gets redirected to the previous/root component

Source: New feed