CODEWITHSUNDEEP
angularangularbuild
Ghasem Khalili
Ghasem Khalili

Reputation: 973

Angular build takes too long

When I want to build my Angular project It takes more than 50 minutes. I searched a lot but did not find any solution...

I used the following command and did not work:

ng build --configuration production --aot --vendor-chunk --common-chunk --delete-output-path --build-optimizer

I Increase node memory limit for the build but does not work:

node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration production

NOTE: I removed the allowedCommonJsDependencies in angular.json but does not affect it.

my angualr.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "remotejobs": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "rj",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/remotejobs",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/844294.txt",
              "src/assets",
              "src/sitemap.xml",
              "src/robots.txt",
              "src/web.config"
            ],
            "allowedCommonJsDependencies": [
              "pdfjs-dist/build/pdf",
              "pdfjs-dist/web/pdf_viewer",
              "lodash.clonedeep",
              "@assets/packages/ck-editor/build/ckeditor.js",
              "flat"
            ],
            "styles": [
              {
                "input": "src/assets/css/bootstrap.rtl.min.css",
                "inject": true
              },
              {
                "input": "src/assets/css/toastr.css",
                "inject": true
              },
              {
                "input": "node_modules/@ng-select/ng-select/themes/default.theme.css",
                "inject": true
              },
              {
                "input": "src/assets/styles/ng-select.scss",
                "inject": true
              },
              {
                "input": "node_modules/ngx-spinner/animations/ball-scale-multiple.css",
                "inject": true
              },
              {
                "input": "src/styles.scss",
                "inject": true
              }
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/assets/styles"
              ]
            },
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "300kb",
                  "maximumError": "600kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "remotejobs:build:production"
            },
            "development": {
              "browserTarget": "remotejobs:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "remotejobs:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false
  }
}

my package.json

{
  "name": "remotejobs",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "transloco:optimize": "transloco-optimize dist/remotejobs/assets/i18n",
    "postbuild": "gulp COMPRESS_JS_FILE",
    "start:dev": "ng serve --port=4200",
    "start": "http-server -a 0.0.0.0 -p 4200 -c-1 dist/remotejobs",
    "build": "ng build --configuration=production",
    "watch": "ng build --watch --configuration=development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@abacritt/angularx-social-login": "^2.1.0",
    "@angular/animations": "^16.1.2",
    "@angular/cdk": "^16.1.4",
    "@angular/common": "^16.1.2",
    "@angular/compiler": "^16.1.2",
    "@angular/core": "^16.1.2",
    "@angular/forms": "^16.1.2",
    "@angular/localize": "^16.1.2",
    "@angular/platform-browser": "^16.1.2",
    "@angular/platform-browser-dynamic": "^16.1.2",
    "@angular/router": "^16.1.2",
    "@ckeditor/ckeditor5-angular": "^6.0.1",
    "@ckeditor/ckeditor5-build-classic": "^38.0.1",
    "@ng-bootstrap/ng-bootstrap": "^15.0.1",
    "@ng-select/ng-select": "^11.0.0",
    "@ngneat/transloco": "^4.3.0",
    "@popperjs/core": "^2.11.8",
    "@progress/kendo-file-saver": "^1.1.1",
    "bootstrap": "^5.3.0",
    "chart.js": "^4.3.0",
    "http-server": "^14.1.1",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "lodash.clonedeep": "^4.5.0",
    "ng-circle-progress": "^1.7.1",
    "ng-recaptcha": "^12.0.1",
    "ng2-pdf-viewer": "^9.1.5",
    "ngx-clipboard": "^16.0.0",
    "ngx-pagination": "^6.0.3",
    "ngx-progressbar": "^11.1.0",
    "ngx-spinner": "^16.0.2",
    "ngx-toastr": "^17.0.2",
    "persian-utilities": "^1.1.1",
    "pretty-print-json": "^2.0.2",
    "rxjs": "~7.8.1",
    "tslib": "^2.5.3",
    "zone.js": "~0.13.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.1",
    "@angular/cli": "^16.1.1",
    "@angular/compiler-cli": "^16.1.2",
    "@ngneat/transloco-optimize": "^3.0.2",
    "@types/ckeditor": "^4.9.10",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~4.3.4",
    "gulp": "^4.0.2",
    "gulp-gzip": "^1.4.2",
    "jasmine-core": "~5.0.1",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

my tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noImplicitAny": false,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ],
    "paths": {
      "@assets/*":[
        "assets/*"
      ],
      "@app/*": [
        "app/*"
      ],
      "@app/core/*": [
        "app/core/*"
      ],
      "@app/shared/*": [
        "app/shared/*"
      ],
      "@app/auth/*": [
        "app/auth/*"
      ],
      "@app/modules/*": [
        "app/modules/*"
      ],
      "@app/employer-panel/*": [
        "app/employer-panel/*"
      ],
      "@app/job-seeker-panel/*": [
        "app/job-seeker-panel/*"
      ],
      "@app/resume/*": [
        "app/resume/*"
      ],
      "@app/website/*": [
        "app/website/*"
      ]
    }
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

any help would be appreciated.

thanks in advance

Upvotes: 0

Views: 1306

Answers (2)

Aazam Heidari
Aazam Heidari

Reputation: 477

I used the base64 font of 'Calibri' in one of my components.scss file. like the following:

@font-face {
font-family: "Calibri";
font-weight: 100 900;
font-style: normal italic;
src: url(data:application/octet-stream;base64,AAEAAAAVAQAABABQRFNJR68djRoABUaIAAAbWEVCRFQxOa4XAAQb6AAAT5xFQkxDfDVvAAAEa4QAABXgR0RFRgAmBGYABIFkAAAAHkdQT1....
}

I removed base64 and use the font file directly. I hope this helps you.

Upvotes: 1

Corey Sutton
Corey Sutton

Reputation: 1015

This could use some additional info, so I will give an answer but will also ask some follow up questions.

How large is your project? Is your tsconfig.json optimized? What is the load time of your external dependencies? One of those could be slowing the entire process to a halt. Are you lazy loading your modules if you have several?

One thing that stands out that will certainly help is adding Build Parallelization.

You can enable parallelization in Angular CLI to speed up the build process. To do this, open your angular.json file and add the parallel option under the options section for the build target:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "parallel": true, // Add this line to enable parallelization
      // Other options...
    }
  }
}

Upvotes: 0

Related Questions