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.
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
链接地址: http://www.djcxy.com/p/35732.html