DEV Community

Cover image for VS2022's Angular and ASP.NET Core Template Is Stuck on Angular 19 — Here's the Workaround
Kibria
Kibria

Posted on

VS2022's Angular and ASP.NET Core Template Is Stuck on Angular 19 — Here's the Workaround

#angular #aspnet #visualstudio2022 #dotnet

If you recently updated your Angular CLI and then tried to create a new project using Visual Studio 2022's "Angular and ASP.NET Core" template, you may have hit a wall. The project creation fails, and the error points at ng — even if Angular CLI is clearly installed on your machine.

Visual Studio 2022 error: Version of Angular CLI was not valid

After getting the error, my first instinct was to update Angular CLI to the latest. That brought it to CLI 21.2.3 at the time. Went back to Visual Studio, tried again — still the same error. Updating hadn't helped. A bit of searching later, it pointed to the template itself being the problem.

What's happening

The VS2022 Angular and ASP.NET Core template depends on Angular CLI 19 to scaffold the project. It has not been updated to work with Angular 20 or later.

So if your machine has Angular CLI 20, 21, or newer globally installed — which is likely if you've been keeping up — the template simply can't do its job. It's not a bug in your setup. The template itself is behind.

Microsoft's own documentation acknowledges this:

"There is a compatibility issue with Angular 20.x.x and the Angular and ASP.NET Core template in Visual Studio 2022."
— learn.microsoft.com

The workaround

The approach is two steps: satisfy the template first, then bring your app up to date.

Step 1 — Temporarily install Angular CLI 19 globally

Check your current global CLI version:

ng version
Enter fullscreen mode Exit fullscreen mode

If it's 20 or above, swap it out:

npm uninstall -g @angular/cli
npm install -g @angular/cli@19
Enter fullscreen mode Exit fullscreen mode

Now go back to Visual Studio 2022 and create the project using the "Angular and ASP.NET Core" template. It should work. You may see a warning about your Node version not being officially supported by Angular 19 — that's expected and fine for this step.

Step 2 — Upgrade the Angular app to the current version

The generated project will be on Angular 19.x. Since you're probably running a newer Node version and want to stay current, upgrade the Angular version inside the project — step by step, as Angular's migration guide recommends:

# From the Angular project folder

# 19 → 20
ng update @angular/core@20 @angular/cli@20

# 20 → 21
ng update @angular/core@21 @angular/cli@21
Enter fullscreen mode Exit fullscreen mode

Don't skip versions. Angular's incremental update process handles breaking changes and schematic migrations properly when you go one major at a time.

After both upgrades, the project is on Angular 21 — the current version at the time of writing — and the local toolchain is consistent again.

After you're done

Once the project is created and upgraded, you can restore your global CLI to the latest:

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

Your new project now has its own local CLI version locked in package.json, so the global version won't interfere with it going forward.

TL;DR

  • The Angular and ASP.NET Core template of Visual Studio 2022 hasn't caught up with Angular 20+
  • Downgrade your global CLI to 19 temporarily to unblock project creation
  • Then upgrade the project's Angular version to where you actually want to be
  • Restore your global CLI afterward

The template is the bottleneck here, not your machine. Work around it, then move on.

Top comments (0)