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.

Answer 3

I faced the same issue. And my fix is:

Go to your angular.json file

Follow the path project->architect->build->configuration->development->optimization to false

Answer 4

This error is just to let you know you shouldn't run ng-serve to launch your application for production, this allows for debug mode and quicker building for testing.

If you would like this error to go you can add the --prod meta-flag this will engage the following build optimization features.

• Ahead-of-Time (AOT) Compilation: pre-compiles Angular component templates.
• Production mode: deploys the production environment which enables production mode.
• Bundling: concatenates your many application and library files into a few bundles.
• Minification: removes excess whitespace, comments, and optional tokens.
• Uglification: rewrites code to use short, cryptic variable and function names.
• Dead code elimination: removes unreferenced modules and much unused code.

But will increase the build time.

Answer 5

Go into your angular.json file

In that file, follow the path projects -> architect -> build -> options Change buildOptimizer to true and add aot to true as well The above commands should work now.

ADDON: If you have that problem with ng serve or ng test, you could try replacing build in step 2 with serve or test respectively (Disclaimer: I have not tested that).