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/utils/withLatestFromSynchronousFix.ts

@@ -0,0 +1,19 @@
+import { combineLatestWith, distinctUntilChanged, Observable, ObservableInput, ObservableInputTuple } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+// withLatestFrom does not work in this case, so we use
+// combineLatestWith + distinctUntilChanged
+// here the problem is described in more detail
+// https://github.com/ReactiveX/rxjs/issues/7068
+export const withLatestFromSynchronousFix =
+  <T, A extends readonly unknown[]>(...secondaries$: [...ObservableInputTuple<A>]) =>
+  (primary$: Observable<T>) =>
+    primary$.pipe(
+      // we add the index, so we can distinguish
+      // primary submissions from each other,
+      // and then we can only emit when primary changes
+      map((primary, i) => <const>[primary, i]),
+      combineLatestWith(...secondaries$),
+      distinctUntilChanged(undefined!, ([[_, i]]) => i),
+      map(([[primary], ...secondaries]) => <const>[primary, ...secondaries]),
+    );