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

我阅读并成功地引导了一个混合应用程序（ng1作为基本代码，现在增量地将组件和服务重写到ng2）。
现在我不明白的是如何使用第三方ng1模块，让angular2将它们注入我的HeaderComponent？
我刚刚看到了升级提供商和组件的例子，但我认为我仍然对angular2中的模块概念感到困惑，因此我不知道如何升级ng1模块。有人能告诉我吗

升级\u适配器.ts

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

export const upgradeAdapter = new UpgradeAdapter(AppModule);

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

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]);
});

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

应用程序模块.ts

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

export const upgradeAdapter = new UpgradeAdapter(AppModule);

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

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]);
});

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

index.ts

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

export const upgradeAdapter = new UpgradeAdapter(AppModule);

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

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]);
});

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

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

lib/angular modules/communication/index.js

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

export const upgradeAdapter = new UpgradeAdapter(AppModule);

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

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]);
});

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

---

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

希望这对我有帮助，我花了很多时间来锻炼

升级\u适配器.ts

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

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

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

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

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

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

/** codes **/

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

应用程序模块.ts

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

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

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

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

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

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

/** codes **/

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

ng1.module.ts

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

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

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

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

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

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

/** codes **/

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

index.ts

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

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

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

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

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

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

/** codes **/

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

---

这在我的情况下不起作用，因为我想升级整个ng1模块，它本身包含多个工厂，并且需要一些其他第三方LIB（例如angular translate）。因此，由于没有upgradeAdapter.upgradeNg1Module之类的东西，我想没有办法重用我现有的ng1模块。据我所知，并非如此，您必须在ng2中声明该模块，并重新声明所有服务和组件。这应该仍然适用于第三方LIB。