Angular2ハイブリッドモード：Ng1コンポーネントを動的にロードする

Question

ViewContainerRef.createComponent()を使用して、ng2コンポーネントをng2親コンポーネント内で動的にロードしようとしています。

ViewWrappedException {_wrapperMessage: "Error in ./DynamicComponent class DynamicComponent - inline template:0:27", _originalException: TypeError: Cannot read property 'scope' of null 
    at new UpgradeNg1ComponentAdapter (https://npmcd…, _originalStack: "TypeError: Cannot read property 'scope' of null? …ular/core@2.0.0-rc.2/bundles/core.umd.js:8276:49)", _context: DebugContext, _wrapperStack: "Error: Error in ./DynamicComponent class DynamicCo…DNGqj1u/src/dynViewComponent.ts!transpiled:84:45)"}_context: DebugContext_originalException: TypeError: Cannot read property 'scope' of null 

ここNG1-comp.js

define(['bootstrap'], 
function(ng1) { 
    'use strict'; 

    ng1.ngModule.component('ng1Comp', { 
     template:'<h1>NG1 Comp </h1>', 
    }); 
}); 

ここでは、ダイナミックローダーです：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div>This is dynamic view container</div> 
    ` 
}) 
export class App { 
    private _componentRef: ComponentRef<any>; 
    private vcRef:any; 
    constructor(private viewContainerRef: ViewContainerRef, private resolver: 
    ComponentResolver){ 
     this.vcRef = this.viewContainerRef; 
    } 

    public ngAfterViewInit(){ 
    if (this._componentRef) { 
     this._componentRef.destroy(); 
     this._componentRef = null; 
    } 

    System.import('js/ng1-comp.js');  

    const metadata = new ComponentMetadata({ 
     directives: [upgradeAdapter.instance.upgradeNg1Component('ng1Comp') ], 
     selector: 'dynamic-content', 
     template: '<ng1-comp></ng1-comp>' 
    }); 
    this.createComponentFactory(this.resolver, metadata) 
     .then(factory => { 
     const injector = ReflectiveInjector.fromResolvedProviders([], 
      this.vcRef.parentInjector); 
     this.vcRef.createComponent(factory, 0, injector, []); 
     }); 
    } 

    private createComponentFactory(resolver: ComponentResolver, 
     metadata: ComponentMetadata): Promise<ComponentFactory<any>> { 
    const cmpClass = class DynamicComponent {}; 
    const decoratedCmp = Component(metadata)(cmpClass); 
    return resolver.resolveComponent(decoratedCmp); 
    } 

} 

それは次の例外をスローしかし、ここでplunkerはhttps://plnkr.co/edit/HADJILztGEELg5lavfvP?p=preview

です任意のポインタを歓迎..

Answer 1

これはUpgradeAdapterの問題です。これは、アプリケーションがブートされる前にすべてのNG1のアップグレードが完了することを必要とします。回避策は、UpgradeAdapter.bootstrap()が呼び出される前に、動的にロードされているすべてのNG1コンポーネントをアップグレードしてアップグレードすることです。

号#9959 angualr2 githubで記録されます。 ここでは回避策をとってplunkerです。