nx ng mfe setup not working : 13.2.2

[moorthyptm]

Current Behavior

Once every mfe setup done if I landed into localhost:4200 the app keep reloading

Expected Behavior

it should serve mfe application properly

Steps to Reproduce

yarn create nx-workspace ng-mfe --packageManager=yarn

What to create in the new workspace ...

empty [an empty workspace with a layout that works best for building apps]

Use Nx Cloud? (It's free and doesn't require registration.) ...
Yes Faster builds, run details, GitHub integration. Learn more at https://nx.app

No

cd ng-mfe

Yarn

yarn add -D @nrwl/angular

Yarn

yarn nx g @nrwl/angular:app dashboard --mfe --mfeType=host --routing=true

yarn nx serve dashboard ( working but we have this console erro :Uncaught SyntaxError: Cannot use 'import.meta' outside a module)

Yarn

yarn nx g @nrwl/angular:app login --mfe --mfeType=remote --port=4201 --host=dashboard --routing=true

yarn nx run dashboard:serve-mfe (it keep reloading: port 4200 host application, error: initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.
(missing: http://localhost:4201/remoteEntry.js))

Code URL: https://github.com/moorthyptm/ng-mfe

Note: This issue is not occurring in below version
"@nrwl/angular": "^13.1.3",
"@nrwl/workspace": "13.1.3",

[SandeepThomas]

Temporary workaround till issue is resolved:

1. Add scriptType: 'text/javascript' to output to fix import.meta error.

module.exports = {
  output: {
    uniqueName: "dashboard",
    publicPath: "auto",
    scriptType: 'text/javascript'
  }, 
...

Ref: https://webpack.js.org/configuration/output/#outputscripttype

2. Start the server with --liveReload=false to prevent auto reload loop.

The same issue is being discussed at angular-architects/module-federation-plugin#96

[Coly010]

@moorthyptm The workaround suggested by @SandeepThomas should help you get unblocked.
This is actually a bug in Webpack itself and it is currently being worked on webpack/webpack#14827

[moorthyptm]

Temporary workaround till issue is resolved:

1. Add scriptType: 'text/javascript' to output to fix import.meta error.

module.exports = {
  output: {
    uniqueName: "dashboard",
    publicPath: "auto",
    scriptType: 'text/javascript'
  }, 
...

Ref: https://webpack.js.org/configuration/output/#outputscripttype

2. Start the server with --liveReload=false to prevent auto reload loop.

The same issue is being discussed at angular-architects/module-federation-plugin#96

Thanks @SandeepThomas its working

[moorthyptm]

@moorthyptm The workaround suggested by @SandeepThomas should help you get unblocked. This is actually a bug in Webpack itself and it is currently being worked on webpack/webpack#14827

Thanks @Coly010

I will track webpack/webpack#14827 issue

[LironHazan]

@Coly010 The workaround works for me but I've tested the webpack/webpack#14827 fix and I'm still experiencing that issue , should we wait for an NX update which includes that wp fix actually (v5.64.4)?

experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "ft1_app",
      library: { type: "module" },
      filename: "remoteEntry.js",
      exposes: {
        './Module': './packages/ft1_app/src/app/remote-entry/entry.module.ts',
      }......
      

[moorthyptm]

Hi @LironHazan

I hope this maybe help you [exp -> modules are not working in older angular-architects/module-federation-plugin ]

try this:
https://github.com/angular-architects/module-federation-plugin/blob/main/migration-guide.md

or

try this webpack config

https://github.com/moorthyptm/ng-mfe/blob/master/apps/login/webpack.config.js

[Coly010]

Nx contains the fix to use ESM. It would be a better experience overall to use the ESM method, however, there will be an error logged to the console about styles.js when running in dev mode. It doesn't affect or break anything. And it doesn't exist in production builds.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.