Angular 2 Hybrid App：未知提供者：ng2.ComponentFactoryRefMapProvider

Question

方案

我正在尝试使用一个非常简单的角度2（rc.5）组件作为我的angular 1.5应用程序中的指令但是在将指令添加到我的一个模块时出现错误。

错误

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

代码

Angular2

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

此component-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 app

的的index.html

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

的 main.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 （我希望降级指令显示的视图）

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

Answer 1

没关系，弄明白了这个问题。

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

的 main.ts

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

希望它可以帮助别人！