How to load host component from remote app using module federation?

Question

I'm new to the module federation and having some issue while loading host app, when using Host(React+vite) and Remote(angular18+custom-webpack).

Remote : custome-webpack.config.js

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const deps = require("./package.json").dependencies;
module.exports =  {
    output: {
      uniqueName: "remoteAppExample",
      publicPath: "auto"

    },
    optimization: {
      runtimeChunk: false
    },
    experiments: {
      outputModule: true
    },
    plugins: [
      new ModuleFederationPlugin({
        name: 'remoteAppExample',
        library: { type:"module"},
        filename: 'remoteEntry.js',
        exposes: {
          './RComponent': './src/app/app.component.ts'
        },
        shared: {          
          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: deps["@angular/core"] },
          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: deps["@angular/common"] },
          "@angular/router": { singleton: true, strictVersion: true, requiredVersion: deps["@angular/router"] },
        }
      }),
    ]
};

Host Vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
    plugins: [
        react(),
        federation({
            name: 'host-app',
            filename: 'remoteEntry.js',
            remotes: {
              remoteApp: {
                external: 'http://localhost:4200/remoteEntry.js',
                format: 'esm',
                from: 'webpack'
              }              
            },  
            shared: ['react','react-dom']
        })
    ],
    build: {
      modulePreload: false,
      target: 'esnext',
      minify: false,
      cssCodeSplit: true
    }
})

Remote Component in Host Code as :

import React from 'react';
import RComponent from 'remoteApp/RComponent';

function App() {
  return (
    <>
      <h1>Host(Vite + React) - Remote(angular+custom-webpack)</h1>
      <div>
        <RComponent />
      </div>
    </>
  )
}

export default App

remoteEntry.js file is being loading in network. [![enter image description here][1]][1]

But it is not showing anything.

It will be really helpful if someone can give some idea, what i am missing ?

Thanks

Answer 1

There were two things I was doing wrong. First, instead of exposing module/standalone component from separate file, i was exposing directly component and second, direct component render, i should had render as selector

function App() {
  useEffect(() => {
    RComponent();
  }, []);
  return (
    <>
     <app-root> </app-root>
    </>
  )
}