How to use angular 2's upgradeAdapter.upgradeNg1Component?

Question

I'm pretty sure I'm missing something fundamental here.

I started using the ng2 upgrade adapter before RC5 to start porting an ng1 application to ng2. And before, when you declared the directives a component was using directly on the component, everything wired up correctly and made sense.

But, now I'm trying to migrate my hybrid app to Angular 2 Final, and the whole NgModule thing is confusing with a hybrid app when it comes to the dependencies.

In order to create an upgrade adapter, i need to pass it the Ng2 module that i want to use in the hybrid app. That's fine. But it means the Ng2 module has to be completely defined BEFORE I create the upgrade adapter, right? If that's true, then how do I use the not-yet-created upgrade adapter to upgrade ng1 components to use in the ng2 module (that needs to be created BEFORE creating the adapter)???

FYI, going the other way is fine - i have a typescript module that downgrades all the top-level ng2 components that i need to use in ng1 (in the ui-router configuration), and that typescript module is loaded after both the upgrade adapter and the Ng2 module containing my components to downgrade.

So, what am I missing? How do I make use of the upgrade adapter's upgradeNg1Component functionality?

Without this function, it's forcing me to start from the outermost components and work my way inwards. And that works fine, except that there are some common components that are used all over, and I'd prefer to not have to convert them to ng2 first.

Answer 1

I stumbled upon the same issue, and found the solution by looking into Angular's source code . The trick is to use forwardRef() when creating the UpgradeAdapter :

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

const adapter = new UpgradeAdapter(forwardRef(() => AppModule));

@NgModule({
    declarations: [
         adapter.upgradeNg1Component('my-component');
    ]
})
class AppModule {
}

// now call adapter.bootstrap()