fix: load metadata using user service (#9429)

# Which Problems Are Solved
- #9382 "When I log in and get to my user profile page, I get an empty
error message at the top:"

# How the Problems Are Solved
load metadata using user service

# Additional Changes
- The roles observable returns an empty array instead of never emiting
- Small refactorings in app.component.ts because at first I thought the
errors stems from there.
- Added withLatestFromSynchronousFix RXJS operator because
withLatestFrom has confusing behavior when used in synchronous contexts.
Why this operator is needed is described here:
https://github.com/ReactiveX/rxjs/issues/7068

# Additional Context
- Closes #9382

console/src/app/services/grpc-auth.service.ts

@@ -1,21 +1,7 @@
 import { Injectable } from '@angular/core';
 import { SortDirection } from '@angular/material/sort';
 import { OAuthService } from 'angular-oauth2-oidc';
-import {
-  BehaviorSubject,
-  combineLatestWith,
-  defer,
-  distinctUntilKeyChanged,
-  EMPTY,
-  forkJoin,
-  mergeWith,
-  NEVER,
-  Observable,
-  of,
-  shareReplay,
-  Subject,
-  TimeoutError,
-} from 'rxjs';
+import { BehaviorSubject, combineLatestWith, EMPTY, mergeWith, NEVER, Observable, of, shareReplay, Subject } from 'rxjs';
 import { catchError, distinctUntilChanged, filter, finalize, map, startWith, switchMap, tap, timeout } from 'rxjs/operators';
 
 import {
@@ -186,7 +172,6 @@ export class GrpcAuthService {
           .then((resp) => resp.resultList)
           .catch(() => <string[]>[]),
       ),
-      filter((roles) => !!roles.length),
       distinctUntilChanged((a, b) => {
         return JSON.stringify(a.sort()) === JSON.stringify(b.sort());
       }),
@@ -302,7 +287,6 @@ export class GrpcAuthService {
     }
 
     return this.zitadelPermissions.pipe(
-      filter((permissions) => !!permissions.length),
       map((permissions) => this.hasRoles(permissions, roles, requiresAll)),
       distinctUntilChanged(),
     );