ng2 AsyncRoute 与遗留 ng1 组件依赖

Question

正如您在 this plunk 中看到的，下面演示了我在 ng1/ng2 混合应用程序中延迟加载 angular2 路由的尝试，其中延迟加载的路由具有 ng1-upgraded 依赖项（ng2测试版 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 应用程序，在引导之前我已经在 main.ts 中定义了一个 ng1 组件。当 AsyncRoute 尝试加载 home.ts 时，我从 UpgradeNg1ComponentAdapter 中得到 "EXCEPTION: Error during instantiation of class0!" —— 似乎找不到 testy.

的指令对象

我想知道是否有办法连接喷油器——但这是假设这个问题甚至与喷油器混淆有关，这对我来说并不确定，因为我不确定熟悉 angular2 注入系统的内部结构。

这可能吗？或者，"shouldn't this be possible?" ;)

（理想情况下，我想延迟加载 ng1 组件，但首先要做的是让它们在预先定义时工作...）

Answer 1

（@brandonroberts 在 angular gitter 中给了我 this solution。）

我一直以为我可以升级已经在 angular 1 模块中使用的组件，但事实证明您需要在 bootstrap 之前完全升级该组件.

升级适配器必须在运行之前bootstrap。

所以

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

变成

 directives: [ Testy ]

并且 Testy 在 bootstrap

之前以升级形式获得 loaded/exported

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

这确实给某些升级场景蒙上了一层阴影。我一直希望避免在 bootstrap 之前加载某些胖依赖项。不过，至少我仍然可以延迟加载其余的路由组件。

ng2 AsyncRoute 与遗留 ng1 组件依赖

ng2 AsyncRoute with legacy ng1 component dependencies

angular2-routing

angular