Test Angular Ivy in Storybook 6.3! 🙏

storybook-angular-ivy.md

Help us test Angular Ivy in Storybook 6.3! 🙏

Hallelujah Angular users! 🙌 We just merged a last-minute Angular PR for Ivy rendering support in Storybook (huge props to @ThibaudAv @kroeder for making this happen!). This change is available in SB 6.3.0-beta.10 and above.

We're very late in the Storybook 6.3 cycle (RC on Monday!), so we desperately need your testing help. If it's too destabilizing, we need to roll it back and release in 6.4.

Fresh install

If you're installing Storybook from scratch, run this in your project root:

npx sb@next init

If it's an Angular 12 project, you may also need to add webpack as a top-level dependency:

npm install webpack --save-dev

Upgrade

If you're upgrading an older version of Storybook, first run this in your project root:

npx sb@next upgrade --prerelease

Then install storybook-addon-angular-ivy and add it to your .storybook/main.js config:

npm install storybook-addon-angular-ivy --save-dev

// .storybook/main.js
module.exports = {
  addons: ['storybook-addon-angular-ivy'],
};

Testing

We'd greatly appreciate help testing this update on your Angular Ivy projects.

The biggest change is around how we render Angular stories both in the Canvas and Docs views, and whether switching between stories & docs tabs works well in all cases.

To verify your stories are actually getting rendered in Ivy, you can open the browser dev tools & type ng in the console. If it contains more than 3 properties, you're good.

If you upgrade your project and run into problems, please file a GitHub issue on the Storybook repo.

• If the problems are rendering-related please mention "Angular Ivy" in the title
• If the problems are Angular 12 / webpack related, please mention "Angular Webpack5" in the title

Thank you so much for your help to get this out the door.

Next steps

We will do our best to provide rapid support & fixes to Angular Ivy & webpack5-related issues.

We also have an #angular channel in the Storybook Discord, where we can provide interactive support.

If we find any blockers that we don't think we can resolve by the 6.3 target release date (June 23) we may roll back the Ivy changes.

We've tested this in our fairly large Angular library that uses Storybook. We have not found any issues yet!

Thanks for the work to make this happen!

Whatever was causing storybook-addon-angular-ivy to not work with Angular 12 seems to be fixed in our project with this version.

`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 webpack (/Users/jsprague/ets-component-lib/component-library/node_modules/webpack/lib/webpack.js:31:9)
ERR! at Object.start (/Users/jsprague/ets-component-lib/component-library/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:96:18)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/jsprague/ets-component-lib/component-library/node_modules/@storybook/core-server/dist/cjs/dev-server.js:123:28)
ERR! at async buildDevStandalone (/Users/jsprague/ets-component-lib/component-library/node_modules/@storybook/core-server/dist/cjs/build-dev.js:110:31)
ERR! at async Object.buildDev (/Users/jsprague/ets-component-lib/component-library/node_modules/@storybook/core-server/dist/cjs/build-dev.js:152: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 webpack (/Users/jsprague/ets-component-lib/component-library/node_modules/webpack/lib/webpack.js:31:9)
ERR! at Object.start (/Users/jsprague/ets-component-lib/component-library/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:96:18)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/jsprague/ets-component-lib/component-library/node_modules/@storybook/core-server/dist/cjs/dev-server.js:123:28)
ERR! at async buildDevStandalone (/Users/jsprague/ets-component-lib/component-library/node_modules/@storybook/core-server/dist/cjs/build-dev.js:110:31)
ERR! at async Object.buildDev (/Users/jsprague/ets-component-lib/component-library/node_modules/@storybook/core-server/dist/cjs/build-dev.js:152:5)

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

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! component-library@0.0.0 storybook: npm run docs:json && start-storybook -p 6006
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the component-library@0.0.0 storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jsprague/.npm/_logs/2021-06-03T20_13_51_978Z-debug.log
M-AI813031:component-library jsprague$ `

running it as a library

{ "name": "component-library", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "docs:json": "compodoc -p ./tsconfig.json -e json -d .", "storybook": "npm run docs:json && start-storybook -p 6006", "build-storybook": "npm run docs:json && build-storybook" }, "private": true, "dependencies": { "@angular/animations": "~12.0.3", "@angular/common": "~12.0.3", "@angular/compiler": "~12.0.3", "@angular/core": "~12.0.3", "@angular/forms": "~12.0.3", "@angular/platform-browser": "~12.0.3", "@angular/platform-browser-dynamic": "~12.0.3", "@angular/router": "~12.0.3", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.0.3", "@angular/cli": "~12.0.3", "@angular/compiler-cli": "~12.0.3", "@angular/elements": "^12.0.3", "@babel/core": "^7.14.3", "@compodoc/compodoc": "^1.1.11", "@storybook/addon-actions": "^6.3.0-beta.10", "@storybook/addon-essentials": "^6.3.0-beta.10", "@storybook/addon-links": "^6.3.0-beta.10", "@storybook/angular": "^6.3.0-beta.10", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "@webcomponents/custom-elements": "^1.4.3", "babel-loader": "^8.2.2", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.3", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "ng-packagr": "^12.0.3", "protractor": "~7.0.0", "storybook-addon-angular-ivy": "0.0.1", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.2.4" } }

displaying story source in addon docs is still not working on initial render