Angular2 slow auto page refresh in local development - Windows

Question

I am new to angular2 and following the heros tutorial from docs. I am experiencing quite slow development experience with angular2. It takes about 5 secs for angular2 to detect changes in file, and then next 30-40 seconds to reload the page.

[0] 8:08:12 PM - File change detected. Starting incremental compilation...
[0] app/hero-detail.component.ts(2,8): error TS1192: Module '"app/app.component"' has no default export.
[0] 8:08:16 PM - Compilation complete. Watching for file changes.
[1][BS] File changed: app\app.component.js
[1] [BS] File changed: app\hero-detail.component.js
[1] [BS] File changed: app\main.js
[1] 16.02.07 20:08:39 304 GET /./index.html (Unknown - 8551ms)
[1] 16.02.07 20:08:45 304 GET /./index.html (Unknown - 1145ms)
[1] 16.02.07 20:08:45 304 GET /node_modules/es6-shim/es6-shim.min.js (Unknown - 384ms)
[1] 16.02.07 20:08:45 304 GET /node_modules/systemjs/dist/system-polyfills.js (Unknown - 393ms)
[1] 16.02.07 20:08:45 304 GET /node_modules/angular2/bundles/angular2-polyfills.js (Unknown - 399ms)
[1] 16.02.07 20:08:46 304 GET /node_modules/systemjs/dist/system.src.js (Unknown - 906ms)
[1] 16.02.07 20:08:46 304 GET /node_modules/rxjs/bundles/Rx.js (Unknown - 911ms)
[1] 16.02.07 20:08:47 304 GET /node_modules/es6-shim/es6-shim.min.js (Unknown - 962ms)
[1] 16.02.07 20:08:47 304 GET /node_modules/systemjs/dist/system-polyfills.js (Unknown - 967ms)
[1] 16.02.07 20:08:47 304 GET /node_modules/angular2/bundles/angular2.dev.js (Unknown - 972ms)
[1] 16.02.07 20:08:47 304 GET /node_modules/angular2/bundles/angular2-polyfills.js (Unknown - 977ms)
[1] 16.02.07 20:08:48 304 GET /node_modules/systemjs/dist/system.src.js (Unknown - 1429ms)
[1] 16.02.07 20:08:48 304 GET /node_modules/rxjs/bundles/Rx.js (Unknown - 1431ms)

Although this time may seems not significant but when I have to make regular changes and check output, it starts to add up.

Any suggestions why angular2 is slow in development..??

Answer 1

Problem

The problem was not with angular2, rather it was with Windows/Antivirus as they were slowing down node.js due to their so-called security measures.

Solution

• Disable realtime protection from windows defender (or any other antivirus), as it slows down node.js
• Run console (or gitbash if you use that) as an administrator
• Use SSD drive

Ultimate Solution

The constant problems of performance and node modules not being installed, forced me to completely ditch Windows. And the day I shifted to mac, node and angular development experience was WAY better, the difference was like dark-night and full-sunny-shiny-broady-day.

More details

Read this excellent answer to get more details.

Answer 2

You can also try to have lite-server not monitor your node_modules directory. See here for config instructions: https://github.com/johnpapa/lite-server

• Add a bs-config.json to your project and specify files to watch for a reload

  {
  "port": 8000,
  "files": ["./app/**/*.{html,htm,css,js}", "./*.{html,css,js,json}"],
  "server": { "baseDir": "./" }
  }
  

• Add the config file to your startup in packages.json

  {
    ...
    "scripts": {
      ...
      "lite": "lite-server -c bs-config.json",