[Bug]: Angular Library requires Zone.js

[laurz94]

Describe the bug

When creating an Angular library with Storybook, an error is thrown "NG0908: In this configuration Angular requires Zone.js". Zone is installed in the project.

I initially found this using NX to create a control component library. However, I was able to reproduce it without NX using just Angular libraries.

Reproduction link

https://stackblitz.com/edit/stackblitz-starters-34gmr3qu?file=package.json

Reproduction steps

1. Create a new Angular project
2. Add storybook
3. Create a button (for example) component
4. Add a story for the component
5. Run storybook
6. Observe that as long the component is in the "app," the story is displayed as expected.
7. Create a library for your control
8. Create a component (button, perhaps)
9. Create a story for said component
10. Wire up the angular.json to serve Storybook for the new library
11. Run Storybook for the library
12. Observe the story is not served. Instead, you are presented with an error reading "NG0908: In this configuration Angular requires Zone.js"

System

Angular ^19.1.0
Storybook ^8.6.0

Additional context

I have provided scripts in the package.json of this StackBlitz for an easy comparison. Please run npm run control:storybook to see the error

[emopti-jrufer]

Tracked down the source of the issue.

The following was removed from code/frameworks/angular/src/client/globals.ts.

/** Zone JS is required by Angular itself. */
import 'zone.js';

10bb8e0#diff-0c21257608d891851ff3890160ecd56a82d7f067127b2fdaaed982a446227089

[emopti-jrufer]

As a workaround the import zone.js can be added to the preview.ts|js. For me I just imported my projects polyfills.

// .storybook/preview.ts

import {setCompodocJson} from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';

setCompodocJson(docJson);

import '../src/polyfills';

[laurz94]

@emopti-jrufer Thank you for looking into this. This morning I realized I am starting a new project, so I probably don't need zone.js. So I did some digging and found feature request #28403. Storybook version 8.6.0 (published 2 days ago) now supports zoneless!

If you are running into this issue trying to use Storybook in an Nx Angular library, the solution I found was:

1. In the project.json for the library, add "experimentalZoneless": true, to both the "storybook" and "build-storybook" target.
2. In the test-setup.ts for the library, change

import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';

setupZoneTestEnv({
  errorOnUnknownElements: true,
  errorOnUnknownProperties: true,
});

to

import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';

setupZonelessTestEnv({
  errorOnUnknownElements: true,
  errorOnUnknownProperties: true,
});

nrwl/nx#26362

[shilman]

In the project.json for the library, add "experimentalZoneless": true, to both the "storybook" and "build-storybook" target.

Closing this as fixed in 8.6.0

npx storybook@latest upgrade

[forgantini]

@shilman just tried with 8.6.2 and without explicitly import zone.js into preview.ts the error is still present

[floreauwe]

same here with 8.6.2

[shilman]

@forgantini @floreauwe did you enable zoneless support per the instructions? Can you share a reproduction?

[the-ult]

Same is happening here with 8.6.0
We are not yet zoneless. But this error only just popped up. Worked fine before. So is it correct to import zonejs in the preview.ts or should it be automatically handles when zonejs is defined in the angular.json/project.json?

[forgantini]

@shilman yes i followed what is posted up here but i'm sorry it's a little bit tricky for me to provide a reproduction at now. What i can add is that i'm using ng 18 (maybe the zoneless is still marked as experimental and that causes the issue don't know honestly..) and that obviously we are not yet zoneless

[shilman]

Reopening until we get to the bottom of this. Thanks all for your patience!

[valentinpalkovic]

If you are not on zoneless mode, your angular.json configuration looks something like this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-v16": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "polyfills": [
              // 👇 Zoneless polyfill should exist
              "zone.js"
            ],
            ...
          },
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "browserTarget": "angular-v16:build",
            // ...
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "browserTarget": "angular-v16:build",
           // ...
          }
        }
      }
    }
  }
}

The storybook and the build-storybook executors define a browserTarget, and this browserTarget (in this case angular-v16:build) should have architect.build.options.polyfills = ["zone.js"] defined. Otherwise, your own application would also not import the zone.js polyfill. If this is not defined, either add it there or try to add it in storybook.options.polyfills = ['zone.js'] and in build-storybook.options.polyfills = ['zone.js']

[OmarSalama7]

@valentinpalkovic I am using an angular library in Nx repo and your solution unfortunately did not work, as the builder (or executor in Nx) does not provide polyfills options. Also, adding polyfills to storybook.options does not work as the schema does not provide polyfills. However, when I added "experimentalZoneless": true inside storybook.options it worked fine.

[valentinpalkovic]

I guess for Angular libraries the right call would be to add zone.js to the preview file as mentioned above.