angular-cli


How can I speed up Angular CLI Live Reload - 1-2 minutes per change


I have been using AngularCLI for my ng2 project and for the last few months it has been great. In the last few weeks, it seems to be getting slower and slower.
If I make a simple HTML change it now takes between 1 and 2 minutes to run with "ng serve" and refresh the browser. NodeJS consumes a lot of RAM and CPU when this happens.
I ran the same code and process on a new laptop next to me and it takes around 20 seconds. I am currently using CLI 1.0.0-beta.21 on Windows Home 10. I have 8 gigs ram/SSD/i7.
I have tried:
Deleting and reinstalling Node Modules
Upgrading to latest CLI version
Turning off Windows Defender (and excluding Node/and proj
folder from scans)
All to no avail.
Here is the output:
webpack: bundle is now INVALID.
6938ms building modules
72ms sealing
4ms optimizing
1ms basic module optimization
1074ms module optimization
5ms advanced module optimization
149ms basic chunk optimization
1ms chunk optimization
1ms advanced chunk optimization
702ms module and chunk tree optimization
2202ms module reviving
55ms module order optimization
71ms module id optimization
181ms chunk reviving
20ms chunk order optimization
806ms chunk id optimization
544ms hashing
7ms module assets processing
924ms chunk assets processing
45ms additional chunk assets processing
3ms recording
1ms additional asset processing
22536ms chunk asset optimization
1063ms asset optimization
545ms emitting
[default] Checking started in a separate process...
Hash: dedfa5a221b1992287d6
Version: webpack 2.1.0-beta.25
Time: 88912ms
Asset Size Chunks Chunk Names
bb73d75e8296ab5bc0a26b5d82006129.png 74.3 kB
main.bundle.js 7.26 MB 0, 2 [emitted] main
styles.bundle.js 43.2 kB 1, 2 styles
inline.bundle.js 5.54 kB 2 inline
styles.bundle.map 58.7 kB 1, 2 styles
inline.bundle.map 5.6 kB 2 inline
main.bundle.map 8.03 MB 0, 2 [emitted] main
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 8.11 kB 0
webpack: bundle is now VALID.
The latest beta of Angular CLI (19-24 at the time of writing), improve the build time quite a bit too. There's also a new flag (not sure if documented) you can use --progress false which also helps (works with ng build and ng serve).
There're also other flags not set for speed by default (you don't need to do anything about them) like verbose which is set to false by default.
More here:
https://github.com/angular/angular-cli/blob/master/packages/angular-cli/commands/serve.ts
Sorry to answer my own question, but I found a solution much to my surprise!
I found this NPM Package called "ember-cli-windows" which claims to be for specific Windows machines to disable Windows Defender (although I did try this) and Indexing.
I ran it and then also turned off Windows indexing completely and have now got the speed back down to 20 seconds (instead of 180).
[default] Checking started in a separate process...
Hash: ec2bcf489f8813c827a2
Version: webpack 2.1.0-beta.25
Time: 21055ms
Asset Size Chunks Chunk Names
bb73d75e8296ab5bc0a26b5d82006129.png 74.3 kB
main.bundle.js 7.26 MB 0, 2 [emitted] main
styles.bundle.js 43.2 kB 1, 2 styles
inline.bundle.js 5.54 kB 2 inline
styles.bundle.map 58.7 kB 1, 2 styles
inline.bundle.map 5.6 kB 2 inline
main.bundle.map 8.03 MB 0, 2 [emitted] main
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 8.11 kB 0
webpack: bundle is now VALID.

Related Links

chunk files size are multiplied by 5 on build size ng build --prod
AngularCli: disable minification
Angular Cli e2e element explorer not responding
Angular cli generate a service and include the provider in one step
Angular-cli not generating dist directory with ng build
How to update service json or array value on click in angular2?
How to revert from Angular-cli to Angular without cli for server-side rendering with Angular Universal
How to change file index outside the root
angularCLI Access-Control-Allow-Origin Multiple Origin Domains
Angular CLI how to merge json files
Angular CLI (ng) use single instead of double quotes
can't install angular cli on ubuntu 16.04
How to solve No 'Access-Control-Allow-Origin' header is present on the requested resource with angular 2 service written with angular-cli?
Usage of watch parameter in eject command of Angular CLI
Serving and testing a bundle after ng build
routerLink stopped working in #angular/cli

Categories

HOME
python
nlp
windows-store-apps
h2
rocketmq
yocto
jpanel
triggers
ng-admin
shipping
google-plus
packer
ctypes
mod-pagespeed
atlassian-plugin-sdk
vs2017
styles
plupload
ng2-dragula
plsqldeveloper
statusbar
facebook4j
explode
tfs2013
hanami
skmaps
dpi
phpspreadsheet
windows-10-iot-core
jquery-cycle2
ksoap
axis-labels
sonarqube-scan
poco-libraries
polyfills
ddms
onbackpressed
nashorn
lftp
crop
powermta
cppunit
ivona
facebook-chatbot
z3py
amazon-clouddrive
mouseclick-event
rhel6
httplib2
iphone-developer-program
jcreator
shinyjs
garrys-mod
onresume
svn-merge
verbose
software-product-lines
uiprogressview
django-filer
pagekit
mercurial-hook
mongo-c-driver
concur
xmp
void
schtasks.exe
eyeql
python-winshell
js-cookie
sevenzipsharp
ipojo
ffserver
leadtools-sdk
twitter-rest-api
magento-1.12
line-numbers
hidden-field
ogr2ogr
node-imagemagick
dto
surrogate-key
kraken.js
delphi-xe3
factors
opensocial
hamsterdb
gfs
windows-update
backbone-relational
client-side-scripting
mailcore
device-emulation
android-contextmenu
wpdb
angularjs-timeout
qsqltablemodel
n-layer
emacs23
qtembedded
windows-live-id
front-controller
mvvm-foundation
kpi
winsnmp
inline-if
castle-validators
cots

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App