How to Publish Your Angular Library to Local Npm

Photo by Jackie Zhao on Unsplash

When you are developing a library to use in a separate project, instead of publishing with incremental versions to test how it works in your project, you can just get a local version and test with it.

First you have to build your library:

ng build --project=@senoritadev/ngsd-mylibrary --prod

An example output:

senoritadev:myproject senoritadev$ npm run build-ngsd-mylibrary
> senoritadev@0.0.0 build-ngsd-mylibrary
> ng build --project=@senoritadev/ngsd-mylibrary --prod
Building Angular Package
------------------------------------------------------------------------------
Building entry point '@senoritadev/ngsd-mylibrary'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
WARNING: 'BsModalRef' is imported from external module 'ngx-bootstrap' but never used
Bundling to FESM5
WARNING: 'BsModalRef' is imported from external module 'ngx-bootstrap' but never used
Bundling to UMD
WARNING: No name was provided for external module 'ngx-bootstrap' in output.globals – guessing 'ngxBootstrap'
Minifying UMD bundle
Writing package metadata
Built @senoritadev/ngsd-mylibrary
------------------------------------------------------------------------------
Built Angular Package
 - from: /Users/senoritadev/dev/git-workspace/myproject/projects/ngsd-mylibrary
 - to:   /Users/senoritadev/dev/git-workspace/myproject/dist/ngsd-mylibrary

You can see “dist” folder path in output. Copy and navigate to that path.

senoritadev:myproject senoritadev$ cd /Users/senoritadev/dev/git-workspace/myproject/dist/ngsd-mylibrary

In that path, run “npm pack” command:

senoritadev:ngsd-mylibrary senoritadev$ npm pack
npm notice 
npm notice 📦  @senoritadev/ngsd-mylibrary@0.0.6
npm notice === Tarball Contents === 
npm notice 1.0kB  README.md                                    
npm notice 17.4kB bundles/senoritadev-ngsd-mylibrary.umd.js        
npm notice 32.5kB bundles/senoritadev-ngsd-mylibrary.umd.js.map    
npm notice 4.3kB  bundles/senoritadev-ngsd-mylibrary.umd.min.js    
npm notice 17.8kB bundles/senoritadev-ngsd-mylibrary.umd.min.js.map
npm notice 578B   esm5/lib/model/environment.js                
npm notice 1.6kB  esm5/lib/ngsd-mylibrary.component.js           
npm notice 1.5kB  esm5/lib/ngsd-mylibrary.module.js              
npm notice 6.6kB  esm5/lib/ngsd-mylibrary.service.js             
npm notice 5.9kB  esm5/lib/ngsd-mylibrary.util.service.js        
npm notice 1.1kB  esm5/public-api.js                           
npm notice 520B   esm5/senoritadev-ngym-mylibrary.js               
npm notice 439B   esm2015/lib/model/environment.js             
npm notice 1.5kB  esm2015/lib/ngsd-mylibrary.component.js        
npm notice 1.4kB  esm2015/lib/ngsd-mylibrary.module.js           
npm notice 6.3kB  esm2015/lib/ngsd-mylibrary.service.js          
npm notice 5.8kB  esm2015/lib/ngsd-mylibrary.util.service.js     
npm notice 1.1kB  esm2015/public-api.js                        
npm notice 520B   esm2015/senoritadev-ngsd-mylibrary.js            
npm notice 5.4kB  fesm5/senoritadev-ngsd-mylibrary.js              
npm notice 7.0kB  fesm5/senoritadev-ngsd-mylibrary.js.map          
npm notice 4.6kB  fesm2015/senoritadev-ngsd-mylibrary.js           
npm notice 7.1kB  fesm2015/senoritadev-ngsd-mylibrary.js.map       
npm notice 79B    lib/model/environment.d.ts                   
npm notice 145B   lib/ngsd-mylibrary.component.d.ts              
npm notice 43B    lib/ngsd-mylibrary.module.d.ts                 
npm notice 622B   lib/ngsd-mylibrary.service.d.ts                
npm notice 182B   lib/ngsd-mylibrary.util.service.d.ts           
npm notice 666B   package.json                                 
npm notice 223B   public-api.d.ts                              
npm notice 78B    senoritadev-ngsd-mylibrary.d.ts                  
npm notice 2.4kB  senoritadev-ngsd-mylibrary.metadata.json         
npm notice === Tarball Details === 
npm notice name:          @senoritadev/ngsd-mylibrary                 
npm notice version:       0.0.6                                   
npm notice filename:      @senoritadev/ngsd-mylibrary-0.0.6.tgz       
npm notice package size:  28.6 kB                                 
npm notice unpacked size: 136.4 kB                                
npm notice shasum:        e0b81ddbe22803c0d37cd946ff507853be28490a
npm notice integrity:     sha512-k2LJ/q1VqlqIb[...]P9JwjE2iKuYYA==
npm notice total files:   32                                      
npm notice 
senoritadev-ngsd-mylibrary-0.0.6.tgz

To use newly created local version, go to your project’s package.json file and update your dependencies version with “file:lib_path”:

"dependencies": {
"@senoritadev/ngsd-mylibrary": "file:/Users/senoritadev/dev/git-workspace/senoritadev/dist/ngsd-mylibrary/senoritadev-ngsd-mylibrary-0.0.6.tgz"
}

You can read a much more detailed version here, too.

Happy Coding!