Add support for setting up component factory resolvers in modal servi…

…ce (#471)
bitwarden · Aug 31, 2021 · d505318 · d505318
1 parent 30419a6
commit d505318
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/angular/src/components/modal/dynamic-modal.component.ts b/angular/src/components/modal/dynamic-modal.component.ts
@@ -2,7 +2,6 @@ import {
     AfterViewInit,
     ChangeDetectorRef,
     Component,
-    ComponentFactoryResolver,
     ComponentRef,
     ElementRef,
     OnDestroy,
@@ -11,6 +10,8 @@ import {
     ViewContainerRef
 } from '@angular/core';
 
+import { ModalService } from '../../services/modal.service';
+
 import { ModalRef } from './modal.ref';
 
 @Component({
@@ -25,7 +26,7 @@ export class DynamicModalComponent implements AfterViewInit, OnDestroy {
     childComponentType: Type<any>;
     setComponentParameters: (component: any) => void;
 
-    constructor(private componentFactoryResolver: ComponentFactoryResolver, private cd: ChangeDetectorRef,
+    constructor(private modalService: ModalService, private cd: ChangeDetectorRef,
         private el: ElementRef<HTMLElement>, public modalRef: ModalRef) {}
 
     ngAfterViewInit() {
@@ -39,7 +40,7 @@ export class DynamicModalComponent implements AfterViewInit, OnDestroy {
     }
 
     loadChildComponent(componentType: Type<any>) {
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+        const componentFactory = this.modalService.resolveComponentFactory(componentType);
 
         this.modalContentRef.clear();
         this.componentRef = this.modalContentRef.createComponent(componentFactory);

diff --git a/angular/src/services/modal.service.ts b/angular/src/services/modal.service.ts
@@ -1,5 +1,6 @@
 import {
     ApplicationRef,
+    ComponentFactory,
     ComponentFactoryResolver,
     ComponentRef,
     EmbeddedViewRef,
@@ -23,6 +24,10 @@ export class ModalConfig<D = any> {
 export class ModalService {
     protected modalCount = 0;
 
+    // Lazy loaded modules are not available in componentFactoryResolver,
+    // therefore modules needs to manually initialize their resolvers.
+    private factoryResolvers: Map<Type<any>, ComponentFactoryResolver> = new Map();
+
     constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef,
         private injector: Injector) {}
 
@@ -51,6 +56,18 @@ export class ModalService {
         return modalRef;
     }
 
+    registerComponentFactoryResolver<T>(componentType: Type<T>, componentFactoryResolver: ComponentFactoryResolver): void {
+        this.factoryResolvers.set(componentType, componentFactoryResolver);
+    }
+
+    resolveComponentFactory<T>(componentType: Type<T>): ComponentFactory<T> {
+        if (this.factoryResolvers.has(componentType)) {
+            return this.factoryResolvers.get(componentType).resolveComponentFactory(componentType);
+        }
+
+        return this.componentFactoryResolver.resolveComponentFactory(componentType);
+    }
+
     protected openInternal(componentType: Type<any>, config?: ModalConfig, attachToDom?: boolean):
         [ModalRef, ComponentRef<DynamicModalComponent>] {