使用ngUpgrade和路由引导一个Angular 2 rc.6混合应用程序

我有一个Angular 1 / Angular 2混合应用程序,它与rc.3和弃用的路由器一起工作。 从我能找到的所有资源中,rc.5是迈向新路由器迈出的重要一步。 我能够引导我的混合应用程序并呈现我的根组件,但路由不起作用。

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!');
});

我的根NG2组件引导,因为我可以扔东西在它呈现的模板。 但是,当我添加<router-outlet></router-outlet>它似乎不会呈现子路由。 如果我没有upgradeAdapter引导我的NG2应用程序,一切都按预期工作。

我觉得我缺少一个连接件。 有任何想法吗?


Angular RC.6和路由器RC.2更新

我上周升级到了rc.6和rc.2版本的路由器,同样的问题。 UpgradAdapter在不涉及路由时效果很好。 一旦我拉入路由器插座,就没有渲染,也没有错误。


角路由器需要至少一个组件被引导以实例化。 由于ngUpgrade引导了Angular 1方面,因此不存在Angular 2引导组件。 要解决此问题,您必须重写ApplicationRef并提供您自己的组件。 展示如何实现这一目标,这是一个有用的运动员。

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

以供参考:

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

链接地址: http://www.djcxy.com/p/35731.html

上一篇: Bootstrapping an Angular 2 rc.6 hybrid app using ngUpgrade with routing

下一篇: Finding a irreducible fraction