Bootstrap Angular 2 与 Angular 1

Question

我有 app.js angular 1.4。 app.js 包含以下内容：

var app = angular.module('testingBoot',[...], function(){});

我正在制作另一个文件：test.ts。这包含以下内容：

import {bootstrap} from 'angular2/platform/browser';
import {UpgradeAdapter} from 'angular2/upgrade';
import {AppComponent} from './app.component';

const upgradeAdapter = new UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['testingBoot']);

Index.html :

<script src="/flat-ui/libs/es6-shim.min.js"></script>
    <script src="/flat-ui/libs/systemjs/dist/system.src.js"></script>
    <script src="/flat-ui/libs/angular2-polyfills.js"></script>
    <script src="/flat-ui/libs/systemjs/dist/system.src.js"></script>
    <script src="/flat-ui/libs/Rx.js"></script>
    <script src="/flat-ui/libs/angular2.dev.js"></script>
<script>
 System.config({
       baseURL : '/',
       defaultJSExtension: true,
       map: {
           mainTest : './flat-ui/js/typeScript',
           angular2 : '/flat-ui/libs/angular2'
       },
        packages: {
          mainTest: {
              format: 'register',
            defaultExtension: 'js'
          },
          angular2 : {
              baseURL : '/flat-ui/libs/angular2',
              defaultExtension: 'js'
          }
        }
      });
 System.import('mainTest/test')
      .then(null, console.error.bind(console));
</script>
<script type="text/javascript" src="/flat/js/app.js"></script>

直到一切正常，angular 1 应用程序启动良好。

现在的问题是我需要将在 Angular 2 中创建的组件作为指令包含到 Angular 1 中。

文档说我需要写的是：

angular.module('testingBoot').directive('testingOnActivity', upgradeAdapter.downgradeNg2Component(AppComponent));

但是我应该把它包含在哪个文件中？如果我在 test.ts 中包含它，那么我会收到 angular 未定义的错误，我不能在 app.js 中包含它，因为 upgradeAdapter 不存在并且 app.js

Answer 1

您可以将其包含在：

const upgradeAdapter = new UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['testingBoot']);

我的boot.ts:

import {UpgradeAdapter} from 'angular2/upgrade';
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

declare var angular:any;

export const upgradeAdapter = new UpgradeAdapter();
myApp.directive('testDirective', upgradeAdapter.downgradeNg2Component(AppComponent));

upgradeAdapter.bootstrap(document.body, ['myApp']);

Bootstrap Angular 2 与 Angular 1

Bootstrap Angular 2 with Angular 1

upgrade

angularjs

ng-upgrade