Verwendung von angular1 Komponente (requirejs Modul) in angular2 Komponente

Question

Ich habe eine ng1 Komponente in Javascript als Requirejs Modul geschrieben. Ich muss diese Komponente in meiner ng2-Komponente verwenden (bis meine alte ng1-App vollständig in ng2 portiert ist). Hier ist die plnkr: https://plnkr.co/edit/IYuoZZE4sPGr97pxB04l?p=preview Hier ist meine Bootstrap-Logik:

import {App} from './app'; 
import {upgradeAdapter} from './adapter'; 

var appComponent = upgradeAdapter.downgradeNg2Component(App); 

requirejs(['ng1App'], 
function(ng1App) { 
    angular.module('ng1App').directive('myApp',appComponent); 
    // following line throws error 
    upgradeAdapter.bootstrap(document.body, ['ng1App']);  
}); 

es gibt mir Fehler folgende

angular2-polyfills.js:286 Uncaught Error: AngularJS v1.x is not loaded! 

irgendwelche Hinweise zu schätzen wissen.

Die andere Frage, die ich habe, ist, wie importiere ich die requirejs Module für einzelne NG1 Komponenten in meiner NG2 Komponente:

import {Component} from '@angular/core' 
import {upgradeAdapter} from './adapter'; 

// How do i dynamically load the ng1-comp rquirejs module here? 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 
    <ng1-comp></ng1-comp>  
    `, 
    directives: [upgradeAdapter.upgradeNg1Component('ng1Comp')] 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2 (Release Candidate!)' 
    } 
} 

Answer 1

dachte es schließlich heraus .. Die requirejs config systemjs oder andere umgewandelt werden muss, Modullader-Konfiguration Die Umstellung auf System js ist einfach ..

// map systemJS apis to corresponding apis in requirejs 
window.require = System.amdRequire; 
window.requirejs = System.amdRequire; 
window.define = System.define; 
System.config(function getNG1Config() { 
    return { 
    defaultJSExtensions: true, 
    baseUrl: '/', 
    waitSeconds: 0, 
    paths: { 
     'angular-ui-router': 'https://npmcdn.com/angular-ui-router@0.3.0/release/', //needs to be defined before 'angular' 
     'angular': 'https://npmcdn.com/angular@1.5.7/', 
     '@angular/common': 'https://npmcdn.com/@angular/common@2.0.0-rc.2/bundles/common.umd', 
     '@angular/compiler': 'https://npmcdn.com/@angular/compiler@2.0.0-rc.2/bundles/compiler.umd', 
     '@angular/core': 'https://npmcdn.com/@angular/core@2.0.0-rc.2/bundles/core.umd', 
     '@angular/http': 'https://npmcdn.com/@angular/http@2.0.0-rc.2/bundles/http.umd', 
     '@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser@2.0.0-rc.2/bundles/platform-browser.umd', 
     '@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.2/bundles/platform-browser-dynamic.umd', 
     '@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated@2.0.0-rc.2/bundles/router-deprecated.umd', 
     '@angular/upgrade': 'https://npmcdn.com/@angular/upgrade@2.0.0-rc.2/bundles/upgrade.umd', 
     'upgradeAdapter': './upgradeAdapter', 
     'rxjs/*': 'https://npmcdn.com/rxjs@5.0.0-beta.9/bundles/Rx.umd', 

     'app': 'src/app', 
     'bootstrap': './bootstrap' 
    }, 
    map: { 
    }, 
    meta: { 
     'app': { 
     deps: ['angular', 'angular-ui-router'] 
     }, 
     'bootstrap': { 
     deps: ['angular', 'angular-ui-router'] 
     } 
    }, 
    packages: { 
     'angular': { 
     main: 'angular.min.js', 
     defaultExtension: 'js' 
     }, 
     'angular-ui-router': { 
     main: 'angular-ui-router.js', 
     defaultExtension: 'js' 
     }, 
     'rxjs': { 
     defaultExtension: 'js' 
     }, 
     'angular2-in-memory-web-api': { 
     defaultExtension: 'js' 
     }, 
     './': { 
     defaultExtension: 'js' 
     }, 
     'upgradeAdapter': { 
     defaultExtension: 'js' 
     } 
    } 
    }; 
}); 

Hier die Plunker ist: https://plnkr.co/edit/SnBtwp?p=preview