Windows Angular experienced a failure during allocation as the mark-compacts near heap limit were ineffective

Encountering an error in my Angular application on Windows10 when using ng build --prod, but it works fine with ng build.

The issue seems to arise from the presence of 4 JSON files in the assets folder, with one file being 21 MB and the others ranging from 4-5 MB. Removing the 21MB file resolves the problem.

PS D:\ProjectPath\Project1> ng build --prod
Option "extractCss" is deprecated: Deprecated since version 11.0. No longer required to disable CSS extraction for HMR.
⠏ Generating browser application bundles (phase: building)...
<--- Last few GCs --->

[17748:00000150A9FB1CE0]   191749 ms: Mark-sweep 2033.1 (2052.3) -> 2032.4 (2053.3) MB, 1579.1 / 0.1 ms  (average mu = 0.135, current mu = 0.011) allocation failure scavenge might not succeed
[17748:00000150A9FB1CE0]   194133 ms: Mark-sweep 2034.3 (2053.3) -> 2032.9 (2053.1) MB, 2361.8 / 0.1 ms  (average mu = 0.063, current mu = 0.009) allocation failure scavenge might not succeed


<--- JS stacktrace --->

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

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

Here's a snippet from my Angular.json file:

{
  ...
}

And here's a part of my package.json file:

{
  ...
}

I have tried various solutions mentioned in this Stack Overflow post as well as utilizing the package increase-memory-limit. Running 

setx NODE_OPTIONS --max_old_space_size=10240
in cmd did not resolve the issue.

Angular CLI: 10.0.5 Node: 12.18.3 OS: win32 x64

Any suggestions on how to address this?

javascriptangulartypescriptout-of-memory

Answer №1

To resolve this issue, I executed the following command in the terminal of Visual Studio Code.

 node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --prod

Instead of using ng build --prod, I opted for the above command.

Within the package.json file:

  "scripts": {
    "ng": "ng",   
    "build-prod": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod",
    "build:": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build",
    "start": "ng serve", 
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to move between components within the same parent class using UI router in Angular 6?

Explore the Angular UI-Router Visualizer design.component.ts import { Component, OnInit, ChangeDetectorRef, EventEmitter, Output, Input } from '@angular/core'; import { AppService } from '@app/shared/app.service'; import { Schema } fr ...

angulartypescriptnavigationangular-ui-routerangular6

Issues with the display property

After setting the display of a div tag as none in the style property, I am trying to show it based on an on-click function. However, the issue I am facing is that when I click on the function, the div displays for a brief moment then disappears again. Ca ...

javascriptjqueryhtml

The service method in Angular 2 cannot be reached

I am faced with a challenging issue where I am unable to access the loginMethod service in my Angular 2 project. I have spent two full days trying to resolve this error, but without success. As a newcomer to Angular 2, any assistance would be greatly appre ...

angularangular2-servicesangular2-componentsangular2-http

Updating choices within a div in real-time by changing the select box dynamically

I need to swap out the select box that is nested inside this div <div class="models"> <select disabled="disable"> <option>Model Name</option> </select> </div> I am attempting to target the div and manipul ...

javascriptjqueryhtml

Tips for identifying when an element exceeds the limits of its main parent container in AngularJS 2 (excluding the immediate parent)

<div class="nodelevel1"> <div class="nodelevel2"> <div class="nodelevel3"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div clas ...

angular

Visualization of pie charts in Angular2 using Google library

Currently, I am in the process of building a web application using Angular2 that includes a Google pie chart. One of the components of the application is a Directive specifically designed for the pie chart. Below is the code snippet for the Directive: @D ...

javascriptangulargoogle-visualization

Preventing Angular button click when an invalid input is focused out

Here is a Plunker link http://plnkr.co/edit/XVCtNX29hFfXtvREYtVF?p=preview that I have prepared. In this example, I've asked you to: 1. Enter something in the input field. 2. Click directly on the button without interacting with any other element. ...

javascriptangularjs

TailwindCSS applies CSS settings from tailwind.admin.config.js without overriding tailwind.config.js. The @config directive is utilized for this purpose

I'm currently working on a project using Vite and React. I have a tailwind.admin.css file that is similar to the example provided in the documentation. @config './configs/tailwind.admin.config.js'; @tailwind base; @tailwind components; @tai ...

reactjstypescripttailwind-cssvite

Can a single file in NextJS 13 contain both client and server components?

I have a component in one of my page.tsx files in my NextJS 13 app that can be almost fully rendered on the server. The only client interactivity required is a button that calls useRouter.pop() when clicked. It seems like I have to create a new file with ...

javascriptreactjstypescriptnext.jsserver-side-rendering

What is the best way to run a method just once in Vue?

I am in the process of developing a web application that showcases various products (with product details retrieved from the database). Each product is equipped with a More Details >> button which, upon clicking, triggers the opening of a modal windo ...

javascriptvue.jsaxiosbootstrap-vue

Generics in Classes: Unintelligible Error

For a demonstration, you can check out the implementation in this codesanbox. The class "Operation.ts" contains all the details. The purpose of the "Operation" class is to manage operations performed on objects such as rectangles. Each operation type ("mo ...

typescript

The Intersection Observer encountered an issue as it was unable to access the property 'current' since it was undefined

My current project involves the implementation of IntersectionObserver, but I am facing an issue where I receive the error message Cannot read property 'current' of undefined. Can anyone help me identify what might be causing this problem? useOn ...

javascriptreactjsnext.js

Bringing to life in Vue.js

I am a beginner with Vue.js and I have been attempting to integrate Materialize into my project. I have experimented with various plugins such as vue-materialize (https://github.com/paulpflug/vue-materialize) and vue-material-components (https://www.npmjs. ...

javascriptjqueryvue.jsmaterialize

What is the proper method to access state following a change in location?

I'm currently dealing with an issue where I need to transition to the state of another controller. I understand that in this scenario I must modify the location to load the desired controller, but how do I specify which state to enter? It's wort ...

javascriptangularjs

How can you calculate the partial years between two dates using momentjs?

Can someone guide me on how to calculate the number of years that have passed between two dates using momentjs, taking into account partial years? For instance, if I select Dec 30, 2017 to Jan 02, 2020, I am looking for the output to be 4, or even better, ...

javascriptreactjsmomentjs

TSX implementation of a paginator with an ellipse in the center

Looking to add ellipses in the Pagination, specifically when there are more than 10 pages (e.g., 1 2 3 4 ... 11 12 13 14). I've tried various methods but need guidance as a beginner. Can anyone suggest changes based on my code to help me achieve this? ...

reactjstypescriptpaginationpaginatortsx

Utilizing Angular to Bind Data Visualization Charts Locally

I am attempting to use the Kendo UI Angular directives to bind a DataViz pie chart locally, but I am encountering an error that says: TypeError: Cannot call method 'toLowerCase' of undefined at h (http://localhost:51717/Scripts/kendo/kendo.d ...

javascriptangularjskendo-uikendo-dataviz

Looking for an easy method to conditionally navigate to a different page in next, react js, or javascript. Any suggestions?

Looking for a way to dynamically route users to different pages based on form submission? One approach is to use a switch or if statement in the onSubmit function. Consider the following logic within the onSubmit function: (assuming that goTo() is a JavaS ...

javascriptreactjsnext.js

The authentication process for the Google YouTube API encountered an error due to a bad request and an invalid

Encountering issues with logging into the Google YouTube API due to bad request and an invalid Key. Despite renewing my credentials multiple times on the Google console. Changed the API key several times but the problem persists. The code I am currently ...

javascriptjqueryajaxyoutube-data-api

Guide on accessing and displaying data table values in console.log using Vue.js and vuetify

Hello, I am new to Vue.js and I am trying to work with data tables. I have copied some code from the Vuetify website and I am attempting to call the desserts' names from a sample table using console.log. Below is the code snippet: <template> ...

javascriptvue.jsvuetify.js