DEV Community

Angular 10 + Storybook + npm package = NG Design System 💜 - Step-by-Step

David Lorenz on October 15, 2020

! The Angular version used here is 10.x tldr - The Task was: Create a UI Kit with Angular that lives on its own and scales to multipl...

Read full post

babatos • Dec 28 '21 • Edited

Hi,
I followed the steps to step "2.6.2. Using the library package through local binding". I installed npm link @your-company/pattern-lib but when I call selector of button component pl-button label="hello"/pl-button in app.component.html .Nothing display . I don't know why :( .Please help me to solve this issue.
my english is not good,please sympathize!

David Lorenz • Dec 28 '21

How does your directory structure look like?

Where is your main repository and where is the library repository? Do you get any error message?

babatos • Dec 29 '21 • Edited

I think I fixed the error by adding ""preserveSymlinks": true" to "option:{ }" in Myapp/Angular.json file. It worked. But I don't understand why It work. Could you explain me, please?

I'm using :
Angular CLI: 13.0.3
Node: 16.13.1
Package Manager: npm 8.1.2
OS: win32 x64

babatos • Dec 29 '21

I get the following error at runtime:

core.mjs:6484 ERROR TypeError: Cannot read properties of null (reading 'bindingStartIndex')
at Module.ɵɵelementStart (:51648/vendor.js:34341)
at ButtonComponent_Template (:51648/main.js:280)
at executeTemplate (:51648/vendor.js:69548)
at renderView (:51648/vendor.js:69277)
at renderComponent$1 (:51648/vendor.js:70812)
at renderChildComponents (:51648/vendor.js:69112)
at renderView (:51648/vendor.js:69311)
at renderComponent$1 (:51648/vendor.js:70812)
at renderChildComponents (:51648/vendor.js:69112)
at renderView (:51648/vendor.js:69311)

I do not see any errors while compiling

babatos • Dec 28 '21

can I put my code to git for you review code?

David Lorenz • Dec 28 '21

Yes

babatos • Dec 28 '21

thanks you very much. This is my github

github.com/tiendatlgbg/LibraryAngu...

messages2raja • Apr 13 '21

Hi,
I followed the steps and created a sample package and published in npm as well, But when I tried to consume the npm package I am getting the following err:
Cannot find module '@messages2raja/pattern-lib' or its corresponding type declarations.ts(2307)..Please help me to solve this issue.

David Lorenz • Apr 29 '21

Can you provide more information where your @messages2raja /pattern-lib is located and how you installed it?

messages2raja • Apr 29 '21

it is located in npmjs.org url: npmjs.com/package/@messages2raja/p...
I have installed it via the npm i command.

David Lorenz • Apr 29 '21

I think i can see the problem. You were probably running npm publish in your root directory right?

That however would publish your whole angular project. What you want instead is build it and then go to dist/pattern-lib and run npm publish from there :)

Hope that solves it. I will enhance the article.

ganicotte • Feb 10 '22 • Edited

Hello David,

Thank you for this outstanding post it helped a lot !
There is one thing that keeps me struggling with : how do you reference your static assets in your Storybook ? Let's say you have an image in '/projects/pattern-lib/src/assets', and your button component uses it. How do you configure your webpack in order to display it on Storybook?

Cheers @activenode :)

Wahyu Fatur Rizki • Dec 5 '22

hi @activenode I got this error please help me:

main.ts:7 Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with EnvironmentInjector#runInContext. Find more at angular.io/errors/NG0203
at injectInjectorOnly (core.mjs:731:15)
at Module.ɵɵinject (core.mjs:742:60)
at Object.MatCommonModule_Factory as useFactory
at Object.factory (core.mjs:8854:38)
at R3Injector.hydrate (core.mjs:8767:35)
at R3Injector.get (core.mjs:8655:33)
at injectInjectorOnly (core.mjs:738:33)
at ɵɵinject (core.mjs:742:60)
at useValue (core.mjs:8435:65)
at R3Injector.resolveInjectorInitializers (core.mjs:8704:17)

Wesley van der Kop • May 8 '21

Hi David,

I would really like to know how to publish the angular framework as web components. Could you provide any information around this?

David Lorenz • Dec 28 '21

dev.to didn't show me this comment. Is this still an open topic for you?

Wesley van der Kop • Dec 28 '21

Hi David,

That's not a problem I figured it out ;)

Paul Leppard • Jul 15 '21 • Edited

Awesome post. Can you post on how to create a component that animates in Storybook? I have created an accordion which utilises Angular Animations to toggle it open and closing but can't make it work in storybook with the animation. It just shows it as always open. Keep up the great work!