DEV Community

Cristian Sifuentes
Cristian Sifuentes

Posted on

Fixing npm Invalid Tag Error: ~{STABLE_PROJECT_VERSION} in Angular Schematics

#angular #typescript #webdev #programming

npm-invalid-tag-error-angular.png

Fixing npm Invalid Tag Name Error: ~{STABLE_PROJECT_VERSION} in Angular CLI

When working with Angular schematics or trying to install Angular Material/CDK packages, you might encounter the following error:

npm error Invalid tag name "~{STABLE_PROJECT_VERSION}" of package "@angular/cdk@~{STABLE_PROJECT_VERSION}":
Tags may not have any characters that encodeURIComponent encodes.
Enter fullscreen mode Exit fullscreen mode

This is a common and frustrating error — but it’s also easily fixable. Let’s break it down professionally.

Why This Happens

  • Angular schematics (like ng add @angular/material) use placeholders such as {STABLE_PROJECT_VERSION}.
  • These placeholders are meant to be replaced with a real version like ~19.2.7 during execution.
  • If for some reason the replacement fails (outdated CLI, mismatch in versions, caching issues), npm receives an invalid string and fails.

Example of the Problem 

npm install @angular/cdk@~{STABLE_PROJECT_VERSION}
Enter fullscreen mode Exit fullscreen mode

npm throws:

❌ Invalid tag name "~{STABLE_PROJECT_VERSION}"

Because {STABLE_PROJECT_VERSION} is not a valid npm version.

Professional Solutions

1. Update Angular CLI and Schematics

Outdated Angular CLI versions cause schematics not to correctly process templates.

npm install -g @angular/cli@latest
ng update @angular/cli @angular/core
Enter fullscreen mode Exit fullscreen mode

Make sure your CLI version matches your Angular framework version.

2. Manually Install the Correct Package Version

Skip the broken schematic and install the correct Angular Material/CDK version manually:

npm install @angular/cdk@19.2.7
Enter fullscreen mode Exit fullscreen mode

(Replace 19.2.7 with your actual Angular version.)

Or for Angular Material:

npm install @angular/material@19.2.7
Enter fullscreen mode Exit fullscreen mode

3. Use ng add With Explicit Version

If you still want to use ng add, specify the correct version manually:

ng add @angular/material@19.2.7
Enter fullscreen mode Exit fullscreen mode

This avoids relying on broken placeholders.

4. Clean npm Cache and Reinstall

Sometimes stale caches cause partial schematic processing. Clean up first:

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
Enter fullscreen mode Exit fullscreen mode

Then retry the installation.

Professional Summary Table

Problem Solution
Placeholder ~{STABLE_PROJECT_VERSION} not replaced Update CLI & schematics
npm fails installing CDK Install manually with correct version
Schematic fails during ng add Use ng add @package@version syntax
npm cache issues Clean cache and reinstall

Final Thought

Keeping your Angular CLI and workspace synchronized is crucial for avoiding these kinds of schematic and install failures. Always validate your versions and stay updated with the latest releases to ensure smooth development workflows.

Top comments (0)