使用带路由的ngUpgrade引导Angular 2 rc.6混合应用程序

Question

我有一个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非常有用.一旦我拉入路由器插座,然后没有任何渲染,没有错误.

Answer 1

Angular Router 需要至少引导一个组件才能实例化。由于 ngUpgrade 引导 Angular 1 端，因此没有 Angular 2 引导组件。要解决此问题，您必须覆盖ApplicationRef并提供您自己的组件。这是一个正在工作的笨蛋，演示了如何实现这一目标。

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

以供参考：

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