Search code examples
angularstorybooknpm-linkangular-storybook

Can't find component templateUrl & stylesUrl in Storybook with a custom Angular Library and NPM Link

I'm trying to create a new Angular 10 library and a separate Storybook as it's documentation and development view. Everything works as expected when the html and styles are inline in the *.component.ts file. But whenever I try to create a new component with separate html and scss files, Storybook gives an error in the console that it can't find the .component.html/.component.scss.

Steps to reproduce

Create a new library

ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib
ng generate component notification --project=my-lib

This generates a component with the follow setup:

  selector: 'lib-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class Notification

Next thing I did was building the library, cd to the dist/my-lib folder and run npm link.

I also created another Angular project which will contain the Storybook project, I followed this tutorial to get it started: https://www.learnstorybook.com/intro-to-storybook/angular/en/get-started/

After finishing the tutorial I added the library I built earlier to the storybook project using npm link my-lib and created a new stories-file in the /src/stories for it. After that I import the component in the stories file like import { NotificationComponent } from 'my-lib'; and everything seems to be good, because it can find the correct component in the linked npm package.

But whenever I run Storybook npm run storybook I get the following errors because it cant find the correct templateUrl and styleUrl:

GET http://localhost:6006/notification.component.html 404 (Not Found)

zone.js:690 Unhandled Promise rejection: Failed to load notification.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load notification.component.html undefined

Now I am wondering if it is possible to separate the html/scss/ts files as I prefer this for readability. If this is possible, how can I make sure that the root of the components when running storybook is not ./? Should I add some sort of a webpack configuration or are there other solutions?

If anything is unclear, feel free to ask and I will try to provide the information as good as I can.

Thank you and kind regards,

Wesley

Solution

  • In my opinion Storybook is not supporting Ivy features yet. If you disable Ivy in the build, projects/lib/tsconfig.lib.json and projects/lib/tsconfig.lib.prod.json, it will work.

    tsconfig.lib.json

    "angularCompilerOptions": {
    "enableIvy": false
  }

    Here's the link to the storybook issue for your reference.