Search code examples
angularangular-cliangular-librarypnpm

creating an angular library and using it locally with my angular project

I'm trying to play with Angular 9, I want to create a project, and then to create a library project and start adding to it generic modules that I want to later publish on GitHub, and use these libraries locally in my project.

Here are the relevant dependencies:

Angular CLI: 9.0.0-rc.6
Node: 13.3.0
OS: MacOS 10.15.2
PNPM: 4.3.0

First I created my angular project with ng new foo and added to it angular material dependencies with ng add @angular/material

Then I created my library project with ng new tuxin-ec --create-application=false and inside of it I executed ng generate library animated-images --prefix=tuxin-ec.

I intend to create like 15 common libraries to be used and published. is this the way to do it? just to do ng generate library for each one?

Currently under projects in the tuxin-ec project directory I have animated-images that contains a module, service and controller, I added the relevant code to the controller html and css.

I want to link tuxin-ec locally in my project. So under tuxin-ec root directory I ran pnpm link and under foo directory I ran pnpm link tuxin-ec.

Under foo in node_modules directory I also have tuxin-ec linked directory.

The problem is that I want to do import {AnimatedImagesModule} from 'tuxin-ec but it complains that it can't find tuxin-ec

what I was able to do is import {AnimatedImagesModule} from 'tuxin-ec/dist/animated-images'

But even then when I try to import AnimatedImagesModule in my project I would get an error that class AnimatedImagesModule is not an angular module.

Is there some way to achieve my intended results?

thank you!

Solution

  • so I googled some for and I found the following wonderful tutorial: https://willtaylor.blog/complete-guide-to-angular-libraries/

    and there I understood that I don't link my entire project, I link specific modules, which actually makes a lot of sense :)

    so inside dist/animated-images directory I should have executed npm link and then in my project i should have done npm link animated-images. that's it! pretty simple!