Bootstrapping an Angular 2 rc.6 hybrid app using ngUpgrade with routing

Question

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.

Answer 1

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