JavaScript heap out of memory in angular js gulp sourcemap ngannonate with babel

Question

I am using es6 syntax in my angular JS project but it throws error when run gulp build, search over github and So but some saying this is error due to gulp uglify w

Answer 1

I after struggling for a while i managed to fixed this issue by replacing all ^ by ~ from the all the dependencies in package.json file.

Replace

  "dependencies": {
     "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^7.2.0",
    "@angular/common": "^7.2.0",
    "@angular/compiler": "^7.2.0",
    "@angular/core": "^7.2.0",
    "@angular/forms": "^7.2.0",
    ...

  },

To

  "dependencies": {
     "@agm/core": "~1.0.0-beta.5",
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    ...

  },

I think this issue is because of conflict between different version of libraries.

Answer 2

It could simply be because your app needs a lot of memory to be built; node.js has a hard 1.4Gb limit for memory allocations. See this question on how to increase this limit. Let us know if this helps!

Answer 3

The main cause was uglify plugin which does not work with es6 syntax so did this

1. npm install babel-cli -g

2. bower install gulp-uglify-es --save-dev

3. add plugin and update code in gulp/build.js

var uglify = require('gulp-uglify-es').default;

and wrire belowcinside gulp task

 .pipe($.sourcemaps.init())
    .pipe($.babel({"presets": [ ["es2015", { "modules": false} ] ], compact: false}))
    .pipe($.ngAnnotate())
    .pipe(uglify()).on('error', conf.errorHandler('Uglify'))
    .pipe($.sourcemaps.write('.'))

update package.json

{
  "name": "Project",
  "version": "0.0.0",
  "dependencies": {
    "gulp-open": "^2.0.0"
  },
  "scripts": {
    "test": "gulp test"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.25.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-minify": "^0.2.0",
    "chalk": "~1.1.1",
    "del": "~2.0.2",
    "eslint-plugin-angular": "~0.12.0",
    "estraverse": "~4.1.0",
    "gulp": "~3.9.0",
    "gulp-angular-filesort": "~1.1.1",
    "gulp-angular-templatecache": "~1.8.0",
    "gulp-autoprefixer": "~3.0.2",
    "gulp-babel": "^7.0.0",
    "gulp-babel-minify": "^0.2.0",
    "gulp-clean-css": "~2.0.12",
    "gulp-connect": "^5.0.0",
    "gulp-eslint": "~1.0.0",
    "gulp-filter": "~3.0.1",
    "gulp-flatten": "~0.2.0",
    "gulp-html-replace": "^1.6.1",
    "gulp-htmlmin": "~2.0.0",
    "gulp-inject": "~3.0.0",
    "gulp-less": "~3.0.3",
    "gulp-livereload": "^3.8.1",
    "gulp-load-plugins": "~0.10.0",
    "gulp-merge": "^0.1.1",
    "gulp-ng-annotate": "~1.1.0",
    "gulp-ng-config": "^1.3.1",
    "gulp-order": "^1.1.1",
    "gulp-protractor": "~1.0.0",
    "gulp-rename": "~1.2.2",
    "gulp-replace": "~0.5.4",
    "gulp-rev": "~6.0.1",
    "gulp-rev-replace": "~0.4.2",
    "gulp-size": "~2.0.0",
    "gulp-sourcemaps": "~1.6.0",
    "gulp-uglify": "~1.4.1",
    "gulp-uglify-es": "^0.1.3",
    "gulp-useref": "~1.3.0",
    "gulp-util": "~3.0.6",
    "gulp-war": "^0.1.4",
    "gulp-zip": "^3.2.0",
    "gulp.spritesmith": "^6.3.0",
    "http-proxy-middleware": "~0.9.0",
    "klaw-sync": "^1.1.2",
    "lodash": "~4.0.0",
    "main-bower-files": "~2.9.0",
    "merge-stream": "^1.0.1",
    "path": "^0.12.7",
    "phantomjs": "~1.9.18",
    "uglify-es": "^3.0.28",
    "uglify-save-license": "~0.4.1",
    "wiredep": "~2.2.2"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}