在 angular2 组件中使用 angular1 组件（requirejs 模块）答案

【问题标题】：Using angular1 component (requirejs module) inside angular2 component在 angular2 组件中使用 angular1 组件（requirejs 模块）
【发布时间】：2016-06-08 23:08:48
【问题描述】：

我有一个用 javascript 编写的 ng1 组件作为 requirejs 模块。我需要在我的 ng2 组件中使用这个组件（直到我的旧 ng1 应用程序完全移植到 ng2）。这是plnkr：https://plnkr.co/edit/IYuoZZE4sPGr97pxB04l?p=preview 这是我的引导逻辑：

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

它给了我以下错误

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

欣赏任何指针。

我的另一个问题是如何在我的 ng2 组件中为单个 ng1 组件导入 requirejs 模块：

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

【问题讨论】：

为什么不将您的 ng1 组件升级到 angular 2？应该很简单，app.module('mymodule').component('mycomp', {controller:{} }...

标签： angularjs angular

【解决方案1】：

终于弄明白了。需要将requirejs配置转换为systemjs或其他模块加载器配置。转成系统js很简单..

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

这里是 plunker：https://plnkr.co/edit/SnBtwp?p=preview

【讨论】：