refactor(docs-infra): replace use of deprecated Compiler with createNgModuleRef() (#44293)

Remove a use of the deprecated `Compiler` class in `ElementsLoader` and
use the `createNgModuleRef()` function instead.

PR Close #44293

aio/src/app/custom-elements/elements-loader.spec.ts

@@ -1,10 +1,4 @@
-import {
-  Compiler,
-  ComponentFactory,
-  ComponentFactoryResolver, ComponentRef, Injector, NgModuleFactory,
-  NgModuleRef,
-  Type,
-} from '@angular/core';
+import { Component, NgModule, Type } from '@angular/core';
 import { TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing';
 
 import { ElementsLoader } from './elements-loader';
@@ -18,19 +12,11 @@ interface Deferred {
 
 describe('ElementsLoader', () => {
   let elementsLoader: ElementsLoader;
-  let compiler: Compiler;
 
   beforeEach(() => {
     const injector = TestBed.configureTestingModule({
       providers: [
         ElementsLoader,
-        {
-          provide: Compiler,
-          useValue: {
-            compileModuleAsync: jasmine.createSpy('compileModuleAsync').and.callFake(
-                (Mod: typeof FakeCustomElementModule) => new FakeModuleFactory(Mod.modulePath)),
-          },
-        },
         {
           provide: ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN,
           useValue: new Map<string, () => Promise<Type<WithCustomElementComponent>>>([
@@ -43,7 +29,6 @@ describe('ElementsLoader', () => {
     });
 
     elementsLoader = injector.inject(ElementsLoader);
-    compiler = injector.inject(Compiler);
   });
 
   describe('loadContainedCustomElements()', () => {
@@ -235,23 +220,6 @@ describe('ElementsLoader', () => {
         expect(definedSpy).toHaveBeenCalledTimes(1);
       })
     );
-
-    it('should be able to load and register an element after compiling its NgModule', fakeAsync(() => {
-      const compilerSpy = compiler.compileModuleAsync as unknown as jasmine.Spy;
-
-      elementsLoader.loadCustomElement('element-c-selector');
-      flushMicrotasks();
-
-      expect(definedSpy).toHaveBeenCalledTimes(1);
-      expect(definedSpy).toHaveBeenCalledWith('element-c-selector', jasmine.any(Function));
-
-      expect(compilerSpy).toHaveBeenCalledBefore(definedSpy);
-      expect(compilerSpy).toHaveBeenCalledOnceWith(jasmine.any(Function));
-
-      const CompiledModuleClass: typeof FakeCustomElementModule = compilerSpy.calls.first().args[0];
-      expect(FakeCustomElementModule.isPrototypeOf(CompiledModuleClass)).toBeTrue();
-      expect(CompiledModuleClass.modulePath).toBe('element-c-module');
-    }));
   });
 });
 
@@ -262,61 +230,22 @@ class FakeCustomElementModule implements WithCustomElementComponent {
   customElementComponent: Type<any>;
 }
 
-class FakeComponentFactory extends ComponentFactory<any> {
-  selector: string;
-  componentType: Type<any>;
-  ngContentSelectors: string[];
-  inputs = [{propName: this.identifyingInput, templateName: this.identifyingInput}];
-  outputs = [];
+function createFakeComponent(inputName: string): Type<any> {
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  @Component({inputs: [inputName]})
+  class FakeComponent {}
 
-  constructor(private identifyingInput: string) { super(); }
-
-  create(_injector: Injector,
-         _projectableNodes?: any[][],
-         _rootSelectorOrNode?: string | any,
-         _ngModule?: NgModuleRef<any>): ComponentRef<any> {
-    return jasmine.createSpy('ComponentRef') as any;
-  }
-}
-
-class FakeComponentFactoryResolver extends ComponentFactoryResolver {
-  constructor(private modulePath: string) { super(); }
-
-  resolveComponentFactory(_component: Type<any>): ComponentFactory<any> {
-    return new FakeComponentFactory(this.modulePath);
-  }
-}
-
-class FakeModuleRef extends NgModuleRef<WithCustomElementComponent> {
-  injector = jasmine.createSpyObj('injector', ['get']);
-  componentFactoryResolver = new FakeComponentFactoryResolver(this.modulePath);
-  instance: WithCustomElementComponent = new FakeCustomElementModule();
-
-  constructor(private modulePath: string) {
-    super();
-
-    this.injector.get.and.returnValue(this.componentFactoryResolver);
-  }
-
-  destroy() {}
-  onDestroy(_callback: () => void) {}
-}
-
-class FakeModuleFactory extends NgModuleFactory<any> {
-  moduleType: Type<any>;
-  moduleRefToCreate = new FakeModuleRef(this.modulePath);
-
-  constructor(private modulePath: string) { super(); }
-
-  create(_parentInjector: Injector | null): NgModuleRef<any> {
-    return this.moduleRefToCreate;
-  }
+  return FakeComponent;
 }
 
 function createFakeCustomElementModule(modulePath: string): typeof FakeCustomElementModule {
-  return class extends FakeCustomElementModule {
+  @NgModule({})
+  class FakeModule extends FakeCustomElementModule {
     static override readonly modulePath = modulePath;
-  };
+    override customElementComponent = createFakeComponent(modulePath);
+  }
+
+  return FakeModule;
 }
 
 function returnPromisesFromSpy(spy: jasmine.Spy): Deferred[] {

aio/src/app/custom-elements/elements-loader.ts

@@ -1,4 +1,4 @@
-import { Compiler, Inject, Injectable, NgModuleRef, Type } from '@angular/core';
+import { createNgModuleRef, Inject, Injectable, NgModuleRef, Type } from '@angular/core';
 import { ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN, WithCustomElementComponent } from './element-registry';
 import { from, Observable, of } from 'rxjs';
 import { createCustomElement } from '@angular/elements';
@@ -13,8 +13,7 @@ export class ElementsLoader {
   private elementsLoading = new Map<string, Promise<void>>();
 
   constructor(private moduleRef: NgModuleRef<any>,
-              @Inject(ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN) elementModulePaths: Map<string, LoadChildrenCallback>,
-              private compiler: Compiler) {
+              @Inject(ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN) elementModulePaths: Map<string, LoadChildrenCallback>) {
     this.elementsToLoad = new Map(elementModulePaths);
   }
 
@@ -46,9 +45,8 @@ export class ElementsLoader {
       const modulePathLoader = this.elementsToLoad.get(selector) as LoadChildrenCallback;
       const loadedAndRegistered =
         (modulePathLoader() as Promise<Type<WithCustomElementComponent>>)
-          .then(elementModule => this.compiler.compileModuleAsync(elementModule))
-          .then(elementModuleFactory => {
-            const elementModuleRef = elementModuleFactory.create(this.moduleRef.injector);
+          .then(elementModule => {
+            const elementModuleRef = createNgModuleRef(elementModule, this.moduleRef.injector);
             const injector = elementModuleRef.injector;
             const CustomElementComponent = elementModuleRef.instance.customElementComponent;
             const CustomElement = createCustomElement(CustomElementComponent, {injector});