Nx Angular Micro-Frontend-Remote-App APP_INITIALIZER wird nicht ausgelöst, wenn vom Host/Shell aus auf die Remote-App zu ⇐ JavaScript

[Anonymous]

Ich habe ein Nx Angular-Mikro-Frontend mit einem Host/einer Shell namens Host und einem Remote namens Marketing. In der Remote-App habe ich einen Dienst, der Konfigurationsdaten vom Server abruft, wenn die Remote-App initialisiert wird.
Das Problem besteht darin, dass ich sehe, dass die Daten vom Server abgerufen werden, wenn ich über einen separaten Browser-Tab auf die Remote-App zugreife, aber wenn ich vom Host/Shell zur Remote-App navigiere, sind die Daten undefiniert. Hier sind meine Codeausschnitte. Ich verwende Angular 20 und eigenständige Komponenten.
Codeausschnitte in der Shell/Host-App: host
app.routes.ts

Code: Select all

export const appRoutes: Route[] = [
{
// this navigates to the remote app when a user clicks on the 'marketing' link  from the host ui
path: 'marketing',
loadChildren: () => import('marketing/Routes').then((m) => m!.remoteRoutes),
}
]

Codeausschnitte in der Remote-App: Marketing
MyConfigService

Code: Select all

@Injectable({
providedIn: "root"
})
export class MyConfigService {
dataFromServer: string = '';

public initConfig() {
// In this class i fetch data from the server and save it in the local variable as well as in localstorage
dataFromServer = resultFromServer;
localstorate.setItem("data", resultFromServer)
// I also print the results to the console with console.log();

}

get DataFromServer(): string {
return this.dataFromServer;
}
}

Die unten stehende Provider-Funktion nutzt den oben genannten Dienst

Code: Select all

export function provideConfigData(): EnvironmentProviders {
return makeEnvironmentProviders([
provideAppInitializer(() => {
const service = inject(MyConfigService);
return service.initConfig();
})
]);
};

Im Array des Anbieters der app.config.ts der Fernbedienung füge ich die obige Funktion hinzu, um die Konfiguration abzurufen, wenn die Remote-App startet.

Code: Select all

export const appConfig: ApplicationConfig = {
providers: [
provideConfigData()
]
};

In der Remote-App habe ich einen Wächter erstellt, den ich in den Routen verwende, um sicherzustellen, dass Benutzer nur dann auf die Remote-App zugreifen können, wenn die Daten vom Server abgerufen werden. Der Wächter verwendet die in der lokalen Variablen gespeicherten Daten des oben genannten Dienstes.

Code: Select all

export const checkPermissions: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
const service = inject(MyConfigService);
const dataFromServer = service.DataFromServer
// When I access the remote app from its own browser tab with localhost:4201, I see "dataFromServer" and the data from localstorage been logged to the console but when I click I link from the host app to navigate to the remote app the console prints undefined values
console.log('=====1=======:', dataFromServer);
console.log('=====2=======:', localstorage.getItem('data'));
if (dataFromServer) {
return true;
}
return false;
}

Der Eintrag „entry.routes.to“ der Remote-App sieht folgendermaßen aus:

Code: Select all

export const remoteRoutes: Route[] = [
{
path: '',
component: RemoteEntry,
canActivate: [checkPermissions] // The guard is used here.
}
];

Das Problem besteht darin, dass ich beim Zugriff auf die Remote-App über einen Browser-Tab (localhost:4201) die Protokolle von MyConfigService und den checkPermissions-Guard sehe, aber wenn ich auf einen Link von der Host-App (localhost:4200) klicke, um zur Remote-App zu navigieren, werden in den Protokollen undefinierte Werte angezeigt. Der Remote-App-Initialisierer wird nie ausgelöst, wenn von der Host-App darauf zugegriffen wird.