ng serve command show an error first and in last compiled successfully

Question

I did my angular project set up locally on my machine with latest angular version, whenever I run the project with CLI command as ng serve, it shows the error first in red color "This is a simple server for use in testing or debugging Angular applications locally. It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!" But in last, all compiled successfully.

My question is, why this error is appearing whenever I run my angular project with "ng serve" on my local machine. please explain in detail. Is there any configuration issues? Do we need to make any changes in our angular set up to avoid such error in the future?

Answer 1

If you get the following error on ng serve

Probably you miss the following configuration into angular.json file:

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 .
 .
 .
 "projects": {
    "my-project": {
        .
        .
        .
        "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                      .
                      .
                      .
                 },
                 "configurations": {
                     "production": {
                        .
                        .
                        .
                      },
                      "development": { // add this block
                        "buildOptimizer": false,
                        "optimization": false,
                        "vendorChunk": true,
                        "extractLicenses": false,
                        "sourceMap": true,
                        "namedChunks": true
                      }
                 },
            }
            .
            .
            .
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "options": {
                  .
                  .
                  .
              },
              "configurations": {
                "production": {
                  "browserTarget": "my-project:build:production"
                },
                "development": { // add this block
                  "browserTarget": "my-project:build:development"
                }
              },
              "defaultConfiguration": "development" // add this line
            },
            .
            .
            .

Tested on angular 13.*

Answer 2

You have done nothing wrong. This is a standard warning. While ng serve is useful for quickly testing/debugging your project, you should never use it in production for any number of security and performance reasons.