Html 浏览器刷新后不显示 angularjs 代码更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28311542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angularjs code changes do not show up after browser refresh
提问by dotnet-practitioner
Any time, I make code changes in .hmtl file or the .js file, the browser still renders the old code and my new code changes don't show up in the browser result.
任何时候，我在 .hmtl 文件或 .js 文件中进行代码更改时，浏览器仍会呈现旧代码，而我的新代码更改不会显示在浏览器结果中。
For example, I add the following 2 lines of code in .html file.
例如，我在 .html 文件中添加了以下 2 行代码。
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls readonly">
{{profile.FirstName}}
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name</label>
<div class="controls readonly">
{{profile.LastName}}
</div>
</div>
Then I do the following:
然后我执行以下操作：
- In VS2013, right click on my project and view in browser (IE or Chrome).
- Login to my application.
- Go the respective page and I see the rendering of the old html file. I do not see the newly added 2 div elements rendered at all.
- I even hit f5 to refresh the browser but still no luck.
- 在 VS2013 中，右键单击我的项目并在浏览器（IE 或 Chrome）中查看。
- 登录到我的应用程序。
- 转到相应的页面，我看到旧 html 文件的呈现。我根本看不到新添加的 2 个 div 元素。
- 我什至按 f5 来刷新浏览器，但仍然没有运气。
What am I doing wrong?
我究竟做错了什么？
回答by Phil Degenhardt
Hit F12 in your browser to bring up the Developer Tools. Disable the Cache. Reload your page.
在浏览器中按 F12 以调出开发人员工具。禁用缓存。重新加载您的页面。
回答by Nate Barbettini
Besides using Dev Tools to make sure the cache is disabled, you can edit your Web.configfile and tell IIS to not cache your Angular files:
除了使用 Dev Tools 确保缓存被禁用之外，您还可以编辑您的Web.config文件并告诉 IIS 不要缓存您的 Angular 文件：
<configuration>
<!-- Disable IIS caching for directories containing Angular templates and scripts -->
<location path="app">
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache"/>
</staticContent>
</system.webServer>
</location>
...
</configuration>
My Angular root directory is app/. You may need to modify according to your file structure.
我的 Angular 根目录是app/. 您可能需要根据您的文件结构进行修改。
回答by RGH
TypeScript only!
仅限打字稿！
In tsconfig.json add…
在 tsconfig.json 添加...
"compileOnSave": true,
回答by Oka
Try disabling your cache with Dev Tools:
尝试使用开发工具禁用缓存：
回答by harry_42
Open devTools in chrome and select Network tab, In Network tab Un-check the Disable cache and reload the page.
在 Chrome 中打开 devTools 并选择网络选项卡，在网络选项卡中取消选中禁用缓存并重新加载页面。
回答by Gene Parcellano
For me, none of the previous answers worked. I was using Chrome, and the only way I was able to view the update was by opening an incognito window. My regular browser window, for some reason, just will not get the latest assets.
对我来说，以前的答案都没有奏效。我使用的是 Chrome，我能够查看更新的唯一方法是打开一个隐身窗口。由于某种原因，我的常规浏览器窗口无法获取最新资产。
I have tried clearing my cache, disabling cache on devtools, and hard refresh, to no avail. The only way I was able to fix it was by clearing the DNS cache. Here's a link with more details:
我尝试清除缓存、禁用 devtools 上的缓存和硬刷新，但均无济于事。我能够修复它的唯一方法是清除 DNS 缓存。这是一个包含更多详细信息的链接：
How to Clear the DNS Cache on Computers and Web Browsers
Using command line, here's how you go about doing it:
使用命令行，这是你如何去做的：
Windows 7 & Earlier
Windows 7 及更早版本
ipconfig /flushdns
Windows 8
视窗 8
ipconfig /flushdns
OSX (Yosemite, El Capitain, and Sierra)
OSX（优胜美地、El Capitain 和 Sierra）
sudo dscacheutil -flushcache
sudo killall -HUP mDNSResponder
回答by vinayak hegde
In chrome press F12>go to network tab> disable cache
在chrome中按F12>转到网络选项卡>禁用缓存
回答by Valerie
You need to run command yarn webpack:buildto recompile your client code. Otherwise modifications/updates in .HTML, .json, .tsfiles will not be reflected.
您需要运行命令yarn webpack:build来重新编译您的客户端代码。否则将不会反映.HTML, .json,.ts文件中的修改/更新。
回答by mm_
You need to change the aspnetcore enviroment variable from production to development. From the official website:
您需要将 aspnetcore 环境变量从生产更改为开发。来自官方网站：
... set an environment variable to tell ASP.NET to run in development mode:
...设置一个环境变量来告诉 ASP.NET 在开发模式下运行：
- If you're using PowerShell in Windows, execute $Env:ASPNETCORE_ENVIRONMENT = "Development"
- If you're using cmd.exe in Windows, execute setx ASPNETCORE_ENVIRONMENT "Development", and then restart your command prompt to make the change take effect
- If you're using Mac/Linux, execute export ASPNETCORE_ENVIRONMENT=Development
- 如果您在 Windows 中使用 PowerShell，请执行 $Env:ASPNETCORE_ENVIRONMENT = "Development"
- 如果您在 Windows 中使用 cmd.exe，请执行 setx ASPNETCORE_ENVIRONMENT "Development"，然后重新启动命令提示符以使更改生效
- 如果您使用的是 Mac/Linux，请执行 export ASPNETCORE_ENVIRONMENT=Development
If you are in linux, you might have to do it as a superuser. i.e.
如果您使用的是 linux，则可能必须以超级用户身份执行此操作。IE
sudo export ASPNETCORE_ENVIRONMENT=Development
sudo export ASPNETCORE_ENVIRONMENT=Development
The value of the variable may revert back to Productionafter re-booting. If you want to work with several environments, I suggest you define them in the launchSettings.jsonfile:
Production重新启动后，该变量的值可能会恢复。如果您想使用多个环境，我建议您在launchSettings.json文件中定义它们：
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:40088/",
"sslPort": 0
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express (Staging)": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Staging"
}
}
}
}
Read about environments here:
回答by Toan Nguyen
Or you can use Browserlink in Visual Studio 2013 to automatically reload the page
或者您可以使用 Visual Studio 2013 中的 Browserlink 自动重新加载页面
http://www.asp.net/visual-studio/overview/2013/using-browser-link
http://www.asp.net/visual-studio/overview/2013/using-browser-link
