fix[angular-gen2]: add angular 19 ssr e2e and fix hydration errors (BuilderIO#3806)

## Description

Fixes the hydration error thrown from angular for using
ngComponentOutlet, adds angular-19-ssr to e2e and an example of how
users can override fetch to use HTTP client from angular that should
help in caching HTTP requests

Jira
https://builder-io.atlassian.net/browse/ENG-7946
https://builder-io.atlassian.net/browse/ENG-7945
https://builder-io.atlassian.net/browse/ENG-7665

_Screenshot_
If relevant, add a screenshot or two of the changes you made.

Author: sidmohanty11

.changeset/strong-meals-fold.md

@@ -74,8 +74,9 @@ jobs:
             'nextjs-sdk-next-app',
             'vue',
             'nuxt',
-            'angular',
-            'angular-ssr',
+            'angular-16',
+            'angular-16-ssr',
+            'angular-19-ssr',
           ]
 
     steps:
@@ -122,8 +123,8 @@ jobs:
             'vue',
             'nuxt',
             'react',
-            'angular',
-            'angular-ssr',
+            'angular-16',
+            'angular-16-ssr',
             'qwik-city',
             'nextjs-sdk-next-app',
             'react-sdk-next-14-app',

.github/workflows/ci.yml

@@ -48,7 +48,7 @@ test.describe('Angular noWrap', () => {
     await testNoWrapPage(page);
   });
   test('correctly ssrs', async ({ browser, packageName }) => {
-    test.skip(!['angular-ssr'].includes(packageName));
+    test.skip(!['angular-16-ssr', 'angular-19-ssr'].includes(packageName));
 
     const context = await browser.newContext({
       javaScriptEnabled: false,

packages/sdks-tests/src/e2e-tests/angular-no-wrap.spec.ts

@@ -49,7 +49,10 @@ test.describe('Custom components', () => {
   });
 
   test('children content are ssred', async ({ browser, packageName }) => {
-    test.skip(!['angular-ssr'].includes(packageName));
+    test.skip(
+      !['angular-16-ssr', 'angular-19-ssr'].includes(packageName),
+      'Only run this for Angular SSR and Angular 19 SSR'
+    );
 
     const context = await browser.newContext({
       javaScriptEnabled: false,

packages/sdks-tests/src/e2e-tests/custom-components.spec.ts

@@ -16,7 +16,11 @@ test.describe('Default styles', () => {
     // dont have .builder-button class
     test.skip(excludeGen1(sdk));
     // TODO: need to check why angular-ssr is failing, working as expected though
-    test.fail(packageName === 'react-native' || packageName === 'angular-ssr');
+    test.fail(
+      packageName === 'react-native' ||
+        packageName === 'angular-16-ssr' ||
+        packageName === 'angular-19-ssr'
+    );
     await page.goto('/default-styles');
 
     const allStyleTags = await page.evaluate(() => {

packages/sdks-tests/src/e2e-tests/default-styles.spec.ts

@@ -23,7 +23,10 @@ test.describe('Hydration', () => {
   });
 
   test('No mismatch on A/B test content', async ({ page, packageName }) => {
-    test.skip(packageName === 'angular-ssr', 'Angular SSR does not support A/B tests');
+    test.skip(
+      packageName === 'angular-16-ssr' || packageName === 'angular-19-ssr',
+      'Angular SSR does not support A/B tests'
+    );
     await page.goto('/ab-test-interactive');
     await page.locator('a').locator('visible=true').first().click({ timeout: 10000 });
     await findTextInPage({ page, text: 'Stack at tablet' });

packages/sdks-tests/src/e2e-tests/hydration.spec.ts

@@ -1,12 +1,12 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from '../helpers/index.js';
+import { test } from '../helpers/index.js';
 
 test.describe('State binding', () => {
   test.describe('inside repeater', () => {
-    test('writing to state should update binding', async ({ page, packageName, sdk }) => {
+    test('writing to state should update binding', async ({ page, packageName }) => {
       test.fail(
-        excludeTestFor({ angular: true }, sdk),
-        'Angular Gen2 event binding not working for other blocks than button.'
+        packageName === 'angular-16-ssr' || packageName === 'angular-16',
+        'Angular Gen2 event binding not working properly for repeat blocks.'
       );
       // hydration errors
       test.fail(packageName === 'gen1-next14-pages');

packages/sdks-tests/src/e2e-tests/state-binding.spec.ts

@@ -95,7 +95,7 @@ export const isSSRFramework = (packageName: ServerName | 'DEFAULT') => {
     packageName === 'react' ||
     packageName === 'svelte' ||
     packageName === 'react-native' ||
-    packageName === 'angular' ||
+    packageName === 'angular-16' ||
     packageName === 'gen1-react';
   return !isNonSSR;
 };

packages/sdks-tests/src/helpers/index.ts

@@ -27,8 +27,9 @@ const serverNameEnumValues = [
   'nuxt',
   'svelte',
   'sveltekit',
-  'angular',
-  'angular-ssr',
+  'angular-16',
+  'angular-16-ssr',
+  'angular-19-ssr',
   'gen1-react',
   'gen1-remix',
   'gen1-next14-pages',
@@ -71,6 +72,7 @@ export const SDK_MAP: Record<ServerName, { sdk: Sdk; gen: Generation }> = {
   'gen1-next14-pages': { sdk: 'oldReact', gen: 'gen1' },
   'gen1-next15-app': { sdk: 'oldReact', gen: 'gen1' },
   'gen1-remix': { sdk: 'oldReact', gen: 'gen1' },
-  angular: { sdk: 'angular', gen: 'gen2' },
-  'angular-ssr': { sdk: 'angular', gen: 'gen2' },
+  'angular-16': { sdk: 'angular', gen: 'gen2' },
+  'angular-16-ssr': { sdk: 'angular', gen: 'gen2' },
+  'angular-19-ssr': { sdk: 'angular', gen: 'gen2' },
 };

packages/sdks-tests/src/helpers/sdk.ts

@@ -4,7 +4,7 @@ import { test, testClickAndVerifyVisibility } from '../helpers/index.js';
 test.describe('Advanced child sub components', () => {
   test('Display two buttons with label Tab 1 and Tab 2', async ({ page, packageName }) => {
     test.skip(
-      !['react', 'angular', 'angular-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
     );
 
     await page.goto('/advanced-child');
@@ -28,7 +28,7 @@ test.describe('Advanced child sub components', () => {
 
   test('Display content for the clicked tab and hide the other', async ({ page, packageName }) => {
     test.skip(
-      !['react', 'angular', 'angular-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
     );
 
     await page.goto('/advanced-child');