Primeng 18.0.0-rc.1 not working in storybook using @analogjs/vite-plugin-angular but working in normal Angular app

[jonath92]

Please provide the environment you discovered this bug in.

Stackblitz: https://stackblitz.com/github/jonath92/angular-storybook-primeng-18

Github: https://github.com/jonath92/angular-storybook-primeng-18
(I had problems getting storybook working in Stackblitz. So maybe it is better to checkout the repo locally to reproduce the issue)

Which area/package is the issue in?

vite-plugin-angular

Description

We have a "normal" Angular Application (i.e. we are not yet using Analog) using storybook following this guide: https://analogjs.org/docs/integrations/storybook. With primeng Version 17, it worked without problems but with the new Primeng Version ("18.0.0-rc.1"), we get an error in the browser console:

'p-button' is not a known element (used in the 'ButtonComponent' component template):

1. If 'p-button' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'p-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.

As primeng 18.0.0-rc.1 is working in the normal Angular App in the browser and also working with the weback Angular Storybook, I assume that this is a bug either in @analogjs/vite-plugin-angular or in @storybook/builder-vite ( I have no idea how to figure out which package exactly is making problems...)

Steps to reproduce:

1. Checkout the git repo: https://github.com/jonath92/angular-storybook-primeng-18
2. Run npm install (we are using npm: 10.9.0, node v22.11.0)
3. Run npm start
4. Open the browser -> you see an (ugly) blue button and no errors in the logs
5. Run npm run storybook
6. Open http://localhost:6006/?path=/story/example-button--button. You see no button and an error in the logs
7. Update the package.json to use primeng version 17.18.12
8. run npm i
9. Restart storybook and open http://localhost:6006/?path=/story/example-button--button, you should see an ugly button.

So something in the newest primeng version is confusing storybook but as said above as it is working in the browser, I don't see the issue at primeng side but at the storybook side.

Please provide the exception or error you saw

> 'p-button' is not a known element (used in the 'ButtonComponent' component template):
>1. If 'p-button' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
>2. If 'p-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No