Justin Rassier Justin Rassier - 2 months ago 51
Javascript Question

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

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

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