Angular

Angular-内存溢出的问题

Posted on 2020-11-27,8 min read

本项目用的是angular6搭建,用动态组件的形式来显示页面,之前遇到过因为内存溢出而导致无法aot的问题,

Angular4以上的该方法都适用

解决方法:手动改写内存上限

修改目录: my-project/node_modules/.bin 找到 ng.cmd :

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\@angular\cli\bin\ng" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --max_old_space_size=8192  "%~dp0\..\@angular\cli\bin\ng" %*
)

修改目录: my-project/node_modules/.bin 找到 ngc.cmd :

@IF EXIST "%~dp0\node.exe" (
 "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %*
) ELSE (
 @SETLOCAL
 @SET PATHEXT=%PATHEXT:;.JS;=;%
 node --max_old_space_size=8192 "%~dp0\..\._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %*
)

至于到底是什么原因导致的内存溢出,还不清楚,只是有如下猜测:

1)文件过多;

2)订阅数据没有销毁占用内存,(看了下订阅的数据很少,应该不是的);

3)因为所有的组件都在一个根目录下(上面说了,用的动态组件没用路由),导致需要编译的组件过多?

暂时还不清楚只能先用设置内存上限的方法来解决,有大神的话望不吝指教;

还有一个问题就是用动态组件的方式,组件都在根目录下,会导致首次加载的时间过长。有奇思妙想请告诉我,哈哈

同时package的时候也需要修改打包时候的内存

package.json

{
  "name": "pms",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0  ",
    "start-un-live": "ng serve --host 0.0.0.0 --port 4201 --live-reload false",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-prod": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --prod --build--optimizer --base-href /pms/"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-brands-svg-icons": "^5.5.0",
    "@fortawesome/free-regular-svg-icons": "^5.5.0",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@grapecity/spread-sheets": "^13.0.5",
    "@grapecity/spread-sheets-angular": "^13.0.5",
    "@grapecity/spread-sheets-resources-zh": "^13.0.5",
    "@ng-bootstrap/ng-bootstrap": "^3.3.1",
    "@ng-select/ng-select": "^2.12.1",
    "@types/mathjs": "^5.0.1",
    "@types/pako": "^1.0.1",
    "angular-progress-http": "^1.0.0",
    "angular-safeguard": "^2.0.1",
    "angular-sortablejs": "^2.7.0",
    "angular2-fontawesome": "^5.2.1",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.1.3",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "echarts": "^4.2.0-rc.2",
    "echarts-gl": "^1.1.1",
    "essence-ng2-print": "^1.1.0",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "install": "^0.12.2",
    "mathjs": "^5.10.0",
    "ng-sidebar": "^8.0.0",
    "ng2-completer": "^2.0.8",
    "ng2-pdf-viewer": "^5.2.4",
    "ng2-smart-table": "^1.3.5",
    "ng2-tree": "^2.0.0-rc.11",
    "ngx-clipboard": "^12.1.2",
    "ngx-color-picker": "^7.1.0",
    "ngx-echarts": "^4.0.1",
    "ngx-print": "^1.2.0-beta.2",
    "ngx-quill": "^7.0.2",
    "ngx-toastr": "^10.0.4",
    "pako": "^1.0.10",
    "primeicons": "^1.0.0",
    "primeng": "^6.1.7",
    "print-js": "^1.0.61",
    "quill": "^1.3.6",
    "rxjs": "~6.2.0",
    "rxjs-compat": "^6.2.2",
    "sortablejs": "^1.8.4",
    "web-animations-js": "^2.3.1",
    "xlsx": "^0.15.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.8.9",
    "@angular/cli": "^6.2.7",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@angularclass/hmr": "^2.1.3",
    "@types/echarts": "^4.1.3",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-md5": "^1.2.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

下一篇: Docker 安装运行 Jenkines →