Unable to build with Angular 12 / 13

I'm trying to follow the tutorial on Angular provided here. I'm unable to build StreamChatModule since ngx-popper and angular-mentions seems to require Angular > 14.

I've installed with the option --legacy-peer-deps since we use Angular 12.

Weird thing is when I go to my package-lock it's tell that the angular-mention installation require only Angular > 7 like below:

 "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"
      }
    },

However popperjs require 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"
      }
    },

This is the full error from angular-mention:

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>'
  

From what I see is that a component from angular-mention required Angular 14+

Did you have an idea how to solve this ?

I'm from the stream-chat-angular developer team, and the SDK does support Angular@12. Unfortunately, the install command in the tutorial was wrong. Please try this one (tested with npm v7):

npm install stream-chat-angular stream-chat @ngx-translate/core angular-mentions@1.4.0 ngx-popperjs@12 --legacy-peer-deps

We have an open ticket to fix this, which also gives some context about the problem: https://github.com/GetStream/stream-chat-angular/issues/410.

Sorry for the inconvenience.