如何升級angularjs模塊注入angular2組件

Question

我讀Angular 2 upgrade guide併成功引導混合應用程序（ng1作爲基本代碼，現在逐漸將組件和服務重寫爲ng2）。
現在我不明白的是如何使用第三方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]); 
}); 

編輯：
第三方模塊是用JS編寫的。

的lib /角模塊/通信/ 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']); 
});