Why Angular guard is running before ngOnInit?

I have checkAuth function in ngOnInit in app.component.ts which checks localStorage for token and if token is valid authService logs you in.

Also, I have AuthGuard in /profile route which checks if you logged in.

If I click the link in the navbar this works great, but if I go to link directly authGuard working before my checkAuth function and returns false.

Where do I need to place my checkAuth function to make it work correctly? Or maybe I need to change something in AuthGuard or in app.component

Here is AuthGuard code

@Injectable({
  providedIn:'root'
})
export class AuthGuard implements CanActivate, CanActivateChild {

  constructor(private auth:AuthService, private router:Router) {
  }

  canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>{
    console.log(this.auth.isAuth)
    console.log(this.auth.isLoggedIn())
    if (this.auth.isLoggedIn()){
      return of(true)
    } else {
      this.router.navigate(['/login'])
      return of(false)
    }
  }

  canActivateChild(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>{
    return this.canActivate(route, state)
  }
}

app.component

ngOnInit() {
    if (localStorage.getItem('token')){
      this.auth.checkAuth().subscribe(
        (data) => {
          console.log(data)
          console.log(this.auth.isAuth)
        }
      )
    }
  }

and checkAuth in AuthService

checkAuth():Observable<UserDto>{
     return this.http.get<UserDto>(`/api/user/refresh`, {withCredentials:true, observe:'body', responseType:'json'})
        .pipe(
          tap(
            (data) => {
              localStorage.setItem('token', data.accessToken)
              this.setAuth(true)
              this.setUser(data.user)
            },
            (error) => {
              console.log(error)
            }
          )
        )
  }