求助：Visual Studio 2022创建Angular和ASP.NET Core项目时Angular CLI版本报错

• 检查Visual Studio外部Web工具路径优先级
  打开Visual Studio，依次进入「工具」→「选项」→「项目和解决方案」→「Web包管理」→「外部Web工具」，将$(PATH)条目移至列表最顶部，确保Visual Studio优先调用系统全局安装的Node.js和Angular CLI，而非自带版本。

• 清理并重建项目模板缓存

  1. 打开命令提示符，执行以下命令卸载旧的SPA模板：

     dotnet new --uninstall Microsoft.AspNetCore.SpaTemplates
     

  2. 重新安装适配.NET 8的SPA模板（可根据需求指定对应版本）：

     dotnet new --install Microsoft.AspNetCore.SpaTemplates::8.0.0
     

  3. 清理Visual Studio组件缓存：删除%LOCALAPPDATA%\Microsoft\VisualStudio\17.0_<随机字符>\ComponentModelCache目录下的所有文件（17.0对应Visual Studio 2022版本），之后重启Visual Studio。

• 排查工作环境的权限与网络限制

  • 尝试以管理员身份启动Visual Studio，避免权限不足导致无法调用ng.cmd。
  • 检查工作环境的防火墙、组策略或代理设置，确认Visual Studio有权限访问c:\Users\<username>\AppData\Roaming\npm目录以及执行ng命令。
  • 在Visual Studio的「包管理器控制台」执行ng version和where ng，对比命令行的输出结果，确认VS加载的环境变量与系统全局一致。

• 手动整合Angular与ASP.NET Core项目
  如果模板问题无法解决，可绕开VS模板手动创建：

  1. 创建一个空的ASP.NET Core Web应用项目。
  2. 在项目根目录打开命令提示符，执行ng new ClientApp --version 17.3.2创建指定版本的Angular项目。
  3. 修改ASP.NET Core项目的Program.cs，添加SPA配置：

     var builder = WebApplication.CreateBuilder(args);
     builder.Services.AddSpaStaticFiles(configuration =>
     {
         configuration.RootPath = "ClientApp/dist";
     });
     
     var app = builder.Build();
     app.UseStaticFiles();
     app.UseSpaStaticFiles();
     
     app.MapFallbackToFile("index.html");
     app.UseSpa(spa =>
     {
         spa.Options.SourcePath = "ClientApp";
         if (app.Environment.IsDevelopment())
         {
             spa.UseAngularCliServer(npmScript: "start");
         }
     });
     
     app.Run();
     

  4. 保存后启动项目，确认ASP.NET Core与Angular能正常协同工作。

内容的提问来源于stack exchange，提问作者Bytemaniac