Nx v14 can't auto shared some module in mfe project

[a616101]

Current Behavior

In Nx v.14 + :

I followed the documentation:

The conclusion is：
Unable to share @angular/animations automatically when I use micro frontend project.

In Nx v.13 + :
Manual webpack.config.js configuration is no problem
shared: share({
'@angular/animations': {
singleton: true,
eager: true,
requiredVersion: 'auto'
},
......
})

Expected Behavior

@angular/animations needs to be shareable or provide manual configuration method

Steps to Reproduce

1. app.module with import BrowserModule and BrowserAnimationsModule in my shell app.
2. create some service and inject AnimationBuilder in remote app
3. start up shell app and remote app

Failure Logs

Environment

Node : 16.14.0
OS : darwin x64
npm : 8.3.1

nx : 14.0.5
@nrwl/angular : 14.0.5
@nrwl/cypress : 14.0.5
@nrwl/detox : Not Found
@nrwl/devkit : 14.0.5
@nrwl/eslint-plugin-nx : 14.0.5
@nrwl/express : Not Found
@nrwl/jest : 14.0.5
@nrwl/js : Not Found
@nrwl/linter : 14.0.5
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 14.0.5
@nrwl/web : Not Found
@nrwl/workspace : 14.0.5
typescript : 4.6.4
rxjs : 7.5.5

[leosvelperez]

Thanks for reporting this!

This is a tricky scenario for the automatic dependency collection to handle. The @angular/animations package is not being directly referenced by the host (the host is only referencing @angular/platform-browser/animations), so it's not being automatically shared. We automatically collect and configure to share all the direct npm package dependencies of an app but don't follow the transitive dependencies because of performance considerations.

As you mentioned, you were previously able to share it using manual configuration, while it is not possible to do so with the new MF support. We just merged a PR (#10156) that adds support for passing additional dependencies to share, so you can manually add any dependency that wasn't picked automatically.

When the change included in that PR gets released, you would be able to pass additional shared configuration to the withModuleFederation utility function using the additionalShared property.

I'm going to close this given the fix for the issue has already been merged. Please keep an eye on the releases to get the fix, it should be released soon.

[Vevl]

Hello @leosvelperez, first many thanks for your work, it's great.

I run into a similar issue. In my case, it was 3rd party component which is using AnimationBuilder.
Before posting I tried different solutions but none of them seems to help.

Steps to Reproduce

• I create repo where you can test it on your own,
• Just start it and try to open the dropdown panel

Issue

When both host and remote are using AnimationBuilder then it throws an error even additionalShared: ['@angular/animations'] is added to mf config file.

BrowserModule, BrowserAnimationsModule are imported by host app.module.ts only.

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