angularjs - Angular 2 混合应用程序 : Unknown provider: ng2. ComponentFactoryRefMapProvider

Question

场景

我尝试在我的 Angular 1.5 应用程序中使用一个非常简单的 Angular 2 (rc.5) 组件作为指令，但在将该指令添加到我的模块之一时遇到错误。

错误

[$injector:unpr] Unknown provider: ng2.ComponentFactoryRefMapProvider <- ng2.ComponentFactoryRefMap <- dummyDirective

代码

Angular 2

用于捆绑的 jspm 命令:jspm bundle-sfx embeddedModule.ts dist/component-sfx.min.js --skip-source-maps --format global --global-name __myglobal

此组件-sfx.min.js 被移动到 angular1 项目中的正确位置

embeddedModule.ts

import 'rxjs/Rx';
import 'core-js/client/shim.js';
import 'zone.js';
import 'reflect-metadata/Reflect';

import { UpgradeAdapter, UpgradeAdapterRef } from '@angular/upgrade';
import { Component, provide, Inject, NgModule, forwardRef } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';

const adapter = new UpgradeAdapter(forwardRef(() => EmbeddedModule));

@Component({
    selector: 'dummy',
    template: '<p>Hello!</p>'
})
class DummyComponent {
    constructor() {
        console.log('Dummy.constructor...');
    }
}

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
      DummyComponent
  ]
})
class EmbeddedModule {}

var downgradedComponent = adapter.downgradeNg2Component( DummyComponent );

export { adapter, DummyComponent, downgradedComponent };

Angular 1 应用

index.html

<script src=... angular vendor scripts ...></script>
<script src="path/to/my/angular2-sfx.js></script>

ma​​in.js

angular.element(document).ready(function() {
  ...
  angular.bootstrap(document.body, ['my-app']);
  ...
});

my.controller.js (我实际上想使用降级的组件)

(function() {
    'use strict';
    angular.module('data-gov-reference.state.index')
        .controller('MyController', Index)
        .directive('dummy', __myglobal.adapter.downgradeNg2Component(DummyComponent));

    function Index() {
        console.log('MyController...');
    }


}());

myview/myview.html (我希望显示降级指令的 View )

<div>
  <dummy></dummy>
</div>

Answer 1

没关系，解决问题了。

在 main.ts 中，angular.bootstrap(...) 应该是 __myglobal.adapter.bootstrap(...)

ma​​in.ts

angular.element(document).ready(function() {
  ...
  __myglobal.adapter.bootstrap(document.body, ['my-app']);
  ...
});

希望对其他人有帮助!