角2 RC 4 DynamicComponentLoader.loadNextToLocation（...）によるコンポーネントの動的な追加と削除に失敗しました

Question

現在、私はAngular 2 Beta 13からRC 4にアップグレードしたプロジェクトに取り組んでいます。 アップグレードの前に、動的にデータをロードする過程で、このサービスを利用して、うまく働いた任意のページに単純なコンポーネント（シンプルスピナー）を追加し、削除します。

（SinnerService.ts）を

import {Injectable, DynamicComponentLoader, ApplicationRef, ElementRef,   
     ComponentRef} from '@angular/core'; 

import {Spinner} from './spinner'; 

@Injectable() 
export class SpinnerService { 
spinnerComp: ComponentRef; 

    constructor(private _componentLoader: DynamicComponentLoader, private _appRef: ApplicationRef) { 
    } 

    public start() { 
     let elementRef: ElementRef = this._appRef['_rootComponents'][0].location; 

     return this.startInside(elementRef, null); 
    } 

    public startInside(elementRef: ElementRef, anchorName: string) { 

     let spinnerRef = (!anchorName) ? 
      this._componentLoader.loadNextToLocation(Spinner, elementRef, anchorName) : 
      this._componentLoader.loadNextToLocation(Spinner, elementRef); 

     spinnerRef.then((compRef: ComponentRef) => { 
      this.spinnerComp = compRef; 
     }); 
    } 

    public stop() { 
     if (this.spinnerComp) { 
      this.spinnerComp.dispose(); 
     } 
    } 
} 

アップグレード中に、クラス2の変更に合わせてクラスが変更されました。 結果ファイルca

（SinnerService.tsはRC 4に変更）：エラー

import {Injectable, DynamicComponentLoader, ApplicationRef, ViewContainerRef, ComponentRef} from '@angular/core'; 

import {Spinner} from './spinner'; 

@Injectable() 
export class SpinnerService { 
    spinnerComp: ComponentRef<any>; 

    constructor(private _componentLoader: DynamicComponentLoader, private _appRef: ApplicationRef) { 
    } 

    public start() { 
     let elementRef: ViewContainerRef = this._appRef['_rootComponents'][0].location; 

     return this.startInside(elementRef, null); 
    } 

    public startInside(elementRef: ViewContainerRef, anchorName: string) { 

     let spinnerRef = (!anchorName) ? 
      this._componentLoader.loadNextToLocation(Spinner, elementRef) : 
      this._componentLoader.loadNextToLocation(Spinner, elementRef); 

     spinnerRef.then((compRef: ComponentRef<any>) => { 
      this.spinnerComp = compRef; 
     }); 
    } 

    public stop() { 
     if (this.spinnerComp) { 
      this.spinnerComp.destroy(); 
     } 
    } 
} 

：だから

EXCEPTION: Error: Uncaught (in promise): TypeError: 
location.createComponent is not a function 
browser_adapter.ts:82 

EXCEPTION: Error: Uncaught (in promise): TypeError: 
location.createComponent is not a functionBrowser DomAdapter.logError @ browser_adapter.ts:82 
browser_adapter.ts:82 

STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:82 
browser_adapter.ts:82 

Error: Uncaught (in promise): TypeError: 
location.createComponent is not a function 
at resolvePromise (zone.js:538) 
at resolvePromise (zone.js:523) 
at zone.js:571 
at ZoneDelegate.invokeTask (zone.js:356) 
at Object.onInvokeTask (ng_zone_impl.ts:61) 
at ZoneDelegate.invokeTask (zone.js:355) 
at Zone.runTask (zone.js:256) 
at drainMicroTaskQueue (zone.js:474) 
at XMLHttpRequest.ZoneTask.invoke (zone.js:426) BrowserDomAdapter.logError @ browser_adapter.ts:82 zone.js:461 

Unhandled Promise rejection: location.createComponent is not a 
function ; Zone: angular ; Task: Promise.then ; Value: TypeError: 
location.createComponent is not a function(…) consoleError @ zone.js:461 
zone.js:463 

Error: Uncaught (in promise): TypeError: location.createComponent is not a function(…) 

は、私が読んで更新されたコードの下に示されているが発生する例外を使用しDynamicComponentLoader.loadNextToLocation（...）を使用するいくつかの方法を試しました。その調査中、私はこのコンポーネントがGoogleによって推奨されなくなっているようだと気付きました。 （https://angular.io/docs/js/latest/api/core/index/DynamicComponentLoader-class.html）

Iグーグルは、角2つの変化し続けているリストは、あなたが代わりにElementRefのViewContainerRefを使用する必要がありますと述べられているが、これが行われるべきかの例はありません。

多くの掘削後、私はいくつかの提案がそうのようComponentResolverの代わりに、DynamicComponentLoader.loadNextToLocation（...）を使用して見ました：

（SinnerService.tsがComponentResolverを使用するように変更）：

import {Injectable, DynamicComponentLoader, ApplicationRef, ViewContainerRef, Component, ComponentRef, ComponentResolver, ComponentFactory, ViewChild} from '@angular/core'; 

import {Spinner} from './spinner'; 

@Injectable() 
export class SpinnerService { 
    spinnerComp: ComponentRef<any>; 

    constructor(private _componentLoader: DynamicComponentLoader, private _appRef: ApplicationRef, 
       private _resolver: ComponentResolver) { 
    } 

    public start() { 
     let elementRef: ViewContainerRef = this._appRef['_rootComponents'][0].location; 

     return this.startInside(elementRef, null); 
    } 

    public startInside(elementRef: ViewContainerRef, anchorName: string) { 

     //let spinnerRef = (!anchorName) ? 
     // this._componentLoader.loadNextToLocation(Spinner, elementRef) : 
     // this._componentLoader.loadNextToLocation(Spinner, elementRef); 
DynamicComponentLoader 
     //spinnerRef.then((compRef: ComponentRef<any>) => { 
     // this.spinnerComp = compRef; 
     //}); 

     let spinnerRef = this._resolver.resolveComponent(Spinner); 

     spinnerRef.then((factory: ComponentFactory<any>) => { 
      this.spinnerComp = elementRef.createComponent(factory) 
     }); 
    } 

    public stop() { 
     if (this.spinnerComp) { 
      this.spinnerComp.destroy(); 
     } 
    } 
} 

しかし、これはまた、エラーが前のエラーとほぼ同一であるスローされる原因：だから

EXCEPTION: Error: Uncaught (in promise): TypeError: 
elementRef.createComponent is not a function  
browser_adapter.ts:82 

EXCEPTION: Error: Uncaught (in promise): TypeError: 
elementRef.createComponent is not a function BrowserDomAdapter.logError @ browser_adapter.ts:82 browser_adapter.ts:82 
STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:82 
    browser_adapter.ts:82 

Error: Uncaught (in promise): TypeError: 
elementRef.createComponent is not a function 
at resolvePromise (zone.js:538) 
at zone.js:574 
at ZoneDelegate.invokeTask (zone.js:356) 
at Object.onInvokeTask (ng_zone_impl.ts:61) 
at ZoneDelegate.invokeTask (zone.js:355) 
at Zone.runTask (zone.js:256) 
at drainMicroTaskQueue (zone.js:474) 
at XMLHttpRequest.ZoneTask.invoke (zone.js:426) 
BrowserDomAdapter.logError @ browser_adapter.ts:82 
    zone.js:461 

Unhandled Promise rejection: elementRef.createComponent is not a 
function ; Zone: angular ; Task: Promise.then ; Value: TypeError: 
elementRef.createComponent is not a function(…)  consoleError @ zone.js:461 
    zone.js:463 

Error: Uncaught (in promise): TypeError: elementRef.createComponent is 
not a function(…) consoleError @ zone.js:463 
    SignalRService.js:40 Event hub started. 

、それが思われるこの重要なfunctionalit yが壊れています。

誰もこの機能を正常に使用しましたか？

私はGitHubリポジトリでGoogleにバグを提出しましたが、他の誰かが既にこの問題に遭遇していて、これを行う有効な方法や回避策があることを期待していました。

ご協力いただければ幸いです。ありがとう！

Answer 1

代わりにComponentResolverとViewContainerRefクラスを使用する必要があります。ここでは簡単なサンプルです：

@Component({ 
    selector: 'my-app', 
    template: '<template #target></template>' 
}) 
export class AppComponent { 
    @ViewChild('target', {read: ViewContainerRef}) target; 

    componentRef: ComponentRef; 

    constructor(private componentResolver:ComponentResolver) {} 

    ngAfterViewInit() { 
    this.componentResolver.resolveComponent(SomeComponent).then((factory) => { 
     this.componentRef = this.target.createComponent(factory); 
    }); 
    } 
}