After upgrading to Angular 8 , compile time increased 3 times. #14604

alialtun14 · 2019-05-31T02:40:39Z

I upgraded my project to Angular 8 version. While upgrading process, I haven't met any error. But the compile time increased 3 times without any error.

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

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

Second Compile After Upgrading to Angular 8 and After restart 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"
    ]
}

package.josn

   ....
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/forms": "^8.0.0",
    "@angular/material": "^8.0.0",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "intl": "^1.2.5",
    "rxjs": "^6.5.2",
    "tar": "^4.4.8",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.0",
    "@angular-devkit/build-optimizer": "^0.800.0",
    "@angular/cli": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/compiler-cli": "^8.0.0",
    "@types/angular": "^1.6.54",
    "@types/angular-route": "^1.3.5",
    "@types/quill": "^2.0.2",
    "hammerjs": "^2.0.8",
    "quill": "^1.3.6",
    "typescript": "^3.4.5"
  }
}

Angular CLI: 8.0.0
Node: 12.3.1
OS: win32 x64
Angular: 8.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0
@angular-devkit/build-angular     0.800.0
@angular-devkit/build-optimizer   0.800.0
@angular-devkit/build-webpack     0.800.0
@angular-devkit/core              8.0.0
@angular-devkit/schematics        8.0.0
@angular/flex-layout              8.0.0-beta.26
@ngtools/webpack                  8.0.0
@schematics/angular               8.0.0
@schematics/update                0.800.0
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

The text was updated successfully, but these errors were encountered:

trotyl · 2019-05-31T07:52:07Z

Duplicate of #14554?

alan-agius4 · 2019-05-31T10:15:16Z

@trotyl, not really

alan-agius4 · 2019-05-31T10:17:41Z

@alialtun14, can you provide some more info, such as which command are you using is it a ng serve or ng build?

Would you be able to provide a reproduction please?

alialtun14 · 2019-05-31T11:40:02Z

We used static:true in ViewChild.
There are 884 ViewChild reference, 602 Component and 130 NgModule in the project.
There was no other change on the code after upgrade to Angular 8.

@ViewChild(Hplan_edt, {static:true}) vEdt: Hplan_edt

"ngs": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng"
./ngs build --prod --aot

Date: 2019-05-30T23:13:42.637Z
Hash: bc9a0deb6bb8ebe553f6
Time: 3147254ms
chunk {0} runtime.741402d1d47331ce975c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.da4147c72278bc767ee4.js (main) 12.3 MB [initial] [rendered]
chunk {2} polyfills.d1a27bf3fd244fcce0a9.js (polyfills) 42.9 kB [initial] [rendered]
chunk {3} polyfills-es5.69d2f902b7fa654ec4d5.js (polyfills-es5) 68 kB [initial] [rendered]
chunk {4} styles.caf2a2f780d5fba96541.css (styles) 102 kB [initial] [rendered]
chunk {5} vendor.e77a5f68f74bfb5bb1a2.js (vendor) 954 kB [initial] [rendered]
chunk {scripts} scripts.c05cd6675c6d364a689d.js (scripts) 228 kB [entry] [rendered]

alan-agius4 · 2019-05-31T13:07:08Z

Do you use sass as your style pre-processor? If yes, can you try a couple of things please:

npm i  fibers --save-dev

Run the build and report the timings

npm i node-sass -save-dev

Thanks

Run the build and report the timings.

alialtun14 · 2019-06-01T05:33:17Z

@alan-agius4 Thank you for your attention and effort.

I have compiled again after doing the operations you said. The result has not changed. The compile process is waiting for about half an hour while 25%. The same project takes less than 40 seconds to compile with ng serve instead of ng build --prod --aot.

I have been working on upgrading to angular 8 for two days. The project actually does not have too much dependency, which may be likely to be the problem. There are only hammerjs and quill. I think I'll use angular 7.2 for a temporary solution.

alialtun14 · 2019-06-01T18:31:47Z

After convert to angular 7.2.15, I compile the project with node 12 environment .
The compile time is 5527.777 ms (6 times more than normal)

Then I installed the node 10.16.0 for angular 7.2.15 and the compile time is 901.372ms (normal)

Node: 12.3.1 + Angular: 7.2.15

Angular CLI: 7.3.9 OS: win32 x64 webpack: 4.29.0 TS: 3.2.4

Date: 2019-06-01T17:57:21.347Z
Hash: 003a017db26b2761ba40
Time: 5527.777ms
chunk {0} runtime.26209474bfa8dc87a77c.js      (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.d422ca0dc6cf56ee2633.js            (main) 12.2 MB [initial] [rendered]
chunk {2} polyfills.918ead405a6828219c02.js  (polyfills) 42.9 kB [initial] [rendered]
chunk {3} styles.a9ca052bcbe1e2ca9a8a.css       (styles)  104 kB [initial] [rendered]
chunk {4} vendor.bd9fcb891d7c323ba04b.js        (vendor)  927 kB [initial] [rendered]
chunk {scripts} scripts.c05cd6675c6d364a689d.js (scripts) 228 kB [entry] [rendered]

Node: 10.16.0 + Angular: 7.2.15

(Angular CLI: 7.3.9 OS: win32 x64 webpack: 4.29.0 TS: 3.2.4

Date: 2019-06-01T18:29:19.549Z
Hash: 003a017db26b2761ba40
Time: 901.372ms
chunk {0} runtime.26209474bfa8dc87a77c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.d422ca0dc6cf56ee2633.js (main) 12.2 MB [initial] [rendered]
chunk {2} polyfills.918ead405a6828219c02.js (polyfills) 42.9 kB [initial] [rendered]
chunk {3} styles.a9ca052bcbe1e2ca9a8a.css (styles) 104 kB [initial] [rendered]
chunk {4} vendor.bd9fcb891d7c323ba04b.js (vendor) 927 kB [initial] [rendered]
chunk {scripts} scripts.c05cd6675c6d364a689d.js (scripts) 228 kB [entry] [rendered]

Node: 12.3.1 + Angular 8.0

Date: 2019-05-30T23:13:42.637Z
Hash: bc9a0deb6bb8ebe553f6
Time: 3147.254ms  
chunk {0} runtime.741402d1d47331ce975c.js (runtime)      1.41 kB [entry] [rendered]
chunk {1} main.da4147c72278bc767ee4.js (main)           12.3 MB [initial] [rendered]
chunk {2} polyfills.d1a27bf3fd244fcce0a9.js (polyfills) 42.9 kB [initial] [rendered]
chunk {3} polyfills-es5.69d2f902b7fa654ec4d5.js (polyfills-es5) 68 kB [initial] [rendered]
chunk {4} styles.caf2a2f780d5fba96541.css (styles) 102 kB [initial] [rendered]
chunk {5} vendor.e77a5f68f74bfb5bb1a2.js (vendor) 954 kB [initial] [rendered]
chunk {scripts} scripts.c05cd6675c6d364a689d.js (scripts) 228 kB [entry] [rendered]

alan-agius4 · 2019-06-03T08:58:50Z

Hi @alialtun14, from what you provided above, it's seems that it is slower on Node 12 irrispective of the Angular CLI version, if anything version 8 is much faster than version 7 on Node 12. 3147.254ms versus 5527.777ms.

This will require some digging to determine why the build is faster on Node 10 compared to Node 12.

I couldn't help but notice that for version 7 the compilation takes less than 1 second which doesn't seem to be right.

Would you be able to share your application please?

alialtun14 · 2019-06-03T21:03:13Z

angular 7.2.15 project code without any error.
Half an hour ago on my first share, I had a mistake. I corrected the error and shared it again.

angular.7.2.15.proje_v2.zip

to convert the project to angular 8, the is only two term in the project.

2  lines:   @ContentChild(... 
579 lines:  @ViewChild(...

alan-agius4 · 2019-06-05T05:45:25Z

Hi @alialtun14,

Thanks for the reproduction, we'll try to take a close look soon.

In the meantime I am going to close this issue in favor of #13734 so that we have this issue tracked in a single tread.

Thanks for understanding.

adripanico · 2019-06-12T09:04:15Z

I'm upgrading an application from Angular 7 to 8 and I'm also facing a huge impact in the compilation time, but I don't think it is related to #13734 (I don't see any error messages and everything works fine). The application is relatively complex (51 chunks total).

The compilation process percentage reaches the 100% and then it starts again from 0%.

I'm not using --aot, just ng build --prod --base-href /

Time to build:

real 9m14,118s
user 15m22,745s
sys 0m15,490s

I've then revert to Angular 7.2 and I get these values:

real 4m43,201s
user 8m29,736s
sys 0m7,659s

micobarac · 2019-06-18T08:44:13Z

Same problem here too...

kemsky · 2019-06-18T09:59:09Z

Overall angular-cli is two times slower and consumes more memory than custom script with rollup or closure and even webpack. CI times are much worse.

adripanico · 2019-06-18T10:43:05Z

It seems it has been improved in @angular/cli 8.0.3 according to #14746.

Alcidauk · 2019-06-18T16:10:50Z

Hi all,

I faced the same problem too, even in the 8.0.3 version.

In my case, going back to native Sass (explained here https://update.angular.io/#7.0:8.0) fix the problem (I now have the same compilation time than with Angular 7).

For me, the JS compiler seems to be extremely slow with sass files.

adripanico · 2019-06-19T13:19:45Z

Upgrading to cli 8.0.3:

real	7m4,341s
user	13m36,479s
sys	0m11,740s

Upgrading to cli 8.0.3 and using node-sass:

real	8m45,860s
user	15m18,098s
sys	0m14,003s

adripanico · 2019-06-25T12:57:28Z

Upgrading to cli 8.0.4:

real	7m50,181s
user	15m3,919s
sys	0m12,322s

Upgrading to cli 8.0.4 and using node-sass:

real	8m8,383s
user	15m0,839s
sys	0m13,394s

j-nord · 2019-07-23T14:58:15Z

Sorry but:
So no one can seriously work with the new compiler for angular 8. It hardly goes slower anymore. An impertinence for every developer! We must wait 20 minutes to get an error message! And then we get an error message that doesn't say anything!

The issue is open and not closed !

adripanico · 2019-07-23T15:04:36Z

Sorry but:
So no one can seriously work with the new compiler for angular 8. It hardly goes slower anymore. An impertinence for every developer! We must wait 20 minutes to get an error message! And then we get an error message that doesn't say anything!

The issue is open and not closed !

I'm seriously working with the new compiler. I assume your "doesn't-say-anything" error is something miss-configured or any kind of issue during the upgrading on your side.

I don't think this error belongs to this issue: we are talking about compilation time here.

j-nord · 2019-07-23T15:06:27Z

Yes and the compilation time in angular 8 is toooooooo slow!

adripanico · 2019-07-23T15:11:48Z

It is actually faster than in Angular 7. The difference is that Angular 8 provides Differential Loading out-of-the-box. In my case, it was compiling two different versions, one for es5 and other one for es2015, doubling the compilation process.

alialtun14 · 2019-08-13T22:38:18Z

I would like to thank everyone who helped solve the problem. Today we have launched the application compiled with angular 8.

metallidevils · 2019-08-19T20:41:51Z

It is actually faster than in Angular 7. The difference is that Angular 8 provides Differential Loading out-of-the-box. In my case, it was compiling two different versions, one for es5 and other one for es2015, doubling the compilation process.

How do you disable this?

adripanico · 2019-08-20T07:12:45Z

It is actually faster than in Angular 7. The difference is that Angular 8 provides Differential Loading out-of-the-box. In my case, it was compiling two different versions, one for es5 and other one for es2015, doubling the compilation process.

How do you disable this?

You have two choices:

To keep the differential loading feature and configure the browserlist file so your output target is only es5.
To completely disable differential loading.

Complete guide is provided by official Angular docs: https://angular.io/guide/deployment#configuring-differential-loading

More info: https://stackoverflow.com/questions/56197896/how-to-turn-off-differential-loading-in-angular-v8

Hope this help.

yuezhizizhang · 2019-08-29T02:17:11Z

There is a new Angular 8 feature called differential loading. To support differential loading, Angular 8 would build two bundles of JavaScript files, one set to support modern browers, the other set to support legacy browsers. Hence, it takes at least twice the build time as before.

In Angular 7, there used to have a setting in angular.json file, which specifies whether support es5 browsers or not.

angular.json

"build": {
    "es5BrowserSupport":  false
}

However, in Angular 8 this setting is deprecated. Instead, you have to configure browserslist file to tell Angular build which browsers are supported. By default, browserslist looks like below:

browserslist

0.5%              # It says: I want to support all browsers that have at least .05% of the global browser usage.
                  # So this will include some really old browsers.
last 2 versions   # It says: the last 2 versions for each browser, even mobile browsers. But our app is not targeting at mobile devices.
Firefox ESR       # the latest [Firefox ESR] version.
not dead          # Don't support outdated browsers
not IE 9-11       # Don't support IE 9 - 11

If you only care about Edge, Firefox and Chrome, drop 0.5% and last 2 versions, one will include very old browsers, the other will include all of the mobile browsers.

angular-automatic-lock-bot · 2019-09-29T08:02:45Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

alan-agius4 added the needs: more info Reporter must clarify the issue label May 31, 2019

alialtun14 mentioned this issue Jun 4, 2019

Super slow build time while updating to v8.0.0 #14666

Closed

alan-agius4 mentioned this issue Jun 5, 2019

Angular 7/8 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory #13734

Closed

alan-agius4 closed this as completed Jun 5, 2019

kondi mentioned this issue Jun 12, 2019

In Angular 8, rebuild time increased 5 times #14746

Closed

tsiegleauq mentioned this issue Jul 14, 2019

Client production build OpenSlides/OpenSlides#4849

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

After upgrading to Angular 8 , compile time increased 3 times. #14604

After upgrading to Angular 8 , compile time increased 3 times. #14604

alialtun14 commented May 31, 2019 •

edited

Loading

trotyl commented May 31, 2019

alan-agius4 commented May 31, 2019

alan-agius4 commented May 31, 2019

alialtun14 commented May 31, 2019 •

edited

Loading

alan-agius4 commented May 31, 2019

alialtun14 commented Jun 1, 2019 •

edited

Loading

alialtun14 commented Jun 1, 2019 •

edited

Loading

alan-agius4 commented Jun 3, 2019

alialtun14 commented Jun 3, 2019 •

edited

Loading

alan-agius4 commented Jun 5, 2019

adripanico commented Jun 12, 2019 •

edited

Loading

micobarac commented Jun 18, 2019

kemsky commented Jun 18, 2019

adripanico commented Jun 18, 2019

Alcidauk commented Jun 18, 2019 •

edited

Loading

adripanico commented Jun 19, 2019

adripanico commented Jun 25, 2019

j-nord commented Jul 23, 2019 •

edited

Loading

adripanico commented Jul 23, 2019

j-nord commented Jul 23, 2019

adripanico commented Jul 23, 2019

alialtun14 commented Aug 13, 2019

metallidevils commented Aug 19, 2019

adripanico commented Aug 20, 2019 •

edited

Loading

yuezhizizhang commented Aug 29, 2019 •

edited

Loading

angular-automatic-lock-bot bot commented Sep 29, 2019

After upgrading to Angular 8 , compile time increased 3 times. #14604

After upgrading to Angular 8 , compile time increased 3 times. #14604

Comments

alialtun14 commented May 31, 2019 • edited Loading

trotyl commented May 31, 2019

alan-agius4 commented May 31, 2019

alan-agius4 commented May 31, 2019

alialtun14 commented May 31, 2019 • edited Loading

alan-agius4 commented May 31, 2019

alialtun14 commented Jun 1, 2019 • edited Loading

alialtun14 commented Jun 1, 2019 • edited Loading

Node: 12.3.1 + Angular: 7.2.15

Node: 10.16.0 + Angular: 7.2.15

Node: 12.3.1 + Angular 8.0

alan-agius4 commented Jun 3, 2019

alialtun14 commented Jun 3, 2019 • edited Loading

alan-agius4 commented Jun 5, 2019

adripanico commented Jun 12, 2019 • edited Loading

micobarac commented Jun 18, 2019

kemsky commented Jun 18, 2019

adripanico commented Jun 18, 2019

Alcidauk commented Jun 18, 2019 • edited Loading

adripanico commented Jun 19, 2019

adripanico commented Jun 25, 2019

j-nord commented Jul 23, 2019 • edited Loading

adripanico commented Jul 23, 2019

j-nord commented Jul 23, 2019

adripanico commented Jul 23, 2019

alialtun14 commented Aug 13, 2019

metallidevils commented Aug 19, 2019

adripanico commented Aug 20, 2019 • edited Loading

yuezhizizhang commented Aug 29, 2019 • edited Loading

angular-automatic-lock-bot bot commented Sep 29, 2019

alialtun14 commented May 31, 2019 •

edited

Loading

alialtun14 commented May 31, 2019 •

edited

Loading

alialtun14 commented Jun 1, 2019 •

edited

Loading

alialtun14 commented Jun 1, 2019 •

edited

Loading

alialtun14 commented Jun 3, 2019 •

edited

Loading

adripanico commented Jun 12, 2019 •

edited

Loading

Alcidauk commented Jun 18, 2019 •

edited

Loading

j-nord commented Jul 23, 2019 •

edited

Loading

adripanico commented Aug 20, 2019 •

edited

Loading

yuezhizizhang commented Aug 29, 2019 •

edited

Loading