API queries in ngOnInit are executed from previous component

I have
signin.component.ts:

 ngOnInit() {
    this.metaService.getMetaCompany().subscribe((response: Json) => {
      console.log('meta company');
    });
  }

and app.component.ts:

 ngOnInit() {
    if (authenticated) {
     this.metaService.getMetaCompany().subscribe((response: Json) => {
       console.log('meta company');
     });
   }
  }

meta.service.ts:

getMetaCompany(): Observable<Json | JsonError> {
 return this.http
  .get<Json | JsonError>(this.getMetaCompanyUrl)
  .pipe(
    catchError(this.errorService.handleError)
 );
}

app-routing.module.ts:

...
const routes: Routes = [
  { path: 'signin', loadChildren: () => import('./signin/signin.module').then(m => m.SignInModule) },
  { path: 'inbox', loadChildren: () => import('./inbox/inbox.module').then(m => m.InboxModule) },
  { path: 'work', loadChildren: () => import('./work/work.module').then(m => m.WorkModule) },
  { path: 'something-went-wrong', component: InternalServerErrorComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts:

...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

export class AppModule { }

Redirection I execute with using these commands:

from sign out to sign in:

this.router.navigate(['signin'], { queryParams: { r: this.sharedService.currentUrl }});

from signin to another:

this.router.navigateByUrl(this.returnUrl);

When I'm on sign in page it's executed API query once, everything is fine, but after successful login I redirected to another page and in console log I see API query is executed twice: from app.component and signin.component.

I can't understand why I see queries from previous component (signin).
The same situation with sign out. I'm sign out and redirect to login page but API requests from ngOnInit of any previous component (it doesn't depend on page) are executed for some reasons and I'm getting errors because user was already signed out. Everything works fine between pages/components when user was logged in.

So how can I avoid executing API queries from previous component?

This is called as Memory Leakage by Api Subscription,

The best practice is to destroy your subscription in current component before you navigate to other component.

Follow the steps to do the same.

1. Add the Subject from 'rxjs/internal/Subject' just before the constructor.

   destroy$: Subject<boolean> = new Subject<boolean>();

2. Add the below pipe to every api call before subscription

   .pipe(takeUntil(this.destroy$))

3. And finally implement the OnDestory hook with destroying all above subscription.

   ngOnDestroy(): void {
this.destroy$.next(true);
this.destroy$.unsubscribe();
}