Начальная загрузка гибридного приложения Angular 2 rc.6 с использованием ngUpgrade с маршрутизацией

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> это не отрендерит дочерний маршрут. Если я загружаю только свое приложение NG2 без upgradeAdapter, все работает как положено.

Я чувствую, что мне не хватает только одного соединительного элемента. Есть идеи?

---

Обновление Angular RC.6 и Router RC.2

На прошлой неделе я обновил до rc.6 и версии rc.2 роутера, та же проблема. UpgradeAdapter прекрасно работает, когда маршрутизация не задействована. Раз я тяну в роутер-розетку, то ничего не рендерится и ошибок нет.

Answer 1

Angular Router требует, чтобы хотя бы один компонент был загружен для создания экземпляра. Поскольку ngUpgrade загружает сторону Angular 1, не существует компонента Angular 2. Чтобы обойти это, вы должны переопределить ApplicationRef и предоставьте свой собственный компонент. Вот рабочий поршень, демонстрирующий, как этого добиться.

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

Для справки:

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