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.

javascriptangulartypescriptnpmangular-cli

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

Learning how to merge two observable streams in Angular2 by utilizing RxJS and the powerful .flatMap method

Within my Angular2 app, I have created an Observable in a Service called ContentService. Here is a simplified version of the code: @Injectable() export class ContentService { constructor(private http:Http, private apiService:ApiService) { th ...

typescriptangularrxjs

Make sure to only add packages to your project that are listed in the package.json file

My intention is to only install packages listed in the packages.json file. However, when I use npm install, it ends up installing over 800 unexpected packages. Is there a specific command I should be using for this or is my package.json configuration (sh ...

node.jsnpmnpm-installpackage.jsonpackage-managers

When viewing an array, the objects' values are displayed clearly; however, when attempting to access a specific value, it

I am attempting to retrieve the board_id of my objects in the columnsServer array... columnsServer: Column[]; this.service.getColumns() .subscribe(data => { this.columnsServer = data; console.log(this.columnsServer); for (this.i = 0; this.i ...

javascriptangulartypescript

Utilizing the $(this).text method in combination with the content class

In order for the text of the click function to be the final variable, I attempted using $(this).text, but unfortunately it did not produce the desired outcome. Placing the class at the end resulted in both p lines appearing. My goal is to only display the ...

javascriptjquery

What is the process for transferring ng-model values to a table in Angular?

My goal is to populate a table with JSON data using ng-repeat by clicking a button. I need to input either a first name or last name in order to display the results in the table. Is this the correct JavaScript function for achieving this? JavaScript Funct ...

javascriptjsonangularjsangularjs-ng-repeat

What is the integration between redux and next.js like?

I am currently trying to integrate Redux into an existing Next.js project, but I am struggling to grasp how the store functions server-side. I came across this example that I am following: https://github.com/vercel/next.js/blob/canary/examples/with-redux ...

javascriptreactjsreduxreact-reduxnext.js

Combine React 17 with webpack 5 and babel-plugin-react-css-modules, enabling the use of CSS modules with stylename functionality

I am in the process of setting up a new React application using the latest technologies available, including React 17, Webpack 5, and other essential modules. My goal is to implement CSS modules utilizing the styleName concept with the help of babel-plugi ...

javascriptcssreactjswebpack

JavaScript does not function properly on dynamically loaded content from AJAX requests and it is not relying on

I am currently using ajax to load all content from 'mysite/math/' into math.php. I want to render the loaded math content using katex. KaTeX GitHub Inside math.php, I include the Katex library from the CDN mentioned in the link above. The HTML ...

javascriptajax

What methods can be employed to maintain a consistent width for a multi-line span that aligns with the content?

Inside a div, I have 2 spans. When the content of the first span is short enough to fit on one line, the span's width matches the text content and positions the second span next to it. If the content of the first span is long and causes it to wrap, t ...

javascripthtmlcssflexbox

Tailored production method based on specific criteria

One of my challenges is to create a versatile factory method using typescript. The main objective is to initialize a class based on its name using generics, instead of employing if/else or switch statements. I am aiming for similar functionality as this ...

typescript

Discovering active path while utilizing dynamic routes - here's how!

Whenever I click on the project element in my HeadlessCMS with the URL /projects/slug-name, the projects button in my Navbar (LinkItem) does not highlight with a background color (bgColor). How can I modify this line of code: const active = path === href / ...

javascriptreactjsnext.js

What is the best way to display a page within a div when clicking in Yii?

I'm trying to use the jQuery function .load() to load a page into a specific div. Here's my code: <a href="" onclick="return false;" id="generalinfo"> <div class="row alert alert-danger"> <h4 class="text-center">Gen ...

javascriptphpjqueryhtmlyii

What steps do I need to take to share my Node JS application on my local area network (

I have a Node.js application running on my Ubuntu machine successfully, as I can access it through localhost:8080. However, other machines on the network are unable to reach it. CODE: const portNumber = 8080 let app = express() app.use(express.static(__d ...

javascriptnode.jshostinglan

Transferring information between Express and React through the Contentful API

I have embarked on a journey to explore Contentful's headless CMS, but I am encountering a challenge with their API client. My goal is to combine Express with React for server-side rendering, and I am utilizing this repository as my starting point. S ...

javascriptexpressreactjses6-promisecontentful

The anchorEl state in Material UI Popper is having trouble updating

I am currently facing an issue with the Material UI popper as the anchorEl state remains stuck at null. Although Material UI provides an example using a functional component, I am working with a class-based component where the logic is quite similar. I w ...

javascriptreactjsmaterial-uipopper.js

What is the best way to add both the id and the full object to an array list at the

Requirements: "admin-on-rest": "^1.3.3", "base64-js": "^1.2.1", "react": "^16.2.0", "react-dom": "^16.2.0" I have a User model that includes a List of Roles. // User { id: "abcd1234", name: "John Doe", ... authorities: [ { ...

javascriptreactjsmaterial-uiredux-formadmin-on-rest

Does a <Navigate> exist in the react-router-dom library?

Within the parent component import LoginPage from "pages/admin"; export function Home() { return <LoginPage />; } Inside the child component import { useRouter } from "next/router"; export default function LoginPage() { co ...

reactjstypescriptnext.js

Executing a function when the date changes in ng2-datepicker

Currently, I am incorporating ng2-datepicker into my project and the corresponding HTML code appears as follows: <datepicker [(ngModel)]="selectedDate"></datepicker> I am uncertain about how to trigger a function when the date is modified ...

angular

Error: The reset function cannot be executed on $(...)[0]

Purpose My aim is to clear a form once it has been successfully submitted. Problem Upon submitting the form, I encounter the error message in my console: Uncaught TypeError: $(...)[0].reset is not a function When examining the content before resetting, ...

javascriptruby-on-railsajaxsimple-form

The error message "Angular 8: Type 'void' cannot be assigned to type 'ObservableInput<any>'" indicates a type mismatch in the Angular 8 code

I am having an issue with a method that needs to be called every 5 minutes to check a user's network connectivity. I keep getting the following error message and I can't figure out what it means: Type 'void' is not assignable to type &a ...

angular