'Angular npm start it is generating browser application bundles although the app is not in production

I am dealing with an unexpected change at the npm start which it makes the server of Angular very slow. During npm start it is coming Generating browser applciation bundles (phase: building)... and it is taking to much time

This is my package.json

    {
  "name": "project-name",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc",
    "proxy": "http://localhost:5000"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.3",
    "@angular/cdk": "^11.0.2",
    "@angular/common": "~11.0.3",
    "@angular/compiler": "~11.0.3",
    "@angular/core": "~11.0.3",
    "@angular/forms": "~11.0.3",
    "@angular/material": "^11.0.2",
    "@angular/platform-browser": "~11.0.3",
    "@angular/platform-browser-dynamic": "~11.0.3",
    "@angular/router": "~11.0.3",
    "@fortawesome/angular-fontawesome": "^0.8.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/jwt-decode": "^2.2.1",
    "angular-cropperjs": "^1.0.2",
    "bootstrap": "^4.5.3",
    "chart.js": "^2.9.3",
    "core-js": "^2.5.4",
    "cropperjs": "^1.5.9",
    "express": "^4.17.1",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "google-libphonenumber": "^3.2.14",
    "intl-tel-input": "^17.0.8",
    "jquery": "^3.5.1",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.20",
    "lodash-es": "^4.17.15",
    "moment": "^2.28.0",
    "ngx-awesome-uploader": "^9.0.7",
    "ngx-bootstrap": "^6.1.0",
    "ngx-color-picker": "^10.1.0",
    "ngx-gravatar": "^10.0.0",
    "ngx-image-cropper": "^3.2.1",
    "ngx-intl-tel-input": "^3.0.3",
    "ngx-quill": "^13.0.1",
    "ngx-sharebuttons": "^8.0.5",
    "popper.js": "^1.16.1",
    "quill": "^1.3.7",
    "quill-emoji": "^0.1.8",
    "quill-image-resize-module": "^3.0.0",
    "quill-mention": "^3.0.0",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1100.3",
    "@angular/cli": "~11.0.3",
    "@angular/compiler-cli": "~11.0.3",
    "@angular/language-service": "~11.0.3",
    "@angular/localize": "^11.0.3",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": ">=4.0 <4.1"
  },
  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.1.",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/username/career.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/username/career/issues"
  },
  "homepage": "https://github.com/username/career#readme"
}

And this is my angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-project-ng": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [
              "lodash",
              "jwt-decode"
           ],
            "aot": true,
            "outputPath": "dist/my-project-ng",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/font-awesome/css/font-awesome.css",
              "./node_modules/intl-tel-input/build/css/intlTelInput.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/cropperjs/dist/cropper.min.css",
              "./node_modules/quill-emoji/dist/quill-emoji.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
              "node_modules/cropperjs/dist/cropper.js",
              "node_modules/popper.js/dist/umd/popper.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "my-project-ng:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-project-ng:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-project-ng:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",

            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "my-project-ng-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "my-project-ng:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "my-project-ng:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "my-project-ng",
  "cli": {
    "analytics": false
  }
}

And then it is adding some weird warnings.

node_modules\canvg\lib\index.es.js depends on '@babel/runtime-corejs3/regenerator'. CommonJS or AMD dependencies can cause optimization bailouts.

I tried as the Angular page it says https://angular.io/guide/build#configuring-commonjs-dependencies but it didnt help, I do see the messages again.

And the time duration of the npm npm start & ng serve it is more than 1 minute.

angularnode-modulespackage.json


Solution 1:[1]

I've same troubles and find solutions. I can try this: First go to node-modules/@ngtools/webpack/src/benchmark.js and change "__esModule" from false to true, after that run ng serve --verbose --no-progress, so you will see how long it takes to load each file during the building process, my problem was with this files:

AngularCompilerPlugin._emit.ng.gatherDiagnostics.ng.getTsSemanticDiagnostics: 4.357s
AngularCompilerPlugin._emit.ng.gatherDiagnostics.ng.getNgSemanticDiagnostics: 43:06.434 (m:ss.mmm)
AngularCompilerPlugin._emit.ng.emit: 1.631s
AngularCompilerPlugin._emit: 43:12.435 (m:ss.mmm)
AngularCompilerPlugin._update._emit: 43:12.437 (m:ss.mmm)
AngularCompilerPlugin._update: 43:22.868 (m:ss.mmm)
AngularCompilerPlugin._make: 43:22.869 (m:ss.mmm)
ngcLoader+C:\Users\Vasil\t\src\main.ts+.ngcLoader.AngularCompilerPlugin: 0.924ms
ngcLoader+C:\Users\Vasil\t\src\main.ts+: 13.404ms
ngcLoader+C:\Users\Vasil\t\src\polyfills.ts+.ngcLoader.AngularCompilerPlugin: 17.251ms

After that I go to tsconfig.json and change "strictTemplates" from true to false, now works fine. I think that the problem come after installing angular material, but not sure.

Solution 2:[2]

I have found the solution for this. You need to add your own dev config and that will resolve the error, also it will show you the source in dev tools.

Here is the link to the answer: 'Generating browser application bundles' message while building dev version

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vasil Shterev
Solution 2 Gaurav Tyagi

Related Questions

How do I install a package with npm with a different/custom module name

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema

Error when deploying react app and it keeps sayings << Plugin "react" was conflicted between "package.json » eslint-config-react-app » >>

AngularFireFunctionsModule from AngularFire Causes build errors

What exactly does "next" mean in package.json dependencies?

Unable to generate Cucumber HTML reports on failure

Why (and How Can I FIx) ESLint import/no-extraneous-dependencies Failures on Installed Packages?

What should I put in the license field of package.json if my code is only for use by the company I work for?

What should I put in the license field of package.json if my code is only for use by the company I work for?

Locked package.json files in Docker container using docker-compose

How to remove folder with npm before build

What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?

Setting homepage in package.json doesn't set PUBLIC_URL on build

Should I update my npm version or use the one node.js provides?

npm equivalent of yarn install --check-files (or yarn check)