Angular v10 issue with vendor packages

[tsvetomir]

Describe the bug
Storybook does not load ES2015 bundles, leading to runtime errors in Angular v10 applications.

• Starting from v10, Angular ships only ES2015 bundles.
• Libraries typically ship both ES5 and ES2015 modules to remain compatible with Angular v8 and 9 (see APFv8, APFv10).
• Storybook does not include "es2015" entry points (note that supportES2015 is always set to false) in the loader config.
• As a result, Angular is loaded as ES2015 and third-party libraries as ES5, leading to run-time errors such as functions attempting to extend classes.

To Reproduce

1. Clone https://github.com/tsvetomir/ka-grid-1474492
2. Run npm ci in grid-app
3. Run npm run storybook
4. See error in browser console:

ERROR TypeError: class constructors must be invoked with 'new'
    ZoneAwareEventEmitter http://localhost:6006/vendors~main.f0580120cc2429d3a759.bundle.js:111214
    GridComponent http://localhost:6006/vendors~main.f0580120cc2429d3a759.bundle.js:117347
    createClass http://localhost:6006/vendors~main.f0580120cc2429d3a759.bundle.js:62526

The example uses the Kendo UI Grid, but presumably the issue is not limited to it.

Expected behavior
The Storybook app should load ES2015 bundles, whenever available.

Screenshots

System:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 10.19.0 - /usr/local/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.14.5 - ~/.npm/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 77.0.1
    Safari: 13.1.1
  npmPackages:
    @storybook/angular: ^5.3.19 => 5.3.19 

Additional context
The problem can be worked around by overriding the Webpack configuration in .storybook/webpack.config.js.

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = async ({ config }) => {
  const mainFields = [
    'es2015',
    'browser',
    'module',
    'main',
  ];

  config.resolve.plugins = [new TsconfigPathsPlugin({
    configFile: 'tsconfig.app.json',
    mainFields
  })];

  config.resolve.mainFields = mainFields;

  return config;
};

See the fix-modules branch for a runnable demo with this workaround.

Originally reported by @aishwaryasharma14

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[nicolae536]

Same error tried the fix but it's not working... Very poor support for @angular :( @

[shilman]

@nicolae536 Try upgrading to 6.2. We just released a bunch of improvements there.

npx sb upgrade

[nicolae536]

Thanks for tips @shilman . I managed to fix it by changing this -> I also updated to latest version. In storybook/tsconfig.json

{
  "extends": "../src/tsconfig.app.json",
  "compilerOptions": {
    "target": "ES6", -> Target "ES6" seems to work
    "types": [
      "node"
    ]
  },
  "lib": [
    "es2017",
    "es2018",
    "es2019",
    "dom"
  ],
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../src/service-worker/**/*",
    "../src/app/**/*",
    "../src/test-helpers/**/*"
  ],
  "include": [
    "../src/libs/**/*",
  ],
  "files": [
    "./typings.d.ts"
  ]
}