6.2.0-beta.4 - Issue when using angular attribute selectors or multiple selectors

[dexster]

Bug

When using attribute selectors or multiple selectors, running the project either does not show the button on the canvas or throws an error

Steps to reproduce

1. Init storybook with 6.2.0 beta 4 in a clean angular cli project (Angular v.11.0.9) - npx sb@next init
2. Use these selectors below in the button.component.ts file
3. npm run storybook

This selector will show no button
selector: 'storybook-button[foo]',

This selector will cause an error
selector: 'storybook-button, storybook-button[foo]',

These work fine in 6.1 which adds the attribute to the button tag automatically

[shilman]

@dexster there's a legacy rendering mode if you need it as a workaround https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-angular-renderer

cc @ThibaudAV

[dexster]

When I add that and run the project I get these errors:

Template parse errors:
Can't bind to 'primary' since it isn't a known property of 'storybook-button'.

1. If 'storybook-button' is an Angular component and it has 'primary' input, then verify that it is part of this module.
2. If 'storybook-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<storybook-button [ERROR ->][primary]="primary" [size]="size" [label]="label" (onClick)="onClick($event)">"): ng:///DynamicModule/DynamicComponent.html@0:18
   Can't bind to 'size' since it isn't a known property of 'storybook-button'.
4. If 'storybook-button' is an Angular component and it has 'size' input, then verify that it is part of this module.
5. If 'storybook-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<storybook-button [primary]="primary" [ERROR ->][size]="size" [label]="label" (onClick)="onClick($event)">"): ng:///DynamicModule/DynamicComponent.html@0:38
   Can't bind to 'label' since it isn't a known property of 'storybook-button'.
7. If 'storybook-button' is an Angular component and it has 'label' input, then verify that it is part of this module.
8. If 'storybook-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
9. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<storybook-button [primary]="primary" [size]="size" [ERROR ->][label]="label" (onClick)="onClick($event)">"): ng:///DynamicModule/DynamicComponent.html@0:52
   'storybook-button' is not a known element:
10. If 'storybook-button' is an Angular component, then verify that it is part of this module.
11. If 'storybook-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<storybook-button [primary]="primary" [size]="size" [label]="label" (onClick)="onClick($event)"></sto"): ng:///DynamicModule/DynamicComponent.html@0:0
    Error: Template parse errors:
    Can't bind to 'primary' since it isn't a known property of 'storybook-button'.
12. If 'storybook-button' is an Angular component and it has 'primary' input, then verify that it is part of this module.
13. If 'storybook-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
14. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<storybook-button [ERROR ->][primary]="primary" [size]="size" [label]="label" (onClick)="onClick($event)">"): ng:///DynamicModule/DynamicComponent.html@0:18
    Can't bind to 'size' since it isn't a known property of 'storybook-button'.
15. If 'storybook-button' is an Angular component and it has 'size' input, then verify that it is part of this module.
16. If 'storybook-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
17. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<storybook-button [primary]="primary" [ERROR ->][size]="size" [label]="label" (onClick)="onClick($event)">"): ng:///DynamicModule/DynamicComponent.html@0:38
    Can't bind to 'label' since it isn't a known property of 'storybook-button'.
18. If 'storybook-button' is an Angular component and it has 'label' input, then verify that it is part of this module.
19. If 'storybook-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
20. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<storybook-button [primary]="primary" [size]="size" [ERROR ->][label]="label" (onClick)="onClick($event)">"): ng:///DynamicModule/DynamicComponent.html@0:52
    'storybook-button' is not a known element:
21. If 'storybook-button' is an Angular component, then verify that it is part of this module.
22. If 'storybook-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<storybook-button [primary]="primary" [size]="size" [label]="label" (onClick)="onClick($event)"></sto"): ng:///DynamicModule/DynamicComponent.html@0:0
    at syntaxError (http://localhost:6006/vendors~main.43b2e4f9e784c924075b.bundle.js:8816:21)
    at TemplateParser.push../node_modules/@angular/compiler/bundles/compiler.umd.js.TemplateParser.parse (http://localhost:6006/vendors~main.43b2e4f9e784c924075b.bundle.js:19515:23)
    at JitCompiler.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitCompiler._parseTemplate (http://localhost:6006/vendors~main.43b2e4f9e784c924075b.bundle.js:35892:41)
    at JitCompiler.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitCompiler._compileTemplate (http://localhost:6006/vendors~main.43b2e4f9e784c924075b.bundle.js:35879:27)
    at http://localhost:6006/vendors~main.43b2e4f9e784c924075b.bundle.js:35822:66
    at Set.forEach ()
    at JitCompiler.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitCompiler._compileComponents (http://localhost:6006/vendors~main.43b2e4f9e784c924075b.bundle.js:35822:23)
    at http://localhost:6006/vendors~main.43b2e4f9e784c924075b.bundle.js:35732:23
    at Object.then (http://localhost:6006/vendors~main.43b2e4f9e784c924075b.bundle.js:8806:56)
    at JitCompiler.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitCompiler._compileModuleAndComponents (http://localhost:6006/vendors~main.43b2e4f9e784c924075b.bundle.js:35731:30)

[shilman]

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-rc.5 containing PR #14230 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.

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.1 containing PR #14313 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease