未捕获（承诺）：TypeError：无法读取角度 10 中未定义的属性“ɵcmp”答案

【问题标题】：Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined in angular 10未捕获（承诺）：TypeError：无法读取角度 10 中未定义的属性“ɵcmp”
【发布时间】：2021-02-27 22:55:39
【问题描述】：

我在尝试加载我刚刚使用 --prod 标志编译的应用程序时收到此错误Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined in angular，其中优化和 buildOptimizer 都设置为 true，当我将两者都设置为 false 时，问题消失并且应用程序正在加载没有问题但是应用程序规模更大，性能不如预期，我需要构建一个将优化和 buildOptimizer 设置为 true 的产品，有人有解决这个问题的好方法吗？

angular.json 文件：

            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }

我在 .ts 中的代码加载动态组件，这部分在生产 Angular 应用程序时不起作用并且有先前的错误：

//Directive created
  @ViewChild(RequestsDirective) tabHost: RequestsDirective;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef,
    public requestsMainService: RequestsMainService,
    private spinner: NgxSpinnerService) { }

  ngOnInit(): void { }

  // Load Component in ng template  and set request name in services and hide category - request type part
  async loadTabComponent(_requestid: number, _requestname: string) {
    //debugger;
    // to set request name dynamic in all requests
    this.requestsMainService.RequestName = _requestname;
    // Hide Category And Requests type
    $('#div_main').hide('slow');

    // Search in App Model about component name
    const factories = Array.from( 
        this.componentFactoryResolver['ngModule']
            .instance.constructor.ɵmod.declarations
    );
    const factoryClass = factories.find(
        (x: any) => x.name === ('Request1Component')
    ) as Type<any>;

    // clear any previous component
    this.viewContainerRef.detach();
    this.viewContainerRef.clear();
    // get dynamic component by name
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);
    // load it in ng template
    this.viewContainerRef = this.tabHost.viewContainerRef;
    this.viewContainerRef.createComponent(componentFactory);
  }

注意

Request1Component这个组件名我要动态加载

【问题讨论】：

这个问题看起来像你遇到的问题吗？ stackoverflow.com/questions/62013102/…
@c69 没有我的问题，我想加载在类型脚本中创建动态名称的组件，并在<ng-template>中加载此组件
我遇到了同样的问题，我相信由于新的 ivy 编译器，它只发生在 Angular 9 中。到目前为止还没有找到一个明确的解决方案来解决这个问题。这篇文章很有帮助，但我无法让它工作github.com/angular/angular/issues/33715
@Muhammad 我已经格式化了代码，但仍然不清楚 - 哪一行抛出了你得到的错误？
@c69 我在使用 ComponentFactoryResolver 在生产中加载动态组件并收到此错误时遇到的问题 Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined in angular in `this.componentFactoryResolver[ 'ngModule'].instance.constructor.ɵmod.declarations`

标签： angular angular10 angular-ivy

【解决方案1】：

当您尝试将 undefined 组件创建/添加/附加到现有组件引用时会发生此问题

更改这一行：

this.viewContainerRef.createComponent(componentFactory);

对此：

if (factoryClass != undefined) this.viewContainerRef.createComponent(factoryClass);

*注 1：

您不再需要将componentFactoryResolver.resolveComponentFactory() 用于createComponent()，它已被弃用，您只需将类引用直接传递给createComponent()

*注 2：

当将值传递给viewContainerRef.createComponent() 时，始终检查它是否为undefined，如果不是（可能尚未注册或创建该类） - 然后不要添加它，或者用一些占位符组件替换它

【讨论】：