Angular组件报错：Super constructor may only be called once

架构老林

2026-7-27

Angular 「Super constructor may only be called once」错误排查方案

问题描述

在Angular项目中，DynamicLottiePlayerComponent构造函数仅调用了一次super()且放在第一行，但仍触发「Super constructor may only be called once」错误，重新编译应用后问题依旧。报错堆栈如下：

polyfills.js:8561 
       
       ERROR ReferenceError: Super constructor may only be called once
    at new DynamicLottiePlayerComponent (pages_home.js:15905:5)
    at NodeInjectorFactory.DynamicLottiePlayerComponent_Factory [as factory] (pages_home.js:16211:10)
    at getNodeInjectable (vendor.js:79689:38)
    at createRootComponent (vendor.js:90176:31)
    at ComponentFactory.create (vendor.js:90030:19)
    at ViewContainerRef.createComponent (vendor.js:100426:43)
    at DynamicComponentPortalHostDirective.attachComponentPortal (vendor.js:61337:34)
    at DynamicComponentPortalHostDirective.attach (vendor.js:60891:19)
    at set portal [as portal] (vendor.js:61302:13)
    at set renderedPageNode [as renderedPageNode] (pages_home.js:28322:23)

排查及解决方法

核查组件继承链：确认DynamicLottiePlayerComponent的父类构造函数是否存在异常，比如父类是否在内部隐式调用了super()，或者继承层级中出现了循环继承、重复继承的情况。
彻底清理构建缓存：常规重新编译可能没清理干净缓存，执行以下步骤：
```
ng cache clean
rm -rf node_modules/.cache
rm -rf dist
npm install
ng build
```
检查动态加载逻辑：从堆栈看组件是通过动态portal加载的，排查renderedPageNode的setter逻辑，确认是否多次触发了组件挂载操作，导致重复实例化组件。
校验组件元数据：检查DynamicLottiePlayerComponent的@Component装饰器配置，比如是否重复声明了providers等可能影响实例化的配置项。
排查第三方依赖兼容性：如果组件依赖Lottie相关库，确认库版本与当前Angular版本是否匹配，尝试升级/降级库版本，排查是否是库内部构造函数调用逻辑导致的冲突。