Bootstrap Angular 2 with Angular 1

Question

У меня app.js в угловом 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> 

До этого все работает отлично и угловые 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']);