本地开发中的Angular2慢速自动页面刷新 - Windows

Question

我是angular2的新手并且遵循docs的heros教程。我在使用angular2时遇到了相当慢的开发经验。 angular2需要大约5秒来检测文件中的变化，然后接下来需要30-40秒来重新加载页面。

[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)

虽然这个时间似乎并不重要，但是当我必须定期更改并检查输出时，它会开始累加。

任何有关为什么angular2在开发中都很慢的建议...... ??

Answer 1

问题

问题不在于angular2，而是与Windows / Antivirus有关，因为他们因为所谓的安全措施而放慢了node.js的速度。

解决方案

• 禁用Windows防御程序（或任何其他防病毒软件）的实时防护，因为它会减慢速度 node.js
• 以管理员身份运行控制台（或gitbash，如果您使用它）
• 使用SSD驱动器

终极解决方案

性能和节点模块的常量问题没有安装，迫使我彻底抛弃Windows 。当我转向mac时，节点和角度开发体验 WAY 更好，差异就像暗夜和全阳光闪亮的广泛日子。

更多细节

阅读此excellent answer以获取更多详细信息。

Answer 2

您还可以尝试让lite-server不监控您的node_modules目录。有关配置说明，请参阅此处：https://github.com/johnpapa/lite-server

• 在项目中添加bs-config.json并指定要重新加载的文件

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

• 在packages.json

  中将配置文件添加到您的初创公司

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

Answer 3

您可以运行项目添加--aot参数，例如

originalName.notifyChange();