javascript - 使用带路由的 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 和 Router RC.2 更新

我上周升级到 rc.6 和 rc.2 版本的路由器，同样的问题。当不涉及路由时，UpgradAdapter 工作得很好。一旦我拉入路由器 socket ，就没有任何渲染，也没有错误。

Answer 1

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

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

供引用:

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