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?

Radiotelegram

You can ignore this warning. – Dickens

I wonder how all these (upvoted!) answers help fixing a non-issue. – Heterophyllous

Answer 1

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.

Alwitt

Answer 2

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.*

Welby

With that set up you posted, did you get rid off the message? I did the exact same thing and I still get it. I have Angular 13.0.3 – Bossuet

@CarlosTorrecillas Yes, I got rid off the message – Welby

Good, thanks! I found out what happened. During an old migration I had an .angular.json and a angular.json which caused trouble. Now is all good – Bossuet

For me works alot this suggestion. Olny thing I have to add, my serve line i had this option "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { //this option "browserTarget": "clinic-web-ui:build:development" }, – Springbok

Worked for me after update for an ionic project. – Oscular

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

Profitable

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.

Tb

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).

Weigel