refactor(core): add ApplicationRef.prototype.bootstrapImpl with an injector parameter (#60622)

This allows any components individually bootstrapped to inherit from a unique `Injector`. This is useful when bootstrapping multiple root components with different providers.

For now, the function is private while we explore potential designs to consolidate it with the existing `ApplicationRef.prototype.bootstrap` method.

PR Close #60622

packages/core/src/application/application_ref.ts

@@ -498,6 +498,14 @@ export class ApplicationRef {
   bootstrap<C>(
     componentOrFactory: ComponentFactory<C> | Type<C>,
     rootSelectorOrNode?: string | any,
+  ): ComponentRef<C> {
+    return this.bootstrapImpl(componentOrFactory, rootSelectorOrNode);
+  }
+
+  private bootstrapImpl<C>(
+    componentOrFactory: ComponentFactory<C> | Type<C>,
+    rootSelectorOrNode?: string | any,
+    injector: Injector = Injector.NULL,
   ): ComponentRef<C> {
     profiler(ProfilerEvent.BootstrapComponentStart);
 
@@ -532,7 +540,7 @@ export class ApplicationRef {
       ? undefined
       : this._injector.get(NgModuleRef);
     const selectorOrNode = rootSelectorOrNode || componentFactory.selector;
-    const compRef = componentFactory.create(Injector.NULL, [], selectorOrNode, ngModule);
+    const compRef = componentFactory.create(injector, [], selectorOrNode, ngModule);
     const nativeElement = compRef.location.nativeElement;
     const testability = compRef.injector.get(TESTABILITY, null);
     testability?.registerApplication(nativeElement);

packages/core/test/application_ref_spec.ts

@@ -256,6 +256,34 @@ describe('bootstrap', () => {
         ),
       );
     });
+
+    describe('bootstrapImpl', () => {
+      it('should use a provided injector', inject([ApplicationRef], (ref: ApplicationRef) => {
+        class MyService {}
+        const myService = new MyService();
+
+        @Component({
+          selector: 'injecting-component',
+          template: `<div>Hello, World!</div>`,
+        })
+        class InjectingComponent {
+          constructor(readonly myService: MyService) {}
+        }
+
+        const injector = Injector.create({
+          providers: [{provide: MyService, useValue: myService}],
+        });
+
+        createRootEl('injecting-component');
+        const appRef = ref as unknown as {bootstrapImpl: ApplicationRef['bootstrapImpl']};
+        const compRef = appRef.bootstrapImpl(
+          InjectingComponent,
+          /* rootSelectorOrNode */ undefined,
+          injector,
+        );
+        expect(compRef.instance.myService).toBe(myService);
+      }));
+    });
   });
 
   describe('destroy', () => {