admin管理员组

文章数量:1391047

I'm trying to build a Module Federation app using Angular 19 and Webpack 5. My setup consists of:

  1. Remote-App: It successfully builds and generates remoteEntry.js, accessible at: http://localhost:4201/remoteEntry.js

  2. Host-App: Fails to load mfe-app remoteEntry.js from http://localhost:4201/remoteEntry.js in the host application, I get this error in the browser console: Uncaught SyntaxError: Cannot use 'import.meta' outside a module (at remoteEntry.js:3629:29)

What I've Tried

To resolve this, I attempted the following:

1. Configured Remote-App to use CommonJS instead of ES Modules

Here’s my remote-app webpack.config.js:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

const mfConfig = withModuleFederationPlugin({
name: 'remote-mfe-app',
exposes: {
 './RemoteEntryComponent': './src/app/remote-entry/remote-entryponent.ts'
},
shared: {
 ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}
});

module.exports = {
...mfConfig,

output: {
 library: {
   type: "commonjs" // Also tried "module" and "umd"
 }
},

experiments: {
 outputModule: false
}
};

2. Configured Host-App to treat remoteEntry.js as CommonJS instead of an ES Module

Here’s my host-app webpack.config.js:

const { withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
  name: 'mfe-host-app',
  remoteType: 'commonjs',

  remotes: {
    'remote-mfe-app': 'alpha-new-business-mfe@http://localhost:4201/remoteEntry.js'
  },

  shared: {
    singleton: true,
    strictVersion: true,
    requiredVersion: 'auto'
  }
});

Despite all this. The remoteEntry.js file is still generated as ES Module and contain the import.meta I'm trying to avoid. Below is a snippet of remoteEntry.js that is causing this syntax error:

Below is the error I get host-app resulting in remote-app failing to load:

Any suggestion on how to fix this?

本文标签: