feat(lib): enable dynamic lazy element tags for IVY

- override renderer ( initial IMPL ), might change in the future - adjust tests for IVY - remove unnecessary ANALYZE_FOR_ENTRY_COMPONENTS token
angular-extensions · Feb 8, 2020 · fcd13c1 · fcd13c1
1 parent c3bef51
commit fcd13c1
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 29 deletions.
diff --git a/...lements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.spec.ts b/...lements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.spec.ts
@@ -72,7 +72,7 @@ describe('LazyElementDirectiveDynamic', () => {
     );
   });
 
-  it('throws error if calledwith invalid tag', () => {
+  it('throws error if called with invalid tag', () => {
     expect(() => {
       testHostComponent.useWithInvalidTag = true;
       fixture.detectChanges();

diff --git a/...cts/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts b/...cts/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts
@@ -5,8 +5,11 @@ import {
   TemplateRef,
   ViewContainerRef,
   ComponentFactoryResolver,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  Renderer2,
+  Inject
 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 import {
   LazyElementsLoaderService,
@@ -15,6 +18,7 @@ import {
 
 const LOG_PREFIX = '@angular-extensions/elements';
 
+/** @dynamic */
 @Directive({
   selector: '[axLazyElementDynamic]'
 })
@@ -30,11 +34,13 @@ export class LazyElementDynamicDirective implements OnInit {
   @Input('axLazyElementDynamicModule') isModule: boolean | undefined; // tslint:disable-line:no-input-rename
 
   constructor(
+    @Inject(DOCUMENT) private document: Document,
+    private renderer: Renderer2,
     private vcr: ViewContainerRef,
-    private template: TemplateRef<any>,
-    private elementsLoaderService: LazyElementsLoaderService,
     private cfr: ComponentFactoryResolver,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private template: TemplateRef<any>,
+    private elementsLoaderService: LazyElementsLoaderService
   ) {}
 
   ngOnInit() {
@@ -61,17 +67,16 @@ export class LazyElementDynamicDirective implements OnInit {
     this.elementsLoaderService
       .loadElement(this.url, this.tag, this.isModule)
       .then(() => {
-        if ((this.template as any)._declarationTContainer) {
-          // (this.template as any)._declarationTContainer.tagName = this.tag;
-          throw new Error(
-            'The *axLazyElementDynamic directive is currently does NOT support Angular Ivy, please use standard *axLazyElement directive instead!'
-          );
-        } else {
-          (this
-            .template as any)._def.element.template.nodes[0].element.name = this.tag;
-        }
         this.vcr.clear();
+        const originalCreateElement = this.renderer.createElement;
+        this.renderer.createElement = (name: string, namespace: string) => {
+          if (name === 'ax-lazy-element') {
+            name = this.tag;
+          }
+          return this.document.createElement(name);
+        };
         this.vcr.createEmbeddedView(this.template);
+        this.renderer.createElement = originalCreateElement;
         this.cdr.markForCheck();
       })
       .catch(error => {

diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.spec.ts b/projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.spec.ts
@@ -10,7 +10,9 @@ describe('LazyElementsLoaderService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({});
 
-    service = TestBed.get(LazyElementsLoaderService);
+    service = TestBed.inject<LazyElementsLoaderService>(
+      LazyElementsLoaderService
+    );
     appendChildSpy = spyOn(document.body, 'appendChild').and.stub();
   });
 
@@ -151,7 +153,9 @@ describe('LazyElementsLoaderService preconfigured with LazyElementsModule', () =
       ]
     });
 
-    service = TestBed.get(LazyElementsLoaderService);
+    service = TestBed.inject<LazyElementsLoaderService>(
+      LazyElementsLoaderService
+    );
     appendChildSpy = spyOn(document.body, 'appendChild').and.stub();
   });
 

diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements.module.spec.ts b/projects/elements/src/lib/lazy-elements/lazy-elements.module.spec.ts
@@ -50,7 +50,7 @@ describe('LazyElementsModule', () => {
         ])
       ]
     });
-    router = TestBed.get(Router);
+    router = TestBed.inject<Router>(Router);
     router.initialNavigation();
   });
 

diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements.module.ts b/projects/elements/src/lib/lazy-elements/lazy-elements.module.ts
@@ -3,7 +3,6 @@ import {
   Optional,
   Inject,
   ModuleWithProviders,
-  ANALYZE_FOR_ENTRY_COMPONENTS,
   Type,
   SkipSelf
 } from '@angular/core';
@@ -23,7 +22,12 @@ import {
   LazyElementsRegistry
 } from './lazy-elements.tokens';
 
-export { LAZY_ELEMENTS_REGISTRY, LazyElementsRegistry };
+export {
+  LAZY_ELEMENTS_REGISTRY,
+  LazyElementsRegistry,
+  LazyElementDirective,
+  LazyElementDynamicDirective
+};
 
 export function createLazyElementRootGuard(options: LazyElementModuleOptions) {
   if (options) {
@@ -55,11 +59,6 @@ export class LazyElementsModule {
           provide: LAZY_ELEMENT_ROOT_OPTIONS,
           useValue: options.rootOptions ? options.rootOptions : {}
         },
-        {
-          provide: ANALYZE_FOR_ENTRY_COMPONENTS,
-          useValue: options,
-          multi: true
-        },
         {
           provide: LAZY_ELEMENT_ROOT_GUARD,
           useFactory: createLazyElementRootGuard,
@@ -78,11 +77,6 @@ export class LazyElementsModule {
           useValue:
             options && options.elementConfigs ? options.elementConfigs : [],
           multi: true
-        },
-        {
-          provide: ANALYZE_FOR_ENTRY_COMPONENTS,
-          useValue: options && options.elementConfigs,
-          multi: true
         }
       ]
     };