Angular独立式本地库报错：Cannot read properties of undefined (reading 'ɵcmp')求助

以下是针对问题的排查和解决步骤：

1. 确认子组件的独立配置 #

检查RobotInfoBarManagerViewComponent和RobotMissionListViewComponent是否正确配置为独立组件：

• 它们的@Component装饰器必须设置standalone: true
• 子组件的imports数组需包含所有依赖模块（如CommonModule、表单模块等）

示例子组件配置：

@Component({
  selector: 'lib-robot-info-bar-manager-view',
  standalone: true,
  imports: [CommonModule], // 根据业务需求添加其他模块
  template: `...`,
  styleUrl: './robot-info-bar-manager-view.component.css'
})
export class RobotInfoBarManagerViewComponent {
  // 组件逻辑
}

2. 验证public-api.ts的导出正确性 #

确保本地库的public-api.ts中准确导出所有涉及的组件，路径不能出错：

// public-api.ts
export * from './lib/attr-left-menu-bar/attr-left-menu-bar.component';
export * from './lib/robot-info-bar-manager-view/robot-info-bar-manager-view.component';
export * from './lib/robot-mission-list-view/robot-mission-list-view.component';

3. 重新构建本地库并更新项目依赖 #

• 进入本地库目录，执行构建命令：

  ng build
  

• 回到项目目录，重新安装本地库依赖（若为本地链接引用）：

  npm install ../path-to-your-library-folder
  

确保项目使用的是最新构建的库文件，避免旧缓存导致组件元数据缺失。

4. 检查项目中组件的导入方式 #

在项目中使用库组件时，必须从库的包名导入，禁止使用相对路径：

// 正确方式
import { AttrLeftMenuBarComponent } from 'your-library-name';

// 错误方式（需避免）
import { AttrLeftMenuBarComponent } from '../your-lib/src/lib/attr-left-menu-bar.component';

5. 确认clickMenu函数的逻辑正确性 #

确保clickMenu函数正确设置selectedMenu状态，避免出现selectedMenu为undefined或属性缺失的情况：

// 在AttrLeftMenuBarComponent中
selectedMenu: any;
menus = [/* 你的菜单数据 */];

clickMenu(menu: any) {
  // 重置所有菜单的active状态
  this.menus.forEach(m => m.active = false);
  // 设置当前菜单为激活状态
  menu.active = true;
  // 赋值给selectedMenu
  this.selectedMenu = menu;
}

6. 检查Angular版本一致性 #

确保本地库和项目使用的Angular版本完全一致，版本差异可能导致独立组件的内部元数据（ɵcmp）无法被正确识别。可在库目录和项目目录分别执行以下命令查看版本：

ng version

内容的提问来源于stack exchange，提问作者전영후