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

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.

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}

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

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

(Replace 19.2.7 with your actual Angular version.)

Or for Angular Material:

npm install @angular/material@19.2.7

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

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

Then retry the installation.

Professional Summary Table

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.