Angular Academy · Lesson

Publishing to npm

Version and publish your library.

Lesson 4 of 413 steps

Publishing to npm is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

Sharing Your Library with the World

Once built into the Angular Package Format, a library is published to a registry, usually npm, so any project can install it with npm install. This lesson covers versioning and the publish workflow.

Publish the dist Output, Not Source

You publish the built package in dist/<lib>, which contains the generated package.json and compiled bundles, never the raw source project. The build step is what makes it consumable.

ng build ui-kit --configuration production
cd dist/ui-kit

Semantic Versioning

npm packages use semver: MAJOR.MINOR.PATCH. Bump PATCH for fixes, MINOR for backward-compatible features, MAJOR for breaking changes. Consumers rely on this to upgrade safely.

0.0.1 -> 0.1.0   # new feature, no breaks (minor)
0.1.0 -> 0.1.1   # bug fix (patch)
0.1.1 -> 1.0.0   # breaking change (major)

Setting the Version

The version comes from the library's own package.json. Update it before building, or use npm version to bump it consistently.

# inside projects/ui-kit (or use the field directly)
npm version minor   # bumps and tags the version

Logging In to npm

Authenticate with the registry before publishing. npm login stores a token so the publish command is authorized.

npm login
# enter username, password / token, email

Publishing

From the built package directory, run npm publish. npm uploads the package and makes it installable by its name and version.

cd dist/ui-kit
npm publish

Scoped Packages

Organization packages use a scope like @myorg/ui-kit. Scoped packages are private by default on npm; pass --access public to publish them publicly.

npm publish --access public

Installing the Published Library

Consumers then add it like any dependency and import from its public API. Angular finds the FESM bundle and types via the generated package.json.

npm install ui-kit
// then:
import { ButtonComponent } from 'ui-kit';

Pre-Release and Tags

Publish unstable builds under a dist-tag like next so they do not become the default latest. Consumers opt in explicitly.

npm publish --tag next
npm install ui-kit@next

Private Registries

For internal-only libraries, publish to a private registry (npm private packages, GitHub Packages, or Verdaccio) by configuring .npmrc. The publish workflow is the same, only the registry URL and auth differ.

Automate in CI

Mature teams publish from CI on a tagged release: the pipeline builds the library, runs tests, and runs npm publish with a stored token. This avoids manual mistakes and keeps versions traceable to commits.

Quick Check

What do you publish to npm?

Recap

Publish the built dist/<lib> output, versioned with semver. Bump the version, npm login, then npm publish (add --access public for scoped packages, --tag next for pre-releases). Consumers npm install and import from the public API. Automate publishing in CI for reliability.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
38
Lessons
144

Frequently Asked Questions

Is the “Publishing to npm” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Publishing to npm”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

What will I learn in “Publishing to npm”?

Version and publish your library. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

How long does the “Publishing to npm” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Creating a Library with ng generate
  2. Public API and Entry Points
  3. Building with ng-packagr
  4. Publishing to npm
← Back to Angular Academy