Skipping Package from shareAll not Working

[JuNe98]

Hi

In our team we try to use the native federation for microfrontend architecture. I have tried to set up a Microfront which worked really smooth (THANK YOU for the great work) but when I want to skip a Package from the shareAll it doesn't seem to work right.

We are using the Apache Echarts library with the ngx-echarts Angular directive.

These are my dependencies in package.json:

    "@angular-architects/native-federation": "^18.0.2",
    "@angular/animations": "^18.0.5",
    "@angular/cdk": "^18.0.5",
    "@angular/common": "^18.0.5",
    "@angular/compiler": "^18.0.5",
    "@angular/core": "^18.0.5",
    "@angular/forms": "^18.0.5",
    "@angular/material": "^18.0.5",
    "@angular/material-luxon-adapter": "^18.0.5",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.5",
    "@angular/router": "^18.0.5",
    "@fontsource/inter": "^5.0.18",
    "@types/luxon": "^3.4.2",
    "angular-gridster2": "^18.0.1",
    "echarts": "^5.5.1",
    "es-module-shims": "^1.5.12",
    "luxon": "^3.4.4",
    "material-symbols": "^0.20.0",
    "ngx-echarts": "^18.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"

My federation.config.js looks like following:

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

  name: 'mfe1',

  exposes: {
    './routes': './src/app/app.routes.ts',
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
    'echarts',
    // Add further packages you don't need at runtime
  ]

  // Please read our FAQ about sharing libs:
  // https://shorturl.at/jmzH0

});

And I get the following error when I try to serve the application:

 INFO  Building federation artefacts
 INFO  Preparing shared npm packages
 NOTE  This only needs to be done once, as results are cached
 NOTE  Skip packages you don't want to share in your federation config
✘ [ERROR] File 'node_modules\echarts\types\dist\charts.d.ts' is missing from the TypeScript compilation. [plugin angular-compiler]

  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

1 of 25 errors shown (disable the message limit with --log-limit=0)
 ERR!  Error bundling shared npm package
 ERR!  Build failed with 25 errors:
 ERR!  error: File 'node_modules\echarts\types\dist\charts.d.ts' is missing from the TypeScript compilation.
 ERR!  error: File 'node_modules\echarts\types\dist\renderers.d.ts' is missing from the TypeScript compilation.
 ERR!  error: File 'node_modules\echarts\types\dist\components.d.ts' is missing from the TypeScript compilation.
 ERR!  error: File 'node_modules\echarts\types\dist\core.d.ts' is missing from the TypeScript compilation.
 ERR!  error: File 'node_modules\echarts\types\dist\echarts.d.ts' is missing from the TypeScript compilation.
 ERR!  ...
 ERR!  For more information, run in verbose mode
 NOTE
 NOTE
 NOTE  ** Important Information: ***
 NOTE  The error message above shows an issue with bundling a node_module.
 NOTE  In most cases this is because you (indirectly) shared a Node.js package,
 NOTE  while Native Federation builds for the browser.
 NOTE  You can move such packages into devDependencies or skip them in your federation.config.js.
 NOTE
 NOTE  More Details: https://bit.ly/nf-issue
 NOTE
 NOTE
Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     | 186.75 kB |
styles.css          | styles        |  93.62 kB |
main.js             | main          | 251 bytes |

                    | Initial total | 280.62 kB

Lazy chunk files    | Names         |  Raw size
chunk-DBKROM7W.js   | bootstrap     |   4.91 kB |

Application bundle generation complete. [3.666 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4201/
  ➜  press h + enter to show help

When I remove the shareAll everything works right.

Can you please provide a solution or config how to fix this issue?

Thanks in advance

[JuNe98]

I found a temporary solution:

Switching version of Apache Echarts from ^5.5.1 to fixed 5.5.0 fixes the bug. Seems to be a specific Problem with the patch,

Hopefully there will be a newer compatible version soon.

[diandsonc]

I found a temporary solution:

Switching version of Apache Echarts from ^5.5.1 to fixed 5.5.0 fixes the bug. Seems to be a specific Problem with the patch,

Hopefully there will be a newer compatible version soon.

Yes, there is a problem with some libraries, solve it by using share and adding the necessary libraries to be shared instead of using shareAll.

[manfredsteyer]

The reason is that NF creates a bundle per entrypoint and this very package seems to have several entry points.

You could exclude everything starting with echarts/ by using a RegExp:

skip: [ /^echarts\// ]