[Angular] TypeError: Cannot read property 'value' of undefined

[methodus]

Describe the bug
When using a decorator to provide required modules to an angular component, storybook throws the error below:

TypeError: Cannot read property 'value' of undefined
    at extractNgModuleMetadata (VM82 vendors~main.a7bca498af84c7b1b5b6.bundle.js:89276)
    at VM82 vendors~main.a7bca498af84c7b1b5b6.bundle.js:89296
    at Array.some (<anonymous>)
    at getExistenceOfComponentInModules (VM82 vendors~main.a7bca498af84c7b1b5b6.bundle.js:89295)
    at initModule (VM82 vendors~main.a7bca498af84c7b1b5b6.bundle.js:89312)
    at push../node_modules/@storybook/angular/dist/client/preview/angular/helpers.js.exports.renderNgApp (VM82 vendors~main.a7bca498af84c7b1b5b6.bundle.js:89346)
    at render (VM82 vendors~main.a7bca498af84c7b1b5b6.bundle.js:89468)
    at renderMain (VM82 vendors~main.a7bca498af84c7b1b5b6.bundle.js:91789)
    at StoryStore.renderUI (VM82 vendors~main.a7bca498af84c7b1b5b6.bundle.js:91813)
    at StoryStore.emit (VM82 vendors~main.a7bca498af84c7b1b5b6.bundle.js:116462)

To Reproduce
Steps to reproduce the behavior:

1. Create an Angular component
2. Create an Angular module which declares and exports the component and additionally imports other required modules from Angular
3. Create a story with a decorator to provide the module
4. Start storybook and select the story, error is shown on screen and in the console.

Expected behavior
The component is shown as expected

Screenshots
https://ibb.co/zmBBPgv

Code snippets

Module

@NgModule({
  declarations: [
    MapComponent
  ],
  imports: [
    CommonModule,
    NgxMapboxGLModule
  ],
  exports: [
    MapComponent,
    NgxMapboxGLModule
  ]
})
export class MapModule { }

Story

storiesOf('Map|Map', module)
  .addDecorator(
    moduleMetadata({
      imports: [
        MapModule,
      ]
    })
  )
  .add('Simple map without parameters', () => ({
    component: MapComponent
  }))

System:

• OS: Windows10
• Browser: chrome
• Framework: angular 7.2.0
• Version: 5.2.0-alpha.23

[CygnusRoboticus]

I get this on 5.1.9 => 5.0.11; I've switched to 5.1.0-alpha.39 (the version in the demo) for now.

[PhiLhoSoft]

Same here. I tried to upgrade from Storybook 5.0.11 to 5.1.9 with Angular 7.2.15, and got:

Cannot read property 'value' of undefined
TypeError: Cannot read property 'value' of undefined
    at extractNgModuleMetadata (http://localhost:3000/vendors~main.ba9366dab45ada8113b4.bundle.js:78187:69)
    at http://localhost:3000/vendors~main.ba9366dab45ada8113b4.bundle.js:78207:41
    at Array.some (<anonymous>)
    at getExistenceOfComponentInModules (http://localhost:3000/vendors~main.ba9366dab45ada8113b4.bundle.js:78206:20)
    at http://localhost:3000/vendors~main.ba9366dab45ada8113b4.bundle.js:78212:16
    at Array.some (<anonymous>)
    at getExistenceOfComponentInModules (http://localhost:3000/vendors~main.ba9366dab45ada8113b4.bundle.js:78206:20)
    at http://localhost:3000/vendors~main.ba9366dab45ada8113b4.bundle.js:78212:16
    at Array.some (<anonymous>)
    at getExistenceOfComponentInModules (http://localhost:3000/vendors~main.ba9366dab45ada8113b4.bundle.js:78206:20)

in the browser.
It seems to choke on the HttpClientXsrfModule, after getting 3 other modules successfully.

[pascaliske]

This issue seems to be a duplicate of my issue #7106.
I will try to provide a PR for this bug later this day. 🙂

[sparqueur]

Any news ?

I have a pretty similar issue.

When using one NgModule as an entry point for importing all modules, it does not find all components / directives :

Template parse errors: Can't bind to 'ngIf' since it isn't a known property of

tories.addDecorator(
  moduleMetadata({
    imports: [ Module1, Module2, Module3]
  }),
);

==> OK

tories.addDecorator(
  moduleMetadata({
    imports: [ RootModule ]
  }),
);

@NgModule({
  imports: [ Module1, Module2, Module3 ],
  exports: [ Module1, Module2, Module3 ]
})
export class RootModule{}

==> KO

[ManuelRauber]

A current workaround for me seems to be to do:

storiesOf('core | core/MyComponent', module)
  .add('default', () => ({
    component: MyComponent,
    moduleMetadata: {
      declarations: [MyComponent], // Adding this brings it back to live
      imports: [
        TranslateModule.forRoot(),
      ],
    },
  }));

[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!

[MatissJanis]

Please don't close this. Angular is broken currently.

[pascaliske]

FYI: My PR (#7224) for this bug was recently merged into next! 🎉😄

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.9 containing PR #7224 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[Axure]

There are two things I encountered when upgrading from 5.1.11 to 5.2.0-rc.11 which I think is worth writing down.

1. You need to create a tsconfig.json under .storybook, otherwise a compilation error like TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined would be thrown. Requirement for this file seems already mentioned in the documentation, but it was not compulsory on 5.1.11 I believe, as no error was previously reported.
2. Now @storybook/addon-viewport requires your passing the field viewports when adding its parameter viewport. Otherwise there would be a runtime error like Uncaught TypeError: Cannot convert undefined or null to object. No such error was present with 5.1.11.