Angular12引入GitHub自定义组件运行时报reading emod错误如何解决

Cannot read properties of undefined (reading 'ɵmod')报错的核心是当前项目无法识别你从Git安装的Angular组件的编译元数据，属于Angular跨项目引用自定义组件的高频问题，对应解决方案如下： #

1. 调整GitHub组件仓库的打包规范 #

你直接通过Git地址安装的如果是未编译的Angular项目源码，而非标准Angular库编译产物，就会触发这个报错，按如下步骤修改组件仓库配置：

• 组件不要写在普通Angular应用项目里，使用ng generate library house-building生成标准Angular库结构，所有组件、模块逻辑都存放到库项目目录下
• 开发完成后执行ng build house-building --configuration production编译库，生成dist目录下的编译产物
• 在组件仓库根目录的package.json中配置正确的入口指向编译产物，示例配置：

{
  "name": "house-building",
  "version": "1.0.0",
  "main": "./dist/house-building/esm2020/house-building.mjs",
  "typings": "./dist/house-building/house-building.d.ts",
  "exports": {
    ".": {
      "types": "./dist/house-building/house-building.d.ts",
      "esm2020": "./dist/house-building/esm2020/house-building.mjs",
      "default": "./dist/house-building/esm2020/house-building.mjs"
    }
  }
}

配置完成后推送代码到GitHub，当前项目重新安装依赖即可。 #

2. 检查当前项目的引入配置 #

如果确认组件仓库打包规范没问题，检查当前项目的如下配置：

• 确认已经在当前项目的对应模块（AppModule或业务子模块）中正确引入组件库的模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HouseBuildingModule } from 'house-building';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HouseBuildingModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 检查版本兼容性：组件基于Angular12开发，当前项目的Angular大版本不能低于12，跨大版本会出现元数据不兼容问题
• 清理缓存重试：执行如下命令清除本地缓存后重新运行项目：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install
ng serve

3. 临时验证方案 #

如果暂时不想调整组件仓库的打包配置，可以直接把组件的源码拷贝到当前项目的src/app/shared/目录下，本地引入模块后测试，确认组件本身逻辑无问题后再优化打包配置。 #

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