javascript - 将 Angular 2.0 集成到 Angular 1.x 中 - 升级模块

Question

我正在尝试将 Angular 2.0 组件集成到 Angular 1.x 应用程序中(用于玩耍/学习建议...)

现在，我发现可以通过查看 Angular2 upgrade module 来完成。 :

    import {Component, View, Inject, EventEmitter} from 'angular2/angular2';
    import {createUpgradeModule, UpgradeModule} from 'upgrade/upgrade';

    export function main() {
      describe('upgrade: ng1 to ng2', () => {
        it('should have angular 1 loaded', () => expect(angular.version.major).toBe(1));

        it('should instantiate ng2 in ng1 template and project content',
           inject([AsyncTestCompleter], (async) => {
             var Ng2 = Component({selector: 'ng2'})
                           .View({template: `{{ 'NG2' }}(<ng-content></ng-content>)`})
                           .Class({constructor: function() {}});

             var element = html("<div>{{ 'ng1[' }}<ng2>~{{ 'ng-content' }}~</ng2>{{ ']' }}</div>");

             var upgradeModule: UpgradeModule = createUpgradeModule();
             upgradeModule.importNg2Component(Ng2);
             upgradeModule.bootstrap(element).ready(() => {
               expect(document.body.textContent).toEqual("ng1[NG2(~ng-content~)]");
               async.done();
             });
           }));
... continue tests here  ...

我使用 Typescript + SystemJS + JSPM 创建了 Angular 1.x 应用程序，并使用 jspm install angular2 安装了 Angular 2.0

现在，我可以使用 import {Component} from 'angular2/angular2' 导入 Angular2(例如)，但我在 Angular2 代码中的任何位置都找不到升级模块(我想做 从“升级/升级”导入{createUpgradeModule，UpgradeModule}，与我在测试中发现的类似)。

它是在一个单独的包中吗？我应该手动安装吗？

编辑

解决方案(目前)应该是:

1. 使用自定义构建，请参阅 here

2. 将实际模块放入您的项目中并导入它(这是我的首选解决方案)

   编辑 22.11.15:

从 alpha 46 开始，升级模块是公开的。无需再进行任何破解即可使用它!

Answer 1

我已经围绕这个问题做了一些 POC 工作，这是一种工作方法:

关键是upgradeAdapter

import {bootstrap,UpgradeAdapter} from 'angular2/angular2';
import {SomeA2Component} from './some/path';

declare var angular:any;

var adapter: UpgradeAdapter = new UpgradeAdapter();
angular.module('app').directive('SomeA2Component', adapter.downgradeNg2Component(MyA2Component));
adapter.bootstrap(document.body, ['app']);

我这里还有一个工作示例:http://www.syntaxsuccess.com/viewarticle/upgrading-angular-1.x-to-2.0