Downgraded Angular2-Komponente nicht innerhalb von Winkel dargestellt 1

Question

Wir haben eine einzigartige Situation, wo wir Typoskript verwenden, mischen ng1 und 2, aber keine Modullader verwenden. Ich konnte sowohl ng 1 als auch ng2 bootstrappen, aber ich kann keine Antwort von downgraded winkel 2 Komponente bekommen, ich legte einen Breakpoint in den Code und sah, dass der Code ausgeführt wird, aber die Komponente zeigt nichts.

Ich bekomme keine Fehler, nicht in der Kompilierungsphase und nicht in der Laufzeit.

Hier ist der Code:

myapp.js - eckig 1 App Definition es2015

(function() { 
    'use strict'; 
    angular.module('myApp', []); 
})(); 

myapp.ng2.ts - eckig 2 App Definition, Typoskript

namespace MyApp { 

let NgModule = ng.core.NgModule; 
let BrowserModule = ng.platformBrowser.BrowserModule; 
let UpgradeAdapter = ng.upgrade.UpgradeAdapter; 

@NgModule({ 
    imports: [BrowserModule] 
}) 

export class MyAppNg2 {} 

export const upgradeAdapter = new UpgradeAdapter(MyAppNg2); 

$(document).ready(function() { 
    upgradeAdapter.bootstrap(document.body, ['MyApp'], {strictDi: false}); 
}); 

} 

fullDetails.component.ts - eckig 2 Typoskript,

namespace MyApp.Components.Misc { 

    let Component = ng.core.Component; 

    @Component({ 
     selector: 'full-details-header', 
     template: `This is ng2 component` 
    }) 

    export class FullDetailsHeaderComponent { 
    } 

} 

bootstrap.js - angular1, es2015

angular.module('myApp').component('fullDetailsHeader', MyApp.upgradeAdapter.downgradeNg2Component(MyApp.Components.Misc.FullDetailsHeaderComponent)); 

Answer 1

Es ist ein wenig schwer zu sagen, da ich denke, dies ist für die Beta-Version von Angular ist, das ich nicht getan habe Upgrade-Prozess mit, aber für Angular Versionen 2+ Sie auch erklären, um Ihre Komponente benötigen, die Sie im entryComponents Array Ihres Hauptmodul herabgestuft werden sollen:

@NgModule({ 
    imports: [BrowserModule], 
    entryComponents: [FullDetailsHeaderComponent] 
}) 

Angenommen, dies war für die Angular Beta, und Sie haben nicht viel Arbeit, würde ich dies verschrotten und die neueste Version von Angular verwenden und die official guide folgen. Es gibt einfach zu viel, was in den Beispielen, die ich für die Erstellung einer ng1/ng2-Hybrid-App zwischen der Betaversion und der Version von Angular sehe, anders ist. Ich halte es nicht für sinnvoll, Probleme im Zusammenhang mit dem Beta-Upgrade zu beheben.

Dies ist immer noch ein ziemlich schwieriger Bereich für die Suche nach Fragen und Beispielen, also, wenn Sie eine Frage im Zusammenhang mit dem Upgrade-Prozess für Angular-Versionen haben 2+ eine neue Frage stellen und mich anpingen.

Um loszulegen, hier ist ein plunkr, die ein funktionierendes Beispiel für das Herunterstufen einer Angular-Komponente und die Verwendung in AngularJS zeigt. Dies verwendet auch eine mehrfache Einbeziehung in den Downgrade-Prozess, der nur in den Versionen 4.0.0+ funktioniert.