如何升级 angularjs 模块以注入 angular2 组件

Question

我阅读了Angular 2 upgrade guide 并成功引导了一个混合应用程序（ng1 作为基本代码，现在逐步将组件和服务重写为 ng2）。
现在我不明白的是如何使用第 3 方 ng1 模块，让 angular2 将它们注入到我的 HeaderComponent 中？
我刚刚看到了升级提供程序和组件的示例，但我认为我仍然对 angular2 中的模块概念感到困惑，所以我不知道如何升级 ng1 模块。有人可以请赐教吗？

upgrade_adapter.ts

import {AppModule} from './app.module';
import {UpgradeAdapter} from '@angular/upgrade';

export const upgradeAdapter = new UpgradeAdapter(AppModule);

app.module.ts

// imports...
@NgModule({
    imports: [ 
        BrowserModule, 
        HttpModule 
    ],
    declarations: [ 
        HeaderComponent 
    ],
    providers: [ MyService ]
})
export class AppModule { }

index.ts

import { upgradeAdapter } from './upgrade_adapter';
// more imports...

angular.module(MODULE_NAME, [
    //...
])

// HeaderComponent uses a ng1 3rd party module, how to use that module in that component
.component('header', upgradeAdapter.downgradeNg2Component(HeaderComponent))

// adding some ng1 components...

.factory('myService', upgradeAdapter.downgradeNg2Provider(MyService));

// bootstrap the application
angular.element(document).ready(function () {
    upgradeAdapter.bootstrap(document.body, [MODULE_NAME]);
});

编辑：
第 3 方模块是用 JS 编写的。

lib/angular-modules/communication/index.js

var communicationModule = angular.module('communication', [])
    .factory('communication', require('./communication.factory'));
module.exports = communicationModule.name;

Answer 1

所以我遇到了类似的问题，基本上我想在子模块中声明 ng1 组件。我发现这样做的唯一方法是使用一个虚拟类来构建 upgradeAdapter，然后在调用引导方法之前将其切换出来。您需要为 Angular 2 创建新模块并在其中声明 ng1 组件。

希望这会有所帮助，我花了很长时间才锻炼出来。

upgrade_adapter.ts

import {UpgradeAdapter} from '@angular/upgrade';
import { NgModule, forwardRef } from '@angular/core';

export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => DummyClass)
@NgModule({})
export class DummyClass { }

app.module.ts

import { Ng1Module } from 'ng1.module';
// imports...
@NgModule({
    imports: [ 
        BrowserModule, 
        HttpModule,
        Ng1Module
    ],
    declarations: [ 
        HeaderComponent 
    ],
    providers: [ MyService ]
})
export class AppModule { }

ng1.module.ts

import { upgradeAdapter } from './upgrade-adapter'

@NgModule( {
    declarations:[upgradeAdapter.upgradeNg1Component('ng1Component'),]
})
export class Ng1Module {}

index.ts

import { upgradeAdapter } from './upgrade-adapter'
import { AppModule} from './app.module'

/** codes **/

angular.element(document).ready(function () {
    upgradeAdapter['ng2AppModule'] = AppModule;
    upgradeAdapter.bootstrap(document.body, ['app']);
});