Angular 10 run ng serve get webpack, memory errors

Question

I've simply tried to create an Angular application on my MacOS machine.

 npm install -g @angular/cli
 ng new my-app
 cd my-app
 ng serve

I have used nvm use 12 for this project (although I have 14 globally)

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.1.4
Node: 12.16.3
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1001.4
@angular-devkit/core         10.1.4
@angular-devkit/schematics   10.1.4
@schematics/angular          10.1.4
@schematics/update           0.1001.4

package.json file

{
  "sideEffects": false,
  "name": "ng-satire-site",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.4",
    "@angular/common": "~10.1.4",
    "@angular/compiler": "~10.1.4",
    "@angular/core": "~10.1.4",
    "@angular/forms": "~10.1.4",
    "@angular/platform-browser": "~10.1.4",
    "@angular/platform-browser-dynamic": "~10.1.4",
    "@angular/router": "~10.1.4",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1001.4",
    "@angular/cli": "~10.1.4",
    "@angular/compiler-cli": "~10.1.4",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

When I execute ng serve, localhost:4200 will hang until it fails after 1 minute with the following error

92% additional asset processing copy-webpack-plugin
<--- Last few GCs --->

[22997:0x102a7f000]    79239 ms: Mark-sweep 2031.0 (2063.4) -> 2027.7 (2063.9) MB, 1974.0 / 3.2 ms  (average mu = 0.135, current mu = 0.015) allocation failure scavenge might not succeed
[22997:0x102a7f000]    80618 ms: Mark-sweep 2033.6 (2063.9) -> 2027.6 (2081.7) MB, 1360.3 / 3.4 ms  (average mu = 0.084, current mu = 0.013) allocation failure scavenge might not succeed


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x10097cc39]
    1: StubFrame [pc: 0x10097dcd3]
Security context: 0x2d29bc4408d1 <JSObject>
    2: normalize [0x2d29ac580511] [path.js:~1004] [pc=0x26c80fc5e45b](this=0x2d291c73fe89 <Object map = 0x2d29a4a2f7d9>,0x2d2931037269 <String[70]: /Users/da/Downloads/CIVIL WAR GENERALS 2/CWG2/CWG2/SCENARIO/WINC2H.MLB>)
    3: /* anonymous */ [0x2d293e871039] [/Users/da/*code*/ng-tests/ng-satire-app/node_modules/chokidar/lib/...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20201002.111236.22997.0.001.json
Node.js report completed
 1: 0x1010285f9 node::Abort() (.cold.1) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 2: 0x10008634d node::FatalError(char const*, char const*) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 3: 0x10008648e node::OnFatalError(char const*, char const*) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 4: 0x100187c07 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 5: 0x100187ba7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 6: 0x100315955 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 7: 0x1003171ca v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 8: 0x100313bfc v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 9: 0x1003119fe v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
10: 0x10031d8ca v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
11: 0x10031d951 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
12: 0x1002eb58a v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
13: 0x10063e698 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
14: 0x10097cc39 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
15: 0x10097dcd3 Builtins_StringAdd_CheckNone [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
16: 0x26c80fc5e45b 
17: 0x26c80fe6e097 
Abort trap: 6

I have tried cloning an existing repo from github with the same issues on this device and my work computer. The work computer works fine while the MacOS fails cloning the same repo. I have tried cloning other angular applications on this device and I initially run into this error

An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
Require stack:
- /Users/da/*code*/ng-tests/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /Users/da/*code*/ng-tests/node_modules/@angular-devkit/architect/node/index.js
- /Users/da/*code*/ng-tests/node_modules/@angular/cli/models/architect-command.js
- /Users/da/*code*/ng-tests/node_modules/@angular/cli/commands/serve-impl.js
- /Users/da/*code*/ng-tests/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /Users/da/*code*/ng-tests/node_modules/@angular-devkit/schematics/tools/index.js
- /Users/da/*code*/ng-tests/node_modules/@angular/cli/utilities/json-schema.js
- /Users/da/*code*/ng-tests/node_modules/@angular/cli/models/command-runner.js
- /Users/da/*code*/ng-tests/node_modules/@angular/cli/lib/cli/index.js
- /usr/local/lib/node_modules/@angular/cli/lib/init.js
- /usr/local/lib/node_modules/@angular/cli/bin/ng
See "/private/var/folders/f4/mlvzp1r55zs854sbj_bypf200000gn/T/ng-s5zwHm/angular-errors.log" for further details.

with a different repo, I solved this by the following

npm install --save-dev @angular-devkit/build-angular
npm install
ng serve -o

but applying that solution to the repo I am trying to access, I get the initial 92% additional asset processing copy-webpack-plugin mentioned above and I'm back to where I started.

Answer 1

node --max_old_space_size=16192 ./node_modules/@angular/cli/bin/ng serve Try giving it more memory