What is the reason for polyfilling private fields (#field) in JavaScript on angular builds?

I was eager to incorporate JavaScript private fields into my Angular (v17) application built with Angular CLI. I specified the target as ES2022 in the tsconfig, but after building the app, I discovered that my private field had been poly-filled with a WeakMap. I'm curious to understand why this occurred.

ng new my-brand-new-app

@Component({
...
})
export class AppComponent {
  #hello = 'hello';
  title = this.#hello;
}

ng build

Answer №1

It seems your .browserslist configuration may be targeting browsers that do not support private fields.

The Angular CLI relies on browserslist to adapt your code syntax for compatible browsers.

By default (if no specific config is provided), Angular follows this setup:

last 2 Chrome versions
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR

Although I am not entirely sure why, updating the Safari entry like this can resolve the issue:

last 1 Safari major versions
last 1 iOS major versions

This adjustment should address the problem you are facing.

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

Executing a JavaScript Function in the Background using Cordova

Despite the numerous questions and plugins available on this topic, finding a solution has proven to be elusive for me. The most highly recommended plugin for this issue can be found here. My goal is to run MyService in the background, subscribe to the ON ...

The assignment to 'total' is prohibited as it is either a constant or a property that is read-only within the get total() function

After running the command ng build --prod in my project, I encountered the following error message: "Cannot assign to 'total' because it is a constant or read-only property for function get total(){}" The function causing the issue is: get to ...

Implementing conditional redirects in react-router-dom v6

Currently facing an issue with react router dom@6. I'm trying to redirect users to other pages once they are logged in. However, when using the Navigate component, an error is thrown: "[Navigate] is not a component. All component children of Rou ...

Using the index in Vue.js to locate a method within an HTML file

Currently, I am attempting to make use of the reference "index" located within <tr v-for="(note, index) in noteList" v-bind:key="index" in order to call shareToPublic(index). The method selectedID() allows for the selection of the ...

Bigger than 100x100 Soundcloud profile picture size

Is it possible to retrieve a user's image larger than 100x100 using the Soundcloud API? Upon reviewing their documentation, I have not come across any images exceeding this size: An ideal solution would involve some form of Javascript implementation. ...

Is there a way to refresh a webpage without reloading by using Ajax in conjunction with Django Rest Framework?

I am currently working on a Django project where I need to develop a page that uploads real-time data without refreshing the entire page. This data is fetched from a database, so I have set up an API endpoint using Django Rest Framework. However, I am uns ...

Animating a progress bar with JQuery

Having issues with displaying a progress bar using jquery and javascript, as it is not appearing on the page. var show_time = Math.floor(Math.random() * 10000) + 5000; setTimeout(function() { $("#progress").hide() }, show_time); var myCountdown = $( ...

Pressing the menu button will trigger a function that halts after the third click

As I attempted to implement the functionality of this left menu bar, I encountered a roadblock. The click event on the menu button seems to work fine initially - the left bar appears with the first click and closes as expected with the second click. Howeve ...

Obtaining specific Google Image Search results depending on certain criteria

I am working on a project to create a web application that can suggest outfits based on the weather of a specific location. Here is where I am at with the project so far: https://codepen.io/anchpags/pen/bMpjxX <html> <head> <link rel=" ...

What is the best way to duplicate all elements and their contents between two specified elements, and store them in a temporary

context = document.createElement("span"); start_element = my_start_element; end_element = my_end_element; // I need to find a way to iterate through a series of elements between start and end [start_element .. end_element].forEach(function(current_element ...

Is it possible to utilize TypeScript code to dynamically update the JSON filter with variable values?

I am dealing with a JSON filter in which the value for firmwareversion needs to be replaced with a dynamic value. Here's how I've set it up: //JSON filter this.comX200FilterValue = '{ "deviceType": "ComX", "firmwareV ...

Upload button allowing multiple values to be uploaded as a single file

I'm currently facing an issue with my list of values and upload buttons. The file upload functionality is working correctly, but the problem arises when I try to upload a file for any item in the list - it always uploads for the first item only. Here ...

What is the method for configuring body attributes in CSS with AngularJS?

Setting the background image of a page using CSS: body { background: url(http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-backg ...

Steps to deactivating a styled button using React's styled-components:

I've created a very basic styled-components button as follows: import styled from 'styled-components'; const StyledButton = styled.button``; export const Button = () => { return <StyledButton>Default label</StyledButton> ...

What is the best way to conceal the legend in a chart.js component within a React application?

I've been struggling to hide the legend on my Chart.js chart. Per the official documentation (https://www.chartjs.org/docs/latest/configuration/legend.html), hiding the legend requires setting the display property of the options.legend object to fals ...

How to properly handle sending an empty post request in Angular 2

My current issue revolves around attempting to send data from my application to the server using a POST request, however, the server seems to be receiving empty POST data. This is the function responsible for sending the data: private headers = new Heade ...

"Is there a way to retrieve a field from a different model within a Mongoose model

Presented below are two distinct MongoDB Models: Movie Model import mongoose from 'mongoose'; const movieSchema = new mongoose.Schema({ title: { type: String, required: [true, 'Please Enter the Movie Title'], trim: true, ...

Tips for creating a fixed top navbar

I recently created a one-page website and wanted to make my navbar fixed. Currently, it looks like the image linked below: In order to achieve this, I floated the logo to the left, the navbar to the right, and set the position to absolute so that the righ ...

Sorting data in a Footable table by an unfinished line

My data table contains various lines like: 97.5%, 10/30, 41 RPM, 3.6 seconds, $4750, $100 When I set the type data-type = "number" in the rows, everything is stripped except for the numbers. However, I need the output to remain complete as shown in the ex ...

Despite the presence of ngIf, the tab is still displayed

Even though ngIf is used, the FirstTab remains visible. How can I completely remove the tab? Here is the code snippet: <tabs style="min-height:auto"> <tab tabTitle="FirstTab" *ngIf="str=='dp'" > <first-tab> ...