Angular 19 Module Federation: Resolución del error "Uncaught SyntaxError: Cannot use ‘import.meta’ outside a module" en remoteEntry.js

Contexto

Se está construyendo una aplicación con Module Federation utilizando Angular 19 y Webpack 5. La configuración incluye dos aplicaciones:

1. Remote-App: Se genera correctamente el archivo remoteEntry.js, accesible en http://localhost:4201/remoteEntry.js.
2. Host-App: Al intentar cargar remoteEntry.js, se produce el siguiente error en la consola del navegador:

   Uncaught SyntaxError: Cannot use 'import.meta' outside a module (at remoteEntry.js:3629:29)

Intentos de Resolución

1. Configuración de Remote-App para usar CommonJS en lugar de ES Modules:
   El archivo webpack.config.js de remote-app se configuró de la siguiente manera:

   const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
   
   const mfConfig = withModuleFederationPlugin({
      name: 'remote-mfe-app',
      exposes: {
          './RemoteEntryComponent': './src/app/remote-entry/remote-entry.component.ts'
      },
      shared: {
          ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
      }
   });
   
   module.exports = {
      ...mfConfig,
      output: {
          library: {
              type: "commonjs" // También se intentó "module" y "umd"
          }
      },
      experiments: {
          outputModule: false
      }
   };

2. Configuración de Host-App para tratar remoteEntry.js como CommonJS:
   El archivo webpack.config.js de host-app fue configurado así:

   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'
      }
   });

A pesar de estos cambios, el archivo remoteEntry.js todavía se genera como un módulo ES y contiene import.meta, lo que causa el error de sintaxis.

Posibles Soluciones

1. Verificar la configuración de Webpack: Asegúrate de que no haya otros configuraciones o plugins que sobreescriban la configuración del tipo de salida en remote-app.

2. Utilizar el formato adecuado: Considera cambiar el atributo output.library.type a 'umd' o 'var' en lugar de 'commonjs', dado que el uso del type ‘commonjs’ podría no ser compatible con la carga en la aplicación host.

3. Actualización de Dependencias: Asegúrate de que todas las dependencias de Webpack estén actualizadas. A veces, problemas como estos son causados por versiones incompatibles de las bibliotecas.

4. Prueba de Configuración: Realiza pruebas a nivel de configuración en un nuevo espacio de trabajo con versiones limpias de Angular y Webpack para aislar el problema.

Siguiendo estos pasos deberías poder localizar la causa del problema y corregirlo para que remoteEntry.js se cargue correctamente en tu aplicación host.