question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular component without selector breaks story

See original GitHub issue

Describe the bug Attempting to use storybook with an Angular component that does not have a selector results in the following error

'undefined' is not a known element:
1. If 'undefined' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (\"[ERROR ->]<undefined [primary]=\"primary\" [size]=\"size\" [label]=\"label\" (onClick)=\"onClick($event)\"></undefined>\"): ng:///StorybookModule/StorybookWrapperComponent.html@0:0"

To Reproduce Steps to reproduce the behavior:

  1. In any Angular Storybook project, create documentation that uses an angular component without a selector. Like this example project
  2. Serve the storybook documentation, navigate to the component without a selector
  3. Notice the story does not load, and see error in browser console

Expected behavior The story should load 😃 in sb 6.1.X, things work fine. This is only a problem in 6.2.0-alpha.X

Code snippets

@Component({
  // uncomment this to fix error:
  // selector: 'storybook-button',
  template: ` <button>
    {{ label }}
  </button>`,
})
export default class ButtonComponent { }

This is not an issue if you include the selector or create the story like this:

export const button: Story = (args) => ({
  template: `
    <button>
    {{ label }}
  </button>`,
});

System Environment Info: System: OS: macOS 10.15.7 CPU: (12) x64 Intel® Xeon® CPU E5-1650 v2 @ 3.50GHz Binaries: Node: 12.14.1 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.11 - /usr/local/bin/npm Browsers: Chrome: 88.0.4324.96 Firefox: 84.0.1 Safari: 14.0.2 npmPackages: @storybook/addon-actions: ^6.2.0-alpha.19 => 6.2.0-alpha.19 @storybook/addon-essentials: ^6.2.0-alpha.19 => 6.2.0-alpha.19 @storybook/addon-links: ^6.2.0-alpha.19 => 6.2.0-alpha.19 @storybook/angular: ^6.2.0-alpha.19 => 6.2.0-alpha.19 npmGlobalPackages: @storybook/cli: 3.4.10

Additional context This code is probably the culprit

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
ThibaudAVcommented, Feb 17, 2021

@literalpie can you 👀 this PR https://github.com/storybookjs/storybook/pull/13939 ? would this correspond to your use case?

0reactions
shilmancommented, Feb 20, 2021

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.31 containing PR #13939 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular2 : render a component without its wrapping tag
I have looked at ng-content , DynamicComponentLoader , the ViewContainerRef , but they don't seem to provide a solution to this as far...
Read more >
Component testing scenarios - Angular
You'll write a sequence of tests that inspect the value of the <h1> element that wraps the title property interpolation binding. You update...
Read more >
Routable View Components Don't Need Selectors In Angular ...
As you can see, in this view's @Component() meta-data, there is no "selector" property. With routable components, this isn't required. But, it ...
Read more >
ngTemplateOutlet: The secret to customisation - Angular inDepth
ngTemplateOutlet is a powerful tool for creating customisable components. It is used by many Angular libraries to enable users to provide custom templates....
Read more >
Construct a screen out of components - Storybook Tutorials
All without needing to stand up a server or build out screens! ... import { Injectable } from '@angular/core'; import { State, Selector,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found