未捕获（承诺中）：类型错误：无法读取角度 10 中未定义的属性“？cmp”

Question

当我尝试加载刚刚用 --prod 标志编译的应用程序时，我收到此错误Uncaught (in promise): TypeError: Cannot read property \'\xc9\xb5cmp\' of undefined in angular，并将 optimization 和 buildOptimizer 设置为 true，当我将两者设置为 false 时，问题消失，应用程序加载时没有问题，但应用程序大小更大，并且性能不符合预期，我需要构建一个将 optimization 和 buildOptimizer 设置为 true 的产品，有人对这个问题有好的解决方案吗？

\n

角度.json 文件：

\n

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

\n

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

\n

//Directive created\n  @ViewChild(RequestsDirective) tabHost: RequestsDirective;\n\n  constructor(\n    private componentFactoryResolver: ComponentFactoryResolver,\n    private viewContainerRef: ViewContainerRef,\n    public requestsMainService: RequestsMainService,\n    private spinner: NgxSpinnerService) { }\n\n  ngOnInit(): void { }\n\n  // Load Component in ng template  and set request name in services and hide category - request type part\n  async loadTabComponent(_requestid: number, _requestname: string) {\n    //debugger;\n    // to set request name dynamic in all requests\n    this.requestsMainService.RequestName = _requestname;\n    // Hide Category And Requests type\n    $(\'#div_main\').hide(\'slow\');\n\n    // Search in App Model about component name\n    const factories = Array.from( \n        this.componentFactoryResolver[\'ngModule\']\n            .instance.constructor.\xc9\xb5mod.declarations\n    );\n    const factoryClass = factories.find(\n        (x: any) => x.name === (\'Request1Component\')\n    ) as Type<any>;\n\n    // clear any previous component\n    this.viewContainerRef.detach();\n    this.viewContainerRef.clear();\n    // get dynamic component by name\n    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);\n    // load it in ng template\n    this.viewContainerRef = this.tabHost.viewContainerRef;\n    this.viewContainerRef.createComponent(componentFactory);\n  }\n

\n

笔记

\n

Request1Component这个组件名称我想动态加载它

\n

Answer 1

我在 Angular 15 上使用带有 NX 的微前端时遇到了这个错误，发生这种情况是因为共享库中的某些组件未从 index.ts 文件导出。只需检查您忘记导出哪个组件的 index.ts 文件即可。

Answer 2

当您尝试创建/添加/附加未定义的组件到现有组件引用时，会发生此问题

改变这一行：

this.viewContainerRef.createComponent(componentFactory);

对此：

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

*注1：

您不再需要使用它componentFactoryResolver.resolveComponentFactory()已createComponent()被弃用，您应该简单地将类引用直接传递给createComponent()

*笔记2：

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