fix: support @ngx-translate/core v18

ngx-translate v18 removed the `TranslateModule` NgModule. The library's
9 feature modules imported it solely to make the `translate` pipe and
directive available in their templates, which breaks consumers on v18
with "No matching export ... for import 'TranslateModule'".

Replace `TranslateModule` with the standalone `TranslatePipe` and
`TranslateDirective` in each module's `imports`. These have been
standalone since @ngx-translate/core v15, so the change is backward
compatible with v17. No `TranslateService` usage changes are needed —
the library already uses the v18-era `getFallbackLang()` /
`setFallbackLang()` API.

Widen the peer dependency to `^17.0.0 || ^18.0.0`.

Closes #735

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: artaommahe

projects/stream-chat-angular/package.json

@@ -21,7 +21,7 @@
     "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^21.0.0-rc.2",
     "@angular/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^21.0.0-rc.2",
     "@breezystack/lamejs": "^1.2.7",
-    "@ngx-translate/core": "^17.0.0",
+    "@ngx-translate/core": "^17.0.0 || ^18.0.0",
     "rxjs": "^7.4.0",
     "stream-chat": "^9.20.0"
   },

projects/stream-chat-angular/src/lib/notification-list/stream-notification.module.ts

@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { NotificationListComponent } from './notification-list.component';
 import { NotificationComponent } from '../notification/notification.component';
 import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
 
 @NgModule({
   declarations: [NotificationComponent, NotificationListComponent],
-  imports: [CommonModule, TranslateModule],
+  imports: [CommonModule, TranslateDirective, TranslatePipe],
   exports: [NotificationComponent, NotificationListComponent],
 })
 export class StreamNotificationModule {}

projects/stream-chat-angular/src/lib/paginated-list/stream-paginated-list.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { PaginatedListComponent } from './paginated-list.component';
 import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
 import { IconModule } from '../icon/icon.module';
 
 @NgModule({
   declarations: [PaginatedListComponent],
-  imports: [CommonModule, TranslateModule, IconModule],
+  imports: [CommonModule, TranslateDirective, TranslatePipe, IconModule],
   exports: [PaginatedListComponent],
 })
 export class StreamPaginatedListModule {}

projects/stream-chat-angular/src/lib/polls/stream-polls.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { PollComposerComponent } from './poll-composer/poll-composer.component';
 import { PollComponent } from './poll/poll.component';
 import { PollHeaderComponent } from './poll-header/poll-header.component';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
 import { PollOptionsListComponent } from './poll-options-list/poll-options-list.component';
 import { PollOptionSelectorComponent } from './poll-option-selector/poll-option-selector.component';
 import { StreamAvatarModule } from '../stream-avatar.module';
@@ -38,7 +38,8 @@ import { PollPreviewComponent } from './poll-preview/poll-preview.component';
   ],
   imports: [
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     StreamAvatarModule,
     StreamModalModule,
     StreamNotificationModule,

projects/stream-chat-angular/src/lib/stream-autocomplete-textarea.module.ts

@@ -1,14 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AutocompleteTextareaComponent } from './message-input/autocomplete-textarea/autocomplete-textarea.component';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
 import { MentionModule } from 'angular-mentions';
 import { StreamAvatarModule } from './stream-avatar.module';
 import { textareaInjectionToken } from './injection-tokens';
 
 @NgModule({
   declarations: [AutocompleteTextareaComponent],
-  imports: [CommonModule, TranslateModule, MentionModule, StreamAvatarModule],
+  imports: [
+    CommonModule,
+    TranslateDirective,
+    TranslatePipe,
+    MentionModule,
+    StreamAvatarModule,
+  ],
   exports: [AutocompleteTextareaComponent],
   providers: [
     {

projects/stream-chat-angular/src/lib/stream-avatar.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AvatarComponent } from './avatar/avatar.component';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
 import { AvatarPlaceholderComponent } from './avatar-placeholder/avatar-placeholder.component';
 
 @NgModule({
   declarations: [AvatarComponent, AvatarPlaceholderComponent],
-  imports: [CommonModule, TranslateModule],
+  imports: [CommonModule, TranslateDirective, TranslatePipe],
   exports: [AvatarComponent, AvatarPlaceholderComponent],
 })
 export class StreamAvatarModule {}

projects/stream-chat-angular/src/lib/stream-chat.module.ts

@@ -18,7 +18,7 @@ import { StreamAvatarModule } from './stream-avatar.module';
 import { ThreadComponent } from './thread/thread.component';
 import { MessageBouncePromptComponent } from './message-bounce-prompt/message-bounce-prompt.component';
 import { NgxFloatUiModule } from 'ngx-float-ui';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
 import { MessageReactionsSelectorComponent } from './message-reactions-selector/message-reactions-selector.component';
 import { UserListComponent } from './user-list/user-list.component';
 import { VoiceRecordingModule } from './voice-recording/voice-recording.module';
@@ -55,7 +55,8 @@ import { StreamPaginatedListModule } from './paginated-list/stream-paginated-lis
     CommonModule,
     NgxFloatUiModule,
     StreamAvatarModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     VoiceRecordingModule,
     IconModule,
     StreamModalModule,

projects/stream-chat-angular/src/lib/stream-textarea.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
 import { TextareaComponent } from './message-input/textarea/textarea.component';
 import { textareaInjectionToken } from './injection-tokens';
 
 @NgModule({
   declarations: [TextareaComponent],
-  imports: [CommonModule, TranslateModule],
+  imports: [CommonModule, TranslateDirective, TranslatePipe],
   exports: [TextareaComponent],
   providers: [
     {

projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.module.ts

@@ -3,15 +3,21 @@ import { CommonModule } from '@angular/common';
 import { VoiceRecorderComponent } from './voice-recorder.component';
 import { VoiceRecordingModule } from '../voice-recording/voice-recording.module';
 import { IconModule } from '../icon/icon.module';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
 import { AudioRecorderService } from './audio-recorder.service';
 import { TranscoderService } from './transcoder.service';
 import { AmplitudeRecorderService } from './amplitude-recorder.service';
 import { VoiceRecorderWavebarComponent } from './voice-recorder-wavebar/voice-recorder-wavebar.component';
 
 @NgModule({
   declarations: [VoiceRecorderComponent, VoiceRecorderWavebarComponent],
-  imports: [CommonModule, VoiceRecordingModule, IconModule, TranslateModule],
+  imports: [
+    CommonModule,
+    VoiceRecordingModule,
+    IconModule,
+    TranslateDirective,
+    TranslatePipe,
+  ],
   exports: [VoiceRecorderComponent, VoiceRecorderWavebarComponent],
   providers: [
     AudioRecorderService,

projects/stream-chat-angular/src/lib/voice-recording/voice-recording.module.ts

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { VoiceRecordingComponent } from './voice-recording.component';
 import { VoiceRecordingWavebarComponent } from './voice-recording-wavebar/voice-recording-wavebar.component';
 import { IconModule } from '../icon/icon.module';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
 
 @NgModule({
   declarations: [VoiceRecordingComponent, VoiceRecordingWavebarComponent],
-  imports: [CommonModule, IconModule, TranslateModule],
+  imports: [CommonModule, IconModule, TranslateDirective, TranslatePipe],
   exports: [VoiceRecordingComponent, VoiceRecordingWavebarComponent],
 })
 export class VoiceRecordingModule {}