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

jonath92 commented 3 days ago

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):

If 'p-button' is an Angular component, then verify that it is included in the '@Component.imports' of this component.

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:

Checkout the git repo: https://github.com/jonath92/angular-storybook-primeng-18
Run npm install (we are using npm: 10.9.0, node v22.11.0)
Run npm start
Open the browser -> you see an (ugly) blue button and no errors in the logs
Run npm run storybook
Open http://localhost:6006/?path=/story/example-button--button. You see no button and an error in the logs
Update the package.json to use primeng version 17.18.12
run npm i
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
[X] No

brandonroberts commented 11 hours ago

Thanks @jonath92. Not sure, but it seems something when the dependency optimization and primeng imports is causing the issue. I updated the optimizeDeps.include and optimizeDeps.exclude arrays to get it working. The updated config is below.

// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { StorybookConfigVite } from '@storybook/builder-vite';
import { UserConfig } from 'vite';

const config: StorybookConfig & StorybookConfigVite = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
  core: {
    builder: {
      name: '@storybook/builder-vite',
      options: {
        viteConfigPath: undefined,
      },
    },
  },
  async viteFinal(config: UserConfig) {
    // Merge custom configuration into the default config
    const { mergeConfig } = await import('vite');
    const { default: angular } = await import('@analogjs/vite-plugin-angular');

    return mergeConfig(config, {
      // Add dependencies to pre-optimization
      optimizeDeps: {
        include: [
          '@storybook/angular',
          '@storybook/angular/dist/client',
          '@angular/compiler',
          '@storybook/blocks',
          'tslib',
          'primeng' // <-- include primeng
        ],
        exclude: ['primeng/button'] // <-- exclude primeng/button
      },
      plugins: [angular({ jit: true, tsconfig: './.storybook/tsconfig.json' })]
    });
  },
};
export default config;

jonath92 commented 3 hours ago

Yes, thank you. That works. For us this is good enough but It's of course not perfect as you have to do it for every primeng component...

This is our non-exhaustive list,

        exclude: [
            "primeng/autocomplete",
            "primeng/button",
            "primeng/dialog",
            "primeng/dropdown",
            "primeng/iconfield",
            "primeng/iftalabel",
            "primeng/inputtext",
            "primeng/inputicon",
            "primeng/inputnumber",
            "primeng/toast",
          ],

So I will let it up to you to decide whether the issue shuld be closed or not.

analogjs / analog