Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook can't find `x.component.html` when npm package is built with Angular 10

See original GitHub issue

I have 2 angular projects: app and lib (where app is a traditional angular application, lib is an angular library) Angular library is built using Angular 10 cli (ng build lib), and later installed in app project using npm install lib app.component.ts from app project uses <lib-lib></lib-lib> which comes from lib npm package app.component.stories.ts renders app.component.ts When I do npm run storybook the story of app.component.ts gives me Unhandled Promise rejection: Failed to load lib.component.html

I have created a public repo (https://github.com/sardormajano/sb-issue-repro.git) for you to recreate this issue

To Reproduce Steps to reproduce the behavior:

git clone https://github.com/sardormajano/sb-issue-repro.git
cd sb-issue-repro
npm install
ng build lib
cd dist/lib/ && npm link
cd ../.. && npm link lib - this lets you use the published library from root angular app
npm run storybook
go to http://localhost:6006/ - component is not rendered, error in the console

You might think that it could be an Angular issue (not storybook), but if you do ng serve (instead of npm run storybook), you will see that angular application is able to consume components from lib as expected.

Expected behavior Should render app.component.ts that is consuming lib.component.ts from lib library

Screenshots

Code snippets https://github.com/sardormajano/sb-issue-repro.git

System: System: OS: Windows 10 10.0.18362 CPU: (4) x64 Intel® Core™ i5-7200U CPU @ 2.50GHz Binaries: Node: 12.18.3 - C:\Program Data\node\node.EXE npm: 6.14.6 - C:\Program Data\node\npm.CMD Browsers: Chrome: 84.0.4147.89 Edge: Spartan (44.18362.449.0)

Additional context Package versions might help

"@angular-devkit/build-angular": "~0.1000.4",
"@angular-devkit/build-ng-packagr": "~0.1000.4",
"@angular/cli": "~10.0.4",
"@angular/compiler-cli": "~10.0.5",
"@babel/core": "^7.10.5",
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addon-notes": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/angular": "^5.3.19"

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

Marklbcommented, Jul 27, 2020

@sardormajano I agree, what I proposed is a work around and not a solution.

I started looking into to fixing it, since the code to render the component is available in the source, but haven’t familiarized myself with Ivy’s compilation enough to fix it yet.

0reactions

kossmoboleatcommented, Oct 22, 2020

This issue is still relevant, I spent a few hours looking at the same problem with another angular 10 dependency we’re using. I assume many Angular components will not be compatible with Storybook. Seem that #11576 is the “real” solution.

Top Results From Across the Web

Angular 10 + Storybook + npm package = NG Design System

Our product application is based on Angular. We wanted it to scale such that we can quickly re-use components even across other products....

Can't find component templateUrl & stylesUrl in Storybook with ...

But whenever I try to create a new component with separate html and scss files, Storybook gives an error in the console that...

Introduction to Angular animations

Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and ...

Angular 5 Tutorial: Guide to Your First Angular 5 App - Toptal

html . Here's how Angular knows how to find the component corresponding to our tag. Obviously, templateUrl and styleUrls define where Angular should...

Controls - Storybook - JS.ORG

Auto-generate controls based on React/Vue/Angular/etc. components. Portable. Reuse your interactive stories in documentation, tests, and even in designs.