import { Component, ComponentFactoryResolver, ComponentRef, CompilerFactory, ElementRef, NgModule, NgModuleFactoryLoader, OnInit, Type, ViewChild, getPlatform } from '@angular/core'; import { ComponentsOrModulePath, EMBEDDED_COMPONENTS, EmbedComponentsService, EmbeddedComponentFactory, WithEmbeddedComponents } from 'app/embed-components/embed-components.service'; //////////////////////////////////////////////////////////////////////////////////////////////////// /// `TestEmbedComponentsService` (for exposing internal methods as public). /// /// Only used for type-casting; the actual implementation is irrelevant. /// //////////////////////////////////////////////////////////////////////////////////////////////////// export class TestEmbedComponentsService extends EmbedComponentsService { componentFactories: Map; createComponentFactories(components: Type[], resolver: ComponentFactoryResolver): void { return null as any; } createComponents(elem: HTMLElement): ComponentRef[] { return null as any; } prepareComponentFactories(compsOrPath: ComponentsOrModulePath): Promise { return null as any; } selectorToContentPropertyName(selector: string): string { return null as any; } } //////////////////////////////////////////////////////////////////////////////////////////////////// /// Mock `EmbeddedModule` and test components. /// //////////////////////////////////////////////////////////////////////////////////////////////////// // Test embedded components. @Component({ selector: 'aio-eager-foo', template: `Eager Foo Component`, }) class EagerFooComponent { } @Component({ selector: 'aio-eager-bar', template: `

Eager Bar Component


`, }) class EagerBarComponent implements OnInit { @ViewChild('content') contentRef: ElementRef; constructor(public elementRef: ElementRef) { } // Project content in `ngOnInit()` just like in `CodeExampleComponent`. ngOnInit() { // Security: This is a test component; never deployed. this.contentRef.nativeElement.innerHTML = this.elementRef.nativeElement.aioEagerBarContent; } } @Component({ selector: 'aio-lazy-foo', template: `Lazy Foo Component`, }) class LazyFooComponent { } @Component({ selector: 'aio-lazy-bar', template: `

Lazy Bar Component


`, }) class LazyBarComponent implements OnInit { @ViewChild('content') contentRef: ElementRef; constructor(public elementRef: ElementRef) { } // Project content in `ngOnInit()` just like in `CodeExampleComponent`. ngOnInit() { // Security: This is a test component; never deployed. this.contentRef.nativeElement.innerHTML = this.elementRef.nativeElement.aioLazyBarContent; } } // Export test embedded selectors and components. export const testEagerEmbeddedSelectors = ['aio-eager-foo', 'aio-eager-bar']; export const testEagerEmbeddedComponents = [EagerFooComponent, EagerBarComponent]; export const testLazyEmbeddedSelectors = ['aio-lazy-foo', 'aio-lazy-bar']; export const testLazyEmbeddedComponents = [LazyFooComponent, LazyBarComponent]; // Export mock `EmbeddedModule` and path. export const mockEmbeddedModulePath = 'mock/mock-embedded#MockEmbeddedModule'; @NgModule({ declarations: [testLazyEmbeddedComponents], entryComponents: [testLazyEmbeddedComponents], }) class MockEmbeddedModule implements WithEmbeddedComponents { embeddedComponents = testLazyEmbeddedComponents; } //////////////////////////////////////////////////////////////////////////////////////////////////// /// `TestModule`. /// //////////////////////////////////////////////////////////////////////////////////////////////////// // Mock services. export class MockNgModuleFactoryLoader implements NgModuleFactoryLoader { loadedPaths: string[] = []; load(path: string) { this.loadedPaths.push(path); const platformRef = getPlatform(); const compilerFactory = platformRef.injector.get(CompilerFactory) as CompilerFactory; const compiler = compilerFactory.createCompiler([]); return compiler.compileModuleAsync(MockEmbeddedModule); } } @NgModule({ providers: [ EmbedComponentsService, { provide: NgModuleFactoryLoader, useClass: MockNgModuleFactoryLoader }, { provide: EMBEDDED_COMPONENTS, useValue: { [testEagerEmbeddedSelectors.join(',')]: testEagerEmbeddedComponents, [testLazyEmbeddedSelectors.join(',')]: mockEmbeddedModulePath, }, }, ], declarations: [testEagerEmbeddedComponents], entryComponents: [testEagerEmbeddedComponents], }) export class TestModule { }