How to use external html and styles in angular libraries with storybook

Question

I have created multiple angular libraries, the angular project does not have an app. If I put the template and styles with in the .component.ts it works fine. But if I use external template and styles, it starts throwing errors and doesn't work in storybook.

Is there anything I have to specify in angular.json? I am stuck at this from long, please help.

Answer 1

Your Angular Library has a file called public-api.ts
In this file, you must specify the files to be published in the build

Example: export * from './lib/dpk-modal.module';

Answer 2

I am building a component library with angular and storybook. There's a great article on how to build custom components library with storybook here.

The issue I faced was, when I used the component in storybook locally, the external HTML and CSS worked fine. But, when I created an NPM package of my library, installed it in my application and tried using it in Storybook, it would never load the external HTML.

I tried to look for a solution for days, and couldn't find anything that helped. Some people suggested updating the public-api.ts file, and some people suggested setting enableResourceInlining to true in tsconfig.lib.json file, under angularCompilerOptions.

In my case that was already true and didn't work. And finally after trying different solutions, I found out that I was missing one param while building the library. All I had to do was, use --prod while building the library.

npm build [your-library-name] --prod

This one param solved the issue, and no one suggested this solution to me. As storybook is not that popular in the market yet, so very few people can help in the community.