Удаленное приложение Nx Angular Micro Frontend APP_INITIALIZER не запускается при доступе к удаленному приложению с хост ⇐ Javascript

[Anonymous]

У меня есть микроинтерфейс Nx Angular с одним хостом/оболочкой, называемым хостом, и одним удаленным сервером, называемым маркетингом. В удаленном приложении у меня есть служба, которая извлекает данные конфигурации с сервера при инициализации удаленного приложения.
Проблема заключается в том, что когда я обращаюсь к удаленному приложению из отдельной вкладки браузера, я вижу, что данные извлекаются с сервера, но когда я перехожу от хоста/оболочки к удаленному приложению, данные не определены. Вот фрагменты кода mijn. Я использую Angular 20 и автономные компоненты.
==============> Фрагменты кода в приложении Shell/Host: хост
==== app.routes.ts

Код: Выделить всё

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),
}
]

==============> Фрагменты кода в приложении Remote: маркетинг
====> MyConfigService

Код: Выделить всё

@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;
}
}

====> Приведенная ниже функция поставщика использует указанную выше службу

Код: Выделить всё

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

====> В массив провайдера удаленного приложения app.config.ts я добавляю указанную выше функцию для получения конфигурации при запуске удаленного приложения

Код: Выделить всё

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

====> В удаленном приложении я создал защиту, которую использую в маршрутах, чтобы гарантировать, что пользователи могут получить доступ к удаленному приложению только в том случае, если данные с сервера получены. Охранник использует данные, хранящиеся в локальной переменной службы выше

Код: Выделить всё

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;
}

====>Entry.routes.to удаленного приложения выглядит следующим образом:

Код: Выделить всё

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

Проблема, с которой я сталкиваюсь, заключается в том, что когда я получаю доступ к удаленному приложению на вкладке браузера (localhost:4201), я вижу журналы из MyConfigService и охранника checkPermissions, но когда я нажимаю ссылку из приложения хоста (localhost:4200), чтобы перейти к удаленному приложению, журналы показывают неопределенные значения. Инициализатор удаленного приложения никогда не запускается при доступе к нему из хост-приложения.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ccesing-th