Scaffolding a Library with Nx

Recently, I published my first package to NPM. It's an extension for @Ngrx/component-store that introduces a loading/error state, referred to as CallState. For any HTTP request or async operation, maintaining a local call state across smart components is a common necessity. This package streamlines that by enabling your service to extend CallStateComponentStore.

Below, I walk through the entire journey—starting from scaffolding in an Nx workspace and finishing with the live NPM release.

Generating the Library

Nx's schematics make this exceptionally straightforward. If it's not already installed, grab the Nx Console extension for VSCode. Then, simply right-click the libs directory and choose nx generate.

panel view from vscode

panel view from Nx console

From the generator options, select @nrwl/angular — library.

Provide a name, configure the importPath, and make sure the publishable option is enabled.

This produces the following Nx schematic command:

npx nx generate @nrwl/angular:library ngrx-callstate --importPath=@tomalaforge --publishable

For anyone comfortable with Nx, all required files are generated automatically, and the library can be referenced anywhere within the workspace without additional setup.

Because the publishable flag was set, a package.json file is created. This metadata file instructs NPM on how the package should be handled and exposed:

  • name and description
  • version
  • keywords: search-friendly terms to surface your package
  • repository: pointer to your source code
  • publishConfig: settings applied at release time
  • peerDependencies: clarifies compatibility. Here, because the library extends @Ngrx/component-store, downstream consumers must have that installed for everything to work.
  • Additional metadata is documented in the official NPM package.json guide.

{
  "name": "@tomalaforge/ngrx-callstate-store",
  "version": "0.0.1",
  "description": "Enhance NgRx component-store by providing a loading/error state",
  "publishConfig": {
    "access": "public"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/tomalaforge/angular-challenges/tree/main/libs/shared/ngrx-callstate-store"
  },
  "keywords": [
    "angular",
    "state",
    "ngrx/component-store"
  ],
  "author": {
    "name": "Thomas Laforge"
  },
  "peerDependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@ngrx/component-store": "^15.0.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  }
}

With the package metadata in place, I added the library's code and wrote a README.md to explain what it does and how to use it.

Compiling the Package

Prior to shipping, the library must be built:

nx build ngrx-callstate-store

The default build output directory for libraries is dist/list/ngrx-callstate-store. We navigate into that folder via the terminal, and the package is ready for its NPM debut.

Releasing to NPM

First, create a user account at https://www.npmjs.com/.

Next, in the terminal, authorize your machine against your NPM profile:

npm adduser

Follow that up by logging in interactively:

npm login

Then, execute the publish command:

npm publish --access=public

Common Snags

  • ENEEDAUTH: This signals a missing login. Revisit the authentication steps and try once more.
  • 402 Payment Required: A paid account may be required, or the package needs to be made public. In that case, ensure --access=public is present in the command or set the PublishConfig property inside package.json.
  • 403 Forbidden: The most likely cause is attempting to republish with the same version number. Increment the version field to resolve it.
  • 404 Not Found — Scope not found: Since I used the scope @tomalaforge, I had to create a matching new organization within my NPM account before the package could be linked correctly.

After resolving those details, the package is live on NPM and available for anyone to install.

If you'd like to try this one, you can find it at https://www.npmjs.com/package/@tomalaforge/ngrx-callstate-store

I hope this guide expands your Angular toolkit. For more content, connect with me on Medium, Twitter, or GitHub.

👉 For hands-on challenges to deepen your Angular and Nx expertise, check out Angular challenges.