Angular UpgradeComponent kann $ scope nicht finden

Question

Ich habe einen hybriden angular-cli, der ungefähr Victor Savkins Lazy Loaded AngularJS guide folgt. AngularJS wird im Konstruktor eines LazyLoaded Angular-Moduls gestartet. Der Hauptunterschied zwischen meiner App und dem Handbuch besteht darin, dass ich versuche, die <ui-view>-Anweisung in einige eckige Komponenten zu integrieren. Aufgrund der Struktur meines Layouts ist das Element <ui-view> nicht verfügbar, wenn AngularJS bootstrapped wird und jederzeit hinzugefügt oder entfernt werden kann.

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>'}) 

Wenn ich den Code ein Error: No provider for $scope! Fehler ausgeführt wird geworfen. Wenn ich den Stack-Trace überprüfe, kann ich sehen, dass er in die Superklasse UpgradeComponent geworfen wird. Der Injektor versucht, $scope und

Answer 1

zu bekommen. Diese Einstellung wird nicht funktionieren. AngularJS muss in der Lage sein, den Stamm Ihrer Anwendung zu laden, damit der Bereich korrekt definiert werden kann.

Eine bessere Möglichkeit, dieses Problem anzugehen, ist die Verwendung der <div ui-view> Direktive im Stammverzeichnis Ihrer Anwendung (wie im Upgrade-Handbuch) und dann ein Downgrade einer Layoutkomponente von Angular in AngularJS, um Ihre Inhalte zu verpacken.