Бутстрапинг Гибридный Угловой 1 + 2 Применение

Question

После официального 5 min QuickStart У меня есть приложение с угловым углом 2.

Я установил Угловой 1 и теперь они оба работают независимо, см. this plunker.

Вслед за official upgrade guide они говорят:

Чтобы затем переключить приложение в гибридном режиме, мы должны сначала установить Угловое 2 к проекту. Следуйте инструкциям в QuickStart для некоторых указателей на это. Когда у нас установлен Angular 2, мы можем импортировать и создать экземпляр UpgradeAdapter, а затем вызвать его метод bootstrap . Он разработан, чтобы те же самые аргументы, как angular.bootstrap так, что легко сделать переключатель:

import {UpgradeAdapter} from 'angular2/upgrade'; 

/* . . . */ 

const upgradeAdapter = new UpgradeAdapter(); 

upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true}); 

Мой вопрос куда его?

Это звучит как вопрос «сделай мою работу», но это не так. Я думаю, в main.ts, но я пробовал много чего без успеха. Документ на самом деле не совсем ясно, и некоторые уроки 1 месяца уже устарели.

--- обновление:

В моем случае я забыл загрузить upgrade.js, что я думал, что уже включен

Answer 1

Я посмотрел на свой plunkr. Фактически вы можете использовать несколько раз bootstrap, но это означает, что вы используете два разных приложения на своей странице HTML.

Если вы хотите смешивать материалы Angular1 и Angular2 в одном приложении, вам нужно позвонить только boostrap метод UpgradeAdapter.

Зов boostrap функции на UpgradeAdapter и это творение можно было бы сделать в boot.ts файле:

import {UpgradeAdapter} from 'angular2/upgrade'; 

var upgrade = new UpgradeAdapter(); 

// Configure the upgrade adapter 
(...) 

export function main() { 
    try { 
    upgrade.bootstrap(document.body, ['heroApp']); 
    } catch (e) { 
    console.error(e); 
    } 
} 

Вы можете импортировать это в ваш HTML файл, как это:

<script> 
    System.import('app/main').then(function(src) { 
    src.main(); 
    }); 
</script> 

Смешивание Angular2 и Angular1

Если вы хотите до Загрузите приложение Angular2, укажите основной компонент в качестве первого параметра и поставщика приложения Angular1, чтобы иметь возможность использовать фабрики/службы/директивы в приложении Angular2.

// Providers for Angular1 elements 
upgrade.upgradeNg1Provider('customService'); 
upgrade.upgradeNg1Provider('customFactory'); 

// Providers for Angular2 elements 
upgrade.addProvider(HTTP_PROVIDERS); 

// Bootstrap Angular2 application 
upgrade.bootstrap(AppComponent); 

Если вы хотите, чтобы Angular1 приложение использовать Angular2 материал, вам необходимо предоставить документ.элемент в качестве первого параметра метода bootstrap:

// Providers for Angular2 elements 
upgrade.downgradeNg2Provider(HTTP_PROVIDERS); 

upgrade.bootstrap(document.body, ['heroApp']); 

Это plunkr также может быть полезным для вас: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview.