开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

浏览器在部署新版本后会看到旧版本的Angular应用程序，即使在清除缓存之后也是如此

的原因可能是由于浏览器缓存机制导致的。浏览器为了提高网页加载速度和减少网络流量，会将已经访问过的资源（如JavaScript、CSS、图片等）缓存到本地。当浏览器再次访问同一个网页时，会优先从缓存中加载资源，而不是重新从服务器下载。

对于Angular应用程序而言，当部署新版本时，通常会生成新的文件名或者添加版本号作为文件的一部分，以避免缓存问题。但是，如果旧版本的Angular应用程序的文件名或者版本号没有发生变化，浏览器仍然会认为这是同一个资源，并从缓存中加载旧版本的文件。

解决这个问题的方法有以下几种：

强制浏览器重新加载资源：可以通过在HTML文件中引入资源时，在URL后面添加一个随机参数或者时间戳，以确保每次请求的URL都是不同的，从而强制浏览器重新加载资源。例如：

<script src="app.js?v=123456"></script>

这样每次部署新版本时，修改URL中的参数即可。

使用版本控制工具：可以使用版本控制工具（如Git）来管理Angular应用程序的代码，并在部署新版本时，更新代码并生成新的文件名或者版本号，确保浏览器能够正确加载新版本的文件。
使用HTTP缓存控制头：可以在服务器端设置HTTP响应头，控制浏览器对资源的缓存行为。通过设置合适的Cache-Control、Expires、ETag等头部信息，可以告诉浏览器在部署新版本时不要缓存旧版本的资源。

需要注意的是，以上方法都需要在Angular应用程序的部署过程中进行相应的配置和处理。具体的实施方法可以参考Angular官方文档或者相关的开发文档。

腾讯云相关产品和产品介绍链接地址：

腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云安全中心：https://cloud.tencent.com/product/ssc
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网通信（IoT Hub）：https://cloud.tencent.com/product/iothub
腾讯云移动推送（信鸽）：https://cloud.tencent.com/product/tpns
腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
腾讯云云直播（CSS）：https://cloud.tencent.com/product/css
腾讯云云点播（VOD）：https://cloud.tencent.com/product/vod
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
腾讯云云监控（Cloud Monitor）：https://cloud.tencent.com/product/monitor

相关搜索:Algolia继续显示旧的产品结果，即使在重新索引和缓存清除(Magento2)之后也是如此 Angular:主页在加载不同的路径之前渲染了一秒钟，即使在我删除了主页组件模板的内容之后也是如此 Flutter没有在设备上重新安装我的应用程序，即使在android studio上运行flutter clean之后也是如此 Msal-Angular v1 - acquireTokenPopup/LoginPopup返回权限不足的访问令牌，即使在授予管理员同意之后也是如此具有旧值的对象数组，即使在angular中使其为空之后也是如此在firebase上托管后，我无法看到我的api，即使在部署之后也是如此如何创建在隐身模式下保持不变的散列，即使在使用fingerprintjs2刷新浏览器之后也是如此？将附加的元素存储到div，即使在关闭浏览器之后也是如此应用程序接受来自google发布/订阅的重复消息，即使在确认之后也是如此腾讯云服务器文件

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

移除 View Engine 转用 Ivy，盘点Angular 12的重要更新

作者 | 核子可乐、晓旭在经历了多个 beta 与候选版本之后，Angular 12 终于正式发布了。...事实上，从 Angular 9 开始，新的 Angular 应用程序就默认启用 lvy。...在更新至 Angular 12 之后，应用会通过 ng update 进行更新并自动切换为新的 API。提供相关工具，可使用最新算法将旧版本地化 ID 迁移为新 ID。...默认情况下，CLI 将启用严格模式以捕捉开发早期的各种错误。 Webpack 5 模块捆绑器现已实现生产就绪。不再支持 IE11 浏览器。对于编译器，新版本提供转换组件样式资源的支持能力。...在表单中，引入最小与最大值验证器。 新版本可导出 HTTP 状态码列表。向 Angular 语言服务添加一项功能，允许用户直接访问使用模板文件的组件的实际位置。

4.4K1 0

Angular 17 有什么新功能？

Angular 还有一个新标志，您可以在这篇文章的顶部看到！控制流语法即使它只是一个“开发者预览”功能，这也是一个很大的功能！ Angular 模板正在演变为对控制流结构使用新的语法。...它仅在最新版本的 Chrome、Edge 和 Opera 中受支持（请参阅 caniuse.com 统计信息）但还没有在Firefox中。...onViewTransitionCreated Http的 fetch 后端（在 Angular v16.1 中引入）已提升为稳定版。使用 SSR 时，现在可以使用自定义传输缓存。...动画 Angular 的这一部分没有新功能，但现在可以延迟加载动画包。在独立应用程序中，您可以使用而不是使用和动画所需的代码将异步加载。...provideAnimationsAsync()provideAnimations() 应用程序应该工作相同，但是，在构建应用程序时，您应该会看到一个额外的块出现。

5673 0

2018 前端趋势：更一致，更简单

另一个值得注意的改进是共享内存和原子操作。然而，在暴露出他们出现浏览器侧信道攻击涉及推测执行之后，共享内存在2月5日被所有的主流浏览器暂时禁止。...有人说，这个命令的面世也是 React 近年来大受欢迎的部分原因。对于服务器端的 React 应用程序，next.js 是个很流行的选择。...然而，鉴于旧版本使用的是相当自由的 MIT 协议，尽管官方在2018年不会对其在继续支持，你也可以期待进一步的发展。近来 Angular 的发布引起了大家的注意，尤其是最新的 v5 版本的发布。...通过近来发布的版本，可以有趣的看到 Angular 在新的一年中竟会更加受到欢迎。尽管还很难说有多少，但是当你看到 NPM 的下载量的时候，Angular 并没有看起来增长的那么多。...它还可以指导 DOM 记录页面上的 HTML 和 CSS ，即使是最复杂的单页面应用程序也可以重建像素完美的视频。

1.4K2 0

web 深入视角：变态的静态资源缓存与更新

好了，请求方面的优化已经达到变态级别，那问题来了：你都不让浏览器发资源请求了，这缓存咋更新？很好，相信有人想到了办法：通过更新页面中引用的资源路径，让浏览器主动放弃缓存，加载新资源。...先部署页面，再部署资源：在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，...先部署资源，再部署页面：在部署时间间隔之内，有旧版本资源本地缓存的用户访问网站，由于请求的页面是旧版本的，资源引用没有改变，浏览器将直接使用本地缓存，这种情况下页面展现正常；但没有本地缓存或者缓存过期的用户访问网站...，就会出现旧版本页面加载新版本资源的情况，导致页面执行错误，但当页面完成部署，这部分用户再次访问页面又会恢复正常了。...5555 业界实践 Assets Pipeline Rails中的Assets Pipeline完成了以上所说的优化细节，对整个静态资源的管理上的设计思考也是如此，了解rails的人也可以把此答案当做是对

1.3K0 0

我的20年职业生涯：全是技术债

Silverlight 现在早已不复存在，他们用 JavaScript 重写了它，但 Watson 认为，新版本没有旧版本酷了。开发工具的变化有多快？...开发者可以在服务器端构建可重用的 UI 组件以呈现给浏览器，就像今天使用 100% 的 JavaScript 所做的那样。 WebForms 并不完美，但它是一个相当大的提升。...Watson 曾在项目中使用过旧版本的 Angular，如今却成了他必须升级的主要技术债。...而技术债的另一面是，随着时间的推移，一切都会慢慢“腐烂”——要么在升级到最新版本方面存在重大问题，要么由于更新的操作方式而最终失宠。 “一切最终都会变成技术债，否则项目就会夭折。...用户 com2kid 表示，他曾于 2008 年前后在微软工作，当时他看到过一个版权为 1994 年的头文件，里面还有作者姓名。搜索后发现，那位程序员已经在微软当上副总裁了。

2251 0

angular入门教程_初学者织围巾简单教程慢动作

这也是一个常见的坑，因为你需要给 Web 容器配置一下处理 http 请求的规则，把前端路由扔回去交给 Angular 处理，请参考这份文档。诸如此类的坑还有不少，我都是一个坑一个坑踩过来的。...这些教学用的开源项目本身是免费的，列在这篇文章的尾部。 Angular 的概念模型既然如此，问题就来了，新版本的 Angular 的核心概念是什么呢？...关于版本号根据官方的解释，Angular 从2.0之后会保证向下兼容，每隔半年会升级一个大版本，只有升级大版本的时候才会做一些 breaking change。...安装完成之后，使用 ng serve 命令启动项目：打开你的浏览器，访问默认的4200端口，看到以下界面说明环境 OK 了：请注意：这里是 serve，不是 server，我看到一些初学者经常坑在这个地方...所以，在正常的开发过程里面请不要加 –prod 参数。 ng serve 是在内存里面生成项目，如果你想看到项目编译之后的产物，请运行 ng build。

3.3K2 0

2018年值得关注度的语言、框架和工具

Angular.js 2 Angular.js 2今年发布。该框架由Google支持，非常受企业和大公司的欢迎。它具有大量的功能，使从网络到桌面和移动应用程序的写作成为可能。...框架是用TypeScript编写的，这也是编写应用程序的推荐语言。 Vue.js Vue.js也看到了今年的2.0版本。...Node.js Node.js是在浏览器外运行JS的主要方式。它看到了今年的许多新版本，增加了性能和增加覆盖整个ES6标准。...PouchDB是一个精神对应的CouchDB，完全在浏览器中工作，可以与Couch同步。这允许你在离线准备的网络应用程序中使用Pouch，并在互联网连接可用后自动同步。...对于2017年，我们建议你熟悉git命令行，因为它会比你想象的更方便。桌面应用程序还没有死。即使网络应用程序变得越来越有能力，有时你需要强大的功能和API，这是网络平台根本不可用。

1.2K12 0

如何在 ASP.NET MVC 中集成 AngularJS（1）

RequireJS 是一个众所周知的 JavaScript 模块和文件加载器，最新版本的浏览器是支持 RequireJS 的。...每次应用程序运行的时候，我想获得最新版本的应用程序和使用的版本号，以实现最新的 HTML 文件和 JavaScript 文件生成时，帮助浏览器从缓存中，获取最新的文件来替换那些旧文件。...下面是一个使用更新的 AssemblyVersion 和 AssemlyFileVersion 号的示例，这个示例在版本编译之后会通过插件自动地进行更新。...作为一个注脚，您将在 aboutController 看到一个名为 register.controller 的方法。在本文的后面，你会看到注册方法是从哪儿来的和它用来做什么。...你需要做的是使用 $controllerProvider 服务器在配置阶段之后，动态地加载控制器。Angular 使用 $controllerProvider 服务来创建新的控制器。

7.5K6 0

CleanMyMac X4.11.2最新版本功能简介

在CleanMyMac X 官网看到，它是由软件商 MacPaw 开发，获得了 2022 年亚洲设计奖，以及 2021 年红点设计概念大奖、UX 设计奖 2021 和 iF 设计奖 2020。...：扫描 Mac 上的最新并读和广告软件；删除恶意软件，如键盘侧录、间叠软件等；清除浏览历史记录和跟踪 cookies应用程序管理： CleanMyMac X 可以完全卸载不需要的应用程序并快速获取新的软件更新智能扫描虽说有...30 多种工具，但直接用智能扫描是最方便的了，这也是 CleanMyMac X 启动后的默认界面，点击扫描后稍等一段时间，就会显示出目前能够放心删除的系统垃圾（包括清除QQ、微信、优酷等软件留下的本地残馀文件...，助手就能帮忙了，它会提示你目前能够改善系统的方方面面，如下图：除了深度扫描、清理隐私、维护功能以外，还有一个喜闻乐见的可更新的应用程序功能，它能直接更新电脑里的旧版本软件，非常方便：卸载不再使用的软件如果...X激活码，输入完成之后会让我们提供一下其他信息，依次输入名称和邮箱即可，确认无误之后，点击【激活】；图10：输入已经正确获取的激活码图11：提供其他详情5、验证通过之后，这个软件就激活成功了。

4512 0

PWA - 令人惊奇的web用户体验新方法

旧的 Service Worker 脚本不再控制着页面，之后会被停止。 * 激活后( activated )：在这个状态会处理 activate 事件回调 (提供了更新缓存策略的机会)。...版本更新更新静态资源:缓存的资源随着版本的更新会过期, 所以会根据缓存的字符串名称(这里变量为 cacheStorageKey, 值用了 "minimal-pwa-1")清除旧缓存, 可以遍历所有的缓存名称逐一判断决决定是否清除..., 这样之后打开页面都会使用版本更新的缓存。...旧的 Service Worker 脚本不再控制着页面之后会被停止。...桌面浏览器可以直接通过 http://localhost:8088 访问, 从 DevTools 的 Application 标签可以看到 Service Worker。

2.5K1 0

每个程序员都需要学习 JavaScript 的7个理由

然后需要真正的JavaScript程序员进入清理留下的烂摊子。在StackOverflow，我们看到了一份非常详细的关于开发人员在过去三年时间中的归类。...当你最后看到“使用的技术”部分的时候，我们发现，如果你称自己为JavaScript程序员（这里假设是在客户端），那么你得到的报酬虽然比C#程序员低，但会比Java程序员要好，但如果你说自己是一个Node.js...唯一比Node.js还高的是Objective-C（我假设以后会是，Swift）。...所有的改变都是循序渐进的，就像浏览器正在不断地改进处理JavaScript代码的能力。可以预见在不久的将来，浏览器不仅可以缓存JavaScript文件，还可以缓存JavaScript文件的编译版本。...日趋完善的框架 Angular的新版本正在开发中，而且还有Aurelia作为候选。商业产品如Scencha的EXTjs。还有用于服务器端编程的Node.js。等等等等。

5849 0

如何成为一名Web前端开发人员？入行学习完整指南

经过如此多的试验和测试，而不是说你从头开始创建了所有内容，接着，你在网页上创建了第一个登录表单时，你感觉如何？经过了多次更改后，将布局分配给第一个Web应用程序时感觉如何？...后端和全栈开发也是如此。 2、Web开发的基本工具和软件计算机和操作系统：如果没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机（如果你拥有的话，那么更好……）。...你可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，可以使用适合你的MacOS，Windows（最新版本）或Linux。...它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。...15、部署和DevOps 托管全栈应用程序或后端应用程序比仅前端应用程序要复杂一些，尤其是当您拥有数据库时。确保您知道如何使用CLI进行部署。了解有关用于部署应用程序的以下内容。

2.1K1 1

Angular的12个经典问题，看看你能答对几个？（文末附带Angular测试）

ngOnChanges：当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。 ngOnInit：在第一个ngOnChange触发器之后，初始化组件/指令。...ngOnDestroy：在Angular销毁指令/组件之前清除。取消订阅可观察的对象并脱离事件处理程序，以避免内存泄漏。...ngAfterViewInit：Angular创建组件的视图后。 ngAfterViewChecked：在Angular检查组件视图的绑定之后。 2. ...因为shadow DOM本质上是静态的，同时也是开发人员无法访问的，所以它是一个很好的候选对象。因为它缓存的DOM将在浏览器中呈现得更快，并提供更好的性能。...编译好的HTML和JavaScript将会部署到Web服务器，以便浏览器可以节省编译和渲染时间。

17.3K8 0

Angular 13 发布：全面弃用 View Engine

，Angular 在最近的版本中一直支持它。...Angular Package Format (APF) 的更改删除了旧的输出格式，包括来自 APF 的 View Engine 特定元数据；使用最新版本的 APF 构建的库将不再需要使用 ngcc...结束对 IE11 的支持结束 IE11 的支持后： Angular 可以通过原生的 Web API 使用更现代浏览器功能；可以删除 IE 特定的 polyfills 和代码路径使得应用程序更小，...Angular CLI 的改进 Angular 13 项目中默认使用持久构建缓存，要启用此功能，可以在 angular.json 中添加如下配置： { "$schema": "......；支持 TypeScript 4.4； Angular 测试的改进 TestBed 现在在每次测试后能更好地销毁测试模块和环境； DOM 在每次测试后都会被清除。

2.7K2 0

如何在 ASP.NET MVC 中集成 AngularJS（3）

调试路由表 - HTML 缓存清除就在我以为示例应用程序完成之后，我意识到，我必须提供两个版本的路由表：一个运行在调试模式的应用程序下和一个运行在发布模式的应用程序下。...两个路由版本都包含的事情是：支持 HTML 文件的缓存，就像捆绑和 JavaScript，你还需要提供一个附属在 HTML Angular 视图上的序列号。...当开发一个 Web 应用程序时，一件你想要做的事情是：测试所有浏览器的缓存和缓存清除功能。...你将会想要确保你的应用内容被正确下载并缓存，这些内容会在页面请求之后出现。你将会对你的内容做很多改变，来重建你的应用，以确保清除缓存和内容被再次下载时新版本号的问题能够解决。...你甚至可以看到捆绑包的下载情况。最终，你点击你的应用程序的所有页面，你会发现，所有的内容是从浏览器缓存来了，这是单页应用的美丽之处。

1.8K10 0

html5离线缓存manifest详解

HTML5引入了应用程序缓存（Application Cache），通过创建manifest文件可以轻松地创建Web应用的离线版本，使Web应用可以在没有网络的时候任然可以访问。...manifest文件主要定义需要缓存的文件，支持manifest的浏览器将按照manifest文件的规则把文件保存在本地，这样在没有网络的时候就可以从本地读取缓存文件。...通过离线存储，我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中，这样即使在离线的情况下，用户也可以正常使用App。怎么用首先来讲解下离线存储的使用方法，说起来也很简单。...这里需要说明的是，如果需要看到离线存储的效果，那么你需要把你的网页部署到服务器上，不管是本地还是生产环境服务器中，通过本地文件打开网页是无法体验到离线存储的。...onupdateready:当浏览器对离线资源更新完成之后会触发这个事件onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件参考文章：https://developer.mozilla.org

1.8K3 1

KubeSphere实现金丝雀发布（Canary Release）

0 前言 KubeSphere 基于 [Istio] 向用户提供金丝雀发布功能，即：引入服务的新版本，并向其发送一小部分流量来进行测试同时，旧版本负责处理其余的流量如果一切顺利，就可逐渐增加向新版本发送的流量...会看到 Book Reviews 板块以 50% 比例在 v1 版本和 v2 版本之间切换：相信大家一眼就看出区别了：金丝雀发布任务创建后会显示在任务状态选项卡下：点击该任务查看详情可看到每个版本分别收到一半流量...在流量监控中，可看到不同服务之间的通信、依赖关系、运行状态及性能点击组件（例如 reviews），在右侧可以看到流量监控信息，显示流量、成功率和持续时间的实时数据： 4 查看链路追踪详情 KubeSphere...提供基于 Jaeger 的分布式追踪功能，用来对基于微服务的分布式应用程序进行监控及故障排查。...这代表 100% 的流量将会被发送到新版本 (v2) 如果新版本出现任何问题，可以随时回滚到之前的 v1 版本再次访问 Bookinfo，多刷新几次浏览器，您会发现页面只会显示 reviews

1691 0

现代脚本的加载

尽管这种方法比较通用，但它也有一些严重的缺点：因为依赖于服务端实现，所以前端资源不能被静态部署(例如静态网站生成器(如github page)，Netlify等等) 很难进行有效的缓存....，用户代理嗅探是一个比较有效的解决方案选项 3:不考虑旧版本浏览器 注意这里的‘旧版本浏览器’特指那些出现双重加载的浏览器....幸运的是这部分浏览器的市场范围通常是比较窄，因为用户会自动升级到最新的版本。Edge 16-18是例外, 但还有希望： 新版本的Edge会使用基于Chromium的渲染器，可以不受该问题的影响....对于某些应用程序来说，接受这一点妥协是完全合理的：你可以给90％的浏览器中提供现代代码，让他们获得更好的体验，而极少数旧浏览器不得不抛弃它们，它们只是付出的额外带宽(即双重加载)，并不影响功能。...如果你的网站用户主要使用移动设备或较新版本的浏览器，那么最简单的module/nomodule模式将适用于你的绝大多数用户, 其他用户就不考虑了，反正也是可以跑起来的, 优先考虑大多数用户的体验。

8452 0

PWA 的探索与应用

PWA是在传统Web应用的基础上，结合Manifest和service worker，完善Web应用的一些能力，比如：添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏实现离线缓存功能，即使用户手机没有网络...installed：SW已经完成了安装，等待其他的 SW 线程被关闭。 activating：在这个状态下清除其他的worker 以及关联缓存的旧缓存资源，等待新的 SW线程被激活。...在 activate 事件回调中执行self.clients.claim()方法表示取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。...旧的 Service Worker 脚本不再控制着页面，之后会被停止。 activated：在这个状态可以处理功能性的事件 fetch (请求)、sync (后台同步)、push (推送)。...通过监听 activate 事件你可以做一些预处理，如对旧版本的更新、对无用缓存的清理等。

3.1K9 0

解决 NET::ERR_CERT_DATE_INVALID 错误的 10 种方式

不同浏览器下清除缓存的方法参考如下链接： Chrome 下清除浏览器缓存 Firefox 下清除浏览器缓存 Safari 下清除浏览器缓存 ie 下清除浏览器缓存 Edge 下清除浏览器缓存 Opera...下清除浏览器缓存清除缓存和 Cookie 后，再次尝试重启浏览器并访问页面，查看是否可行。...清除 SSL 缓存如果清除了浏览器缓存也没用，那么可以尝试清除 SSL 缓存。SSL 缓存会存储访问过的站点的证书，这样下次访问的时候能够更快。...然而，这也会导致当证书更新了，但是浏览器还是从缓存中读取，没有拿到最新的证书。在 Windows 上清除 SSL 缓存，需要先打开控制面板，选择Internet 选项。...打开后，在内容面板，可以找到清除 SSL 状态的按钮。 ? 在 Windows 上清除 SSL 缓存再次重启浏览器并重试，如果还不能解决问题的话，那就只有最后一种方式了。

82.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭