Merge pull request #4161 from atmire/only-import-altcha-on-the-browser

Fix ssr error by only importing altcha on the client side

Author: kshepherd

src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html

@@ -86,8 +86,8 @@ <h1 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h1>
 
   <!-- Captcha - to be rendered only if enabled in backend requestitem.cfg -->
   @if (!!(captchaEnabled$ | async)) {
-    <div *ngVar="challengeHref$ | async as href">
-      <ds-altcha-captcha autoload="onload" challengeUrl="{{ href }}" (payload)="handlePayload($event)">
+    <div>
+      <ds-altcha-captcha autoload="onload" challengeUrl="{{ challengeHref$ | async }}" (payload)="handlePayload($event)">
       </ds-altcha-captcha>
     </div>
   }

src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.ts

@@ -1,5 +1,3 @@
-import 'altcha';
-
 import {
   AsyncPipe,
   Location,
@@ -65,7 +63,6 @@ import {
   isNotEmpty,
 } from '../../../shared/empty.util';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { VarDirective } from '../../../shared/utils/var.directive';
 import { getItemPageRoute } from '../../item-page-routing-paths';
 import { AltchaCaptchaComponent } from './altcha-captcha.component';
 
@@ -78,7 +75,6 @@ import { AltchaCaptchaComponent } from './altcha-captcha.component';
     AsyncPipe,
     ReactiveFormsModule,
     BtnDisabledDirective,
-    VarDirective,
     AltchaCaptchaComponent,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

src/app/request-copy/email-request-copy/email-request-copy.component.ts

@@ -1,5 +1,3 @@
-import 'altcha';
-
 import {
   AsyncPipe,
   Location,

src/modules/app/browser-app.config.ts

@@ -1,3 +1,5 @@
+import 'altcha';
+
 import {
   HttpClient,
   provideHttpClient,