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

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

本文关键字:路由 混合 应用 ngUpgrade 使用 Angular rc 引导      更新时间:2023-09-26

我有一个与rc一起工作的Angular 1/Angular 2混合应用。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>时,它不会渲染子路由。如果我只引导我的NG2应用而不使用upgradeAdapter,那么一切都会像预期的那样工作。

我觉得我只缺了一个连接的部分。什么好主意吗?


Angular RC.6和Router RC.2 Update

我升级到rc。6和rc。2版本的路由器上周也出现了同样的问题。当不涉及路由时,升级适配器工作得很好。一旦我拉入路由器出口,那么没有任何渲染,也没有错误。

Angular路由器需要至少一个组件被引导才能被实例化。因为ngUpgrade是从Angular 1端启动的,所以没有Angular 2的启动组件。要解决这个问题,您必须覆盖ApplicationRef并提供您自己的组件。下面是一个工作的活塞演示如何实现这一点。

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

预览

参考:

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