I have a host and remote application developed with Angular 15.
Below is the webpack config of host:
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
module.exports = {
entry: './src/main',
output: {
publicPath: 'http://localhost:4200/',
scriptType: 'text/javascript',
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
},
optimization: {
runtimeChunk: false,
},
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
helloworld: 'helloworld@http://localhost:3000/remoteEntry.js',
},
}),
],
};
Below is webpack config of MFE:
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
module.exports = {
output: {
publicPath: 'http://localhost:3000/',
scriptType: 'text/javascript',
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /.js$/,
type: 'babel-loader',
exclude: /node_modules/,
},
{
test: /.ts$/,
loader: 'ts-loader',
options: {
configFile: 'tsconfig.app.json',
},
},
],
},
optimization: {
runtimeChunk: false,
},
plugins: [
new ModuleFederationPlugin({
name: 'helloworld',
exposes: {
'./HelloWorldModule': './src/app/hello.module.ts',
},
}),
],
};
I am loading the MFE module in host using following code:
{
path: 'flights-search',
loadChildren: () => // @ts-ignore
// eslint-disable-next-line no-console
import('helloworld/HelloWorldModule').then(m => m.Module).catch(error => console.log('Error=>', error))
},
On running npm start in host, I get following error:
external “helloworld@http://localhost:3000/remoteEntry.js” – Error: runtimeTemplate.supportsAsyncFunction is not a function
Below are the packages I am using:
“webpack-bundle-analyzer”: “4.5.0”,
“webpack-cli”: “4.9.2”,
“webpack”: “^5.94.0”,
“webpack-dev-server”: “^4.11.1”,
“@angular-builders/custom-webpack”: “^15.0.0”