Main and Service Dependencies outside of Angular

Question

How can dynamically inject services into an Angular project from an external npm project and run the Angular from outside? Seeking a clean architectural solution for runtime service injection.

I have two folders in the same level

• angular-ui which contains the angular project
• main-project which contains specific service definitions. Main responsibility to inject all the dependencies like a traditional main project.

I would like to run my main-project and pass the service dependencies during the bootstraping stage... Something like this to give you an idea

// Instantiate Angular app
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule).then((moduleRef) => {
  // Get the Angular injector
  const injector = moduleRef.injector;

  // Create an instance of your service and inject it
  const exampleService = new ExampleService();
  injector.get(ExampleService).constructor = () => exampleService;

  // Continue with your application logic
});

The dependency direction should be from main-project ----> angular-ui

In the "common" traditional way I used to add my concrete services into the angarl-ui or even refer from angular-ui to something else (new package) which provides the concrete implementation of the services. However, this direction break my original dependency architecture.

Can you give me recommendation to implement my UI in this direction?