Cannot read properties of null (reading 'length') while generating @nrwl/angular:setup-mf

[ishanoj]

@Coly010 Help!!!

Current Behavior

Getting error 'Cannot read properties of null (reading 'length')' while trying to implement mf with below command nx generate @nrwl/angular:setup-mf mf-app --mf-type=host --routing

Expected Behavior

Adding MF to the existing monorepo nx angular application v15

Github Repo

https://github.com/ishanoj/mf-app-2023/tree/feature/mf-app

Steps to Reproduce

1. npx create-nx-workspace@latest (done)
2. Creation of host and remote applications (done)
3. Trying to set-up mf(error) :(

Nx Report

Node : 18.12.1 OS : win32 x64 npm : 9.2.0

nx : 15.4.5 @nrwl/angular : 15.4.5 @nrwl/react : Not Found @nrwl/react-native : Not Found @nrwl/rollup : Not Found @nrwl/schematics : Not Found @nrwl/storybook : Not Found @nrwl/web : Not Found @nrwl/webpack : 15.4.5 @nrwl/workspace : 15.4.5 @nrwl/vite : Not Found typescript : 4.8.4

Failure Logs

No response

Additional Information

No response

[Coly010]

Hey! It looks like your app is already set up to use MF so you don’t need to run the setup-mf generator.

We could potentially improve the error to say “this app is already set up to use MF” but yes, your app is already set up correctly! So you don’t need to run the generator :)

[ishanoj]

@Coly010 But while running on the browser getting this error 'cannot use 'import.meta' outside a module' even after the host and remote set up did. But from the previous thread, I can see It is part of ModuleFederationPlugin. Tried multiple times to set up the projects on different machines also. Could you please help to resolve this? the host app is unable to load properly(flickering) with the above error..

[Coly010]

It looks like you've set up your workspace incorrectly.

If you scroll towards the end of this article, there is a section about setting up Module Federation for new workspaces: https://blog.nrwl.io/setup-module-federation-in-angular-with-nx-2f3c5c074d5f

There's also a page on our docs: https://nx.dev/recipes/module-federation/dynamic-module-federation-with-angular

From what I can see from your workspace, you have what you'd expect to be your host application set up as a remote application and your remote application is not set up to use Module Federation at all.

Try follow the articles I've linked above and see if you have any more success, if not, reach out to me again! 🙂

[ishanoj]

@Coly010 I need to implement module federation in the existing angular CLI v15 application. These are the steps I have followed with...

1. Nx added to the existing app as host application with 'nx add @nrwl/angular package and init'(apps folder structure created)

2. nx generate @nrwl/angular:application remoteapp --port=5001

3. nx generate @nrwl/angular:setup-mf hostapp --mf-type=host --routing

4.linking remote to host nx generate @nrwl/angular:setup-mf remoteapp --mf-type=remote --host=hostapp --routing

5. nx run-many --target=serve --all

while running on the browser getting this error 'cannot use 'import.meta outside a module' even after the host and remote setup is done and complied successfully.

[Coly010]

If it's an error coming from styles.js then it's fine, it causes no issues during dev, and it doesn't exist in production as there is no styles.js file.

[Coly010]

We call it out in the page on Nx.dev: https://nx.dev/recipes/module-federation/dynamic-module-federation-with-angular

[ishanoj]

@Coly010 Thank you so much! Yes, it is coming from styles.js. But even in production also this error exists and one more 'GET http://localhost:5000/remoteEntry.mjs net::ERR_CONNECTION_REFUSED' Please let me know if we can able to load the remote app alone individually independently (new window) without having the host content. If so what needs to be done in addition to this config.

[madipta]

any updates on this?

I have similar problem, cannot run setup-mf error "Cannot read properties of null (reading 'length')"

yarn nx g @nrwl/angular:setup-mf web --mfType=host

repo: https://github.com/madipta/tokopedia-angular-material-theming

   Node : 18.14.0
   OS   : win32 x64
   yarn : 1.22.19

   nx                      : 15.7.1
   @nrwl/jest              : 15.7.1
   @nrwl/linter            : 15.7.1
   @nrwl/workspace         : 15.7.1
   @nrwl/angular           : 15.7.1
   @nrwl/cli               : 15.7.1
   @nrwl/cypress           : 15.7.1
   @nrwl/devkit            : 15.7.1
   @nrwl/eslint-plugin-nx  : 15.7.1
   @nrwl/js                : 15.7.1
   @nrwl/tao               : 15.7.1
   @nrwl/webpack           : 15.7.1
   typescript              : 4.8.4
   ---------------------------------------
   Community plugins:
   @fortawesome/angular-fontawesome : 0.12.1
   @ngrx/component-store            : 15.0.0
   @ngrx/effects                    : 15.0.0
   @ngrx/entity                     : 15.0.0
   @ngrx/router-store               : 15.0.0
   @ngrx/store                      : 15.0.0
   @ngrx/schematics                 : 15.0.0
   @ngrx/store-devtools             : 15.0.0

[ishanoj]

I would recommend configuring your workspace properly from scratch. That should work nx g @nrwl/angular:setup-mf web --dry-run (to know what's wrong happening)

[github-actions[bot]]

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.