I'm facing an issue while rendering Angular Micro Frontends (MFE) in a host application with a different Angular version.

Application Setup:

Host/shell Application: Angular 12.1.5

Micro Frontends Remote (MFE): Angular 15.2.10

Issue: I am successfully loading the MFE into the host application.The main page from the MFE renders correctly, and some elements appear as expected. However, nested components inside the MFE are not rendering.

Host/Shell App:

enter image description here

In Remote App (MFE):

enter image description here

Above image I'm able to load MFE in the host/shell application and

tag but not loading component HTML.

inside component have some static text.

MEF(Remote) HomeComponent

<p>Remote Application version - 17 </p>
<test-root></test-root>

MFE(Remote) TestComponent

<p>Hello World !!!!!!!!</p>

MFE(Remote) Webpack.config.js

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 Routes to load MFE(Remote)

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

Verified that TextComponent is declared inside the MFE module. Checked the browser console (no errors related to missing components). Verified that the shared dependencies in webpack.config.js are correctly configured.