CODEWITHSUNDEEP
angular
High Malloy
High Malloy

Reputation: 11

Reloading changes very slow after update Angular from version 9 to version 15

We have updated our project setup from Angular 9 to Angular 15. The serious problem with this is that reloading changes in the frontend now takes about 40 seconds and with Angular 9 version, changes were reloaded after 3 to 4 seconds. Of course, this slows us down enormously during development. Therefore, the question whether the reloading of changes can also be significantly improved with Angular 15? Reloading changes in the backend works flawlessly. But in the frontend recompiling takes about 40 seconds for each change.

The project is started with 'npm run start-dev' and this runs ng serve for the frontend and starts the backend.

Below are all the relevant files:

package.json

{
  "name": "webapp-projectsetup",
  "version": "0.1.0",
  "scripts": {
    "ng": "ng",
    "start-dev": "concurrently \"npm run client\" \"npm run server-dev\"",
    "start-prod": "concurrently \"npm run client\" \"npm run server-prod\"",
    "client": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "server-dev": "set NODE_ENV=development && ts-node-dev server.ts",
    "server-prod": "set NODE_ENV=production && ts-node server.ts"
  },
  "author": "XXXX",
  "engines": {
    "node": "18.13.0",
    "npm": "9.3.0"
  },
  "private": true,
  "dependencies": {
    "@ag-grid-enterprise/row-grouping": "^27.3.0",
    "@angular/animations": "^15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/forms": "^15.1.0",
    "@angular/localize": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    "@elastic/elasticsearch": "^7.17.0",
    "@fortawesome/angular-fontawesome": "^0.10.2",
    "@fortawesome/fontawesome-free": "^6.0.0",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@popperjs/core": "^2.10.2",
    "ag-grid": "^18.1.2",
    "ag-grid-angular": "^27.3.0",
    "ag-grid-community": "^27.3.0",
    "ag-grid-enterprise": "^27.3.0",
    "bootstrap": "^4.6.2",
    "chart.js": "^2.9.4",
    "chartjs-plugin-datalabels": "^0.7.0",
    "compression": "^1.7.4",
    "concurrently": "^7.6.0",
    "connect-timeout": "^1.9.0",
    "cors": "^2.8.5",
    "elasticsearch": "^16.7.3",
    "express": "^4.18.2",
    "fortawesome": "0.0.1-security",
    "http": "0.0.1-security",
    "log4js": "^6.2.1",
    "moment": "^2.29.4",
    "mssql": "^7.3.5",
    "ng-bootstrap": "^1.6.3",
    "ng-multiselect-dropdown": "^0.3.4",
    "ngx-translate": "0.0.1-security",
    "nocache": "^3.0.4",
    "node-http-proxy": "^0.2.3",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "underscore": "^1.13.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.1.1",
    "@angular/cli": "^15.1.1",
    "@angular/compiler-cli": "^15.1.0",
    "@angular/language-service": "^15.1.0",
    "@types/elasticsearch": "^5.0.40",
    "@types/express": "^4.17.6",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.20.12",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "nodemon": "^2.0.18",
    "protractor": "~7.0.0",
    "ts-node": "^10.9.1",
    "ts-node-dev": "^2.0.0",
    "tslint": "~6.1.0",
    "typescript": "^4.8.4"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "WebAppProjectSetup": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/WebAppProjectSetup",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css",
              "./node_modules/ag-grid-community/dist/styles/ag-grid.css",
              "./node_modules/ag-grid-community/dist/styles/ag-theme-balham.css",
              "./node_modules/ag-grid-community/dist/styles/ag-theme-balham-dark.css",
              "./node_modules/ag-grid-community/dist/styles/ag-theme-blue.css",
              "./node_modules/ag-grid-community/dist/styles/ag-theme-bootstrap.css",
              "./node_modules/ag-grid-community/dist/styles/ag-theme-dark.css",
              "./node_modules/ag-grid-community/dist/styles/ag-theme-fresh.css",
              "./node_modules/ag-grid-community/dist/styles/ag-theme-material.css",
              "./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                }
              },  
              "outputHashing": "none",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            },            
            "loc": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.loc.ts"
                }
              ]
            }                        
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget":"WebAppProjectSetup:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "WebAppProjectSetup:build:production"
            },
            "dev": {
              "browserTarget": "WebAppProjectSetup:build:dev"
            },
            "loc": {
              "browserTarget": "WebAppProjectSetup:build:loc"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "WebAppProjectSetup:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "WebAppProjectSetup:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "WebAppProjectSetup:serve:production"
            }
          }
        }
      }
    }}
  
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "types": [
      "node"
    ],
    "moduleResolution": "node",
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "target": "ES2022",
    "lib": [
      "es2018",
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Would be great if someone could help.

Upvotes: 1

Views: 895

Answers (1)

High Malloy
High Malloy

Reputation: 11

Problem solved. Necessary was the extension of the ng-serve call in the package.json

From:

"client": "ng serve --proxy-config proxy.conf.json"

To:

"client": "ng serve --configuration=dev --hmr --proxy-config proxy.conf.json",

Upvotes: 0

Related Questions