Microfrontends are broken with [ nx 15.9.* ] when routing

[kindy91]

Current Behavior

Inspired from https://nx.dev/more-concepts/micro-frontend-architecture, I have an angular workspace with one shell frontend and 2 remoteDevs frontends ( call them remote-dev1, and remote-dev2 ) that can be open by route change to /remote-dev1 and /remote-dev2 consequtively.

The application when running shows the shell frontend. In the Frontend, there are two links that route to /remote-dev1 and /remote-dev2.

The routing used work fine, and the corresponding microfrontends used to open on route change. However, since updating to nx version 15.9.*, it became buggy. The route change files, and i remain on the shell frontend. In the console, i get an angular core error that says inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with EnvironmentInjector#runInContext..

Expected Behavior

I should be routed to the corresponding remoteDevs frontends.

GitHub Repo

No response

Steps to Reproduce

1. have an angular microfrontend workspace with shell, remoteDev1 and remoteDev2.
2. on route change to remote-dev1 or 2 the error occurs.

Nx Report

Node : 18.12.1
   OS   : linux x64
   npm  : 8.19.3

   nx                      : 15.9.0
   @nrwl/js                : 15.9.2
   @nrwl/jest              : 15.9.2
   @nrwl/linter            : 15.9.2
   @nrwl/workspace         : 15.9.2
   @nrwl/angular           : 15.9.2
   @nrwl/cli               : 15.9.0
   @nrwl/cypress           : 15.9.2
   @nrwl/devkit            : 15.9.2
   @nrwl/eslint-plugin-nx  : 15.9.2
   @nrwl/tao               : 15.9.0
   @nrwl/webpack           : 15.9.2
   @nrwl/nx-cloud          : 16.0.1
   typescript              : 4.9.5
   ---------------------------------------
   Community plugins:
   @ngrx/component-store : 15.4.0
   @ngrx/effects         : 15.4.0
   @ngrx/store           : 15.4.0
   @ngrx/store-devtools  : 15.4.0
   @onventis/icon-font   : 1.10.0
   @onventis/ng          : 15.3.0
   ---------------------------------------
   The following packages should match the installed version of nx
     - @nrwl/js@15.9.2
     - @nrwl/jest@15.9.2
     - @nrwl/linter@15.9.2
     - @nrwl/workspace@15.9.2
     - @nrwl/angular@15.9.2
     - @nrwl/cypress@15.9.2
     - @nrwl/devkit@15.9.2
     - @nrwl/eslint-plugin-nx@15.9.2
     - @nrwl/webpack@15.9.2

   To fix this, run `nx migrate nx@15.9.2`

Failure Logs

I get the following error in the console, when trying to change route to the remote-devs.

re.mjs:8416 ERROR Error: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`. Find more at https://angular.io/errors/NG0203
Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`. Find more at https://angular.io/errors/NG0203
    at injectInjectorOnly (core.mjs:626:15)
    at Module.ɵɵinject (core.mjs:637:60)
    at Object.RouterModule_Factory [as useFactory] (router.mjs:443:99)
    at Object.factory (core.mjs:8118:38)
    at R3Injector.hydrate (core.mjs:8031:35)
    at R3Injector.get (core.mjs:7919:33)
    at injectInjectorOnly (core.mjs:633:33)
    at ɵɵinject (core.mjs:637:60)
    at useValue (core.mjs:7713:65)
    at R3Injector.resolveInjectorInitializers (core.mjs:7968:17)
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:23892:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23892:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:24193:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:171:47)
handleError @ core.mjs:8416
Show 1 more frame

Additional Information

No response

[Coly010]

I can't reproduce this on a fresh 15.9.2 workspace, nor does our generators generate anything that uses the inject() function. This would lead me to believe the error is in code that you've written.

I'd need a repo or a more detailed reproduction to help further.

[kindy91]

Hi, here I created an example repo with the bug. https://github.com/kindy91/failing-microfrontends

Please npm install and then npm run start.

Here's a snapshot of the result where instead of getting a page with 2 routes to cart and shop, i get the following error.

[Coly010]

Can you talk me through the steps you did to create this repo?

I can see the issue in your repo, but if I create this same structure from scratch, I don't receive any problems.

I did the following:

1. npx -y create-nx-workspace@latest pkgmf and then selected Package Based Repo
2. Installed the Nx Angular Plugin: npm install @nrwl/angular
3. Created the MF Structure: nx g host shell --remotes=shop,cart
4. Served the shell: nx serve shell

And it all works fine.

I can't see any obvious differences between your repo and the one I've created.

Can you talk me through what you did to create the repo and the MF apps?

[kindy91]

I did the following in the example repo:

1. I run npx create-nx-workspace
2. I choose the workspace as npm packages
3. As far as I remember, the version of nx set in the package.json was 14.8.8. So afterward, I upgrade the versions in the package.json to of nx and @nrwl/* packages to 15.9.2. In addition, I add to the package @nrwl/angular:15.9.2, and finally I run npm install.
4. Then i run nx g @nrwl/angular:host shell --remotes=shop,cart --e2eTestRunner=none and choose scss.
5. Then run nx serve shell --devRemotes=shop,cart.

[kindy91]

The only difference I see is that you created the workspace with @latest while I upgraded the version by hand in the package.json. I don't see why this should produce a bug though. Unless there needs to be some certain migration script needed for v14.8.8 to go to v15.9.2.

[kindy91]

First commit https://github.com/kindy91/failing-microfrontends/commit/4401586f0efe919e3913ed3cd0f5fde0254d0a8a#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519 Second commit https://github.com/kindy91/failing-microfrontends/commit/cb64bda053692eead40982578e478e4f70ea3b2b#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

[kindy91]

By the way, upgrading to nrwl 16 fixed this issue.

[ekiliqua]

I have the same error following the steps of the guide https://nx.dev/more-concepts/micro-frontend-architecture

I tried with 15.9.3 and 16.0.0... and get the same error...

For 15.9.3...

1. npx create-nx-workspace@15 micros-test
2. npm install --save-dev @nrwl/angular@15
3. nx g @nrwl/angular:host shell --remotes=shop,cart,about
4. nx serve shell --devRemotes=cart,shop

For 16.0.0...

1. npx create-nx-workspace@latest micros-test
2. npm install --save-dev @nx/angular
3. nx g @nx/angular:host shell --remotes=shop,cart,about
4. nx serve shell --devRemotes=cart,shop

[kindy91]

@ekiliqua did you try removing node_modules, package-lock.json and then npm cache clear --force and then npm install? It should work for v.16.0.0 I think

[ekiliqua]

Hi, thank you for you answer.

Yes, I tried removing node_modules, clearing cache and with nx@15 and nx@16... I don't know what else to do... Same error.

I have installed node 18.15

These are my package.jsons in both cases.

[Coly010]

The only difference I see is that you created the workspace with @latest while I upgraded the version by hand in the package.json. I don't see why this should produce a bug though. Unless there needs to be some certain migration script needed for v14.8.8 to go to v15.9.2.

We don't recommend upgrading Nx by manually changing versions. Should use nx migrate. Glad that v16 has it working for you.

@ekiliqua I'll take a look

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[KyKyPy3]

I got the same problem on latest version nx (16.2.2). I use the following commands: npx create-nx-workspace@latest mf npm install --save-dev @nx/angular nx g @nx/angular:host shell --remotes=test nx serve shell --devRemotes=test

[benpsnyder]

On one of my projects for a larger codebase, I can run my MFEs on Nx 16.2.2 but I get the NG0203 error when upgrading as soon as Nx 16.3.0-beta.x and it remains even through the Nx 16.4.x-beta.1 release.

My shell uses webpack.config.ts

const { withModuleFederation } = require('@nx/angular/module-federation');
const config = require('./module-federation.config');

module.exports = withModuleFederation(config).then((webpackConfigFunc) =>
  webpackConfigFunc({
    output: {
      scriptType: 'text/javascript',
    },
  }),
);

And my remotes use

const { withModuleFederation } = require('@nx/angular/module-federation');
const config = require('./module-federation.config');
module.exports = withModuleFederation(config);

Nothing else too fancy.

[benpsnyder]

I don't know if this matters at all but I notice that the migrations never upgrade peerDeps in libraries. Perhaps we should include this in nx repair as well, or at a minimum display warnings in the console?

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[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.