首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在index.html上的angular构建散列文件中添加当前datetime作为版本号

在index.html上的Angular构建散列文件中添加当前datetime作为版本号的方法如下:

  1. 首先,在Angular项目的根目录下找到angular.json文件,并打开它。
  2. angular.json文件中,找到projects节点下的你的项目名称,然后找到该项目下的architect节点。
  3. architect节点下,找到build节点,然后找到该节点下的options节点。
  4. options节点中,找到outputPath属性,该属性指定了构建输出的目录,默认为dist/
  5. outputPath指定的目录下,找到生成的index.html文件。
  6. 打开index.html文件,找到需要添加版本号的资源文件(通常是CSS和JS文件)的引用标签。
  7. 在每个资源文件的引用标签中,添加一个查询参数,将当前的datetime作为版本号。例如,假设要添加版本号的资源文件为main.js,引用标签如下:
代码语言:txt
复制
<script src="main.js?v={{ currentDateTime }}"></script>
  1. 在Angular项目的根目录下找到src文件夹,并在其中创建一个名为app的文件夹。
  2. app文件夹中创建一个名为app.component.ts的文件,并打开它。
  3. app.component.ts文件中,添加以下代码:
代码语言:txt
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '',
})
export class AppComponent {
  currentDateTime: string;

  constructor() {
    this.currentDateTime = new Date().toISOString();
  }
}
  1. 保存并关闭app.component.ts文件。
  2. 返回到angular.json文件,在architect节点下找到build节点,然后找到该节点下的options节点。
  3. options节点中,找到scripts属性,该属性指定了要在构建期间注入到index.html的脚本文件。
  4. scripts属性的数组中,添加一个路径指向刚刚创建的app.component.ts文件。例如:
代码语言:txt
复制
"scripts": [
  "src/app/app.component.ts"
]
  1. 保存并关闭angular.json文件。
  2. 在命令行中运行以下命令,重新构建你的Angular项目:
代码语言:txt
复制
ng build
  1. 构建完成后,查看生成的index.html文件,你会发现资源文件的引用标签中已经添加了当前datetime作为版本号。

这样,你就成功地在index.html上的Angular构建散列文件中添加了当前datetime作为版本号。每次构建时,datetime会自动更新,从而确保浏览器能够获取到最新的资源文件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

dotnet 配合 GitHub 的 Action 做自动推 Tag 时打包 NuGet 包

此时遇到的问题是,如何在 GitHub 上执行打包,打包的时候如何指定 NuGet 包的版本号。...自动打包上传 nuget 文件 本文将在此基础上实现本地推送一个 Tag 到 GitHub 服务器上,就会触发 GitHub 的 Action 的自动构建,自动构建的 NuGet 包的版本就是 Tag...这个组织方式在当前大量官方的 dotnet 开源项目,如 WPF 开源项目都是这样使用,只是存放的内容和路径不太相同 在自动化构建时,将通过 dotnetCampus.TagToVersion 工具将版本号写入到...而这个版本会在构建的时候被工具修改为推送的版本号,也就是这个项目构建的输出文件的版本号就是推送的版本号,通过这个方式就可以完成打包 可以看到现在有几个项目都在使用这个方式进行打包,如 dotnet-campus...本文的方法依然适用构建应用,如构建 WPF 应用,或打包为 UWP 应用。

1K20

如何在 Windows 上安装 Angular:Angular CLI、Node.js 和构建工具指南

如何在 Windows 上安装 Angular:Angular CLI、Node.js 和构建工具指南 本文翻译自How to Install Angular on Windows: A Guide to...什么是 Angular CLI? Angular CLI 是用于初始化和使用 Angular 项目的官方工具。它使您免于复杂配置和构建工具(如 TypeScript、Webpack 等)的麻烦。...lint (l): 在给定项目文件夹中的 Angular 应用程序代码上运行 linting 工具。 new (n): 创建一个新的工作区和一个初始的 Angular 应用程序。...当然,您可以为您的项目选择任何有效的名称。由于我们将创建一个全栈应用程序,因此我使用 frontend 作为前端应用程序的名称。 如前所述,CLI 会询问您是否要添加 Angular 路由?...Angular CLI 将自动在 src/app.module.ts 文件中添加对组件、指令和管道的引用。

61700
  • dotnet 配合 Gitlab 做自动推 Tag 时打包 NuGet 包

    我现在的团队内部用的是 Gitlab 工具,在此工具上提供了 Gitlab CI CD 用于做自动化测试和构建。对于 CBB 来说,发布就是打出 NuGet 包然后上传到内部 NuGet 服务器。...此时遇到的问题是,如何在 Gitlab 上执行打包,打包的时候如何指定 NuGet 包的版本号。...也就是本地打一个 Tag 号,推送到 Gitlab 上,就会出发 Gitlab 的自动构建,自动构建里面将会获取 Tag 版本号,然后打出 NuGet 包推送到服务器 在阅读本文之前,期望大家了解什么是...通过 only 里面设置 tags 就可以在推送 Tag 到 Gitlab 上自动触发构建 现在的问题是如何让推送的 Tag 的版本号作为 NuGet 包的版本号 在 Gitlab 里面将会在执行构建的时候注入环境变量...而开发者最多也就是改版本号做本地打包 那么对于配置管理来说,如何在推送 Tag 打包的时候自动设置版本号?

    1.7K10

    【ASP.NET Core 基础知识】--前端开发--集成前端框架

    ng build --prod 将构建后的文件部署到 ASP.NET Core 项目: 将 Angular 应用构建后生成的 dist 文件夹中的内容复制到 ASP.NET Core 项目的 wwwroot...配置 ASP.NET Core 以提供静态文件: 在 ASP.NET Core 项目的 Startup.cs 文件中的 Configure 方法中添加以下代码来启用静态文件服务。...配置 ASP.NET Core 以提供静态文件: 在 ASP.NET Core 项目的 Startup.cs 文件中的 Configure 方法中添加以下代码来启用静态文件服务。...npm run build 将构建后的文件部署到 ASP.NET Core 项目: 将 Vue 应用构建后生成的 dist 文件夹中的内容复制到 ASP.NET Core 项目的 wwwroot 文件夹中...配置 ASP.NET Core 以提供静态文件: 在 ASP.NET Core 项目的 Startup.cs 文件中的 Configure 方法中添加以下代码来启用静态文件服务。

    24200

    在.Net Core中构建一个基本的区块链

    索引 时间戳 先前的哈希码(散列) 哈希码 数据 第一个块是一个特殊的块:起源块。起源块是唯一没有先前的块且不包含数据的块。...这就是为什么我在代码中添加了一个IsValid方法。...每个块的散列以查看该块是否被更改 前一个块的散列,以查看该块是否被更改并重新计算 然后,在数据篡改和数据篡改之后,我们调用IsValid,查看是否存在任何数据问题。...现在,当攻击者重新计算所有当前块和以下块的散列时,该如何处理呢?...您可以在Visual Studio 2017中打开并运行示例代码。这是我的“在.net Core中构建区块链”系列的第一篇文章。 作者: Henry He从事软件开发已经超过十年了。

    1.3K20

    如何在 ASP.NET MVC 中集成 AngularJS(2)

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩、应用程序版本自动刷新和工程构建等内容。...捆绑可以很容易地将多个文件合并或捆绑到一个文件中。您可以创建 CSS,JavaScript 和其他包。压缩可以优化脚本和 CSS 代码,如去除不必要的空格和注释,缩短变量名到一个字符。...我为工程中的每一个文件设置了一个独立的捆绑,包括对脚本的单独捆绑,Angular 的核心文件,共享的 JavaScript 文件和主目录单,客户目录和产品目录。...在这种模式下,应用的版本序列号会被追加到捆绑中的所有JavaScript 文件的脚本标签中。对于标准的渲染脚本标签格式不包含追加版本号来说,这也算是个小弥补。...为了避免这个问题一起发生,应用程序版本号会被附加到脚本标签中。使用自动版本插件,版本号会在每次构建中自动递增。

    8.3K100

    C# 200行代码实现区块链

    )来确定和维护链中块和块正确的顺序,确保每一个块的 PrevHash 值等于前一个块中的 Hash 值,这样就以正确的块顺序构建出链: ?...3、散列与生成区块 使用散列是因为可以使用极少的控件生成每一个区块的唯一标识,而且可以维持整个区块链的完整性,通过每个区块存储的前一个链的散列值,我们就可以确保区块链当中每一个区块的正确性,任何针对区块的无效更改都会导致散列值的改变...那么我们就在 BlockGenerator 当中添加一个函数用于计算 Block 的 Hash 值: /// /// 计算区块 HASH 值 /// ///区块实例 ///计算完成的区块散列值...这里掺入了一个 CalculateCurrentTimeUTC 函数,该函数主要是用于将 DateTime.Now 时间转换为 UTC 时间,如下: /// /// 计算当前时间的 UTC 表示格式...= newBlock.Hash) return false; return true; } 除开区块校验的问题之外,如果有两个节点被分别添加到各自的区块链上,我们应该始终以最长的那一条为主线

    1.3K10

    Angular系列教程-第五节

    它会标出该模块自己的组件、指令和管道,通过 exports 属性公开其中的一部分,以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用的依赖注入器中。...bootstrap —— 根组件,Angular 创建它并插入 index.html 宿主页面。 该模块的 declarations 数组告诉 Angular 哪些组件属于该模块。...这些可声明的类在当前模块中是可见的,但是对其它模块中的组件是不可见的 —— 除非把它们从当前模块导出, 并让对方模块导入本模块。...依赖注入 在 Angular 中,要把一个类定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件中。...angular.json 为工作区中的所有项目指定 CLI 的默认配置,包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项。

    2.9K20

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

    前言:   上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板。...这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...该方法接受当前和上一属性值的 SimpleChanges 对象 在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。...运行应用程序的端到端 (E2E) 测试 构建应用程序 使用命令添加功能到现有的 Angular 应用程序: 可以使用 ng generate 命令,为已有的 Angular 应用程序添加新的功能: ng...如下所示 前往【my-blog-routing.module.ts】文件中配置上新创建的首页组件的路由。 ? 3、前往根模块【my-blog.module.ts】声明首页组件: ?

    4K20

    如何在 ASP.NET MVC 中集成 AngularJS(1)

    之后,我选择了 MVC 工程并在应用中会用到 MVC Web API 添加文件夹和引用。下一步是选择工具菜单中的“管理 NuGet 包的解决方案”,来下载并安装 NuGet AngularJS。...所有的客户的 Angular 视图和控件器将驻留在客户子文件夹中,所有的产品的 Angular 视图和控件器将驻留在产品子文件夹中 。...每次应用程序运行的时候,我想获得最新版本的应用程序和使用的版本号,以实现最新的 HTML 文件和 JavaScript 文件生成时,帮助浏览器从缓存中,获取最新的文件来替换那些旧文件。...将安装插件下载到名为自动版本设置的工具菜单中。该插件自带了配置工具,它允许你配置主要和次要版本号,以便每次编译时,自动的更新 AssemblyInfo.cs 文件。...目前,这个插件只是在 Visual Studio 2013 专业版中支持,或者你也可以手动更新版本号或使用类似微软的 TFS 以持续构建和配置管理环境的方式,来管理你的版本号。 ?

    7.6K60

    Angular10配置webpack打包 「详细教程」

    第四步:编辑你的第一个 Angular 组件 组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入,并根据这些输入采取行动。...CLI 会在构建你的应用时自动添加所有的 JavaScript 和 CSS 文件,所以你通常不用手动添加任何 或 标签。 main.ts 应用的主要切入点。...为true时,如果当前要提取的模块,在已经在打包生成的js文件中存在,则将重用该模块,而不是把当前要提取的模块打包生成新的js文件。 enforce选项:true/false。...需要注意的是,默认angular-cli打包生成的入口文件也被配置成了index.html,所以我们需要更改angular.jaon文件中的配置。...默认为index.html。您可以在这里指定一个子目录(如:assets/admin.html) template {String} `` webpack模板的相对或绝对路径。

    5.1K20

    Angular v8 发布!来看看有什么新功能

    在本文中,我将介绍 Angular 8 和 Angular CLI 8 的最重要的新功能。我在文中的例子可以在 GitHub 上找到。...虽然对有 8 行和 8 列的常规棋盘的计算相当快,但是普通计算机从 12×12 格开始就达到了其极限。当前最高记录是解决具有 27 x 27 格的解决方案。俄罗斯的超级计算机完成了此任务。...为了将类似这样的计算甩给后台,我们必须首先用 Angular CLI 创建 一个Web worker: 1ng generate worker n-queens 此语句不仅为 worker 创建文件,还为构建过程和现有文件中的条目创建配置文件...为了使不同的浏览器可以决定要加载哪个版本的 bundle 包,他们在 index.html 添加中接受 script 的引用:指向 ECMAScript 5 包的那些引用会添加 nomodule。.../lazy/lazy.module').then(m => m.LazyModule) 4} 新的书写风格中仍然包含文件名作为魔术值。但是由于许多IDE支持导入,因此无效值将立即返回错误。

    3K30

    用不到50行的Python代码构建最小的区块链

    在更一般的术语中,它是一个公共数据库,新数据存储在一个名为块的容器中,并被添加到一个不可变链(后来的区块链)中添加了过去的数据。在比特币和其他加密货币的情况下,这些数据是一组交易记录。...在区块链中,每个块都存储一个时间戳和一个索引。在SnakeCoin中,需要把两者都存储起来。为了确保整个区块链的完整性,每个块都有一个自动识别散列。...与比特币一样,每个块的散列将是块索引、时间戳、数据和前块哈希的加密哈希。数据可以是你想要的任何东西。...如果不这样做,外部组织就更容易“改变过去”,用全新的方式取代已有的链条。这一系列的散列可以作为加密的证据,有助于确保一旦将块添加到区块链,它就不能被替换或删除。...为了使SnakeCoin规模达到今天生产区块链的规模,必须添加更多的功能,比如服务器层,以跟踪多台机器上的链变化,以及在给定的时间段内限制添加的块数量的工作算法。

    1.5K70

    Angular v16 来了!

    Angular 存储库中最受欢迎的问题之一是“建议:作为可观察输入”。几个月前,我们回应说我们希望支持这个用例,作为框架中更大努力的一部分。...新的服务器端渲染功能 作为 v16 版本的一部分,我们还更新了 Angular Universal 的 ng add schematics,使您能够使用独立 API 将服务器端渲染添加到项目中。...基于 esbuild 的构建系统的开发者预览版 一年多以前,我们宣布我们正在努力为 Angular CLI 中的 esbuild 提供实验性支持,以使您的构建速度更快。...要解决这个问题,它们应该包含一个nonce属性,或者服务器应该在 CSP 标头中包含样式内容的散列。...如果您有权访问可以将两者添加到标头和构建响应时的ngCspNonce服务器端模板,则该属性很有用。

    2.6K20

    【Hybrid开发高级系列】AngularJS(一)——基础专题

    这个命令会在您当前文件夹中建立新文件夹angular-phonecat。     4. 最后一件事要做的就是确保您的计算机安装了web浏览器和文本编辑器。     5....推荐将angular组件独立分离在不同的文件中,module文件中声明module,其他组件则引入module,需要注意的是在打包或者script方式引入的时候,我们需要首先加载module声明文件,然后才能加载其他组件模块...模板         由于我们的模板代码写在app/js/filter.js文件中,所以我们需要在布局模板中引入这个文件。 app/index.html ......服务器用js on文件中的数据作为响应。(这个响应或许是实时从后端服务器动态产生的。但是对于浏览器来说,它们看起来都是 一样的。...注意到在第二条路由声明中:phoneId参数的使用。route服务使用路由声明/phones/:phoneId作为一个匹配当前URL的模板。

    55080

    DLUX组件扩展上篇-原理

    而ODL作为SDN控制器的主要开源项目,自然也成了多数人学习和搭建模拟环境试验的首选。...Dlux的框架和各组件中,使用大量的requireJS的语法,典型如首页Index.html的加载(红色标注部分,首页从自动加载main.js展开): ?...Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。 如:topology src下工程文件: ?...Maven工程 Maven是一个跨平台的项目管理工具,它可以帮助开发者完成以下工作: 构建、依赖、发布 、分发 以及测试报告等等; 如topolopy 组件的工程配置文件pom.xml: ? ?...B:文件打包及构建 工程主要利用gulp.js进行对应打包及构建,以topolopy模块的gulp.js文件为例(基本上所有的gulp.js文件都是统一模板),如下: Gulpfile.js (dluxapps

    98440

    ConcurrentHashMap的底层实现与深度分析

    sizeCtl的高16位存储扩容版本号,用于区分连续的多次扩容;低16位表示当前参与扩容的线程数量。...省略部分代码 ... } 五、散列算法 5.1 散列算法概述 散列算法是一种将任意长度的消息压缩到一个固定长度的输出的算法。...在ConcurrentHashMap中,散列算法用于将键映射到一个固定的桶中。...5.3 散列算法优化 ConcurrentHashMap中的散列算法通过以下方式进行了优化: 高位和低位哈希值结合:通过位运算将键的哈希值分为高位和低位,并结合高位和低位哈希值计算出最终的哈希索引,以提高哈希分布的均匀性...5.4 散列算法代码实现 以下是ConcurrentHashMap中散列算法的部分代码实现: java复制代码 // 计算哈希值的spread方法 static final int spread(int

    14721
    领券