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

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

0 голосов
/ 01 мая 2018

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

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

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

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

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

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

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

Вот угловой модуль, загружающий модуль angularjs и предоставляющий точку входа для HelloAngularComponent, который будет использоваться с downgradeComponent. Ошибка указывает на этот угловой (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)!';
}

1 Ответ

0 голосов
/ 02 мая 2018

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

С веб-пакетом это было так же просто, как удалить 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.

...