Angular dynamic module federation NullInjectorError when importing a standalone component with dependencies

I am trying to create the shell application as a dashboard with no routing, where I display multiple cards and the card content would be the remote (the microfrontend standalone component).

I have been trying to implement a similar solution to this tutorial: https://www.angulararchitects.io/en/blog/dynamic-module-federation-with-angular/.

I followed the above link because that was the one that fit my needs the most, because all the other tutorials involved routing (specifying the path for each standalone component, and loading just 1 module that defines the routes) and everything worked that way.

What I’d like to achieve is to have a shell application, which during run time (based on a json file downloaded via http) can load components from different remotes.

I am using the latest @angular-architects/module-federation(16.0.4) package with angular v16. I have created a fork based on Manfred Steyer’s work to demonstrate my problem: https://github.com/zkristof97/module-federation-with-angular-dynamic-workflow-designer

As long as I have a component that does not inject any dependencies, the exposed standalone component can be used in the shell with no problem, for example the EnrichComponent.

When I provide an injectionToken in bootstrap.ts (e.g. MY_TEST_INJECTION_TOKEN) and I just serve the remote app that defines the EnrichComponent, everything works fine, the console.log also executes on init.

But when I try to use the EnrichComponent in the shell, with the injectionToken injected, I get the NullInjectorError.

The shell doesn't bootstrap the other applications, this is just done in the standalone apps when you access their index.html.

The shell only loads the component from remote entry file.

Your shell needs to provide the token required by the EnrichComponent.