angular-cli: NG 12 partial compilationMode causes out of memory error

🐞 Bug report

Command (mark with an x)

  • build
  • serve
  • test

Is this a regression?

Not sure, before NG12 we did not use the compilationMode setting and we disabled Ivy for production builds.

Description

We have a library project and a main app project. When setting compilationMode to partial in the library build, then running or building the app project (which depends on the library) fails with FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory. Increasing memory to up to 8GB via max_old_space_size did not help. The node process keeps allocating more memory until it fails eventually. That’s on my local OSX. On GitHub actions the build works, but the test fails with the same error.

Building and starting works fine when setting compilationMode to full. However, we want to publish our library to an internal NPM registry, so we need to set compilationMode to partial.

To make things worse, disabling Ivy no longer works either ("enableIvy": false). Depending on a combination of angularCompilerOptions I either get ERROR: Angular structure loaded both synchronously and asynchronously or Function calls are not supported in decorators but '***Module' was called.

🔬 Minimal Reproduction

Parent tsconfig

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "inlineSources": true,
    "forceConsistentCasingInFileNames": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "strict": false,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "importHelpers": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "fullTemplateTypeCheck": true,
  }
}

Library tsconfig

{
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../out-tsc/lib",
    "types": [],
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true,
    "compilationMode": "partial",
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  },
  "exclude": ["src/test.ts", "**/*.spec.ts"]
}

App tsconfig

{
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../out-tsc/app",
    "types": [],
    "paths": {
      "@myname/my-library": [
        "dist/my-name/my-library"
      ],
      "@angular/*": [
        "./node_modules/@angular/*"
      ]
    }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

🔥 Exception or Error

Error on my local during build


<--- Last few GCs --->
[72542:0x104629000]   200831 ms: Mark-sweep 8071.5 (8232.7) -> 8056.1 (8233.7) MB, 7156.5 / 0.1 ms  (average mu = 0.110, current mu = 0.006) allocation failure scavenge might not succeed
[72542:0x104629000]   208829 ms: Mark-sweep 8075.3 (8236.4) -> 8059.9 (8237.2) MB, 7951.7 / 0.1 ms  (average mu = 0.064, current mu = 0.006) allocation failure scavenge might not succeed

<--- JS stacktrace --->
FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory
 1: 0x1000ab634 node::Abort() [/usr/local/bin/node]
 2: 0x1000ab7aa node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x1001e5db9 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0x1001e5d63 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x10032a8cb v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 6: 0x100364784 v8::internal::EvacuateNewSpaceVisitor::Visit(v8::internal::HeapObject, int) [/usr/local/bin/node]

Error on GitHub actions during test


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

<--- Last few GCs --->

[2338:0x2d86150]    66186 ms: Scavenge 2041.8 (2050.2) -> 2041.1 (2050.2) MB, 4.7 / 0.0 ms  (average mu = 0.320, current mu = 0.299) allocation failure 
[2338:0x2d86150]    66221 ms: Scavenge 2041.9 (2050.2) -> 2041.3 (2050.2) MB, 8.3 / 0.0 ms  (average mu = 0.320, current mu = 0.299) allocation failure 
[2338:0x2d86150]    66288 ms: Scavenge 2042.6 (2050.7) -> 2042.2 (2050.9) MB, 16.9 / 0.0 ms  (average mu = 0.320, current mu = 0.299) allocation failure 


<--- JS stacktrace --->

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

    0: ExitFrame [pc: 0x140de99]
Security context: 0x0f0ec95808d1 <JSObject>
    1: SourceMapConsumer_allGeneratedPositionsFor [0x2244e0d1c2b9] [/home/runner/work/***/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:~178] [pc=0x1f857c77528f](this=0x10ada0d40209 <BasicSourceMapConsumer map = 0x3d6aa389e119>,0x27b5ff140169 <Object map = 0x3d6aa389e759>)
    2: /* anonymous */(aka /* anony...

 1: 0xa1a640 node::Abort() [ng test myproject --no-watch --no-progress --browsers=ChromeHeadlessCI]

🌍 Your Environment

The following is the version from GitHub Actions, but it also fails on my local OSX.


Angular CLI: 12.0.2
Node: 12.22.1
Package Manager: npm 6.14.12
OS: linux x64

Angular: 12.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.2
@angular-devkit/build-angular   12.0.2
@angular-devkit/core            12.0.2
@angular-devkit/schematics      12.0.2
@angular/cdk                    12.0.2
@angular/cli                    12.0.2
@angular/flex-layout            12.0.0-beta.34
@angular/material               12.0.2
@schematics/angular             12.0.2
ng-packagr                      12.0.2
rxjs                            6.6.7
typescript                      4.2.4

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 2
  • Comments: 20 (3 by maintainers)

Most upvoted comments

Unfortunately, there isn’t enough information for us to investigate this any further. If the issue persists please file a new issue with a reproduction.

Hi @JoostK, I am experiencing a similar issue on a project using a larger shared library (25 modules). In my case, setting "sourceMap": { "scripts": false } } helped. Do you have any advice on what could we do to enable sourceMaps again? This issue didn’t occur before changing to "compilationMode": "partial". I’d prefer to use this compilation mode if possible, since we’re running into another problem without it. Thanks a lot in advance.

Ok, I narrowed it down. If I remove the following from TSConfig the error seems to no longer occur:

"paths": {
      "@myname/my-library": [
        "dist/my-name/my-library"
      ],
      "@angular/*": [
        "./node_modules/@angular/*"
      ]
    }

The reason @myname/my-library is configured as a path is to make local development easier, as explained in https://angular.io/guide/creating-libraries#use-typescript-path-mapping-for-peer-dependencies. So I should be able to configure this for development, but remove it for production build:

Dev build:

  • compilationMode = full
  • with path mapping

Prod build:

  • compilationMode = partial
  • without path mapping

Currently waiting for a full build.

@JoostK Tried to disable source maps, too, but that did not seem to have any effect.

@alan-agius4

This is the latest build of super productivity failing on github actions (runs fine on my machine though): https://github.com/johannesjo/super-productivity/runs/2990167244?check_suite_focus=true

Steps to reproduce this:

  1. Clone this rep
  2. Push a random commit
  3. Wait for the ng build task

Not sure if it will occur in a simple project setup. But if I find some time in the next couple of days, I’ll create a repository with a similar project/ts-config setup to find out.

Hi @restfulhead thanks for reporting. Can you try building the app with "sourceMap": false in angular.json? It looks like the source map processing is getting out of hand.