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

Question

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

Cero

Answer 1

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.

Cero

I removed the generated template from dotnet new angualr and replaced it with the output of the "ng new" (the "dotnet new angular" template was angualr 14 and the "ng new" is 16 so ... ) the port was not the same ... your Note saved my day !! – Polariscope

as an additional note: The port number appearing on the SPA page is taken from the <SpaProxyServerUrl> element in the .csproj file. In my case, I was converted from running angular under http to https and forgot the s! – Planetstruck

Answer 2

I ran into the problem before. The reason behind the error was the space in my PC User name.

So I fixed it adding \" "\ to my %APPDATA% inside the package.json:

"start": "ng serve --ssl --ssl-cert \"%APPDATA%\"\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key \"%APPDATA%\"\\ASP.NET\\https\\%npm_package_name%.key", "build": "ng build",

Protean

Answer 3

Try running ng build over the ClientApp directory in the terminal to see any error in the Angular app.

In my case, the issue was because of the Node.js version that would be updated.

Boost

I landed on this page and this solution was all I needed to do. – Magnetron

Answer 4

I had this issue running the template from Rider. Rider's terminal was stuck waiting for an answer to this question from the Angular Team:

Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. (y/N)

I had to select yes or no for the project on its first start-up. It worked after that. You could also add this to your angular.json, if you don't want to interact with the terminal:

"cli": {
    "analytics": false
}

Tracietracing