Angular 12/13环境下无法构建StreamChatModule的问题求助

我在搭建Stream聊天应用时，遇到ngx-popper和angular-mentions依赖版本不兼容Angular 12的问题，导致无法构建StreamChatModule。已经通过--legacy-peer-deps参数完成了依赖安装，但构建仍然失败。

查看package-lock.json时发现，angular-mentions的peer依赖标注为Angular >=7.2.0：

"node_modules/angular-mentions": {
  "version": "1.5.0",
  "resolved": "https://registry.npmjs.org/angular-mentions/-/angular-mentions-1.5.0.tgz",
  "integrity": "sha512-6l63v7AvrX9vFzj2h7jAPTnQ390IomCz3HiQP+b3PnDvaZiycd+tiVavi5RxAIX8WYjsamAR+tTPCkOkBkqZ+w==",
  "dependencies": {
    "tslib": "^2.0.0"
  },
  "peerDependencies": {
    "@angular/common": ">=7.2.0",
    "@angular/core": ">=7.2.0"
  }
},

但ngx-popperjs明确要求Angular 14及以上：

"node_modules/ngx-popperjs": {
  "version": "14.1.6",
  "resolved": "https://registry.npmjs.org/ngx-popperjs/-/ngx-popperjs-14.1.6.tgz",
  "integrity": "sha512-FL+IKYydZIcqOGgjrVb9iBAzG7MTGF3zS7JeMF5CmAVXXI6p2IeDf2SEHyT1SghzMW9yy23EHfpYEaowtrMiBg==",
  "hasInstallScript": true,
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "tslib": "^2.3.0"
  },
  "peerDependencies": {
    "@angular/common": "^14.0.1",
    "@angular/core": "^14.0.1",
    "rxjs": "^7.4.0"
  }
},

实际构建时，angular-mentions抛出的报错显示其组件是用Angular 14.0.6编译的，要求Angular 14+：

TypeError: Cannot create property 'message' on string '/Users/jbardon/code/petalmd.web/node_modules/angular-mentions/fesm2015/angular-mentions.mjs: This application depends upon a library published using Angular version 14.0.6, which requires Angular version 14.0.0 or newer to work correctly.
Consider upgrading your application to use a more recent version of Angular.
  425 | }
  426 | MentionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MentionListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
> 427 | MentionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: MentionListComponent, selector: "mention-list", inputs: { labelKey: "labelKey", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "defaultItemTemplate", first: true, predicate: ["defaultItemTemplate"], descendants: true, static: true }], ngImport: i0, template: `
      |                             ^
  428 |     <ng-template #defaultItemTemplate let-item="item">
  429 |       {{item[labelKey]}}
  430 |     </ng-template>'

解决办法 #

1. 安装兼容Angular 12的依赖版本 #

• angular-mentions：v1.5.0是用Angular 14编译的，需要降级到更早的版本（比如v1.4.0，该版本由Angular 12编译）：

  npm install angular-mentions@1.4.0 --legacy-peer-deps
  

• ngx-popperjs：版本与Angular版本对应，Angular 12需要安装v12.x版本：

  npm install ngx-popperjs@12.0.0 --legacy-peer-deps
  

2. 降级Stream Chat Angular SDK版本 #

如果当前使用的Stream SDK版本依赖高版本的上述两个库，可查找适配Angular 12的Stream SDK版本，安装对应版本即可（可查看Stream SDK的版本发布历史确认兼容版本）。

3. 临时绕过版本检查（不推荐） #

修改angular.json的构建配置，添加允许CommonJS依赖，但此方法可能引发其他兼容性问题，仅作临时测试使用：

"architect": {
  "build": {
    "options": {
      "allowedCommonJsDependencies": ["angular-mentions", "ngx-popperjs"]
    }
  }
}

内容的提问来源于stack exchange，提问作者Jérémie Bardon