3

I have an API in Symfony-PHP, which I test it with postman and it works like a charm. But when I do ng serve --aot --optimization the application starts to build and the message of compiled successfully. takes more than a minute. When I need to make a change to an html component such as a letter, it re-compiles the entire project and takes too long for such a small change.

The --watch parameter is set to true by default, which is ok. I don't know if anyone knows why this compilation is so slow.

Versions:

Angular CLI: 6.2.2
Node: 8.12.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.8.2
@angular-devkit/core         0.8.2
@angular-devkit/schematics   0.8.2
@schematics/angular          0.8.2
@schematics/update           0.8.2
rxjs                         6.2.2
typescript                   2.9.2


oscar@ubuntu:~$: ng s --aot --optimization


****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 10% building modules 7/8 modules 1 active ...s\orquestados-front-user\src\styles.cssBrowserslist: caniuse-lite is outdated. Please run next command `n 70% building modules 646/646 modules 0 activei ｢wdm｣: wait until bundle finished: /pages/offer/management/219702                                             92% chunk asset optimization TerserPlugini ｢wdm｣: wait until bundle finished: /pages/offer/management/219702
i ｢wdm｣: wait until bundle finished: /pages/offer/management/219702
Date: 2019-09-30T08:30:18.736Z
Hash: 9afdb6037df5643d0cb2
Time: 512136ms
chunk {0} runtime.js, runtime.js.map (runtime) 1.45 kB [entry] [rendered]
chunk {1} main.js, main.js.map (main) 2.3 MB [initial] [rendered]
chunk {2} polyfills.js, polyfills.js.map (polyfills) 62 kB [initial] [rendered]
chunk {3} styles.js, styles.js.map (styles) 45.6 kB [initial] [rendered]
chunk {4} vendor.js, vendor.js.map (vendor) 1020 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
Oscar
  • 1,929
  • 3
  • 16
  • 31
  • Because you use AOT compilation, which builds your entire project. If I'm not mistaken, I think that [Ivy will resolve this issue](https://angular.io/guide/ivy) –  Sep 30 '19 at 09:01
  • I'm gonna try Ivy but with aot=false is building the entire project too. Let me check how Ivy works and i'll tell u. TY! – Oscar Sep 30 '19 at 09:11
  • Yes, but JIT [compiles the code at runtime](https://angular.io/guide/aot-compiler) –  Sep 30 '19 at 09:12
  • [`JIT compilation is the default (as opposed to AOT compilation) when you run Angular's ng build and ng serve CLI commands, and is a good choice during development. JIT mode is strongly discouraged for production use because it results in large application payloads that hinder the bootstrap performance.`](https://angular.io/guide/glossary#J) –  Sep 30 '19 at 09:14
  • So if i dont use --aot the default is JIT? – Oscar Sep 30 '19 at 10:51
  • see the time in my questions. 512136ms is more than 8 minutes! let me check without --optimization and without --aot – Oscar Sep 30 '19 at 10:53
  • @Maryannah I've tryed with Ivy but then i've had some problems with import components. If i add Ivy i get an error because doesn't find pipe component..weird. If anyone want, we can continue talking by telegram. https://t.me/l0c09 is my account – Oscar Sep 30 '19 at 11:43

2 Answers2

5

Leave out --optimization. Then the build on change will take much less time. Try also without --aot. First build always takes some time. But then incremental build takes just a few seconds.

kvetis
  • 6,682
  • 1
  • 28
  • 48
  • 1
    It should be a littl efaster. But just not that faster. --optimization is only needed for production builds. – kvetis Sep 30 '19 at 10:58
  • The only problem is the website is slower than before. Why happend this? – Oscar Sep 30 '19 at 12:19
  • 2
    Without `--aot` the templates are built in the browser. – kvetis Sep 30 '19 at 12:38
  • 1
    I find that it's better to leave --aot an accept slower build time than accept building templates in browser and dealing with slow loading (37 seconds for my large SPA app). – JustAMartin Nov 22 '19 at 21:20
0

You can simply use ng s. AOT and Optimization is needed only for production build.

ng s
rohithpoya
  • 865
  • 7
  • 20