Angular 12 Host Application не рендеринг вложенного компонента из Angular 15 MFE ⇐ Javascript

[Anonymous]

Я сталкиваюсь с проблемой при отмене угловых микрофиндов (MFE) в хост -приложении с другой угловой версией. < /p>
Настройка приложения: < /p>
< P> Приложение Host /Shell: Angular 12.1.5 < /p>
Micro Frontends Remote (MFE): Angular 15.2.10 < /p>
Выпуск:
Я Успешная загрузка MFE в хост -приложение. Основная страница от MFE правильно отображается, и некоторые элементы появляются, как и ожидалось. Тем не менее, вложенные компоненты внутри MFE не рендеринг. В удаленном приложении (MFE):
Введите описание изображения здесь
Выше изображение я могу загрузить MFE на хосте/оболочке приложение и тег , но не загрузка Компонент html. < /p>
Внутренний компонент имеет некоторый статический текст. < /p>
mef (удаленный) homecomponent < /p>

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

Remote Application version - 17

< /code>
mfe (remote) testcomponent < /p>

Hello World !!!!!!!!
< /code>
mfe (remote) webpack.config.js < /p>
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
path.join(__dirname, 'tsconfig.json'),
[/* mapped paths to share */]);

module.exports = {
output: {
uniqueName: "angular15App",
publicPath: "auto",
scriptType: 'text/javascript'
},
optimization: {
runtimeChunk: false,
splitChunks: false,
},
plugins: [
new ModuleFederationPlugin({
name: "mfe1",
filename: "remoteEntry.js",
exposes: {
'./MfeModule': './src/app/admin/admin.module.ts',
},
shared: share({
"@angular/core": {
singleton: true,
strictVersion: true,
requiredVersion: ">=1.0.0",
},
"@angular/common": {
singleton: true,
strictVersion: true,
requiredVersion: ">=1.0.0",
},
"@angular/common/http": {
singleton: true,
strictVersion: true,
requiredVersion: ">=1.0.0",
},
"@angular/router": {
singleton: true,
strictVersion: true,
requiredVersion: ">=1.0.0",
},
...sharedMappings.getDescriptors()
})

}),
sharedMappings.getPlugin()
],
};

Host/Shell маршруты для загрузки MFE (удаленное)
import { loadRemoteModule } from '@angular-architects/module-federation-runtime';

export const routes: Routes = [
{
path: 'mfe1',
loadChildren: () =>
loadRemoteModule({
remoteEntry: 'http://localhost:4201/remoteEntry.js',
remoteName: 'mfe1',
exposedModule: './MfeModule',
}).then((m) => {
return m.AdminModule;
}),
}];
< /code>
проверил, что TextComponent объявляется в модуле MFE.
проверил консоль браузера (без ошибок, связанных с отсутствующими компонентами).
проверил, что общие зависимости в WebPack. config.js правильно настроены.

Подробнее здесь: https://stackoverflow.com/questions/794 ... lar-15-mfe