Angular 2更改后不更新浏览器

Angular 2更改后不更新浏览器,angular,Angular,基本上,当我在应用程序中更改某些内容时,控制台可以检测到这些更改 [0]上午9:23:22-检测到文件更改。正在启动增量编译 [0]上午9:23:23-编译完成。监视文件更改 [1] [BS]文件已更改:app/components/logo/logo.component.js [1] [BS]文件已更改:app/components/navBar/navBar.component.js [1] [BS]文件已更改:app/components/sideBar/sideBar.component

基本上,当我在应用程序中更改某些内容时,控制台可以检测到这些更改

[0]上午9:23:22-检测到文件更改。正在启动增量编译

[0]上午9:23:23-编译完成。监视文件更改

[1] [BS]文件已更改:app/components/logo/logo.component.js

[1] [BS]文件已更改:app/components/navBar/navBar.component.js

[1] [BS]文件已更改:app/components/sideBar/sideBar.component.js

但它不再自动更新我的网络浏览器(屏幕变白,显示“正在加载…”信息:(我不知道为什么)

这是我的package.json

{
  "name": "room",
  "version": "1.0.0",
  "scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\"  ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install",
"build-master-sass": "node-sass -w style.scss style.css",
"build-children-sass": "node-sass -w -r app/css -o app/css",
"lint" : "tslint app/**/*.ts"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.1.2",
"es6-shim": "^0.33.4",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15",
"ng2-bootstrap": "1.0.5",
"bootstrap-material-design-icons" : "2.2.0"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.2",
"typings": "^0.6.8"
}
}

有什么建议吗?

我有一个类似的问题(beta.11)(MAC/Chrome)。在Angular IO教程之后,文件被检测为已更改并重新编译,但浏览器没有刷新。我有另一个项目(template starter)beta.8,它正在工作。一旦我发现差异,我会给你一个提示

最新消息:(让你兴奋的事情) 在将我的package.json从angular2.beta.11更改为(angular2.beta.8或angular2.beta.9)后,我安装了一个npm,然后[npm start]-浏览器同步启动并由浏览器更新。[CTRL-C]停止观看,然后将我的包更改回angular2.beta.11,然后执行另一个[npm install]和[npm start]
一个新的浏览器选项卡打开了,但当我进行更改时,它更新了我启动beta.8/9时启动和停止的另一个选项卡。而不是它启动的选项卡。Browsersync似乎不是从beta.11开始的?

我知道这个问题已经存在一年多了,但这个错误仍然存在。实际上,存在一个问题

在某些情况下,实时重新加载无法完成其工作,导致:

  • 代码中的更改不会触发新的编译
  • 更改会触发新编译,但浏览器提供的是旧版本
  • 在第一种情况下,不同的原因似乎是:

    • Angular cli的错误版本(切换到其他版本)
    • 文件路径中的空格或某些符号(如括号)(:避免空格和符号)
    • 文件系统缓存问题(保存操作后使用“同步”)
    • 观察者太多(:增加inotify max_user_watches)
    • 轮询文件更改之间的时间段(:使用--poll标志设置自定义时间段)
    对于像我一样经历过第二个问题的人(有编译,但没有浏览器更新),没有真正的解决办法。有些人认为禁用“安全写入”(在没有原子保存的编辑器中,如VS代码,它不适用)帮助了他们,但这不是我的情况。好消息是,这似乎主要发生在更新接口和定义(1-2行代码)时

    我能找到的最佳解决方法是强制进行较大的更改(即剪切文件的所有内容,保存、粘贴并再次保存)。在大多数编辑器中,这可以通过使用Ctrl+(a、X、S、V、S)快速实现


    作为最后手段,在所有情况下,重新启动“ng serve”更改后解决了问题。

    浏览器的JavaScript控制台中是否有错误消息?您是否尝试重新启动应用程序。我也遇到了此类问题,重新启动为我解决了。@Mikey
    您是否尝试关闭并再次打开它
    ,classic!:DYes…我重新启动了应用程序,也重新启动了应用程序。。@ThierryTemplier,我的控制台上有一些错误,比如“Uncaught(in promise)TypeError:object不是构造函数(…)”但在Safari中运行A2时,这是一个众所周知的问题。在Safari中,不会发生此错误。我尝试了相同的解决方案,并且它可以工作。但为什么它不能与beta 11一起工作?各位,你们很幸运!我改为Angular beta 9,但问题仍然存在:(此外,我将NPM替换为GULP并编写了自动化程序。我可以看到我的GULP显示“[BS]正在重新加载浏览器…”这意味着浏览器同步检测到了变化,但它什么也没做……嗨,大卫!嗯……是的,它很旧!事实上是在Webpack之前。我使用angular时再也没有问题了cli@MarcoJr你好!很高兴知道你不再有问题了。我认为这个bug非常依赖于环境,所以它不会影响每个人。无论如何,当我搜索SO以寻找解决方案时,这是我找到的最接近的东西。此外,GH自1.0.0-beta.11版(与其他答案相同)以来就有报道。因此,当我找到此信息时,我认为这可能是一个分享此信息的好地方:)希望它能帮助将来的人。此外,即使在大多数情况下,网页包可能是错误的根源,但还有很多其他因素。我认为在编译被触发但浏览器中没有更新的情况下,这不是它的错(就像我们两个都发生过的情况).实际上,Angular开发者已经从问题中删除了webpack标签。我也会这样做,并编辑我的答案以删除对webpack的引用,这可能会让人困惑。