Runtime error when using rxjs-interop functions that need an injection context in the MFE components

[hal1984]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

Clone: https://github.com/hal1984/Angular21NFInjector.git

Start the app:

npm i
npm start (shell on http://localhost:4200, mfe on http://localhost:4201).

Error:

_untracked-chunk.mjs:2623 ERROR RuntimeError: NG0203: takeUntilDestroyed() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://v21.angular.dev/errors/NG0203
    at assertInInjectionContext (_untracked-chunk.mjs:1504:1)
    at takeUntilDestroyed (_angular_core_rxjs_interop.okFiQteVcx-dev.js:12:22)
    at <instance_members_initializer> (app.ts:15:45)
    at new _App (app.ts:14:7)
    at NodeInjectorFactory.App_Factory [as factory] (app.ts:15:65)
    at getNodeInjectable (_debug_node-chunk.mjs:1129:1)
    at instantiateAllDirectives (_debug_node-chunk.mjs:5210:5)
    at createDirectivesInstances (_debug_node-chunk.mjs:5058:1)
    at ComponentFactory2.create (_debug_node-chunk.mjs:8632:10)
    at ViewContainerRef2.createComponent (_debug_node-chunk.mjs:8892:47)

stackblitz example:

https://stackblitz.com/~/github.com/hal1984/Angular21NFInjector?file=projects/mfe/src/app/app.ts

Expected behavior

The shell loads correctly the MFE.

Versions of Native/Module Federation, Angular, Node, Browser, and operating system

NF: 21.0.3
Angular: 21
Node: 25
Browser: Chrome
OS: macOS

Other information

I found a library that suffers from the same issue:

angular-split/angular-split#523

If you run directly the MFE project the app runs without errors:

I would be willing to submit a PR to fix this issue

• Yes
• No

[JGhignatti]

Hey, can you check if the following works (from this comment)?

• Go to projects/shell/src/app/app.config.ts
• Add import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
• Try again

The issue I linked is about the toSignal function, which also comes from the rxjs-interop, so maybe it's an issue with that set of functions, not any function that need an injection context.

[hal1984]

• import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

With that change, it works flawlessly. Thank you very much! As you mentioned, if I try with, for instance, the effect function (which requires an Injection Context), it works without any issues. So, it seems that this limitation is confined to rxjs-interop.

[Aukevanoost]

Hi all!

Yeah this is probably due to how import maps work. As @JGhignatti pointed out, if we have a shell and a mfe which all expose @angular/core but use different secondary entrypoints, it could be that the host @angular/core with injection context is chosen which doesnt include the rxjs-interop secondary entrypoint, so when the micro frontend loads the rxjs-interop secondary entrypoint it will take it from its own @angular/core which has a different context.

I am trying to fix that with the "keepAll" flag which will be in the new version:
#1013