angularjs 代码更改在浏览器刷新后不显示

Question

任何时候，我在 .hmtl 文件或 .js 文件中进行代码更改，浏览器仍然呈现旧代码，而我的新代码更改不会显示在浏览器结果中。

比如我在.html文件中加入如下两行代码

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

然后我执行以下操作：

在VS2013中，右键单击我的项目并在浏览器（IE或Chrome）中查看。
登录到我的应用程序。
转到相应的页面，我看到了旧 html 文件的渲染。我根本看不到新添加的 2 个 div 元素。
我什至按了 f5 来刷新浏览器，但还是不行。

我做错了什么？

Answer 1

在浏览器中按 F12 调出开发人员工具。禁用缓存。重新加载您的页面。

Answer 2

尝试使用开发工具禁用缓存：

https://developer.chrome.com/devtools/docs/settings#general

Answer 3

或者您可以使用 Visual Studio 2013 中的 Browserlink 来自动重新加载页面

http://www.asp.net/visual-studio/overview/2013/using-browser-link

Answer 4

除了使用开发工具确保禁用缓存外，您还可以编辑 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>

我的 Angular 根目录是 app/。您可能需要根据您的文件结构进行修改。

Answer 5

问题

开发环境中静态文件的客户端（浏览器）缓存
开发环境中静态文件的服务器端 (IIS Express) 缓存

解决方案

For Client-side (Browser) caching of static files in dev enviornment

Web.Config/ApplicationHost.config 方法：Web.config 方法由上面的@NateBarbetini 建议。请注意，这种方法是也可以应用于 'Applicationhost.config' 而不是 web.config 文件。
"Always Refresh From Server" 在 IE 中，正如上面@Phil Degenhardt 所建议的那样。请在下面找到屏幕截图。
导航到浏览器地址栏中的源文件位置：尝试通过键入地址导航到有问题的 JavaScript 文件。它将显示 JavaScript 文件内容。执行此操作后，文件会得到 updated.So，您可以再次返回并尝试导航到应用程序的正确登录页面。这一次，您将看到最新的 JavaScript 代码被执行。例如如果您对不更新 'app/home/home-account.js' 有疑问。然后在浏览器中导航到 'http://[your-host/localhost]:[specified port of your application]/app/home/home-account.js。这将向您显示内容。然后再次导航到您的应用程序的主页，即在本例中 'http://[your-host/localhost]:[specified port of your application]/'

For Server-side (IIS-Express) caching of static files in dev enviornment

访问 IIS Express appcmd 命令行实用程序。在我的例子中，appcmd 位于 "C:\Program Files(x86)\IIS Express\appcmd.exe" 这个路径中。然后使用SITE list和SITE delete命令删除缓存在iisexpress中的临时文件。
这里还提到了一种针对IE的解决方案： Visual Studio 2013 caching older version of .js file

Answer 6

发生这种情况是因为浏览器存储了缓存。在运行您的应用程序之前，您可以删除浏览器存储的缓存和 cookie。

Answer 7

仅限 TypeScript！

在tsconfig.json中添加…

"compileOnSave": true,

Answer 8

在 chrome 和 select 网络选项卡中打开开发工具，在网络选项卡中 Un-check 禁用缓存并重新加载页面。

Answer 9

通过 IIS 管理器设置 HTTP 响应 headers 使内容过期。

为您的 Web 应用程序打开 HTTP 响应 Headers 模块
在操作窗格中单击设置通用headers

https://www.iis.net/configreference/system.webserver/staticcontent/clientcache

Answer 10

对我来说，none 之前的答案有效。我正在使用 Chrome，我能够查看更新的唯一方法是打开隐身模式 window。我的常规浏览器 window，出于某种原因，无法获取最新资源。

我尝试过清除缓存、禁用 devtools 上的缓存和硬刷新，但都无济于事。我能够修复它的唯一方法是清除 DNS 缓存。这是一个包含更多详细信息的 link：

How to Clear the DNS Cache on Computers and Web Browsers

使用命令行，以下是您的操作方法：

Windows 7 及更早

ipconfig /flushdns

Windows 8

ipconfig /flushdns

OSX（Yosemite、El Capitain 和 Sierra）

sudo dscacheutil -flushcache
sudo killall -HUP mDNSResponder

Answer 11

您需要将 aspnetcore 环境变量从生产更改为开发。来自 official website：

...设置一个环境变量，在开发模式下告诉ASP.NET到运行：

如果您在 Windows 中使用 PowerShell，请执行 $Env:ASPNETCORE_ENVIRONMENT = "Development"
如果您在 Windows 中使用 cmd.exe，请执行 setx ASPNETCORE_ENVIRONMENT "Development"，然后重新启动命令提示符以使更改生效
如果您正在使用 Mac/Linux，请执行导出 ASPNETCORE_ENVIRONMENT=开发

如果您在 linux 中，您可能必须以超级用户身份执行此操作。即

sudo export ASPNETCORE_ENVIRONMENT=Development

重新启动后，变量的值可能会恢复为 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"
         }
       }
     }  
   }

了解环境 here:

Answer 12

在 chrome 中按 F12> 转到网络选项卡> 禁用缓存

Answer 13

您需要运行命令yarn webpack:build重新编译您的客户端代码。否则.HTML、.json、.ts中的modifications/updates个文件不会反映出来。

Answer 14

我在隐身模式下打开了 link，因为在该模式下缓存被禁用并且它工作正常。

Answer 15

我只是删除了 Visual Studio 中的 dist 文件夹，它又自动刷新了。

**** 这是给 Angular 7 ***

Answer 16

从源代码的 clientApp 文件夹中删除 dist 文件夹解决了我的问题，它再次开始自动刷新

Answer 17

只需右键单击浏览器上的页面重新加载按钮，然后选择“清空缓存和硬重新加载”

Answer 18

在我的例子中 Angular.json 文件 "deployUrl" 中的问题：应该是相对路径像 "/support/yourpagenam/bundle/dist/" 因此，在 Angular 文件中所做的任何更改都不会反映到浏览器中。

angularjs 代码更改在浏览器刷新后不显示

angularjs code changes do not show up after browser refresh

html

angularjs

visual-studio-2013

问题

解决方案