4

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.

3
  • Can you explain in details what problems you have with that 'BEFORE' thing? An example would help. The manual is quite clear on the suggested use, and obviously, there are no time paradoxes. Oct 9, 2016 at 14:40
  • I'm trying to wrap my head around the mental module. u need to give the upgrade adapter an ng2 module in its constructor. But to use ng1 upgraded components, they have to be declared in that same ng2 module which has to be defined before the adapter. In my specific example, my adapter, which is in a separate es2015 module, doesn't get created because of this circular dependency. (When i attempt to import the adapter in the es2015 module that contains the ng1 component upgrade logic, i instead get 'undefined')
    – snorkpete
    Oct 11, 2016 at 12:12
  • I have the same stumble, and it's really strange. Oct 21, 2016 at 23:11

1 Answer 1

2

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()
1
  • 1
    Yes, it works, but you should to export the adapter to have ability upgrade/downgrade in outer components. Oct 21, 2016 at 23:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.