LifeCycle calls are not called on router navigation

Question

I have this routes set up

{path:'home', component:HomeComponent, canActivate: [AuthGuard]},  
{path:'profile', component:UserProfileComponent, canActivate: [AuthGuard] },

and in in my navbar.component i have the following

        <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
            <a [routerLink]="['/home']" class="nav-link"><i class="fas fa-home fa-2x"></i></a>
        </li>
        <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
            <a [routerLink]="[ '/profile']" class="nav-link"><i class="fas fa-user fa-2x"></i></a>
        </li>

in my home.component im getting data from my firebase service in the ngOnInit()

ngOnInit() {
    this.firebaseService.getPodcasts().subscribe(podcasts => {
      this.podcasts = podcasts;
    });

this only happens the first i navigate to home, but if i go to profile (From the navbar) and then back to home, the ngOnInit is not called (i tried to console log inside and nothing happens). but when i write the URL for example https://localhost/4200/home then it does activate the ngOnInit() lifecycle.

i'm not sure how relevent this is, but here is my HTML for the app.component :

<div class="app-container">

    <app-navbar *ngIf="authService.getAuthState()" (updateSideNav)='toggleSideNavParent($event)'>
    </app-navbar>
    <flash-messages></flash-messages>

    <router-outlet>
    </router-outlet>
</div>
<div *ngIf="authService.getAuthState()" class="sidenav-overflow" [ngClass]="{'show-overflow':isSideNavOpen}">
    <app-sidenav [isSideNavOpen]='isSideNavOpen'></app-sidenav>
</div>

and in my home.component :

<div class="jumbotron">
<h1>home</h1>
    <app-record></app-record>
    <app-content [allPodcasts]="podcasts"></app-content>
</div

Answer 1

ok so the problem was not with the ngOnInit but with firebaseFirestore. whenever i loaded the ngOnInit and called

this.firebaseService.getPodcasts().subscribe(podcasts => {
      this.podcasts = podcasts;
    });

it never called it for some reason. but i changed the firebaseService.getPodcasts() from:

public getPodcasts(){
      return this.podcasts;
    }

To:

 public getPodcasts(){
  this.podcasts = this.podcastCollection.snapshotChanges().map(changes => {
    return changes.map(a => {
      const data = a.payload.doc.data() as Podcast;
      data.id = a.payload.doc.id;
      return data;
    })
  })
  return this.podcasts;
}

and now it works .. i still don't understand why because in the firebaseService constructor i set

this.podcasts = this.podcastCollection.snapshotChanges().map(changes => {
    return changes.map(a => {
      const data = a.payload.doc.data() as Podcast;
      data.id = a.payload.doc.id;
      return data;
    })
  })