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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nil Seri

Nil Seri

I would love to change the world, but they won’t give me the source code | coding 👩🏼‍💻 | coffee ☕️ | jazz 🎷 | anime 🐲 | books 📚 | drawing 🎨