fix(modal): make it easier to use components from lazy-loaded modules

Fixes #947
Closes #974

src/modal/modal-container.ts

@@ -32,9 +32,9 @@ export class NgbModalContainer {
     ngbModalStack.registerContainer(this);
   }
 
-  open(content: string | TemplateRef<any>, options): NgbModalRef {
+  open(moduleCFR: ComponentFactoryResolver, content: string | TemplateRef<any>, options): NgbModalRef {
     const activeModal = new NgbActiveModal();
-    const contentRef = this._getContentRef(content, activeModal);
+    const contentRef = this._getContentRef(moduleCFR, content, activeModal);
     let windowCmptRef: ComponentRef<NgbModalWindow>;
     let backdropCmptRef: ComponentRef<NgbModalBackdrop>;
     let ngbModalRef: NgbModalRef;
@@ -65,7 +65,7 @@ export class NgbModalContainer {
     });
   }
 
-  private _getContentRef(content: any, context: NgbActiveModal): ContentRef {
+  private _getContentRef(moduleCFR: ComponentFactoryResolver, content: any, context: NgbActiveModal): ContentRef {
     if (!content) {
       return new ContentRef([]);
     } else if (content instanceof TemplateRef) {
@@ -74,7 +74,7 @@ export class NgbModalContainer {
     } else if (isString(content)) {
       return new ContentRef([[this._renderer.createText(null, `${content}`)]]);
     } else {
-      const contentCmptFactory = this._componentFactoryResolver.resolveComponentFactory(content);
+      const contentCmptFactory = moduleCFR.resolveComponentFactory(content);
       const modalContentInjector =
           ReflectiveInjector.resolveAndCreate([{provide: NgbActiveModal, useValue: context}], this._injector);
       const componentRef = this._viewContainerRef.createComponent(contentCmptFactory, 0, modalContentInjector);

src/modal/modal-stack.spec.ts

@@ -4,6 +4,6 @@ describe('modal stack', () => {
 
   it('should throw if a container element was not registered', () => {
     const modalStack = new NgbModalStack();
-    expect(() => { modalStack.open('foo'); }).toThrowError();
+    expect(() => { modalStack.open(null, 'foo'); }).toThrowError();
   });
 });

src/modal/modal-stack.ts

@@ -1,4 +1,4 @@
-import {Injectable, TemplateRef} from '@angular/core';
+import {Injectable, ComponentFactoryResolver} from '@angular/core';
 
 import {NgbModalRef} from './modal-ref';
 import {NgbModalContainer} from './modal-container';
@@ -7,13 +7,13 @@ import {NgbModalContainer} from './modal-container';
 export class NgbModalStack {
   private modalContainer: NgbModalContainer;
 
-  open(content: any, options = {}): NgbModalRef {
+  open(moduleCFR: ComponentFactoryResolver, content: any, options = {}): NgbModalRef {
     if (!this.modalContainer) {
       throw new Error(
           'Missing modal container, add <template ngbModalContainer></template> to one of your application templates.');
     }
 
-    return this.modalContainer.open(content, options);
+    return this.modalContainer.open(moduleCFR, content, options);
   }
 
   registerContainer(modalContainer: NgbModalContainer) { this.modalContainer = modalContainer; }

src/modal/modal.module.ts

@@ -13,6 +13,7 @@ export {ModalDismissReasons} from './modal-dismiss-reasons';
 @NgModule({
   declarations: [NgbModalContainer, NgbModalBackdrop, NgbModalWindow],
   entryComponents: [NgbModalBackdrop, NgbModalWindow],
+  providers: [NgbModal],
   exports: [NgbModalContainer]
 })
 export class NgbModalModule {

src/modal/modal.ts

@@ -1,4 +1,4 @@
-import {Injectable, TemplateRef} from '@angular/core';
+import {Injectable, ComponentFactoryResolver} from '@angular/core';
 
 import {NgbModalStack} from './modal-stack';
 import {NgbModalRef} from './modal-ref';
@@ -35,13 +35,15 @@ export interface NgbModalOptions {
  */
 @Injectable()
 export class NgbModal {
-  constructor(private _modalStack: NgbModalStack) {}
+  constructor(private _moduleCFR: ComponentFactoryResolver, private _modalStack: NgbModalStack) {}
 
   /**
    * Opens a new modal window with the specified content and using supplied options. Content can be provided
    * as a TemplateRef or a component type. If you pass a component type as content than instances of those
    * components can be injected with an instance of the NgbActiveModal class. You can use methods on the
    * NgbActiveModal class to close / dismiss modals from "inside" of a component.
    */
-  open(content: any, options: NgbModalOptions = {}): NgbModalRef { return this._modalStack.open(content, options); }
+  open(content: any, options: NgbModalOptions = {}): NgbModalRef {
+    return this._modalStack.open(this._moduleCFR, content, options);
+  }
 }