var adapter = new ng.upgrade.UpgradeAdapter();

angular.module('angular-legacy',[]);
angular.module('angular-legacy').component('lzGreetings', {
  template: '<div>lzGreetings</div>'
})

var Foo2 = ng.core
  .Component({
    selector: 'foo2',
    template: '<lz-greetings></lz-greetings>Foo 2',
    directives: [adapter.upgradeNg1Component('lzGreetings')]
  })
  .Class({
    constructor: function () { }
  });
  
var AppComponent = ng.core
  .Component({
    selector: 'app',
    template: '<foo2></foo2>',
    directives: [Foo2]
  })
  .Class({
    constructor: function () { }
  });  
  
angular.module('angular-legacy').directive('app', new ng.upgrade.UpgradeAdapter().downgradeNg2Component(AppComponent));

adapter.bootstrap(document.body, ['angular-legacy']);
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js" data-semver="1.5.5"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.umd.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-all.umd.dev.js"></script>
  </head>

  <body>
    <app></app>
  </body>

    <script src="app.js"></script>
</html>
/* Put your css in here */