Angular 6 custom lib没有ComponentFactoryResolver的提供者答案

【问题标题】：Angular 6 custom lib No provider for ComponentFactoryResolverAngular 6 custom lib没有ComponentFactoryResolver的提供者
【发布时间】：2018-10-15 23:19:01
【问题描述】：

我从 NG4 -> NG6 重写库（使用 angular-cli 6）。这个库改变了动态角度组件，所以我使用ComponentFactoryResolver，在这里我被卡住了。当我将ComponentFactoryResolver 添加到构造函数时：

constructor(
    private componentFactoryResolver: ComponentFactoryResolver
) {}

并在目标应用程序中构建 lib（成功）（我从本地文件将我的 lib 添加到 package.json 中）我有这个错误：

StaticInjectorError(AppModule)[MyLibComponent-> ComponentFactoryResolver]: 
  StaticInjectorError(Platform: core)[MyLibComponent-> ComponentFactoryResolver]: 
    NullInjectorError: No provider for ComponentFactoryResolver!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveNgModuleDep (core.js:9238)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9919)

如果没有ComponentFactoryResolver，其他事情就可以正常工作

完整组件：

import { Component, ComponentFactoryResolver, AfterContentInit, ViewChild, Inject, Input, InjectionToken } from '@angular/core';

import { AbHostDirective } from './../directives/ab-host.directive';

export const AB_COMPONENTS = new InjectionToken('AB_COMPONENTS');

@Component({
  selector: 'lib-ab',
  template: `<ng-template lib-ab-host></ng-template>`,
  styles: []
})

export class MyLibComponent implements AfterContentInit {
  @ViewChild(AbHostDirective) abHost: AbHostDirective;
  @Input() globalConfiguration: any;
  @Input() domain = '';

  constructor(
    @Inject(AB_COMPONENTS) private $configuredComponents: any,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngAfterContentInit() {
    const currentConfiguration = this.$configuredComponents[this.domain];

    if (!currentConfiguration) {
        console.error('No component for: ', + this.domain);
        return;
    }

    const randomIndex      = Math.floor(Math.random() * currentConfiguration.length);
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(currentConfiguration[randomIndex]);
    const viewContainerRef = this.abHost.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);
    const instance     = <any>componentRef.instance;
    instance.globalConfiguration     = this.globalConfiguration;
  }
}

【问题讨论】：

您是否将ComponentFactoryResolver 添加到来自@angular/core 的导入中？我们可能需要查看您所包含的更多代码。
是的，我导入（我编辑我的原始帖子）
您是否偶然使用了 ng2-bootstrap？如果是这样，请参阅this。您是否使用任何其他可能需要显式调用 .forRoot() 的库？是否有任何组件应该添加到库模块中的entryComponents 数组中？ Ref
与.forRoot() 我使用UIRouterModule.forRoot 和TranslateModule.forRoot 我不使用ng2-bootstrap

标签： angular dynamic components angular-cli angular6

【解决方案1】：

我有同样的问题。这打勾解决了我的问题：

https://github.com/angular/angular/issues/20598

尝试将其添加到您的 angular.json 文件中：

"build": {
    "options": {
        "preserveSymlinks": true,
    }
}

【讨论】：