Question

我有一个工作的rails 5.2.0 webpacker应用程序，通过角度AppModule启动了一个最小的angularjs应用程序，使用UpgradeModule.bootstrap函数。

我确认角度应用程序在将其转换为混合应用程序之前工作正常。在最初添加一个简单的angularjs混合启动模块后，angularjs启动模块运行正常。

我现在正在尝试使用downgradeComponent在引导的angularjs根模板中挂起角度组件，遵循以下文档：

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

我需要做些什么才能确保将ComponentFactoryResolver提供给角度模块？

angular模块仍在启动angularjs模块，该模块仍在工作，但使用downgradeComponent函数的指令失败，并显示控制台消息，表明声明组件的角度AppModule没有ComponentFactoryResolver的提供程序。 / p>

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

这是启动angularjs模块的角度模块，并为HelloAngularComponent提供与downgradeComponent一起使用的入口点。该错误指向此angular（v5）typescript文件：

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)!';
}

Answer 1

我发现的一个解决方案是将angularjs启动模块移动到与angular 5模块相同的webpack包中。

使用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模块和指令调用合并到@NgModule代码所在的同一app.module.ts文件中。

StaticInjectorError（AppModule）没有ComponentFactoryResolver的提供者

1 个答案: