Angular通过index.ts导入组件出现'ɵcmp'未定义错误求助

问题重现 #

项目共享组件结构如下：

src 
  app
    shared
      components
        _
          confirmation/
          notification/
          ...
        index.ts

index.ts作为barrel文件统一导出组件：

export { ConfirmationComponent } from "./_/confirmation/confirmation.component";
export { NotificationComponent } from "./_/notification/notification.component";
// 其他组件导出

当混合使用两种导入方式时：

// 直接导入组件文件
import { ConfirmationComponent } from "../../../shared/components/_/confirmation/confirmation.component";
// 通过barrel文件导入
import { NotificationComponent } from "../../../shared/components";

编译可通过，但运行时在不相关上下文抛出错误：

ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')
    at getComponentDef (core.mjs:2529:12)
    at extractDirectiveDef (core.mjs:2418:12)
    at core.mjs:2592:21
    at Array.map (<anonymous>)
    at core.mjs:2592:10
    at createTView (core.mjs:11394:63)
    at getOrCreateComponentTView (core.mjs:11343:28)
    at addComponentLogic (core.mjs:12096:19)
    at instantiateAllDirectives (core.mjs:11898:9)
    at createDirectivesInstances (core.mjs:11306:5)

错误原因 #

核心问题是Angular对组件的识别依赖于模块导入路径的唯一性：

• 当用不同路径导入同一个组件（比如ConfirmationComponent既通过直接文件路径导入，又通过barrel文件导入），TypeScript和Angular的模块系统会将其视为两个独立的模块引用。
• 这会导致组件的元数据（包括ɵcmp定义）被重复注册或初始化顺序混乱。运行时，Angular尝试获取某一引用的组件元数据时，该引用对应的组件可能未完成初始化，从而抛出undefined错误。
• 错误出现在不相关上下文，是因为组件的依赖链可能跨模块传播了这种无效的引用，导致其他组件初始化时触发问题。

解决方案 #

1. 统一导入方式
   所有共享组件均通过barrel文件导入，彻底避免混合路径：

   import { ConfirmationComponent, NotificationComponent } from "../../../shared/components";
   

2. 检查循环依赖
   确认index.ts和各组件文件之间没有循环导入（比如某组件文件又导入了../../../shared/components），循环依赖会加剧模块解析的混乱。

3. 清理构建缓存
   执行Angular清理命令清除旧缓存，避免残留的无效模块引用：

   ng clean
   ng build
   

总结 #

这类错误本质是导入路径不一致引发的组件元数据注册异常，统一使用barrel文件导入是最直接有效的解决方式，同时要避免循环依赖和清理缓存来排除潜在问题。

内容的提问来源于stack exchange，提问作者Dalua Lama