Errors when using Angular Native Federation

[etienned-za]

What am I trying to do?

Create an app using Angular v17.3.0 and ngx-scrollbar v14.1.0. This app needs to use Angular Native Federation and the new esbuild system.

Reproduction (FYI, I don't get these issues with v13.0.2)

Steps to reproduce:

1. Create a new app with ng new ngx-scollbar-test
2. Install ngx-scollbar: npm i ngx-scollbar
3. Add Angular Native Federation: ng add @angular-architects/native-federation --project ngx-scrollbar-test --port 4200 --type dynamic-host
4. Open src/assets/federation.manifest.json and delete the "mfe1" entry
5. Add NgScrollbarModule to the imports array in app.component.ts
6. Run npm start
7. Open URL in browser

Environment

• Node.js v22.0.0
• Angular: 17.3.0 (also tried with 17.3.8)
• ngx-scrollbar: 14.1.0
• Browser(s): Chrome latest
• Operating System: Windows 11

TLDR; Issue #1: https://stackblitz.com/edit/ngx-scrollbar-h9az15 (build error, and site does not load) Issue #2: https://stackblitz.com/edit/ngx-scrollbar-cx6u8r (Press F12 to see Rxjs error in console)

When performing the steps listed above, I receive the following error "Could not resolve "@angular/material/select". Below is the CLI output

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 X [ERROR] Could not resolve "@angular/material/select"

node_modules/ngx-scrollbar/fesm2022/ngx-scrollbar-mat.mjs:3:26:
  3 │ import { MatSelect } from '@angular/material/select';
    ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "@angular/material/select" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

ERR! Error bundling shared npm package ERR! Build failed with 1 error: ERR! node_modules/ngx-scrollbar/fesm2022/ngx-scrollbar-mat.mjs:3:26: ERROR: Could not resolve "@angular/material/select" 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

I can resolve this error by installing the @angular/material package: npm i @angular/material. However, after loading the page I receive another error:

Error: Unable to resolve specifier 'rxjs/internal/observable/innerFrom' imported from http://localhost:4200/ngx_scrollbar-14_1_0-dev.js at throwUnresolved (es-module-shims.js:477:11) at _resolve (es-module-shims.js:414:71) at es-module-shims.js:928:32 at Array.map () at es-module-shims.js:921:45 at _ZoneDelegate.invoke (zone.js:365:28) at _ZoneImpl.run (zone.js:111:43) at zone.js:2438:40 at _ZoneDelegate.invokeTask (zone.js:400:33) at _ZoneImpl.runTask (zone.js:158:47)

_

[MurhafSousli]

After investigating, it seems that "Native Federation" is altering Angular build system, there are packages ngx-scrollbar depends on internally and the "Native Federation" is not happy with it. it is even complaining about rxjs packages imports. I would just throw it away from the project.

I cannot help you with this as it is not an issue related to this package

[etienned-za]

Thanks for your response and investigation. Native Federation is unfortunately not something I can just throw away. The app I am building needs to support micro-frontends. I can perhaps see if ngx-scrollbar works with the older Webpack Module Federation instead. I opted out of using iFrames for micro-frontends.