CODEWITHSUNDEEP
c#angularvisual-studio-2022asp.net-core-6.0
Abdulaziz Burghal
Abdulaziz Burghal

Reputation: 866

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

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:

enter image description here

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

Upvotes: 14

Views: 21091

Answers (4)

Eliezer Charles
Eliezer Charles

Reputation: 11

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.

Upvotes: 1

tarrball
tarrball

Reputation: 2298

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
}

Upvotes: 0

Ritcus
Ritcus

Reputation: 63

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",

Upvotes: 4

Abdulaziz Burghal
Abdulaziz Burghal

Reputation: 866

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.

Upvotes: 11

Related Questions