StaticInjectorError (AppModule) нет поставщика для ComponentFactoryResolver

У меня есть рабочее приложение webpacker rails 5.2.0 с минимальным приложением angularjs, загружаемым через angular AppModule с использованием функции UpgradeModule.bootstrap.

Я подтвердил, что приложение angular работает нормально, прежде чем превратить его в гибридное приложение. И после первоначального добавления простого гибридного загружаемого модуля angularjs загруженный модуль angularjs работает нормально.

Теперь я пытаюсь использовать downgradeComponent, чтобы повесить угловой компонент в загруженном корневом шаблоне angularjs, следуя приведенным здесь документам:

https://angular.io/guide/upgrade#using-angular-components-from-angularjs-code

Что мне нужно сделать, чтобы обеспечить предоставление ComponentFactoryResolver модулю angular?

Модуль angular все еще загружает модуль angularjs, который все еще работает, но директива, использующая функцию downgradeComponent, не работает с консольным сообщением, предполагающим, что angular AppModule, в котором объявлен компонент, не имеет поставщика для ComponentFactoryResolver.

angularjs:14961
Error: StaticInjectorError(AppModule)[ComponentFactoryResolver]: 
  StaticInjectorError(Platform: core)[ComponentFactoryResolver]: 
    NullInjectorError: No provider for ComponentFactoryResolver!
    at _NullInjector.get (core.js:1003)

Вот модуль angular, загружающий модуль angularjs и предоставляющий точку входа для HelloAngularComponent, который будет использоваться с downgradeComponent. Ошибка указывает на этот файл машинописного текста angular (v5):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';

import { HelloAngularComponent } from './hello_angular.component';

@NgModule({
  declarations: [
    HelloAngularComponent
  ],
  entryComponents: [
    HelloAngularComponent
  ],
  imports: [
    BrowserModule,
    UpgradeModule 
  ],  
  providers: [],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['hello_angularjs'], {strictDi: true});
  }
}

А вот загружаемый модуль hello_angularjs / index.ts:

import angular from 'angular';
import uirouter from '@uirouter/angularjs';
import { HelloAngularComponent } from '../hello_angular/app/hello_angular.component';
import { downgradeComponent } from '@angular/upgrade/static';

angular.module('hello_angularjs', [uirouter])
  .controller('LoginMessage', ['$scope', function($scope) {
    'ngInject'; 
    $scope.message = 'Hello Angularjs';
  }])
  .config(['$stateProvider', ($stateProvider) => {
    'ngInject';
    $stateProvider
      .state('home', {
        url: '/',
        template: `<h1>hello_angularjs home template.</h1>
        <hello-angular>Loading Angular component downgraded to angularjs...</hello-angular>`
      })
  }])
  .directive(
    'helloAngular',
    downgradeComponent({ component: HelloAngularComponent }) as angular.IDirectiveFactory
  );

И простой компонент понижается до версии:

import { Component } from '@angular/core';

@Component({
  selector: 'hello-angular',
  template: `<h1>Hello {{name}}</h1>`
})
export class HelloAngularComponent {
  name = 'Angular (v5)!';
}   

person Anatortoise House    schedule 01.05.2018    source источник


Ответы (1)


Я нашел одно решение - переместить загружаемый модуль angularjs в тот же пакет webpack, что и модуль angular 5.

С помощью webpacker это было так же просто, как удалить app / javascripts / packs / hello_angularjs.js и вместо этого импортировать файлы hello_angularjs и hello_angular index.ts в один и тот же пакет, определенный app / javascript / packs / hello_angular.js

import '../hello_angularjs'
import '../hello_angular'

Я также мог бы просто объединить вызовы модуля angularjs и директив с тем же файлом app.module.ts, где находится код @NgModule.

person Anatortoise House    schedule 02.05.2018