NG 12 partial compilationMode causes out of memory error

[restfulhead]

🐞 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 
    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 ,0x27b5ff140169 )
    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

[JoostK]

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.

[restfulhead]

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.

[JoostK]

That is super interesting, I can't tell from the top of my head how that would influence the build and result in runaway memory usage. It would be great to narrow this down to a minimum reproduction that can be shared, do you think that's feasible to setup?

[restfulhead]

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.

[Attila24]

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.

[restfulhead]

@JoostK Here's a repository with a project structure similar to where the issue occurs: https://github.com/restfulhead/ng-lib-and-app. Unfortunately (or fortunately) building with partial works just fine. Maybe it only occurs if there are many components or other complexities.

As mentioned in my comment above, disabling path mapping for production builds works for me, so from my end, we could close this issue.

[alan-agius4]

@restfulhead, I downloaded your reproduction and I wasn't able to reproduce the issue (OOM) you reported. Unfortunately, without a reproduction or at the very minimum memory heap snapshots it would be hard to get to the bottom of this.

[restfulhead]

@alan-agius4 I saw a comment about a memory leak. Sounds like it could be related. I would like to wait for that fix to land to see if it solves the issue here. If not, I can add more information such as a memory snapshot.

[JoostK]

@restfulhead the leak only concerns watch builds, is that the case for you? Anyway, you could try the snapshot as I mentioned in #20801 (comment).

[restfulhead]

Oh, I see. Ok, no, this issue is not related to watch builds. Ok, I will add the snapshot when I find some time.

[restfulhead]

Installing git+https://github.com/angular/compiler-cli-builds.git#d0ddff32e5e8cc159950a1aebb9aaae5a3d82644 did not help.

After further testing, I now believe it is indeed related to source maps. I think when I tested it before, I turned off source maps in tsconfig but missed to disable it in angular.json. That's why I wrongly concluded it was not related to source maps. But I can confirm now: When I disable"sourceMap" in angular.json, ng serve works. When I enable it, it crashes:

[Supratentorial]

I'm getting the same issue. Seems to be resolved with disabling generation of source maps.

[alan-agius4]

@Supratentorial / @restfulhead can anyone of you please share a reproduction? Without this it would be hard to get to the bottom of this.

[pumano]

got that when switching to another branch with massive changes, recompilation process hang to out of memory.

[johannesjo]

@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

[alan-agius4]

@johannesjo, unless I am missing something it doesn’t appear that in your repo you have a dependency on a partially compiled Angular library.

[johannesjo]

@alan-agius4 that's right. My mistake.

[Plondrein]

I've just had similar issue, deleting node_modules & package-lock.json then running 'npm install' helped.

[alan-agius4]

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.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}