7

I have an Angular 1/Angular 2 hybrid app that was working with rc.3 and the deprecated router. From all sources that I can find, rc.5 is the big step to move towards with the new router. I am able to get my hybrid app bootstrapped, and render my root component, but routing does not work.

var upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));

angular.module('ng1App', [])
  .directive('myBaseComponent', <any>upgradeAdapter.downgradeNg2Component(MyBaseComponent));

@NgModule({
  imports: [BrowserModule, routing],
  providers: [appRoutingProviders, HTTP_PROVIDERS],
  declarations: [MyBaseComponent,
    MyNG2RoutableComponent]
})
class AppModule { }


upgradeAdapter.bootstrap(document.body, ['ng1App']).ready(function(){
  console.log('bootstraped!');
});

My root NG2 component bootstraps, as I can throw stuff in the template it renders. But it seems when I add the <router-outlet></router-outlet> it will not render the child route. If I bootstrap just my NG2 app without the upgradeAdapter, everything works as expected.

I feel like I am missing just one connecting piece. Any ideas?

Angular RC.6 and Router RC.2 Update

I upgraded to rc.6 and the rc.2 version of the router this past week, same problem. The UpgradAdapter works great when routing isn't involved. Once I pull in the router-outlet, then nothing renders and there are no errors.

trinaldi
  • 2,872
  • 2
  • 32
  • 37
Justin Rassier
  • 898
  • 12
  • 26
  • Have you added router directives to 'directives' property decorator of your component? From there `import {ROUTER_DIRECTIVES} from '@angular/router';` – Oleg Barinov Aug 19 '16 at 14:26
  • @OlegBarinov I just gave that a shot, but still nothing. I thought that the router directives would be take care of at the module level? Following the angular.io guide, I setup the routing in app.routing.ts and utilize the `RouterModule.forRoot()` function which is then used in the imports of my module. Either way, directly importing the directives didn't seem to help. – Justin Rassier Aug 19 '16 at 14:43
  • I upgraded to rc.6 this past week, same problem. The UpgradAdapter works great when routing isn't involved. Once I pull in the router-outlet, then nothing renders and there are no errors. – Justin Rassier Sep 06 '16 at 11:53

1 Answers1

4

The Angular Router requires at least one component be bootstrapped in order to be instantiated. Since ngUpgrade bootstraps the Angular 1 side, there isn't an Angular 2 bootstrapped component. To workaround this, you have to override the ApplicationRef and provide your own component. Here is a working plunker demonstrating how to achieve this.

http://plnkr.co/edit/Gj8xq0?p=preview

For reference:

https://github.com/angular/angular/issues/9870

Brandon
  • 706
  • 6
  • 4
  • This is exactly what I was looking for! Thank you! I knew there had to be some magic connecting sauce, since no errors were being thrown. I'm sure the documentation will be updated soon, but this unblocks us from updating our app to the latest rc. – Justin Rassier Sep 13 '16 at 13:43
  • 1
    This is no longer required with Angular 2.1.0 and higher - would be good to update this answer to that effect. – studds Oct 25 '16 at 23:54
  • Fantastic. I'v been looking this solution for days. This still works with Angular 12, five years later – Sergio Mazzoleni Oct 27 '21 at 10:06