storybook: Failed when first time trying out storybook-angular. Could you please provide more comprehensive example for Angular?

I am new to storybook. I have just given storybook-angular a try.

Here is my repo: https://github.com/dereklin/nx-demo-jest/tree/trying-out-storybook

The set up was quick easy.

Then I tried to test (write a story) my tab-nav component.

The first problem:

When I tried to do this

import { TabNavComponent } from '@nx-demo-jest/tab-nav';

‘@nx-demo-jest/tab-nav’ can’t be resolved. Is there an option to map @nx-demo-jest to my libs folder?

So I had to do this instead:

import { TabNavComponent } from '../libs/tab-nav/src/tab-nav/tab-nav.component';

I go to localhost:6006 and click on my story. In the console log, I see

Unhandled Promise rejection: Expected 'styles' to be an array of strings. ; Zone: <root> ; Task: Promise.then ; Value: Error: Expected 'styles' to be an array of strings.
    at assertArrayOfStrings (compiler.js:2522)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:14951)
    at CompileMetadataResolver._getEntryComponentMetadata (compiler.js:15839)
    at compiler.js:15309

It seems like scss is not supported out of the box. How can I enable scss?

So I switch to css for now, just want to see some component UI.

Then I see this error:

compiler.js:485 Uncaught Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<ul class="nav nav-tabs">
  <li *ngFor="let tab of tabs" class="nav-item">

So I need to some how load all the dependencies, one being the RouterModule. How do I do that?

It would be great if there was a more comprehensive example.

Just to rule out simeple mistakes on my part, I forked the storybook project, cd into examples/angular-cli. I ran npm i, then npm run storybook. I got a lot of errors:

ERROR in ./src/stories/component-with-di/di.component.stories.ts
(2,33): error TS2307: Cannot find module '@storybook/addon-knobs/angular'.

ERROR in ./src/stories/custom-metadata.stories.ts
(2,33): error TS2307: Cannot find module '@storybook/addon-knobs/angular'.

ERROR in ./src/stories/addon-knobs.stories.ts
(14,8): error TS2307: Cannot find module '@storybook/addon-knobs/angular'.

ERROR in ./node_modules/@storybook/angular/dist/client/preview/angular/app.token.ts
Module build failed: Error: Typescript emitted no output for C:\Users\Derek\sandbox\storybook\examples\angular-cli\node_modules\@storybook\angular\dist\client\preview\angular\app.token.ts.
You should not need to recompile .ts files in node_modules.
Please contact the package author to advise them to use --declaration --outDir.
More https://github.com/Microsoft/TypeScript/issues/12358
    at successLoader (C:\Users\Derek\sandbox\storybook\examples\angular-cli\node_modules\ts-loader\dist\index.js:47:15)
    at Object.loader (C:\Users\Derek\sandbox\storybook\examples\angular-cli\node_modules\ts-loader\dist\index.js:29:12)
 @ ./node_modules/@storybook/angular/dist/client/preview/angular/helpers.ts 10:18-40
 @ ./node_modules/@storybook/angular/dist/client/preview/render.js
 @ ./node_modules/@storybook/angular/dist/client/preview/index.js
 @ ./node_modules/@storybook/angular/dist/client/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/angular/dist/server/config/polyfills.js ./node_modules/@storybook/angular/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js
....

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 43 (22 by maintainers)

Most upvoted comments

I am not sure, but maybe for Storybook you don’t need to eject the CLI. Try to put webpack.config.js to the .storybook dir and fill there only missing scss things.

igor-dv on Jan 2, 2018

Yeah, we have to provide a better documentation. For now, you can check this: https://github.com/storybooks/storybook/blob/master/examples/angular-cli/src/stories/custom-metadata.stories.ts

And we have a slack

igor-dv on Jan 2, 2018

@eweap, would be great if you can document it in some way to help others 😉

igor-dv on Dec 1, 2018

@dereklin @igor-dv Thanks a lot both of you for your usefull conversation, it helped me to implement storybook in my angular multi apps project with shared lib !

eweap on Dec 1, 2018

@igor-dv I am currently setting up another github repo with I have learned from using the nrwl/nx mono repo and storybook. Once that’s set up I can point out the issues I have faced more clearly.

But the biggest setup pain point is that I have to use webpack to “repeat” what .angular-cli.json does. But to be fair, .angular-cli.json is doing things at the app level. And I want to have one storybook for all the apps and the shared libs.

If .angular-cli can integrate with storybook that would be awesome. Think about unit testing. There is tsconfig.spec.json and there is test.js, and that’s it to set up. And if you are using jest, the test.js is replaced with the jest config.

So imagine for storybook, there is some storybook config, either storybook.js or storybook block in the package.json (similar to jest) and another tsconfig.storybook.json. And then you can just put the stories.ts files alongside the .spec.ts files. That will be great. But again, that might be asking too much 😃

dereklin on Feb 1, 2018

@igor-dv Thanks for the awesome solution! Now I can even import from mapped path in the stories. Here is the working repo: https://github.com/dereklin/nx-demo-jest/tree/storybook-mapped-import

Last time you mention there was going to be more documentation on storybook-angular, do you know if they are available.

If you look at this, https://github.com/dereklin/nx-demo-jest/blob/storybook-mapped-import/apps/playground/src/app/tab-nav.component.sandbox.ts, I can specify custom styles for the component:

styles: [`
    app-tab-nav {
      background-color: yellow;
      font-size: 25px;
    }
  `]

What is the equivalent of that with storybook-angular?

dereklin on Jan 27, 2018

We use lerna and yarn workspaces in Storybook monorepo, afaik it works with symlinks. Maybe @ndelangen can shed more light on this.

Anyway, this change in webpack config worked for me:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

const libPath = path.resolve('libs');

module.exports = {
  module: {
    rules: [
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'node_modules/bootstrap/dist/css/bootstrap.min.css',
        to: 'assets/bootstrap/bootstrap.min.css'
      }
    ]),
    new webpack.NormalModuleReplacementPlugin(/@nx-demo-jest/, function(resource) {
      resource.request = resource.request.replace(/@nx-demo-jest/, libPath);
    })
  ]
};

igor-dv on Jan 27, 2018

Digging through the examples I found this to help me set up the dependencies:

  moduleMetadata: {
    imports: [],
    schemas: [NO_ERRORS_SCHEMA],
    declarations: [],
    providers: []
  },

Now I need to figure out how to supply styles on the story level.

How to use scss

How to use mapped modules

dereklin on Jan 2, 2018