From f7ea5249deb98d691cac64edc4ae38404ee47a06 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Wed, 1 Dec 2021 00:08:01 +0200 Subject: [PATCH] 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 --- .../custom-elements/elements-loader.spec.ts | 95 +++---------------- .../app/custom-elements/elements-loader.ts | 10 +- 2 files changed, 16 insertions(+), 89 deletions(-) diff --git a/aio/src/app/custom-elements/elements-loader.spec.ts b/aio/src/app/custom-elements/elements-loader.spec.ts index 601e4efe574..f26603947d0 100644 --- a/aio/src/app/custom-elements/elements-loader.spec.ts +++ b/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 Promise>>([ @@ -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; } -class FakeComponentFactory extends ComponentFactory { - selector: string; - componentType: Type; - ngContentSelectors: string[]; - inputs = [{propName: this.identifyingInput, templateName: this.identifyingInput}]; - outputs = []; +function createFakeComponent(inputName: string): Type { + // 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): ComponentRef { - return jasmine.createSpy('ComponentRef') as any; - } -} - -class FakeComponentFactoryResolver extends ComponentFactoryResolver { - constructor(private modulePath: string) { super(); } - - resolveComponentFactory(_component: Type): ComponentFactory { - return new FakeComponentFactory(this.modulePath); - } -} - -class FakeModuleRef extends NgModuleRef { - 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 { - moduleType: Type; - moduleRefToCreate = new FakeModuleRef(this.modulePath); - - constructor(private modulePath: string) { super(); } - - create(_parentInjector: Injector | null): NgModuleRef { - 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[] { diff --git a/aio/src/app/custom-elements/elements-loader.ts b/aio/src/app/custom-elements/elements-loader.ts index 773b2e25907..1ac185a3bb1 100644 --- a/aio/src/app/custom-elements/elements-loader.ts +++ b/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>(); constructor(private moduleRef: NgModuleRef, - @Inject(ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN) elementModulePaths: Map, - private compiler: Compiler) { + @Inject(ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN) elementModulePaths: Map) { 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>) - .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});