Angular 5 compile very slow and sometimes runs out of memory

Question

We have a medium-size Angular application. FWIW, Angular4 build produced app.js that is 4MB in size. We do not use Angular-CLI. When we first started it wasn't available; and then it didn't seem like we need it. The build time (npm start) took about 2 minutes.

Now we upgraded to Angular 5. The same build takes over an hour and on some machines reports Out of memory. I noticed in the task manager that the memory allocated by npm indeed goes up to about 2GB before it crashes. Not sure if it's 2GB limit for command-line session, or it runs out of physical memory (you can only conduct so many hour-long experiments :)

Anyway, is there a way to see what is causing npm slowness?

Platform: Windows 10, npm 5.5.1

UPDATE: configuration files:

package.json

{
  "name": "myapp",
  "version": "0.0.1",
  "description": "my awesome application",
  "scripts": {
    "start": "webpack-dev-server --inline --debug --progress --port 10071",
    "test": "karma start",
    "build": "rimraf dist && webpack -p --config ./config/webpack.prod.js --progress --profile --bail"
  },
  "dependencies": {
    "@angular/animations": "^5.0.1",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "^5.0.1",
    "@angular/compiler": "^5.0.1",
    "@angular/core": "^5.0.1",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "^5.0.1",
    "@angular/http": "^5.0.1",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "^5.0.1",
    "@angular/platform-browser-dynamic": "^5.0.1",
    "@angular/platform-server": "^5.0.1",
    "@angular/router": "^5.0.1",
    "@ng-idle/core": "^2.0.0-beta.12",
    "@ng-idle/keepalive": "^2.0.0-beta.12",
    "@types/html2canvas": "^0.5.35",
    "@types/jspdf": "^1.1.31",
    "angular-svg-round-progressbar": "^1.2.0",
    "angular2-moment": "^1.7.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "html2canvas": "^0.5.0-beta4",
    "jquery": "^3.2.1",
    "jspdf": "^1.3.5",
    "jspdf-autotable": "^2.3.2",
    "material-design-icons": "^3.0.1",
    "mime-types": "^2.1.17",
    "moment": "^2.19.1",
    "ngx-perfect-scrollbar": "^5.0.0",
    "primeng": "^5.0.0-rc.0",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^5.0.1",
    "@types/jasmine": "^2.6.2",
    "@types/node": "^8.0.47",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.3.0",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "jasmine-core": "^2.8.0",
    "karma": "^1.7.1",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.5",
    "node-sass": "^4.6.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.16",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "typescript": "^2.6.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4",
    "webpack-merge": "^4.1.1"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "noStrictGenericChecks": true,
        "lib": [ "es2015", "dom" ],
        "typeRoots": [
            "./node_modules/@types"
        ],
        "types": [
            "html2canvas",
            "jasmine",
            "node",
            "jspdf"
        ]
    }
}

Answer 1

Try increasing node.js memory size, with --max-old-space-size={{ memory in MB }}

My build script looks like this

"build": "node --max-old-space-size=3072 ./node_modules/@angular/cli/bin/ng build --aot --prod --build-optimizer && cp .htaccess dist/.htaccess",

Answer 2

The culprit was the version of Typescript. Once I downgraded to 2.5.1, it sped up! Same behavior on Angular 4 and 5.