title: Using angular1 component (requirejs module) inside angular2 component
body: <p>I have an ng1 component in javascript written as requirejs module.
  I need to use this component inside my ng2 component (until my old ng1 app is fully ported to ng2).
  Here is the <a href="https://plnkr.co/edit/IYuoZZE4sPGr97pxB04l?p=preview" rel="nofollow">plnkr</a> : <a href="https://plnkr.co/edit/IYuoZZE4sPGr97pxB04l?p=preview" rel="nofollow">https://plnkr.co/edit/IYuoZZE4sPGr97pxB04l?p=preview</a>
  Here is my bootstrap logic:</p>
  
  <pre><code>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']);    
  } );
  </code></pre>
  
  <p>it gives me following error </p>
  
  <pre><code>angular2-polyfills.js:286 Uncaught Error: AngularJS v1.x is not loaded!
  </code></pre>
  
  <p>Appreciate any pointers. </p>
  
  <p>The other question i have is how do i import the requirejs modules for individual ng1 components in my ng2 component :</p>
  
  <pre><code>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: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
      &lt;/div&gt;
      &lt;ng1-comp&gt;&lt;/ng1-comp&gt;      
    `,
    directives: [upgradeAdapter.upgradeNg1Component('ng1Comp')]
  })
  export class App {
    constructor() {
      this.name = 'Angular2 (Release Candidate!)'
    }
  }
  </code></pre>