Since transitioning my project from Angular 7.2 to Angular 8, I noticed a significant threefold increase in compile time. How can I go about resolving this issue

After upgrading my project to Angular 8, I noticed a significant increase in compile time without encountering any errors during the upgrade process. Is there a way to restore the previous compile time efficiency?

**Update: A bug has been identified as the root cause of this issue. For more information on this bug, refer to https://github.com/angular/angular-cli/issues/13734

Last Compile Time Before Angular 8 (with Angular 7.2)
Time: 1382.536ms -> main.cf29a89468d732f3f363.js (main) 12.4 MB 

First Compile Time After Upgrading to Angular 8
Time: 6379.317ms -> main.da4147c72278bc767ee4.js (main) 12.3 MB 

Second Compile Time After Upgrading to Angular 8 and Restarting PC 
Time: 3147.254ms -> main.da4147c72278bc767ee4.js (main) 12.3 MB

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "",
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "mapRoot": "./",
        "moduleResolution": "node",
        "outDir": "../__dist_cli",
        "sourceMap": true, 
        "target": "es5 ", 
        "module": "es2015",
        "lib": [
            "es2016",
            "dom"
        ],
        "typeRoots": [
            "node_modules/@types",
            "typings/custom"
        ]
    }
Angular CLI: 8.0.0
Node: 12.3.1
OS: win32 x64
Angular: 8.0.0

Answer №1

Experiment with creating a package using the following command

ng build --es5BrowserSupport=false

By doing this, you will generate a package specifically for modern browsers. This approach can assist in determining if the process of building differential loading packages is taking longer than expected.

Answer №2

The issue has been resolved in the latest release of Angular CLI (^8.2.1)

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

Exploring Blob functionality in TypeScript?

I defined a global Blob object: declare global { interface Blob { prototype: Blob; new (name: string, url: string): Blob; } } It is functioning correctly in this code snippet: export const blobToFile = (blob: Blob) => { let file: File | n ...

Chai is unable to differentiate between different class types

When using Chai to compare if a returned value of type SimpleModel matches with the expected type SimpleModel, I encountered an error even though my IDE indicated that the types are correct: AssertionError: expected {} to be a simplemodel The setup for t ...

Struggling to transfer information between different components?

I recently implemented a delete button functionality in my project to remove elements when clicked, but I'm facing an issue where the input decorator is not properly receiving data for deletion. When I console log, it shows that the array is empty whi ...

Angular cdk scrolling: Refreshing content in the data source that is not currently visible on the

I've been struggling with creating an infinite scroller in my project. The component I'm currently developing incorporates Angular's virtual scrolling feature and is supposed to update the data source once a specific index of the virtual scr ...

Update the content of the text box when the button is clicked

How can I make the text box value appear only when a button is clicked? See the code snippet below: HTML: <input type="text" [(ngModel)]="serverName"> <button class="btn btn-primary" (click)="onAddClk">Add</button> TS File: onAddClk( ...

What is preventing me from using the "@" symbol to substitute the lengthy relative path in my __tests__ directory?

https://i.sstatic.net/U1uW3.png When I initialized my Vue project using vue-cli, I encountered an issue where the use of @ in my src folder was functioning correctly, but not in my __tests__ folder. I have already added configurations to my tsconfig.json ...

Error message for invalid form control not displayed when value is assigned to form control in Angular

I am currently working with this editor: <div id="editor"></div> which sets its value to a form control. this.FrmGroup.get("name").setValue(this.quill.root.innerHTML)` <div *ngIf="FrmGroup.get('name').inv ...

What should be included in the types field of package.json for TypeScript libraries?

I'm finding it challenging to efficiently develop multiple typescript modules simultaneously with code navigation while ensuring the correct publishing method. What should I include in the "types" field of my package.json? Referring to: Typescriptlan ...

In React Router v6, you can now include a custom parameter in createBrowserRouter

Hey there! I'm currently diving into react router v6 and struggling to add custom params in the route object. Unfortunately, I haven't been able to find any examples of how to do it. const AdminRoutes: FunctionComponent = () => { const ...

Browser not reflecting changes made to Angular 2 code

Currently facing a challenging issue with my express/angular2 app. Despite using nodemon and seeing the Express code updating fine, I am experiencing issues where my components and services are not updating when I reload the page in the browser. Even aft ...

Error NG0100 occurs when the expression has been modified after it has been checked, specifically on a complete option table sorting paginator filter

My application has a feature that retrieves a list to populate a table. The table includes a general filter, as well as sorting, pagination, and the ability to hide columns with FormControl. However, I'm encountering an error labeled as Error/NG0100, ...

Encountering an issue with d3 Angular 2 pie chart related to d3.arc data

I encountered a problem with my code: 'PieArcDatum' is not assignable to parameter of type 'DefaultArcObject.' at this specific line Argument of type return "translate(" + labelArc.centroid(d) + ")";. Could someone please assist me in ...

Error in Angular vendor.js (124116) related to Dom7 class in Internet Explorer 11

Every time I launch my project in IE11, I encounter an issue SCRIPT1002: Syntax error vendor.js (124116,1) Upon inspection of vendor.js at the specified line, I come across class Dom7 { constructor(arr) { const self = this; // Create array-lik ...

Working with Vue class-based components in TypeScript and setting props

Currently tackling a typescript-related issue within a class-based component and seeking guidance on a persistent error. Below is the code snippet for my component: <template> <b-message :type="statusToBuefyClass"> <p>PLACEHOLDER& ...

What is the method for dynamically selecting generics from a function in a union type using Typescript?

Suppose there is a function defined as follows: type FooParams<Params extends unknown[], Result> = { name: string, request: (...params: Params) => Promise<Result> } const foo = <Params extends unknown[], Result>(params: FooParams ...

Loading AngularJS multiple times

I'm facing a challenge while upgrading my angularJs Application to Webpack4. This is how I've set it up: vendor.ts import "angular"; import "angular-i18n/de-de"; import "angular-route"; and main.ts import {MyAppModule} from "./my-app.app"; ...

Is it possible to modify the stroke color of the progress circle in ng-zorro?

I am working on an Angular project where I aim to create a dashboard displaying various progress circles. Depending on the progress, I need to change the color of the line. Current appearance: https://i.sstatic.net/hR2zZ.png Desired appearance: https://i. ...

Using an array to enforce form validation rules in Angular, including prohibited form values

I am currently developing a basic Angular form with specific validation requirements: The input must not be left empty The input cannot match any of the values stored in the array forbiddenValues. While I understand how to implement the required validat ...

Personalized design for Material Tooltip in Angular 17

I am currently working on an angular 17 application that utilizes the latest Material components. My project heavily incorporates the Tooltip component, but I am facing challenges when it comes to customizing it to my preferences. While I did succeed in c ...

Having trouble utilizing datepipe with locale format

Currently, I'm constructing a website using angular2 final alongside webpack cli. One of my specific requirements is to showcase the date in the nl-NL locale. The html code snippet that I have written for this purpose looks like: {{eventDate | date:& ...