fix(devtools): do not throw if devtools are unavailable

apps/demo/e2e/devtools.spec.ts

@@ -1,98 +1,112 @@
 import { test, expect } from '@playwright/test';
 import { Action } from '@ngrx/store';
 
-test('has title', async ({ page }) => {
-  await page.goto('');
+test.describe('DevTools', () => {
+  test('DevTools do not throw an error when not available', async ({
+    page,
+  }) => {
+    await page.goto('');
+    const errors = [];
+    page.on('pageerror', (error) => errors.push(error));
+    await page.getByRole('link', { name: 'DevTools' }).click();
+    await expect(
+      page.getByRole('row', { name: 'Go for a walk' })
+    ).toBeVisible();
+  });
 
-  await page.evaluate(() => {
-    window['devtoolsSpy'] = [];
+  test('DevTools are syncing state changes', async ({ page }) => {
+    await page.goto('');
 
-    window['__REDUX_DEVTOOLS_EXTENSION__'] = {
-      connect: () => {
-        return {
-          send: (data: Action) => {
-            window['devtoolsSpy'].push(data);
-          },
-        };
-      },
-    };
-  });
-  await page.getByRole('link', { name: 'DevTools' }).click();
-  await page
-    .getByRole('row', { name: 'Go for a walk' })
-    .getByRole('checkbox')
-    .click();
-  await page
-    .getByRole('row', { name: 'Exercise' })
-    .getByRole('checkbox')
-    .click();
+    await page.evaluate(() => {
+      window['devtoolsSpy'] = [];
 
-  await expect(
-    page.getByRole('region', { name: 'Go for a walk' })
-  ).toBeVisible();
-  await expect(page.getByRole('region', { name: 'Exercise' })).toBeVisible();
+      window['__REDUX_DEVTOOLS_EXTENSION__'] = {
+        connect: () => {
+          return {
+            send: (data: Action) => {
+              window['devtoolsSpy'].push(data);
+            },
+          };
+        },
+      };
+    });
+    await page.getByRole('link', { name: 'DevTools' }).click();
+    await page
+      .getByRole('row', { name: 'Go for a walk' })
+      .getByRole('checkbox')
+      .click();
+    await page
+      .getByRole('row', { name: 'Exercise' })
+      .getByRole('checkbox')
+      .click();
 
-  await page
-    .getByRole('row', { name: 'Go for a walk' })
-    .getByRole('checkbox')
-    .click();
-  await page
-    .getByRole('row', { name: 'Exercise' })
-    .getByRole('checkbox')
-    .click();
+    await expect(
+      page.getByRole('region', { name: 'Go for a walk' })
+    ).toBeVisible();
+    await expect(page.getByRole('region', { name: 'Exercise' })).toBeVisible();
 
-  await expect(
-    page.getByRole('region', { name: 'Go for a walk' })
-  ).toBeHidden();
-  await expect(page.getByRole('region', { name: 'Exercise' })).toBeHidden();
+    await page
+      .getByRole('row', { name: 'Go for a walk' })
+      .getByRole('checkbox')
+      .click();
+    await page
+      .getByRole('row', { name: 'Exercise' })
+      .getByRole('checkbox')
+      .click();
 
-  const devtoolsActions = await page.evaluate(() => window['devtoolsSpy']);
+    await expect(
+      page.getByRole('region', { name: 'Go for a walk' })
+    ).toBeHidden();
+    await expect(page.getByRole('region', { name: 'Exercise' })).toBeHidden();
 
-  expect(devtoolsActions).toEqual([
-    {
-      type: 'add todo',
-    },
-    {
-      type: 'select todo 1',
-    },
-    {
-      type: 'Store Update',
-    },
-    {
-      type: 'Store Update',
-    },
-    {
-      type: 'Store Update',
-    },
-    {
-      type: 'select todo 4',
-    },
-    {
-      type: 'Store Update',
-    },
-    {
-      type: 'Store Update',
-    },
-    {
-      type: 'Store Update',
-    },
-    {
-      type: 'select todo 1',
-    },
-    {
-      type: 'Store Update',
-    },
-    {
-      type: 'Store Update',
-    },
-    {
-      type: 'select todo 4',
-    },
-    {
-      type: 'Store Update',
-    },
-    {
-      type: 'Store Update',
-    },
-  ]);
+    const devtoolsActions = await page.evaluate(() => window['devtoolsSpy']);
+
+    expect(devtoolsActions).toEqual([
+      {
+        type: 'add todo',
+      },
+      {
+        type: 'select todo 1',
+      },
+      {
+        type: 'Store Update',
+      },
+      {
+        type: 'Store Update',
+      },
+      {
+        type: 'Store Update',
+      },
+      {
+        type: 'select todo 4',
+      },
+      {
+        type: 'Store Update',
+      },
+      {
+        type: 'Store Update',
+      },
+      {
+        type: 'Store Update',
+      },
+      {
+        type: 'select todo 1',
+      },
+      {
+        type: 'Store Update',
+      },
+      {
+        type: 'Store Update',
+      },
+      {
+        type: 'select todo 4',
+      },
+      {
+        type: 'Store Update',
+      },
+      {
+        type: 'Store Update',
+      },
+    ]);
+  });
 });

libs/ngrx-toolkit/src/lib/devtools/internal/devtools-syncer.service.ts

@@ -63,7 +63,7 @@ export class DevtoolsSyncer implements OnDestroy {
 
     const isToolkitAvailable = Boolean(window.__REDUX_DEVTOOLS_EXTENSION__);
     if (!isToolkitAvailable) {
-      throw new Error(
+      console.info(
         'NgRx Toolkit/DevTools: Redux DevTools Extension is not available.'
       );
     }

libs/ngrx-toolkit/src/lib/devtools/tests/connecting.spec.ts

@@ -16,9 +16,10 @@ describe('connect & send', () => {
     expect(connectSpy).toHaveBeenCalledTimes(0);
   });
 
-  it('should not connect if it runs on the server', () => {
-    const { connectSpy } = setupExtensions(false);
-    expect(connectSpy).toHaveBeenCalledTimes(0);
+  it('should not throw if it runs on the server', () => {
+    setupExtensions(true, false);
+    const Store = signalStore({ providedIn: 'root' }, withDevtools('flight'));
+    expect(() => TestBed.inject(Store)).not.toThrowError();
   });
 
   it('should only send when store is initialized', () => {