CODEWITHSUNDEEP
angularangular-cli
Jess
Jess

Reputation: 25137

How do I debug or fix ng serve giving a 400 error?

I would like to run my Angular app using ng serve so I can do some development and see the results in real-time.

  1. I run this command: ng serve --ssl --open
  2. It takes a few seconds to compile/build.
  3. It reports back: Date: 2020-07-28T14:01:07.382Z - Hash: ******** - Time: 20167ms ** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ ** i ｢wdm｣: Compiled successfully.
  4. This opens Chrome to https://localhost:4200/
  5. I get an error page shown below.
  6. In developer tools, there is a 400 Bad Request error response. I don't know why. enter image description here

I tried using the --verbose option on ng serve, but I only get verbose build messages - nothing about the request itself or why a GET is a bad request.

My Angular version is:

Angular CLI: 8.3.29
Node: 10.16.3
OS: win32 x64
Angular: 8.2.14

Upvotes: 0

Views: 1396

Answers (1)

Danizavtz
Danizavtz

Reputation: 3280

To serve your application with ssl certificates you need to generate ssl certificates.

You may need to download the openssl command if you do not have it.

In my example I am using self signed certificates just to run an application in development environment (localhost). Just generate new self-signed certificates with command:

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost.key -days 3560 -out localhost.crt

Just answer the questions prompted and it will generate two files a .crt and a .key.

In your angular application root folder copy/paste the two files generated.

After that just run the command:

ng serve --ssl --ssl-key certs/localhost.key --ssl-cert certs/localhost.crt

Now it will serve your application with https enabled. This warning will show, you can ignore (for development environment), click advanced.

insecuremsg

After that just click proceed to localhost

insecuremsg2

And here is the evidence accessing with https:

localhost https enabled

Instructions to access without ssl

The option -ssl is a parameter to serve your application with https protocol. As stated by the angular cli documentation.

In order to fix this, you need to remove the -ssl option from your current ng serve command invocation.

The invocation should be:

ng serve

After that you should access your application without the https. In your application url.

Just open a browser in incognito mode and a new tab (for browser cache clean purpose).

http://localhost:4200

Notice that, the default port is being used (port 4200). You have to access the url according to your current configuration.

As stated by the @Jess (original poster), to ensure no communication problems with your backend, you have to enable CORS policy (in your backend) to your current address being served by the frontend (currently http://localhost:4200).

Upvotes: 1

Related Questions