Add parentInjector to Platform Factories

[DavidANeil]

Which @angular/* package(s) are relevant/releated to the feature request?

platform-browser-dynamic, platform-browser, platform-server

Description

We would like to extend the functionality of the existing platform factories by adding a parent injector to the platform. The only way to do this currently involves copying providers from Angular source code, some of which are private exports, and some which have to be massaged in order to work at all.

This would allow us to change the code

export function _document() {
    ɵsetDocument(document);
    return document;
}
export function OurPlatformDynamic(ourInjector: OurInjector): PlatformRef {
    return createPlatform(
        Injector.create({
            providers: [
                {provide: PlatformRef, deps: [Injector]},
                {provide: TestabilityRegistry, deps: []},
                {provide: ɵConsole, deps: []},
                {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
                {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
                {provide: PLATFORM_ID, useValue: 'browser'},
                {provide: PLATFORM_INITIALIZER, useValue: ɵinitDomAdapter, multi: true},
                {provide: DOCUMENT, useFactory: _document, deps: []},
                {
                    provide: COMPILER_OPTIONS,
                    useValue: {providers: [{provide: ResourceLoader, useClass: ɵResourceLoaderImpl, deps: []}]},
                    multi: true,
                },
            ],
            parent: ourInjector.angularInjectorApi,
            name: 'Platform: Bridge',
        }),
    );
}

to the much terser:

export function OurPlatformDynamic(ourInjector: OurInjector): PlatformRef {
    return platformBrowserDynamic([], ourInjector.angularInjectorApi);
}

Proposed solution

Change the return type of createPlatformFactory to (extraProviders?: StaticProvider[], parentInjector?: Injector) => PlatformRef
The implementation would then simply pass parentInjector in when calling Injector.create.

Alternatives considered

Calling createPlatform directly is possible, but then it requires copying the list of built-in providers from the existing platforms. Such as copying _CORE_PLATFORM_PROVIDERS. This is fragile as this would break anytime that list changes.

[flash-me]

Yes. Yes. Yes! This would help in several use cases. There is no way to share something between several bootstrapped apps that share the same platform.

My approach currently is different, but also very unhandy! Allowing to provide own Injector or even additional Providers except StaticProvider would be very helpful.

My Approach:

// An NgModule that provides everything I want to share at platform level
@NgModule({
  providers: [
    // Add here custom providers
  ]
})
export class CustomPlatfromProviderModule { }

/**
 * Returns the CustomPlatfromProviderModule NgModuleRef
 * Bootstrap, if necessary
 */
export const getPlatformModule = (function () {
  // Closure holdung the singleton module ref
  let platformModule: NgModuleRef<CustomPlatfromProviderModule>;
  return () =>
    new Promise<NgModuleRef<CustomPlatfromProviderModule>>(
      resolve =>
        platformModule
          ? resolve(platformModule)
          : platformBrowser()
            .bootstrapModule(CustomPlatfromProviderModule)
            .then(moduleRef => {
              platformModule ||= moduleRef;
              resolve(platformModule);
            })
    );
})();

/**
 * Bootstraps an NgModule with the custom Platform module
 * @param ngModule
 */
export const customBootstrap = <T>(ngModule: Type<T>): Promise<NgModuleRef<T>> =>
  getPlatformModule()
    .then(pf =>
      (getModuleFactory(ngModule.name) as NgModuleFactory<T>).create(pf.injector))
    .catch((error: Error) => console.error(`Error trying to bootstrap mfe ${ngModule}\n${error?.message}`, error) as any)

But This approach requires to provide NgModule with an id

@NgModule({
  id: ExampleModule.name // <-- required for getModuleFactory to work
})
export class ExampleModule { }

But finally, one would able to bootstrap with custom injector / providers

customBootstrap(ExampleModule)

But all in all, very unhandy.

cheers
flash ⚡

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[alxhub]

The "platform" in Angular is intended to be the top level of the DI hierarchy. It's possible to extend the platform injector in several ways:

1. adding providers by creating your own platform factory via createPlatformFactory
2. adding providers when instantiating the platform (platformBrowser([{provide: ...}]))
3. by annotating a service with @Injectable({providedIn: 'platform'})

These options allow for a lot of extensibility of the platform concept, without needing an option for a parent injector. Are there use cases which can't be satisfied by one of the above approaches?

[DavidANeil]

It is a matter of tying Angular to code that exists outside of the Angular ecosystem.
We have an injector that does not depend on Angular, which is the backbone of a large portion of our existing codebase.
What we previously did, was, when bootstrapping the application, we would have our injector produce a list of providers that can be consumed by the Angular platform:

export function bridgeToAngular(lucidInjector: LucidInjector) {
    const angularProviders = lucidInjector.providers.map((injectionKey) => {
        return {
            provide: injectionKey,
            useFactory: () => {
                return lucidInjector.get(injectionKey);
            },
        };
    });
    return [{provide: LucidInjector, useValue: lucidInjector}, angularProviders];
}

This worked well for many years (2017-2021), but we ran into issues when we started adding the ability to add new LucidInjectables when new code was lazily loaded.
These worked fine for our injector, but the Angular injector wasn't aware of them, because they are not annotated with @Injectable, and they are not in the platform injector's providers.

We thought of trying to re-bridge everything in the lazily loaded NgModules, but then classes annotated with @Injectable({providedIn: 'root'}) that were also loaded lazily were unable to inject our loaded injectables because we could only add providers at the NgModule level, which was a child, not parent, of the root injector they were using.

Which led us to the solution of providing our injector (well, a version of it that has an Angular-compatible API), as the parent of the platform's injector.

Since createPlatform supports passing in an injector, we were able to do this simply enough, unfortunately we wanted to preserve the functionality of the existing platform factories platformBrowserDynamic and platformBrowser. Which meant copying their (unfortunately private) provider lists to our application, which is what you see in the first code block of the original post.

tl;dr: We needed a way to augment the providers of the root or platform injectors after construction, and a parent injector that we control was the easiest way to do so.