Angular 12 Support

Describe

Angular 12 was released a few hours ago, release post, and it looks like Storybook isn’t working with it out of the box for now.

When running yarn storybook, it throws the following error:

info @storybook/angular v6.3.0-alpha.25
info
info => Loading presets
info => Loading 1 config file in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook"
info => Loading 7 other files in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook"
info => Adding stories defined in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook/main.js"
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Cleared cached manager config
ℹ ｢wdm｣: wait until bundle finished:
info => Loading angular-cli config
info => Using angular project "angular" for configuring Storybook
info => Using angular-cli webpack config
info => Using default Webpack4 setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[9] has an unknown property 'mimetype'. These properties are valid:
ERR!    object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
ERR!    -> A rule
ERR!     at Object.webpack [as get] (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
ERR!     at async buildDevStandalone (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
ERR!     at async Object.buildDev (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5)
ERR!  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[9] has an unknown property 'mimetype'. These properties are valid:
ERR!    object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
ERR!    -> A rule
ERR!     at Object.webpack [as get] (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
ERR!     at async buildDevStandalone (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
ERR!     at async Object.buildDev (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

To Reproduce

To bootstrap a fresh Angular 12 + Storybook 6.3 alpha just run npx sb@next repro ./a_directory --framework angular --template angular

System

  System:
    OS: macOS 11.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
    Yarn: 2.4.1 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 87.0
    Safari: 14.1
  npmPackages:
    @storybook/addon-actions: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/addon-docs: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/addon-essentials: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/addon-links: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/angular: ^6.3.0-alpha.25 => 6.3.0-alpha.25

    @angular-devkit/build-angular: ~12.0.0
    @angular/cli: ~12.0.0
    @angular/compiler-cli: ~12.0.0

Additional context

Maybe also related to https://github.com/storybookjs/storybook/issues/14044#issuecomment-839110931?

[MickL]

To be honest I dont want to change my angular.json JUST because of Storybook requires so. Setting "optimization": true is actually the default setting of angular.json according to the docs

[benbrowning]

Anyone having issues after upgrading an existing project to Angular 12 - you may have missed the storybook migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular-12-upgrade Following these steps worked for me.