在Angular 1中集成Angular 2.0.X -升级模块

Integrating Angular 2.0 inside Angular 1.x - upgrade module

本文关键字：Angular -升 模块 集成      更新时间：2023-09-26

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

现在，我看到它可以通过查看Angular2升级模块来完成:

    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  ...

我创建了一个Angular 1。使用Typescript + SystemJS + JSPM安装Angular 2.0，并使用jspm install angular2

现在，我可以使用import {Component} from 'angular2/angular2'(例如)导入Angular2，但我在Angular2的代码中找不到升级模块(我想做import {createUpgradeModule, UpgradeModule} from 'upgrade/upgrade'，类似于我在测试中发现的)。

是单独包装的吗?我应该手动安装吗?

编辑

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

  1. 使用自定义构建，参见此处

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

    编辑22.11.15:

从alpha 46开始，升级模块是公开的。不需要任何更多的黑客来使用它!

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

关键是upgradeAdaptor

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

相关文章：