Angular UpgradeComponentが$ scopeを見つけることができません

Question

私は、Victor SavkinのLazy Loaded AngularJS guideにほぼ従ったハイブリッド角度cliを持っています。 AngularJSは、LazyLoaded Angularモジュールのコンストラクタでブートストラップされています。私のアプリとガイドの主な違いは、角度のあるコンポーネントの中に<ui-view>ディレクティブをラップしようとしていることです。私のレイアウトがどのように構成されているので、<ui-view>要素はAngularJSがブートストラップされているときには利用できず、いつでも追加または削除することができます。

import { Component, Directive, ElementRef, Injector } from '@angular/core'; 
import { UpgradeComponent } from '@angular/upgrade/static'; 
import * as angular from 'angular'; 

@Component({ 
    template: ` 
    <layout-wrapper> 
    <my-toolbar></my-toolbar> 
    <layout-contents> 
     <ng2-ui-view> 
     <h3 class="text-center">AngularJS page not loaded</h3> 
     </ng2-ui-view> 
    </layout-contents> 
    </layout-wrapper> 
    `, 
}) 
export class LegacyOutputComponent { } 

@Directive({selector: 'ng2-ui-view'}) 
export class UpgradedUiViewComponent extends UpgradeComponent { 
    constructor(ref: ElementRef, inj: Injector) { 
    super('uiViewWrapper', ref, inj); 
    } 
} 

export const routerPatchModule = 'arcs.router.patch'; 

// We need to define a wrapper for ui-view because we can only upgrade 
// components with only one definition. uiView cannot be automatically 
// upgraded because its definition is too complex 
angular.module(routerPatchModule, ['ui.router']) 
.component('uiViewWrapper', { template: '<ui-view></ui-view>'}) 

コードを実行すると、Error: No provider for $scope!エラーがスローされます。スタックトレースを確認すると、それはUpgradeComponentスーパークラスでスローされていることがわかります。インジェクタは、$scopeと

Answer 1

を取得しようとします。この設定は機能しません。スコープが正しく定義されるためには、アプリケーションのルートにAngularJSをロードできる必要があります。

この問題にアプローチするより良い方法は、アプリケーションのルート（アップグレードガイドのような）にディレクティブを使用し、レイアウトコンポーネントをAngularからAngularJSにダウングレードしてコンテンツをラップすることです。