execute a rigorous compilation during the ng build angular process

I am currently working on a project using angular-cli and I have configured my package.json with the following scripts:

"scripts": {
  "ng": "ng",
  "build": "ng build --base-href /test/",
  "prod": "ng build --prod --base-href /test/"
}

According to the Angular documentation, the --prod flag detects compilation issues such as dead code. However, these issues are not caught during the development build command (which we run using npm start).

This leads to problems being detected too late in our continuous delivery process instead of during development.

I have attempted to find options in the tsconfig file documentation to avoid adding the --prod flag for development tasks, but haven't found any solutions.

I have learned that the --prod flag triggers an uglification process with uglifyJs which enforces strict compilation.

How can I instruct Angular to enforce strict compilation during the development "build" task in the same way it does with the --prod flag? (I have also tried using "use strict mode" in my files without success).

My project is built using Angular 5 with Typescript 2.x version.

Thank you in advance.

Answer №1

To enhance the performance and ensure stricter checking while building your application, simply append the --aot flag to your build command. Adjust your scripts accordingly:

"scripts": {
  "ng": "ng",
  "build": "ng build --aot --base-href /test/",
  "prod": "ng build --prod --base-href /test/"
}

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

Tips for implementing fetch in a GET request and displaying the outcomes on the screen

Currently, I am utilizing express router in Node for an endeavor to display a page with data retrieved from an API. Unfortunately, no results are returned, and I can confirm that the issue does not lie with the API itself. Upon manual inspection in the con ...

Having trouble grasping the concept of Interfaces and dealing with FormGroup problems in Angular?

Apologies if my question is a duplicate, I have found several solutions for the same issue on Stack Overflow, but unfortunately, I struggle to understand them in technical terms. Problem 1 src/app/models/dataModel.ts:2:5 2 id: number; ~~ The exp ...

How can JavaScript nested AJAX requests and promises be properly chained together?

I'm currently facing a dilemma when it comes to setting the correct order of execution for the tasks at hand. Let's say I need to initiate an AJAX call, then handle the data and store it in IndexedDB using the idb-keyval library, which operates o ...

Obtain a string value from a JavaScript object

My dilemma involves a specific Javascript object. { A: 1, B: 2, C: 2, D: 1, E: 1, F: 4, G: 6, H: 2 }, The goal is to extract a four-letter string based on the key with the highest value, but there are limitations. The stri ...

How can I include a nested object in an ng-repeat loop in Angular?

I'm new to using Angular so please excuse my basic question. Here is the structure of my model for posts and comments: [ { "title": "awesome post", "desc": "asdf", "comment_set": [ { "id": 2, ...

Vue.js: axios unexpectedly running synchronously across multiple components instead of asynchronously

Upon initializing my component, I am attempting to load ajax data. However, I have noticed that this causes other items loaded via ajax in the created() method to load synchronously rather than asynchronously. When this specific ajax request is triggered, ...

Utilize CSS to break apart text (text = white space = text) and align text in a floating manner, allowing

Is there a way to use CSS to create a white space in the middle of text? Currently, I am manually breaking the text, which is not ideal. I am aware that there is a function that allows the text to end and start in another div, but unfortunately, it is not ...

No content found in jQuery .text() values within iframe

I am experiencing an unusual issue with assigning a value to a variable using jQuery. I am unable to retrieve the values from .text() specifically on Spotify, while other functions on different sites are working fine. Even after the elements have loaded, i ...

Changing a complex array structure in javascript into a CSV format

I have a complex nested array that I need to convert into a downloadable CSV file. My current approach involves iterating through each array and subarray to build the CSV, but I'm wondering if there's a more efficient method available? Here is a ...

Ways to modify input value based on another input in VueJS

Two sets of text boxes are displayed in a grid format, which can be viewed here. The objective is for users to fill out the top boxes and have the values automatically update as they fill out the corresponding bottom boxes. For example, if you input 100 i ...

When using jQuery AJAX to Like/Dislike, a 500 (Internal Server Error) is returned, but the functionality works correctly upon reloading the

My website has a feature where users can press a Like Status button that uses AJAX to send data to the controller. When the button is clicked, it changes from "like" to "dislike" and all associated classes and form actions are updated accordingly. The is ...

Incorporating an Edit button with an icon into a react-bootstrap-table2

Is there a way to insert buttons in the Edit column of my table so I can easily edit a row? I believe there should be a method to personalize the column and incorporate icons as shown in the example image. Sample Image of What I want to do: import React ...

The combination of TypeScript 2.6 and material-ui 1.0.0-beta.24's withStyles with react-router withRouter is resulting in the error message: "Property 'classes' is missing in type."

Using the high order components withStyles and withRouter together has been a smooth process so far. However, after upgrading to the latest versions of these components, an error occurred. Learn more about higher-order components List of packages used: ...

How can I automatically direct my NodeJS application to the login screen?

Here is the setup of my project structure: There is a simple folder called static, within which I have: index.html (the homepage for user registration) login.html (the login page) In the parent folder, there is a file named server.js: // NodeJS code for ...

A dockerized npm environment is incompatible with running a Vue.js application

My goal is to create a consistent build environment that doesn't interfere with the local machine setup. To achieve this, I opted to use Docker to encapsulate the npm and vue cli tools. Initially, everything worked fine on the machine where I initiate ...

Is there a way to retrieve the value from a moment-formatted date picker in the (YYYY-MM-DD) format?

I have a Vue application with a datepicker from Ant Design Vue that is returning the following moment object: Moment {…} _d: Thu Oct 24 1996 00:00:00 GMT+0800 (Malaysia Time) _f: "YYYY-MM-DD" _i: "1996-10-15" _isAMomentObject: (...) _isUTC: (...) _isVal ...

Determining the page's coordinates in ColdFusion

Whenever I use iframes or frames on older websites, I implement an additional security measure using a JavaScript function: <SCRIPT LANGUAGE="JavaScript1.1"> if (top == self) self.location.href = "../index.cfm"; </SCRIPT> I also include an ...

Achieve a fading effect on an element as you scroll down the page

I successfully implemented a toggle audio button on my website, but now I would like it to fade in along with the scroll-to-top button that I also have (which operates similarly to the buttons on scrolltotop.com). Is there a simple way to achieve this? He ...

Comparison between Microsoft's AJAX Toolkit and jQuery

Ever since the early days of Atlas, our team has relied on Microsoft's AJAX Toolkit for all our web development needs. It wasn't until recently that we stumbled upon the jQuery/Prototype phenomenon and realized what we had been missing out on. Th ...

When implementing a sizable Angular material popover, ensure that the parent content is designed to allow scrolling

I have a custom popover feature in my current project, which includes checkboxes beneath the main content. Everything is functioning properly at the moment, but I've encountered an issue when the screen's resolution is reduced - the content at th ...