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

Question

我有一个 Angular 1/Angular 2 混合应用程序，它与 rc.3 和已弃用的路由器一起工作。从我能找到的所有来源来看，rc.5 是迈向新路由器的一大步。我能够获取我的混合应用程序 bootstrapped，并呈现我的根组件，但路由不起作用。

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 组件 bootstraps，因为我可以在它呈现的模板中添加内容。但是当我添加 <router-outlet></router-outlet> 时，它似乎不会呈现子路由。如果我 bootstrap 只有我的 NG2 应用程序而没有升级适配器，一切都会按预期工作。

我觉得我只缺少一个连接件。有什么想法吗？

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

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

Answer 1

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

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

供参考：

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

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

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

javascript

angular-routing

ng-upgrade

angular