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

У меня есть гибридное приложение 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 версии маршрутизатора, та же проблема. UpgradAdapter отлично работает, когда маршрутизация не задействована. Как только я втыкаю роутер-розетку, то ничего не рендерится и ошибок нет.


person Justin Rassier    schedule 19.08.2016    source источник
comment
Вы добавили директивы маршрутизатора в декоратор свойств «директивы» вашего компонента? Оттуда import {ROUTER_DIRECTIVES} from '@angular/router';   -  person Oleg Barinov    schedule 19.08.2016
comment
@OlegBarinov Я только что попробовал, но все равно ничего. Я думал, что директивы маршрутизатора будут заботиться на уровне модуля? Следуя руководству angular.io, я настраиваю маршрутизацию в app.routing.ts и использую функцию RouterModule.forRoot(), которая затем используется при импорте моего модуля. В любом случае, прямой импорт директив не помог.   -  person Justin Rassier    schedule 19.08.2016
comment
Я обновился до rc.6 на прошлой неделе, та же проблема. UpgradAdapter отлично работает, когда маршрутизация не задействована. Как только я втягиваю роутер-розетку, то ничего не рендерится и ошибок нет.   -  person Justin Rassier    schedule 06.09.2016


Ответы (1)


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

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

Для справки:

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

person Brandon    schedule 13.09.2016
comment
Это именно то, что я искал! Спасибо! Я знал, что должен быть какой-то волшебный соединительный соус, поскольку ошибок не было. Я уверен, что документация скоро будет обновлена, но это не дает нам возможности обновить наше приложение до последней версии rc. - person Justin Rassier; 13.09.2016
comment
Это больше не требуется с Angular 2.1.0 и выше - было бы неплохо обновить этот ответ по этому поводу. - person studds; 26.10.2016