How to integrate an Angular component in React remote using ModuleFederation - reactjs

Question

I have the following structure:
-mfp/
- react-host/
- webpack.dev.js
- index.js
- bootstrp.js
- src/
- App.js
- angular-remote/
- webpack.config.js
- src/
- main.ts
- bootstrp.ts
- app/
- app.module.ts
my webpack.config.js in my angular-remote look the following
const webpack = require('webpack');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
output: {
uniqueName: "ang",
publicPath: "http://localhost:8082/"
},
optimization: {
runtimeChunk: false
},
plugins: [
new ModuleFederationPlugin({
library: { type: 'var', name: 'ang' },
name: "ang",
filename: "remoteEntry.js",
exposes: {
'./angApp': './src/app/app.component.ts',
},
shared: {
'#angular/core': { eager: true, singleton: true },
'#angular/common': { eager: true, singleton: true },
'#angular/router': { eager: true, singleton: true },
},
}),
],
};
My webpack.dev.js in my react-remote look the following
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const packageJson = require('../package.json');
module.exports = = {
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react', '#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime'],
},
},
},
],
},
mode: 'development',
devServer: {
port: 8081,
historyApiFallback: {
index: 'index.html',
},
},
plugins: [
new ModuleFederationPlugin({
name: 'marketing',
filename: 'remoteEntry.js',
exposes: {
'./MarketingApp': './src/bootstrap',
},
shared: packageJson.dependencies,
}),
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
My app.module.ts is the following:
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
// bootstrap: []
bootstrap: [AppComponent]
})
export class AppModule { }
Still I don't see my angular app in my react, I can import in my react-host App.js the following
import angApp from 'ang/angApp'
without any error,I even see at the network tab in the console the call's to the JS return successfully but nothing appears.

Answer 1

I found a wonderful git repo that implements exactly what I intended to do. if any one come across this issue, worth checking it out.