Merge pull request #247 from NativeScript/remove-dynamic-component-loader

Remove usages of Dynmamic ComponentLoader

Author: vakrilov

src/nativescript-angular/common/detached-loader.ts

@@ -1,4 +1,4 @@
-import {DynamicComponentLoader, ComponentRef, ViewContainerRef, Component, Type, ViewChild} from '@angular/core';
+import {ComponentRef, ViewContainerRef, Component, Type, ViewChild, ComponentResolver} from '@angular/core';
 
 type AnyComponentRef = ComponentRef<any>;
 interface PendingLoadEntry {
@@ -11,23 +11,20 @@ interface PendingLoadEntry {
  * It uses DetachedContainer as selector so that it is containerRef is not attached to the visual tree.
  */
 @Component({
-    selector: 'DetachedContainer', 
+    selector: 'DetachedContainer',
     template: `<Placeholder #loader></Placeholder>`
 })
 export class DetachedLoader {
     @ViewChild('loader', { read: ViewContainerRef }) containerRef: ViewContainerRef;
-    private viewLoaded = false;
 
+    private viewLoaded = false;
     private pendingLoads: PendingLoadEntry[] = [];
 
-    constructor(
-        private loader: DynamicComponentLoader
-    ) {
+    constructor(private compiler: ComponentResolver) {
     }
 
     public ngAfterViewInit() {
         this.viewLoaded = true;
-
         this.pendingLoads.forEach(loadEntry => {
             this.loadInLocation(loadEntry.componentType).then(loadedRef => {
                 loadEntry.resolveCallback(loadedRef);
@@ -36,7 +33,9 @@ export class DetachedLoader {
     }
 
     private loadInLocation(componentType: Type): Promise<ComponentRef<any>> {
-        return this.loader.loadNextToLocation(componentType, this.containerRef);
+        return this.compiler.resolveComponent(componentType).then((componentFactory) => {
+            return this.containerRef.createComponent(componentFactory, this.containerRef.length, this.containerRef.parentInjector, null);
+        });
     }
 
     public loadComponent(componentType: Type): Promise<ComponentRef<any>> {

src/nativescript-angular/directives/dialogs.ts

@@ -1,4 +1,4 @@
-import {ReflectiveInjector, DynamicComponentLoader, ViewContainerRef, Injector, provide, Type, Injectable, ComponentRef, Directive} from '@angular/core';
+import {ReflectiveInjector, ComponentResolver, ViewContainerRef, Injector, provide, Type, Injectable, ComponentRef, Directive} from '@angular/core';
 import {Page} from 'ui/page';
 import {View} from 'ui/core/view';
 import {DetachedLoader} from '../common/detached-loader';
@@ -21,7 +21,7 @@ export class ModalDialogService {
 
     constructor(
         private page: Page,
-        private loader: DynamicComponentLoader) {
+        private compiler: ComponentResolver) {
     }
 
     public registerViewContainerRef(ref: ViewContainerRef) {
@@ -48,21 +48,22 @@ export class ModalDialogService {
                 provide(ModalDialogParams, { useValue: modalParams }),
             ]);
 
-            this.loader.loadNextToLocation(DetachedLoader, this.containerRef, providers)
-                .then((loaderRef) => {
-                    detachedLoaderRef = loaderRef;
-                    return (<DetachedLoader>loaderRef.instance).loadComponent(type)
-                })
-                .then((compRef) => {
-                    //Component loaded. Find its root native view.
+            this.compiler.resolveComponent(DetachedLoader).then((detachedFactory) => {
+                const childInjector = ReflectiveInjector.fromResolvedProviders(providers, this.containerRef.parentInjector);
+                detachedLoaderRef = this.containerRef.createComponent(detachedFactory, -1, childInjector, null)
+                
+                detachedLoaderRef.instance.loadComponent(type).then((compRef) => {
                     const componentView = <View>compRef.location.nativeElement;
+                    
                     if (componentView.parent) {
                         (<any>componentView.parent).removeChild(componentView);
                     }
+                    
                     page.content = componentView;
                     this.page.showModal(page, options.context, closeCallback, options.fullscreen);
                 });
-        })
+            });
+        });
     }
 }
 

src/nativescript-angular/router/page-router-outlet.ts

@@ -3,16 +3,16 @@ import {isBlank, isPresent} from '@angular/core/src/facade/lang';
 import {StringMapWrapper} from '@angular/core/src/facade/collection';
 
 import {
-    Attribute, DynamicComponentLoader, ComponentRef,
+    Attribute, ComponentRef,
     ViewContainerRef, ViewChild, ElementRef,
     ReflectiveInjector, provide, Type,
-    Component, Inject
+    Component, Inject, DynamicComponentLoader, ComponentResolver
 } from '@angular/core';
 
 import * as routerHooks from '@angular/router-deprecated/src/lifecycle/lifecycle_annotations';
 import {hasLifecycleHook} from '@angular/router-deprecated/src/lifecycle/route_lifecycle_reflector';
 
-import {Router, RouterOutlet, RouteData, RouteParams, ComponentInstruction, 
+import {Router, RouterOutlet, RouteData, RouteParams, ComponentInstruction,
     OnActivate, OnDeactivate, OnReuse, CanReuse} from '@angular/router-deprecated';
 import {LocationStrategy} from '@angular/common';
 import {topmost} from "ui/frame";
@@ -78,12 +78,13 @@ export class PageRouterOutlet extends RouterOutlet {
 
     constructor(
         private containerRef: ViewContainerRef,
-        private loader: DynamicComponentLoader,
+        private compiler: ComponentResolver,
         private parentRouter: Router,
         @Attribute('name') nameAttr: string,
         private location: NSLocationStrategy,
+        loader: DynamicComponentLoader,
         @Inject(DEVICE) device: Device
-        ) {
+    ) {
         super(containerRef, loader, parentRouter, nameAttr);
         this.viewUtil = new ViewUtil(device);
     }
@@ -135,20 +136,25 @@ export class PageRouterOutlet extends RouterOutlet {
         if (this.isInitalPage) {
             log("PageRouterOutlet.activate() inital page - just load component: " + componentType.name);
             this.isInitalPage = false;
-            resultPromise = this.loader.loadNextToLocation(componentType, this.containerRef, ReflectiveInjector.resolve(providersArray));
+            resultPromise = this.compiler.resolveComponent(componentType).then((componentFactory) => {
+                const childInjector = ReflectiveInjector.resolveAndCreate(providersArray, this.containerRef.parentInjector);
+                return this.containerRef.createComponent(componentFactory, this.containerRef.length, childInjector, null);
+            });
         } else {
             log("PageRouterOutlet.activate() forward navigation - create detached loader in the loader container: " + componentType.name);
 
             const page = new Page();
             providersArray.push(provide(Page, { useValue: page }));
-            resultPromise = this.loader.loadNextToLocation(DetachedLoader, this.childContainerRef, ReflectiveInjector.resolve(providersArray))
-                .then((pageComponentRef) => {
-                    loaderRef = pageComponentRef;
-                    return (<DetachedLoader>loaderRef.instance).loadComponent(componentType);
-                })
-                .then((actualCoponenetRef) => {
-                    return this.loadComponentInPage(page, actualCoponenetRef);
-                })
+            const childInjector = ReflectiveInjector.resolveAndCreate(providersArray, this.containerRef.parentInjector);
+
+            resultPromise = this.compiler.resolveComponent(DetachedLoader).then((componentFactory) => {
+                loaderRef = this.childContainerRef.createComponent(componentFactory, this.childContainerRef.length, childInjector, null);
+
+                return (<DetachedLoader>loaderRef.instance).loadComponent(componentType)
+                    .then((actualCoponenetRef) => {
+                        return this.loadComponentInPage(page, actualCoponenetRef);
+                    });
+            });
         }
 
         return resultPromise.then((componentRef) => {