Not reporting errors when using Angular runner

Describe the bug When using the Angular CLI runner (like ng run storybook) instead of the normal npm run storybook there is just an cryptic message when I have errors within a story when launching Storybook

To Reproduce I created a demo repository using just an Angular init and added Storybook. You can access it here: https://github.com/emrox/angular-error-reporting

• in https://github.com/emrox/angular-error-reporting/commit/39e6f37cd500b00b26d64f33eb7de28aa6a12408 I added a simple import error.

• when you checkout this commit and run Storybook with npm run storybook you can see an output like this:

   {
     rawMessage: "ERROR TS2307: Cannot find module 'not/exiting/file' or its corresponding type declarations.",
     message: '\x1B[1m\x1B[31mERROR in \x1B[39m\x1B[22m\x1B[1m\x1B[36m/path/to/repository/src/stories/Button.stories.ts(4,31)\x1B[39m\x1B[22m\x1B[1m\x1B[31m:\x1B[39m\x1B[22m\n' +
    "\x1B[90mTS2307: \x1B[39mCannot find module 'not/exiting/file' or its corresponding type declarations.",
     location: { line: 4, character: 31 },
     file: '/path/to/repository/src/stories/Button.stories.ts'
   }
  

• when I add the ng config into angular.json file (done in https://github.com/emrox/angular-error-reporting/commit/63e1d07b268c2f5862dfe2fbce3e2ad00c3384f1) and run ng serve storybook, you just get a very cryptic error message

  Unknown error: TypeError: Converting circular structure to JSON
      --> starting at object with constructor 'Compiler'
      --- property 'root' closes the circle
  

  Here I would expect to get the same error as I get with npm run storybook

• Also both variants do not report errors with an already running Angular Storybook dev server when adding an error. (Then the component is just not shown in Storybook)

System

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.4.1 - /opt/homebrew/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 7.18.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0.2
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-actions: ^6.3.4 => 6.3.4
    @storybook/addon-essentials: ^6.3.4 => 6.3.4
    @storybook/addon-links: ^6.3.4 => 6.3.4
    @storybook/angular: ^6.3.4 => 6.3.4
    @storybook/builder-webpack5: ^6.3.4 => 6.3.4
    @storybook/manager-webpack5: ^6.3.4 => 6.3.4
  npmGlobalPackages:
    @storybook/addon-docs: 6.3.0-rc.11
    @storybook/root: 6.3.0-rc.11

prob also interesting:

    "@angular/core": "^12.0.5",

[shilman]

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.37 containing PR #15978 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

[ThibaudAV]

if it’s the same problem. (error interception problem with angular builder) I had written it down to invest in it later, but now I’ll look at it sooner 😃

i think we need to discover this object to get error.

https://github.com/storybookjs/storybook/blob/next/app/angular/src/builders/start-storybook/index.ts#L84

with this path error.compilation.errors i’ve a better error :

{
    rawMessage: "ERROR TS2307: Cannot find module 'not/exiting/file' or its corresponding type declarations.",
    message: '\x1B[1m\x1B[31mERROR in \x1B[39m\x1B[22m\x1B[1m\x1B[36m/Users/thibaud/sb-workspace/angular-error-reporting/src/stories/Button.stories.ts(4,31)\x1B[39m\x1B[22m\x1B[1m\x1B[31m:\x1B[39m\x1B[22m\n' +
      "\x1B[90mTS2307: \x1B[39mCannot find module 'not/exiting/file' or its corresponding type declarations.",
    location: { line: 4, character: 31 },
    file: '/Users/thibaud/sb-workspace/angular-error-reporting/src/stories/Button.stories.ts'
  }

I will see to propose PR quickly