Angular 18 optimization error when running ng serve configuration

Question

I am doing a Mock App in Angular 18. Following and example I want to simulate production environment.

I just run ng generate environments without any problems and environment.ts files has been generated.

When I want to simulate Production environment and execute the command

ng serve --configuration=production

I got the error

Prebundling has been configured but will not be used because scripts optimization is enabled.

Angular.json is this

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "newstandalone": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/newstandalone",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css",
              "node_modules/ngx-toastr/toastr.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2MB",
                  "maximumError": "5MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kB",
                  "maximumError": "4kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ]
            },
            "qa": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.qa.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "newstandalone:build:production"
            },
            "development": {
              "buildTarget": "newstandalone:build:development"
            },
            "qa": {
              "buildTarget": "newstandalone:build:qa"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "@angular/material/prebuilt-themes/azure-blue.css",
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

How can I solve this issue?

Thanks.

Is this a freshly generated Angular 18 project or an existing project which has been updated to Angular 18? I cannot reproduce this in a fresh Angular 18 app. After running npx @angular/cli@18 new, navigating to the project, running ng generate environments and finally ng serve, I am not getting any warnings or errors. Please edit the question and add your angular.json. — JSON Derulo
– JSON Derulo, Commented Nov 22, 2024 at 7:47
I had this problem on an older application that I upgraded to Angular 18. The problem is in angular.json, where you need to create a new empty application in Angular 18. Then compare the angular.json files and edit it according to the template from the new application in Angular 18. — bmi
– bmi, Commented Feb 4 at 14:53

Clement Cherlin · Accepted Answer · 2025-10-21 13:46:26Z

0

It's a warning, not an error. You don't see that warning when running with the qa or development configurations because they have optimizations disabled.

Prebundling is a dev server speed optimization, so you want prebundling for development and qa configurations.

However, bundle optimizations are much more important than dev server performance for production configurations, so you can safely ignore that warning when running ng serve with a production configuration.

answered Oct 21 at 13:46

Clement Cherlin

5548 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 18 optimization error when running ng serve configuration

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related