英文:
Angular build takes too long
问题
I can see that you have provided code and configuration information related to your Angular project, but you haven't specified what kind of help or translation you need. Please provide more context or specific questions, and I'll be happy to assist you.
英文:
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
答案1
得分: 1
我在其中一个components.scss文件中使用了'Calibri'的base64字体，如下所示：
@font-face {
font-family: "Calibri";
font-weight: 100 900;
font-style: normal italic;
src: url(data:application/octet-stream;base64,AAEAAAAVAQAABABQRFNJR68djRoABUaIAAAbWEVCRFQxOa4XAAQb6AAAT5xFQkxDfDVvAAAEa4QAABXgR0RFRgAmBGYABIFkAAAAHkdQT1....);
}
我移除了base64并直接使用了字体文件。
希望这对你有帮助。
英文:
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.
答案2
得分: 0
这可以使用一些额外的信息，所以我会给出一个答案，但也会提出一些后续问题。
你的项目有多大？
你的tsconfig.json进行了优化吗？
外部依赖的加载时间是多少？其中一个可能会导致整个过程变得缓慢。
如果有多个模块，你是否采用了懒加载？
有一件突出的事情肯定会有所帮助，那就是添加构建并行化。
你可以在Angular CLI中启用并行化以加快构建过程。要做到这一点，打开你的angular.json文件，在构建目标的选项部分添加parallel选项：
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"parallel": true, // 添加这一行以启用并行化
// 其他选项...
}
}
}
英文:
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...
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论