.NET Core 6 with Angular template in VS 2022 is showing only Launching the SPA proxy... Page

Issue

I'm trying to create ASP.NET Core 6 with Angular template I'm using VS 2022 and.net 6 and the npm is the latest release and Node js as well.

I've followed the normal project steps: 1- create a project. 2- ASP.NET Core with angular. 3- Then in the latest step I've chosen Framework as .NET 0.0(Long-term support)

Authentication type as Individual Accounts.
4- then I edit the connection string to match my DB connection string.

but the issue is when I start running the project it's opening up a new browser as demonstrated in the below screenshot with two cmds:

and what I can see in cmd the following error:

      Couldn't start the SPA development server with the command 'npm start'.

Note I tried the suggested solutions in the below links with no luck:

1- link1 2- link2

Solution

Let me answer my question: first of all, you have to check the below references:
1-Tested by AngularFix community admins. 2- GitHub discussion

In my case, the problem was in the path inside the package.json, So the issue was related to angular files. Exactly in the below lines:

    "ng": "ng",
    "prestart": "node aspnetcore-https",
    "start": "run-script-os",
    "start:windows": "ng serve --port 44478 --ssl --ssl-cert C://Users//\"My LAPTOP\"//AppData//Roaming//ASP.NET//https//theproject.pem --ssl-key C://Users//\"My LAPTOP\"//AppData//Roaming//ASP.NET//https//theproject.key",
    "start:default": "ng serve --port 44478 --ssl --ssl-cert $HOME/.aspnet/https/${npm_package_name}.pem --ssl-key $HOME/.aspnet/https/${npm_package_name}.key",
    "build": "ng build",
    "build:ssr": "ng run TheProject:server:dev",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  }

Exactly in below two lines:

"start:windows": "ng serve --port 44478 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
"start:default": "ng serve --port 44478 --ssl --ssl-cert $HOME/.aspnet/https/${npm_package_name}.pem --ssl-key $HOME/.aspnet/https/${npm_package_name}.key",

After checking the path for my computer, I changed it to the below path and I have changed \ to // and it's working fine on my side

"start:windows": "ng serve --port 44478 --ssl --ssl-cert C://Users//\"My LAPTOP\"//AppData//Roaming//ASP.NET//https//theproject.pem --ssl-key C://Users//\"My LAPTOP\"//AppData//Roaming//ASP.NET//https//theproject.key",
    "start:default": "ng serve --port 44478 --ssl --ssl-cert C://Users//\"My LAPTOP\"//AppData//Roaming//ASP.NET//https//theproject.pem --ssl-key C://Users//\"My LAPTOP\"//AppData//Roaming//ASP.NET//https//theproject.key",

Note: the template will redirect you to the home page automatically only if the port number that appeared on the SPA page is matching the port number that exists in the package.json file.

Answered By - Abdulaziz