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

Question

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.

The warning is expected if you're using CommonJS or AMD dependencies. — mwilson, Nov 20 '20 at 19:26
You are. It says it in the warning. Looks like you have an npm package called `canvg` that is using one. — mwilson, Nov 20 '20 at 19:34
What about it? `ng start` is somewhat slow. it's definitely not instant. — mwilson, Nov 20 '20 at 20:02
@mwilson Yeah I added why, because it is creating bundles algthough it is not in production. `Browser application bundle generation complete` — TheCoderGuy, Nov 20 '20 at 20:04
Define "creating bundles" Do you mean it's creating a dist with all the bundled modules? — mwilson, Nov 20 '20 at 20:36
@mwilson Yes it is creating a dist with all the bundled modules. — TheCoderGuy, Nov 20 '20 at 22:19
Sounds like you are running the `ng build` command. If you just run `ng start` (not `npm start`) does the dist folder regenerate? — mwilson, Nov 20 '20 at 22:24
Is this issue resolved because facing exact issue. can someone help me out. — Balaraju Polaki, Jun 24 '21 at 16:18

score 0 · Answer 1 · answered Dec 02 '20 at 18:05

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.

I have fixed the problem, my only problem it is that at `npm start` it start to generate bundles for production. — TheCoderGuy, Dec 02 '20 at 20:28
@Abedin.Zhuniqi can you write the answer here and mark it as accepted. — Gaurav Tyagi, Jul 05 '21 at 15:03
@GauravTyagi It is not solved yet. Because still it is generating bundles. — TheCoderGuy, Jul 05 '21 at 15:55

score 0 · Answer 2 · answered Jul 14 '21 at 08:38

0

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

answered Jul 14 '21 at 08:38

Gaurav Tyagi

106
10

Which solution ? I don't see the accepted answer. – TheCoderGuy Jul 15 '21 at 18:19
I have updated my question there is the angular.json – TheCoderGuy Jul 19 '21 at 14:46
I think the answer you are looking for is here https://github.com/MrRio/jsPDF/issues/3144 – Gaurav Tyagi Jul 26 '21 at 14:20
I have fixed that part, only left the part of the angular.json that you said. – TheCoderGuy Jul 26 '21 at 14:52

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

2 Answers2