[Bug]: Using webworkers (angular) results in a broken build. All errors being typescript related

[nikhilnxvverma1]

Describe the bug

Needing to use webworkers using a dedicated web worker file requires declaring <reference lib="webworker" /> atop your own code. By making that declaration, the entire build breaks on running npm run storybook. I have created a barebones repo to reproduce the bug

To Reproduce

https://github.com/nikhilnxvverma1/angular-storybook-webworker-bug

System

Environment Info:

  System:
    OS: macOS 11.6.8
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 18.10.0 - /usr/local/bin/node
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 109.0
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-actions: ^6.5.16 => 6.5.16 
    @storybook/addon-essentials: ^6.5.16 => 6.5.16 
    @storybook/addon-interactions: ^6.5.16 => 6.5.16 
    @storybook/addon-links: ^6.5.16 => 6.5.16 
    @storybook/angular: ^6.5.16 => 6.5.16 
    @storybook/builder-webpack5: ^6.5.16 => 6.5.16 
    @storybook/manager-webpack5: ^6.5.16 => 6.5.16 
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

I have made all the relevant configurations in angular.json including the webworkerTsconfig file

[valentinpalkovic]

Hi @nikhilnxvverma1,

Could you try out the latest Storybook 7.0 beta? We have implemented a lot of Angular-specific improvements and bug fixes. https://storybook.js.org/blog/7-0-beta/

[nikhilnxvverma1]

I tried it, and there is noticeable improvement when it comes to booting the server in that the build doesn't necessarily fail there but upon opening the browser, the frontend is filled with error messages on a black screen.

Once again getting rid of <reference lib="webworker" /> and restarting the server fixes the issue

[nikhilnxvverma1]

Is there a way to omit/ignore some of my specific web worker files (perhaps mock it even on storybook side) ? Because doing so will allow me to test my frontend in storybook. My web workers are working just fine in the main app, but its rather just storybook thats complaining about it. In fact: I am not even referring to the web worker file in my frontend code. Thanks

[sheriffMoose]

Hi @nikhilnxvverma1

The errors you are getting is because the storybook tsconfig.json file actually is including all files from src/**/*.ts, that's where your problem lies, I would suggest:

• [ ] upgrade to [email protected]
• [ ] exclude the worker files in .storybook/tsconfig.json like so:

  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../src/**/*.worker.ts"
  ],