Angular feature branch: Storybook Deployer fails

I’ve been playing around with the Angular support branch contributed here.

After building this in a fork and consuming it in a sample Angular CLI app, it looks the Storybook Deployer/ compiled static assets break when deploying to gh-pages.

Test repo: https://github.com/priley86/storybook-ng-wc-demo

Error thrown here upon compilation w/ Storybook deployer inside Webpack module/static output: https://github.com/priley86/storybook-ng-wc-demo/blob/master/storybook-static/static/preview.30bc209875689e205495.bundle.js#L28972

throw new Error("Module parse failed: /Users/priley/GitHub/storybook-ng-wc-demo/node_modules/@storybook/angular/dist/client/preview/angular/index.ts Unexpected character '@' (24:2)\nYou may need an appropriate loader to handle this file type.\n| \n| const getAnnotatedComponent = (meta, component) => {\n|   @Component(meta)\n|   class NewComponent extends component {}\n| ");

Deployed ng storybook w/ error: https://rawgit.com/priley86/storybook-ng-wc-demo/view-storybook/index.html

Appears the Angular preview source here is getting referenced in the static build incorrectly (should be only be used in local/node js runs I’m guessing).

Great job with this and look forward to having this formally released w/ the Storybook family. I’ll be doing some research w/ Web Components/Skate.js alongside Angular & React implementations inside Storybook, and hopefully I’ll be able to share some of this after!

[ndelangen]

Hey @priley86 Can you tell us if things have changed now that the angular work has been merged into the release/3.3 branch?

You can expect an official alpha release real soon! /cc @shilman

[priley86]

@ndelangen apologies for the late response… it’s been a hectic few weeks. I don’t think we will be exploring custom elements/web components for a while (it’s a bit too early for us and we are currently progressing w/ React & Ng only).

Last I checked, the storybook-deployer was working fine w/ 3.3 branch and Ng. The main issue w/ Web Components was the current WC polyfills have some es6 in their distribution which breaks when included w/ the current version of uglify. I had a workaround in my fork for this…

https://github.com/priley86/storybook-angular-demo https://github.com/priley86/storybook-angular

Looks like you are leaving uglify soon enough - so that should help…

I had proposed one other feature recently in Storybook Deployer. Not sure if you are filtering these 😉

Will report back as we progress…