致命错误：无效标记压缩接近堆限制分配失败 - JavaScript 堆出 memory Angular 13 应用程序

Question

I have upgraded the angular application from 12 to 13 and added the eslint and Prettier.

While doing the ng lint I am facing the below error

macbook@macbooks-MacBook-Air LegalRegTech.Web.Host % ng lint

Linting "abp-zero-template"...

<--- Last few GCs --->

[18697:0x7f8814800000]   899728 ms: Mark-sweep (reduce) 2036.5 (2081.8) -> 2035.8 (2082.5) MB, 6232.4 / 0.0 ms  (average mu = 0.155, current mu = 0.048) allocation failure scavenge might not succeed
[18697:0x7f8814800000]   906650 ms: Mark-sweep (reduce) 2036.1 (2082.5) -> 2036.0 (2082.5) MB, 6313.6 / 0.0 ms  (average mu = 0.122, current mu = 0.088) allocation failure GC in old space requested


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x101c5a0e5 node::Abort() [/usr/local/bin/node]
 2: 0x101c5a268 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x101dd0597 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0x101dd0533 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x101f6ee55 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 6: 0x101f72e7b v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
 7: 0x101f6f75c v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 8: 0x101f6cc0a v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 9: 0x101f79f60 v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0x101f79fe1 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x101f46f37 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
12: 0x1022f2fbf v8::internal::Runtime_AllocateInOldGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
13: 0x102694d99 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
14: 0x106be229f 
zsh: abort      ng lint

Here is the eslint configuration

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "src/tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "plugins": ["prettier"],
      "rules": {
        "prettier/prettier": ["error"],
        "@angular-eslint/component-selector": [
          "error",
          {
            "prefix": "app",
            "style": "kebab-case",
            "type": "element"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "prefix": "app",
            "style": "camelCase",
            "type": "attribute"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

Script in package.json

"scripts": {
    "ng": "ng",
    "publish": "ng build --prod",
    "start": "ng serve --host 0.0.0.0 --port 4200",
    "hmr": "ng serve --host 0.0.0.0 --port 4200 --hmr",
    "test": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "verbose": "ng serve --host 0.0.0.0 --port 4200 --verbose",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json",
    "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json",
    "memstart": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --port 4200",
    "start-dev": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --port 4200 --configuration=development --open",
    "lint": "ng lint"
  },

Answer 1

You ran into the memory limit for ng serve . Try increasing the limit:

package.json

"serve": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve"

Answer 2

Adding "colors": "1.4.0" to resolutions in angular package.json

example "resolutions": { "fstream/**/mkdirp": "~0.5.1", "colors": "1.4.0" }