I’ve been trying to expose some functionality of my app to third parties. I think it should be possible to achieve that. Here’s what I’ve done:

Created another project in the same workspace, in there I’ve created a module:

@NgModule({
  declarations: [
    NewModule
  ],
  imports: [
    OtherProjectModule
  ],
  providers: [
  ]
})
export class NewModule{
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    const element = createCustomElement(MyWidgetComponent, {injector: this.injector});
    customElements.define('my-widget', element);
  }
}

Then I created an index file that has only the customElement created tag

<my-widget></my-widget>

And finally, the MyWidgetComponent template only has the other module component’s tag

<other-project-component></other-project-component>

When I serve the application, I run into a problem of NullInjection errors, such as these:

ERROR NullInjectorError: R3InjectorError[A-> A-> B-> C-> C-> C]

So how I tried to solve it is just by adding everything from the error to the providers array of NewModule:

providers: [A, B, C]

I thought I can just brute force it by keep adding the missing dependencies to providers, but I ran into Error: NG0204, which is circular dependency (I think).

Now here are my questions:

1. Is the whole process what I’m doing even correct? Will I be able to
   expose the module from the main application as a web component for
   the third parties to use?
2. Is there a way for me not to specify all the providers without
   changing the other project’s code too much?

Thanks!