Dynamically loading modules or components in Angular

Question

So what I'm trying to accomplish is to load modules or components that are not known at compile time.

We (my team and I) have built an application and now we want to make the application extensible for other teams. We want to enable the teams to just build their own components and load them at runtime.

So what I came up with is that a team just registers an url to a JavaScript file and that our application dynamically imports that JavaScript file. I'm still in a sort of PoC fase btw and I can't show you how I've solved this in the real application so I build a bare minimum application that does essentialy the same.

yentheo/angular-dynamic-imports

So I've got a main-application which is a normal Angular 10 application. In this application I have a NormalComponent and an InternalAngularElementsComponent. The NormalComponent is used in the app.component.ts. The InternalAngularElementsComponent is registered as a custom element and is added to the html of the AppComponent.

Now this all works correctly. If you just do npm start in the main-application folder, the Angular application will start on http://localhost:4200 and you can click the buttons of the components and you'll see the value in the button is increased with 1 every click.

There's a second application called external-application. Which is a simple TypeScript "project" with Rollup.js. I define a similar component as the other 2 and register it to a module. I use Rollup.js so I get a CommonJS module which I can dynamically import in my main-application (inside app.component). When running npm build inside external-application, it will compile everything in src/index.ts to dist/index.js and copy that file to assets/external/index.js in the main-application.

In app.component.ts in AfterViewInit we do a dynamic import of this file and call the exported function activate of the imported module. This function does the following:

1. It defines an Angular module and imports our Module that is defined above that declares our component.
2. It bootstraps that module with platformBrowserDynamic().bootstrapModule(ExtensionModule)
3. It resolves the component factory for the component we registered
4. It registers the component as an Angular Element

Now when I use this Angular Element the component works, but I still have some problems. I would prefer being able to pass the existing injector of my main-application so that I can use every provider defined there. Now you can see that I have done some things so I can inject DataService into the external component. This works but the template does not correctly update. I assume this is because I am creating a new Angular context with the platformBrowserDynamic().bootstrapModule(...).

I have tried using the compiler of the existing Angular context like so:

compiler.compileModuleAndAllComponentsAsync(ExtensionModule);

but this always errors on the ExtensionModule with 'Cannot read property 'declarations' of null'.

I have tried SystemJsNgModuleLoader but this seems deprecated because the compiler says to use the import statement instead of the loader but using the import statement will use webpack and it will requir the code to be present at compile time for AFAIK.

Does someone have any experience with this or knowledge on how to do this properly?