Error: runtimeTemplate.supportsAsyncFunction is not a function

Discussão em 'Angular' iniciado por aishwarya, Setembro 11, 2024.

  1. aishwarya

    aishwarya Guest

    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"

    Continue reading...

Compartilhe esta Página