feat!: upgrade to Angular 21

.github/workflows/build_pull_request.yml

@@ -27,6 +27,7 @@ jobs:
     with:
       cache-mode: 'read-only'
       ref: ${{ github.event.pull_request.head.sha }}
+      angular-versions: '^21'
     secrets:
       NX_KEY: ${{ secrets.NX_KEY }}
       AZURE_STORAGE_CONNECTION_STRING: ${{ github.event.pull_request.head.repo.full_name == github.repository && secrets.AZURE_NX_CACHE_READWRITE_CONNECTION_STRING || secrets.AZURE_NX_CACHE_READONLY_CONNECTION_STRING }}

apps/daffio/src/main.server.ts

@@ -1,3 +1,4 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import {
   BootstrapContext,
   bootstrapApplication,
@@ -7,6 +8,6 @@ import { DaffioAppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
 const bootstrap = (context: BootstrapContext) =>
-  bootstrapApplication(DaffioAppComponent, config, context);
+  bootstrapApplication(DaffioAppComponent, { ...config, providers: [provideZoneChangeDetection(), ...config.providers]}, context);
 
 export default bootstrap;

apps/daffio/src/test.ts

@@ -1,15 +1,32 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
+
+// eslint-disable-next-line import/no-unassigned-import
+import 'zone.js';
 // eslint-disable-next-line import/no-unassigned-import
 import 'zone.js/testing';
+import {
+  NgModule,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { getTestBed } from '@angular/core/testing';
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing';
+
+@NgModule({
+  providers: [
+    provideZoneChangeDetection(),
+  ],
+})
+class ExpressionChangedAfterCheckedWorkaround {}
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
+  [
+    BrowserTestingModule,
+    ExpressionChangedAfterCheckedWorkaround,
+  ],
+  platformBrowserTesting(),
 );

apps/demo/src/main.ts

@@ -1,4 +1,7 @@
-import { enableProdMode } from '@angular/core';
+import {
+  enableProdMode,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { DemoModule } from './app/app.module';
@@ -9,5 +12,5 @@ if (environment.production) {
 }
 
 platformBrowserDynamic()
-  .bootstrapModule(DemoModule)
+  .bootstrapModule(DemoModule, { applicationProviders: [provideZoneChangeDetection()]})
   .catch(err => console.error(err));

libs/auth/driver/magento/src/apollo-bearer-token-link-generator.spec.ts

@@ -2,9 +2,8 @@ import { TestBed } from '@angular/core/testing';
 import {
   DocumentNode,
   gql,
-  NextLink,
-  Operation,
-} from '@apollo/client/core';
+  ApolloLink,
+} from '@apollo/client';
 import { Apollo } from 'apollo-angular';
 import {
   ApolloTestingController,
@@ -18,7 +17,7 @@ import { MagentoAuthApolloBearerTokenLinkGenerator } from './apollo-bearer-token
 describe('@daffodil/auth/driver/magento | MagentoAuthApolloBearerTokenLinkGenerator', () => {
   let service: MagentoAuthApolloBearerTokenLinkGenerator;
   let daffAuthStorageService: jasmine.SpyObj<DaffAuthStorageService>;
-  let operation: Operation;
+  let operation: ApolloLink.Operation;
   let apollo: Apollo;
   let controller: ApolloTestingController;
 
@@ -62,9 +61,9 @@ describe('@daffodil/auth/driver/magento | MagentoAuthApolloBearerTokenLinkGenera
       it('should set the authorization header to the bearer token', () => {
         apollo.query({ query }).subscribe();
         operation = controller.expectOne(query).operation;
-        service.getLink().request(operation, <NextLink><unknown>jasmine.createSpy);
+        service.getLink().request(operation, <ApolloLink.ForwardFunction><unknown>jasmine.createSpy);
 
-        expect(operation.getContext().headers.authorization).toEqual(`Bearer ${token}`);
+        expect(operation.getContext().headers?.get('authorization')).toEqual(`Bearer ${token}`);
       });
     });
 
@@ -76,9 +75,9 @@ describe('@daffodil/auth/driver/magento | MagentoAuthApolloBearerTokenLinkGenera
       it('should not set the authorization header', () => {
         apollo.query({ query }).subscribe();
         operation = controller.expectOne(query).operation;
-        service.getLink().request(operation, <NextLink><unknown>jasmine.createSpy);
+        service.getLink().request(operation, <ApolloLink.ForwardFunction><unknown>jasmine.createSpy);
 
-        expect(operation.getContext().headers?.authorization).toBeUndefined();
+        expect(operation.getContext().headers?.get('authorization')).toBeUndefined();
       });
     });
 
@@ -90,9 +89,9 @@ describe('@daffodil/auth/driver/magento | MagentoAuthApolloBearerTokenLinkGenera
       it('should not crash', () => {
         apollo.query({ query }).subscribe();
         operation = controller.expectOne(query).operation;
-        service.getLink().request(operation, <NextLink><unknown>jasmine.createSpy);
+        service.getLink().request(operation, <ApolloLink.ForwardFunction><unknown>jasmine.createSpy);
 
-        expect(operation.getContext().headers?.authorization).toBeUndefined();
+        expect(operation.getContext().headers?.get('authorization')).toBeUndefined();
       });
     });
   });

libs/auth/driver/magento/src/apollo-bearer-token-link-generator.ts

@@ -3,11 +3,12 @@ import {
   Injectable,
   makeEnvironmentProviders,
 } from '@angular/core';
-import { ApolloLink } from '@apollo/client/core';
+import { ApolloLink } from '@apollo/client';
 
 import { DaffAuthStorageService } from '@daffodil/auth';
 import {
   DaffApolloLinkGenerator,
+  getApolloOperationHeaders,
   provideDaffApolloHeaderProviders,
 } from '@daffodil/core/graphql';
 import {
@@ -63,10 +64,7 @@ export class MagentoAuthApolloBearerTokenLinkGenerator implements DaffApolloLink
 
       if (token) {
         operation.setContext({
-          headers: {
-            ...operation.getContext().headers,
-            authorization: `Bearer ${token}`,
-          },
+          headers: getApolloOperationHeaders(operation).append('authorization', `Bearer ${token}`),
         });
       }
       return forward(operation);

libs/auth/driver/magento/src/errors/transform.spec.ts

@@ -1,10 +1,12 @@
-import { ApolloError } from '@apollo/client/core';
+
+import { CombinedGraphQLErrors } from '@apollo/client';
 
 import { DaffUnauthorizedError } from '@daffodil/auth/driver';
 
 import { MagentoAuthGraphQlErrorCode } from './codes';
 import { transformMagentoAuthError } from './transform';
 
+
 describe('@daffodil/auth/driver/magento | transformMagentoAuthError', () => {
   const unhandledGraphQlError = {
     message: 'A error we dont handle',
@@ -31,9 +33,10 @@ describe('@daffodil/auth/driver/magento | transformMagentoAuthError', () => {
   };
 
   it('should be able to process graphql errors and return the relevant DaffAuth error if a mapping exists', () => {
-    const error = new ApolloError({
-      graphQLErrors: [handledGraphQlError],
-    });
+    const error = new CombinedGraphQLErrors(
+      {},
+      [handledGraphQlError],
+    );
     const result = transformMagentoAuthError(error);
 
     expect(result).toEqual(jasmine.any(DaffUnauthorizedError));

libs/auth/driver/magento/src/validators/check-token.spec.ts

@@ -1,12 +1,12 @@
-import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo } from 'apollo-angular';
 
 import { DaffAuthInvalidAPIResponseError } from '@daffodil/auth/driver';
 import { MagentoCheckTokenResponse } from '@daffodil/auth/driver/magento';
 
 import { validateCheckTokenResponse as validator } from './check-token';
 
 describe('@daffodil/auth/driver/magento | validateCheckTokenResponse', () => {
-  let response: ApolloQueryResult<MagentoCheckTokenResponse>;
+  let response: Apollo.QueryResult<MagentoCheckTokenResponse>;
 
   beforeEach(() => {
     response = {
@@ -15,8 +15,6 @@ describe('@daffodil/auth/driver/magento | validateCheckTokenResponse', () => {
           email: 'email',
         },
       },
-      loading: null,
-      networkStatus: null,
     };
   });
 

libs/auth/driver/magento/src/validators/check-token.ts

@@ -1,10 +1,10 @@
-import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo } from 'apollo-angular';
 
 import { DaffAuthInvalidAPIResponseError } from '@daffodil/auth/driver';
 
 import { MagentoCheckTokenResponse } from '../queries/public_api';
 
-export const validateCheckTokenResponse = (response: ApolloQueryResult<MagentoCheckTokenResponse>) => {
+export const validateCheckTokenResponse = (response: Apollo.QueryResult<MagentoCheckTokenResponse>) => {
   if (response.data.customer.email) {
     return response;
   } else {

libs/auth/driver/magento/src/validators/generate-token.spec.ts

@@ -1,12 +1,12 @@
-import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo } from 'apollo-angular';
 
 import { DaffAuthInvalidAPIResponseError } from '@daffodil/auth/driver';
 import { MagentoGenerateTokenResponse } from '@daffodil/auth/driver/magento';
 
 import { validateGenerateTokenResponse as validator } from './generate-token';
 
 describe('@daffodil/auth/driver/magento | GenerateToken', () => {
-  let response: ApolloQueryResult<MagentoGenerateTokenResponse>;
+  let response: Apollo.QueryResult<MagentoGenerateTokenResponse>;
 
   beforeEach(() => {
     response = {
@@ -15,8 +15,6 @@ describe('@daffodil/auth/driver/magento | GenerateToken', () => {
           token: 'token',
         },
       },
-      loading: null,
-      networkStatus: null,
     };
   });
 

libs/auth/driver/magento/src/validators/generate-token.ts

@@ -1,10 +1,10 @@
-import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo } from 'apollo-angular';
 
 import { DaffAuthInvalidAPIResponseError } from '@daffodil/auth/driver';
 
 import { MagentoGenerateTokenResponse } from '../queries/public_api';
 
-export const validateGenerateTokenResponse = (response: ApolloQueryResult<MagentoGenerateTokenResponse>) => {
+export const validateGenerateTokenResponse = (response: Apollo.QueryResult<MagentoGenerateTokenResponse>) => {
   if (response.data.generateCustomerToken.token) {
     return response;
   } else {

libs/auth/driver/magento/src/validators/reset-password.spec.ts

@@ -1,20 +1,18 @@
-import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo } from 'apollo-angular';
 
 import { DaffAuthInvalidAPIResponseError } from '@daffodil/auth/driver';
 import { MagentoResetPasswordResponse } from '@daffodil/auth/driver/magento';
 
 import { validateResetPasswordResponse as validator } from './reset-password';
 
 describe('@daffodil/auth/driver/magento | validateResetPasswordResponse', () => {
-  let response: ApolloQueryResult<MagentoResetPasswordResponse>;
+  let response: Apollo.QueryResult<MagentoResetPasswordResponse>;
 
   beforeEach(() => {
     response = {
       data: {
         resetPassword: true,
       },
-      loading: null,
-      networkStatus: null,
     };
   });
 

libs/auth/driver/magento/src/validators/reset-password.ts

@@ -1,10 +1,10 @@
-import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo } from 'apollo-angular';
 
 import { DaffAuthInvalidAPIResponseError } from '@daffodil/auth/driver';
 
 import { MagentoResetPasswordResponse } from '../models/public_api';
 
-export const validateResetPasswordResponse = (response: ApolloQueryResult<MagentoResetPasswordResponse>) => {
+export const validateResetPasswordResponse = (response: Apollo.QueryResult<MagentoResetPasswordResponse>) => {
   if (response.data.resetPassword) {
     return response;
   } else {

libs/auth/driver/magento/src/validators/revoke-token.spec.ts

@@ -1,12 +1,12 @@
-import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo } from 'apollo-angular';
 
 import { DaffAuthInvalidAPIResponseError } from '@daffodil/auth/driver';
 import { MagentoRevokeCustomerTokenResponse } from '@daffodil/auth/driver/magento';
 
 import { validateRevokeTokenResponse as validator } from './revoke-token';
 
 describe('@daffodil/auth/driver/magento | RevokeToken', () => {
-  let response: ApolloQueryResult<MagentoRevokeCustomerTokenResponse>;
+  let response: Apollo.QueryResult<MagentoRevokeCustomerTokenResponse>;
 
   beforeEach(() => {
     response = {
@@ -15,8 +15,6 @@ describe('@daffodil/auth/driver/magento | RevokeToken', () => {
           result: true,
         },
       },
-      loading: null,
-      networkStatus: null,
     };
   });
 

libs/auth/driver/magento/src/validators/revoke-token.ts

@@ -1,10 +1,10 @@
-import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo } from 'apollo-angular';
 
 import { DaffAuthInvalidAPIResponseError } from '@daffodil/auth/driver';
 
 import { MagentoRevokeCustomerTokenResponse } from '../queries/public_api';
 
-export const validateRevokeTokenResponse = (response: ApolloQueryResult<MagentoRevokeCustomerTokenResponse>) => {
+export const validateRevokeTokenResponse = (response: Apollo.QueryResult<MagentoRevokeCustomerTokenResponse>) => {
   if (response.data.revokeCustomerToken.result) {
     return response;
   } else {

libs/auth/driver/magento/src/validators/send-reset-email.spec.ts

@@ -1,20 +1,18 @@
-import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo } from 'apollo-angular';
 
 import { DaffAuthInvalidAPIResponseError } from '@daffodil/auth/driver';
 import { MagentoSendResetEmailResponse } from '@daffodil/auth/driver/magento';
 
 import { validateSendResetEmailResponse as validator } from './send-reset-email';
 
 describe('@daffodil/auth/driver/magento | validateSendResetEmailResponse', () => {
-  let response: ApolloQueryResult<MagentoSendResetEmailResponse>;
+  let response: Apollo.QueryResult<MagentoSendResetEmailResponse>;
 
   beforeEach(() => {
     response = {
       data: {
         requestPasswordResetEmail: true,
       },
-      loading: null,
-      networkStatus: null,
     };
   });
 

libs/auth/driver/magento/src/validators/send-reset-email.ts

@@ -1,10 +1,10 @@
-import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo } from 'apollo-angular';
 
 import { DaffAuthInvalidAPIResponseError } from '@daffodil/auth/driver';
 
 import { MagentoSendResetEmailResponse } from '../models/public_api';
 
-export const validateSendResetEmailResponse = (response: ApolloQueryResult<MagentoSendResetEmailResponse>) => {
+export const validateSendResetEmailResponse = (response: Apollo.QueryResult<MagentoSendResetEmailResponse>) => {
   if (response.data.requestPasswordResetEmail) {
     return response;
   } else {

libs/cart-customer/driver/magento/src/cart.service.spec.ts

@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { InMemoryCache } from '@apollo/client/core';
+import { InMemoryCache } from '@apollo/client';
 import { addTypenameToDocument } from '@apollo/client/utilities';
 import {
   ApolloTestingController,
@@ -78,7 +78,6 @@ describe('@daffodil/cart-customer/driver/magento | DaffMagentoCartCustomerServic
         {
           provide: APOLLO_TESTING_CACHE,
           useValue: new InMemoryCache({
-            addTypename: true,
             possibleTypes: schema.possibleTypes,
           }),
         },