ng2 AsyncRoute с устаревшими зависимостями компонентов ng1

Как вы можете видеть в этом планке, ниже демонстрируется моя попытка ленивой загрузки маршрута angular2 в гибридном приложении ng1/ng2, где маршрут с отложенной загрузкой имеет обновленную зависимость ng1 (ng2 beta 7, ng1 1.5).

main.ts:

import {Component} from 'angular2/core';
import {App} from './app';
import {adapter} from './adapter';
angular.module('ng1app', [])
.component('testy', {
  template: `
    <div>{{ctrl.hi}}</div>
  `,
  controller: function () {
    this.hi = 'howdy'
  },
  controllerAs: 'ctrl',
  bindings: {
    hi: '='
  }
})
.directive('myApp', adapter.downgradeNg2Component(App));


adapter.bootstrap(document.body, ['ng1app']);

app.ts:

import { Component, provide } from 'angular2/core'
import { adapter } from './adapter'

import {
  ROUTER_PROVIDERS,
  ROUTER_PRIMARY_COMPONENT,
  ROUTER_DIRECTIVES,
  RouteConfig,
  AsyncRoute
} from 'angular2/router'


@Component({
  selector: 'my-app',
  template: '<router-outlet></router-outlet>',
  directives: [ ROUTER_DIRECTIVES ]
})
@RouteConfig([
  new AsyncRoute({
    path: '/',
    loader:  () => System.import('./src/Home').then(c => c.Home)
    name: 'Home'
  })
])
export class App { }

[
  ROUTER_PROVIDERS,
  provide(ROUTER_PRIMARY_COMPONENT, { useFactory:  () => App })
].forEach(provider => adapter.addProvider(provider))

home.ts:

import {Component} from 'angular2/core';
import {adapter} from './adapter';

@Component({
  selector: 'home',
  template: `
    <div>
      hi
      <testy></testy>
    </div>
  `,
  directives: [adapter.upgradeNg1Component('testy')]
})
export class Home { }

По сути, это гибридное приложение angular1/2, в котором еще до начальной загрузки я определил компонент ng1 в main.ts. Когда AsyncRoute пытается загрузить home.ts, я получаю сообщение "ИСКЛЮЧЕНИЕ: ошибка при создании экземпляра class0!" из UpgradeNg1ComponentAdapter - кажется, он не может найти объект директивы для testy.

Мне интересно, есть ли способ подключить инжектор (ы), но это предполагает, что эта проблема связана даже с путаницей инжектора, что для меня не является уверенностью, так как я не знаком с внутренностями система впрыска angular2.

Должно ли это быть возможно? Или: «Разве это не должно быть возможно?» ;)

(В идеале я хотел бы лениво загружать компоненты ng1, но в первую очередь нужно заставить их работать, когда они определены заранее...)


angular angular2-routing
person laurelnaiad    schedule 21.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

(@brandonroberts дал мне это решение в angular gitter.)

У меня сложилось впечатление, что я могу обновить компонент, который уже был в модуле angular 1 при использовании, но оказалось, что вам нужно полностью обновить компонент перед начальной загрузкой.

Адаптер обновления должен быть запущен перед начальной загрузкой.

so

 directives: [adapter.upgradeNg1Component('testy')]

становится

 directives: [ Testy ]

и Testy загружается/экспортируется в обновленном виде перед начальной загрузкой

import {adapter} from './adapter';
export default adapter.upgradeNg1Component('testy');

Это немного омрачает определенные сценарии обновления. Я надеялся избежать загрузки определенных толстых зависимостей перед начальной загрузкой. По крайней мере, я все равно смогу лениво загружать остальные компоненты маршрутов.

person laurelnaiad    schedule 22.02.2016