Realizing mistakes once ng build is complete

Working on an Angular/CLI/TypeScript 2.3 project, I encountered a common error type:

TypeError: Cannot assign to read only property 'myValue' of object '#'

This issue usually arises when there's an attempt to modify a property of an object declared with a const. However, the cause of this problem is not my main concern here.

My question pertains to why these errors are visible only after executing ng build and not during local development using ng serve. Is it possible to make them appear during ng serve as well?

Edit

It seems like the 'use strict' declaration gets injected into the compiled code but is missing from the code executed by Webpack while running ng serve.

Citing a relevant observation made in this blog post comment:

const foo = 27;
// The following lines will result in an exception.
// Assignment operators:
foo = 42;

However, including the statement below before declaring the constant circumvents the issue:

'use strict';
const foo = 27;
// The following lines will result in an exception.
// Assignment operators:
foo = 42;

Answer №1

It seems like you're utilizing ng build --prod as suggested in the comments by @developer033.

There's a distinction between production (AoT) compilation and non-production compilation. The Prod flag is more stringent.

If you want to understand the do's and don'ts of production code, check out this link: https://github.com/rangle/angular-2-aot-sandbox

To directly address your question about detecting errors from ng build --prod while using ng serve: it may not be possible. However, setting up your linters with AoT settings could possibly guide you on what to avoid.

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

Modifying the color of an individual object in THREE.js: Step-by-step guide

I am currently working on editing a program that uses Three.js and Tween.js. Despite my efforts to find a solution both here and online, I have not been successful. The program involves creating multiple objects (cones) using THREE.Mesh, with a script that ...

An array of Promise<Employee> cannot be used as a parameter for an array of type Employee[]

I am currently facing an issue with loading my Collection of Employees from a Firestore Database and fetching a 'Workday' for each Employee, which is stored as a Document in a Subcollection named 'Employees'. Below is the code snippet I ...

Discover properties of a TypeScript class with an existing object

I am currently working on a project where I need to extract all the properties of a class from an object that is created as an instance of this class. My goal is to create a versatile admin page that can be used for any entity that is associated with it. ...

React Select Event Bug: Not firing on subsequent attempts

My select filter menu has 5 different options that work fine when the page loads or refreshes. However, when I try to continuously select an option, it does not filter the content as expected. Here is a snippet of the code: <div className="filter_ ...

Issue with negative z-index in modal window has not been resolved

I'm currently trying to customize the radio button using my own CSS styles, but I've encountered an issue. For some reason, setting the z-index to -1 is not working when the radio button is within a modal. Below is the code snippet that I am wor ...

Is there a way to create an automatic save feature that resets whenever the form is continuously updated?

Currently, I am developing an Angular 9 application with a reactive form. The goal is to automatically save the form data to the server every 3 seconds after the last change made to any of the form fields. However, I want to ensure that this 3-second time ...

unable to gather information from suppliers

I'm currently building a login page with nextjs and spotify js, but I've run into the following error https://i.sstatic.net/cKiM8.png Here is the code snippet that is causing the issue: import React from 'react' import { getProviders ...

Is it feasible to set a default value in an HTML input field that is not editable using JavaScript?

Is there a way to set a default value in an input field of HTML that is not editable, and then allow users to add additional text to it? For example, having 'AB' as the default and uneditable starting characters, followed by any numbers such as A ...

Exploring the Fusion of Material UI Searchbox and Autocomplete in React

Looking for help with my AppBar component from Material UI. I want the Searchbox field to function similarly to what is seen on https://material-ui.com/. It should appear as a Searchbox but display selectable options like Autocomplete after entering input. ...

`Is there a way to modify the zAxis of a Paper component in Material-UI?`

Hello, I am curious about how to change the z-axis of a paper from MUI. https://i.sstatic.net/iKXLG.jpg The issue I'm facing is that the carousel is overlapping my menu and I need the menu to be on top of everything. Here is how I have it structure ...

How to effectively manipulate nested arrays in JavaScript without altering their references

Welcome everyone, I've been working on a project using next.js and I've encountered an issue with filtering posts. The filter function works perfectly when the posts are in a simple array like ObjChild. However, I have another section on my site ...

Adding JSON data to an array with a click - a step-by-step guide

As I dive into working with React and integrating API JSON data into my project, I've encountered a small hurdle. I've implemented a function that allows users to enter a search query, resulting in a list of devices associated with their input be ...

Where can I find the specific code needed to create this button style?

There is a button here for adding an event, but unfortunately, the style code is not displayed. Is there a way to obtain the full cascading style sheet for this button? ( ) ...

ng-model fails to synchronize with HTML

When I click on ng-click, the model changes but the HTML remains the same... HTML <p>Reserved:<span>{{seatsInfo}}</span></p> <div ng-click="change()">change</div> JavaScript $scope.seatsInfo = 20; $scope.change = fu ...

Display images in a list with a gradual fade effect as they load in Vue.js

In my Vue project, I am looking to display images one at a time with a fading effect. I have added a transition group with a fade in effect and a function that adds each image with a small delay. However, I am facing an issue where all the images show up ...

Challenges with basic e-commerce cart platform

Oh no, I'm in a bit of a mess. We've been utilizing a platform called Fat Free Cart (which has been pretty great so far) to construct our new online store. Now we're at the stage where we need to incorporate shipping options. As far as I ...

Create a typescript class object

My journey with Typescript is just beginning as I delve into using it alongside Ionic. Coming from a background in Java, I'm finding the syntax and approach quite different and challenging. One area that's giving me trouble is creating new object ...

Angular select element is not functioning properly with the `addEventListener` method

My current project involves creating a table using the primeng library. The table consists of three rows and three columns, and all the data is static. Even though I am utilizing an external library, I find myself traversing the DOM directly. <p-table ...

Obtaining data from an external ng-repeat element

My list contains items that are being repeated using ng-repeat details. I want to be able to hover over one of the li elements and have the background of a div called background (which is outside of the ng-repeat) change to the url of the corresponding d ...

How can a JavaScript function communicate with a code behind method?

Currently, I am trying to implement a JavaScript function for an HTML img click event on an aspx page. Additionally, there is a server method in the code behind page that I need to call from the JavaScript function without any parameters whenever the user ...