Question

正如您在this plunk中看到的，下面演示了我在ng1 / ng2混合应用程序中延迟加载angular2路由的尝试，其中延迟加载的路由具有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应用程序，在引导之前，我已经在main.ts中定义了ng1组件。当AsyncRoute尝试加载home.ts时，我得到＆＃34; EXCEPTION：在实例化class0期间出错！＆＃34;在UpgradeNg1ComponentAdapter之外 - 似乎无法找到testy的指令对象。

我想知道是否有方法让喷油器接线 - 但是假设这个问题甚至与喷油器混淆有关，对我来说，这不是一个确定无疑，因为我不熟悉angular2注射系统的内部结构。

这可能吗？或者，＆＃34;这不可能吗？＆＃34; ;）

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

Answer 1

（@brandonroberts在角度gitter中给了this solution。）

我的印象是我可以升级已经在角度1模块中使用的组件，但事实证明你需要在引导之前完全升级组件。

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

所以

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

成为

 directives: [ Testy ]

并且在引导程序之前以升级的形式加载/导出Testy

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

这确实会对某些升级方案产生一些影响。我一直希望避免在bootstrap之前加载某些脂肪依赖。但至少我仍然可以延迟加载其余路径的组件。

ng2与遗留的ng1组件依赖关系的AsyncRoute

1 个答案: