fix(core): ViewContainerRef.createComponent should consult module injector when custom one is provided (#44966)

AndrewKushnir · dylhunn · commit 822439fdddfc · 2022-02-08T09:57:20.000-08:00
Before Ivy, it was only possible to call the `ViewContainerRef.createComponent` function with the ComponentFactory as the first argument. An instance of a `ComponentFactory` resolved via `ComponentFactoryResolver` contained a reference to an `NgModule` where the component is declared. As a result, the component maintained a DI connection with the module injector tree (by retrieving an instance of `NgModuleRef` internally), even when the custom injector was provided (we try to find a token in a custom injector first and consult module injector after that). With Ivy, we expanded the `ViewContainerRef.createComponent` function API to support direct references to the Component classes without going through the factory resolution step. As a result, there was no connection to the NgModule that declares the component. Thus, if you provide a custom injector, this is the only injector that is taken into account. This commit updates the logic for the factory-less case to try retrieving an instance of an `NgModuleRef` using the DI tree which `ViewContainerRef` belongs to. The `NgModuleRef` instance is then used to get a hold of a module injector tree. This brings the factory-less and factory-based logic to more consistent state. Closes #44897. PR Close #44966
diff --git a/packages/core/src/linker/view_container_ref.ts b/packages/core/src/linker/view_container_ref.ts
@@ -337,11 +337,31 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
         componentFactoryOrType as ComponentFactory<C>:
         new R3ComponentFactory(getComponentDef(componentFactoryOrType)!);
     const contextInjector = injector || this.parentInjector;
-    if (!ngModuleRef && (componentFactory as any).ngModule == null && contextInjector) {
-      // DO NOT REFACTOR. The code here used to have a `value || undefined` expression
-      // which seems to cause internal google apps to fail. This is documented in the
-      // following internal bug issue: go/b/142967802
-      const result = contextInjector.get(NgModuleRef, null);
+
+    // If an `NgModuleRef` is not provided explicitly, try retrieving it from the DI tree.
+    if (!ngModuleRef && (componentFactory as any).ngModule == null) {
+      // For the `ComponentFactory` case, entering this logic is very unlikely, since we expect that
+      // an instance of a `ComponentFactory`, resolved via `ComponentFactoryResolver` would have an
+      // `ngModule` field. This is possible in some test scenarios and potentially in some JIT-based
+      // use-cases. For the `ComponentFactory` case we preserve backwards-compatibility and try
+      // using a provided injector first, then fall back to the parent injector of this
+      // `ViewContainerRef` instance.
+      //
+      // For the factory-less case, it's critical to establish a connection with the module
+      // injector tree (by retrieving an instance of an `NgModuleRef` and accessing its injector),
+      // so that a component can use DI tokens provided in MgModules. For this reason, we can not
+      // rely on the provided injector, since it might be detached from the DI tree (for example, if
+      // it was created via `Injector.create` without specifying a parent injector, or if an
+      // injector is retrieved from an `NgModuleRef` created via `createNgModuleRef` using an
+      // NgModule outside of a module tree). Instead, we always use `ViewContainerRef`'s parent
+      // injector, which is normally connected to the DI tree, which includes module injector
+      // subtree.
+      const _injector = isComponentFactory ? contextInjector : this.parentInjector;
+
+      // DO NOT REFACTOR. The code here used to have a `injector.get(NgModuleRef, null) ||
+      // undefined` expression which seems to cause internal google apps to fail. This is documented
+      // in the following internal bug issue: go/b/142967802
+      const result = _injector.get(NgModuleRef, null);
       if (result) {
         ngModuleRef = result;
       }
diff --git a/packages/core/test/acceptance/view_container_ref_spec.ts b/packages/core/test/acceptance/view_container_ref_spec.ts
@@ -8,7 +8,8 @@
 
 import {CommonModule, DOCUMENT} from '@angular/common';
 import {computeMsgId} from '@angular/compiler';
-import {Compiler, Component, ComponentFactoryResolver, Directive, DoCheck, ElementRef, EmbeddedViewRef, ErrorHandler, InjectionToken, Injector, Input, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Pipe, PipeTransform, QueryList, RendererFactory2, RendererType2, Sanitizer, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, ɵsetDocument} from '@angular/core';
+import {Compiler, Component, ComponentFactoryResolver, Directive, DoCheck, ElementRef, EmbeddedViewRef, ErrorHandler, InjectionToken, Injector, Input, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Pipe, PipeTransform, QueryList, Renderer2, RendererFactory2, RendererType2, Sanitizer, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, ɵsetDocument} from '@angular/core';
+import {isProceduralRenderer} from '@angular/core/src/render3/interfaces/renderer';
 import {ngDevModeResetPerfCounters} from '@angular/core/src/util/ng_dev_mode';
 import {ComponentFixture, TestBed, TestComponentRenderer} from '@angular/core/testing';
 import {clearTranslations, loadTranslations} from '@angular/localize';
@@ -1411,7 +1412,7 @@ describe('ViewContainerRef', () => {
         `,
       })
       class ChildB {
-        constructor(private injector: Injector) {}
+        constructor(private injector: Injector, public renderer: Renderer2) {}
         get tokenA() {
           return this.injector.get(TOKEN_A);
         }
@@ -1424,19 +1425,19 @@ describe('ViewContainerRef', () => {
         selector: 'app',
         template: '',
         providers: [
-          {provide: TOKEN_B, useValue: '[TokenValueB]'},
+          {provide: TOKEN_B, useValue: '[TokenB - Value]'},
         ]
       })
       class App {
         constructor(
             public viewContainerRef: ViewContainerRef, public ngModuleRef: NgModuleRef<unknown>,
-            public injector: Injector) {}
+            public injector: Injector, public cfr: ComponentFactoryResolver) {}
       }
 
       @NgModule({
         declarations: [App, ChildA, ChildB],
         providers: [
-          {provide: TOKEN_A, useValue: '[TokenValueA]'},
+          {provide: TOKEN_A, useValue: '[TokenA - Value]'},
         ]
       })
       class AppModule {
@@ -1454,6 +1455,48 @@ describe('ViewContainerRef', () => {
         expect(fixture.nativeElement.parentNode.textContent).toContain('[Child Component A]');
       });
 
+      it('should maintain connection with module injector when custom injector is provided', () => {
+        const comp = fixture.componentInstance;
+        const customInjector = Injector.create({
+          providers: [
+            {provide: TOKEN_B, useValue: '[TokenB - CustomValue]'},
+          ]
+        });
+
+        // Use factory-less way of creating a component.
+        const factorylessChildB =
+            comp.viewContainerRef.createComponent(ChildB, {injector: customInjector});
+        fixture.detectChanges();
+
+        // Custom injector provides only `TOKEN_B`,
+        // so `TOKEN_A` should be retrieved from the module injector.
+        expect(getElementText(fixture.nativeElement.parentNode))
+            .toContain('[TokenA - Value] [TokenB - CustomValue]');
+
+        // Verify that the dynamically-created component uses correct instance of a renderer.
+        // Ivy runtime code switches over to Renderer3 (document) if an instance of the Renderer2 is
+        // not found, which can happen when the module injector subtree is not in the DI tree.
+        // See https://github.com/angular/angular/issues/44897.
+        expect(isProceduralRenderer(factorylessChildB.instance.renderer)).toBe(true);
+
+        // Use factory-based API to compare the output with the factory-less one.
+        const childBFactory = comp.cfr.resolveComponentFactory(ChildB);
+        const factoryBasedChildB = comp.viewContainerRef.createComponent(
+            childBFactory, undefined, customInjector /* injector */);
+        fixture.detectChanges();
+
+        // Custom injector provides only `TOKEN_B`,
+        // so `TOKEN_A` should be retrieved from the module injector
+        expect(getElementText(fixture.nativeElement.parentNode))
+            .toContain('[TokenA - Value] [TokenB - CustomValue]');
+
+        // Verify that the dynamically-created component uses correct instance of a renderer.
+        // Ivy runtime code switches over to Renderer3 (document) if an instance of the Renderer2 is
+        // not found, which can happen when the module injector subtree is not in the DI tree.
+        // See https://github.com/angular/angular/issues/44897.
+        expect(isProceduralRenderer(factoryBasedChildB.instance.renderer)).toBe(true);
+      });
+
       it('should throw if class without @Component decorator is used as Component type', () => {
         class MyClassWithoutComponentDecorator {}
         const createComponent = () => {
@@ -1489,8 +1532,8 @@ describe('ViewContainerRef', () => {
               .toContain(
                   '[Child Component B] ' +
                   '[Projectable Node] ' +
-                  '[TokenValueA] ' +
-                  '[TokenValueB] ' +
+                  '[TokenA - Value] ' +
+                  '[TokenB - Value] ' +
                   '[Child Component A]');
         });
       });
