如何在AngularCLI中的生成时插入生成编号或时间戳

我想在Angular2应用程序的某个地方有一个时间戳或内部版本号，这样我就可以知道用户是否在使用旧的缓存版本

如何在AOT编译/构建时使用Angular2中的AngularCLI实现这一点

安装

npm在文件中安装替换--save dev

添加到产品环境src/environments/environment.prod.ts new 财产

导出常量环境={
制作:对,，
版本：“{BUILD_version}”
}

将生成文件

replace.build.js

添加到文件夹的根目录中

var replace=require（'replace-in-file'）；
var buildVersion=process.argv[2]；
常量选项={
文件：“src/environments/environment.prod.ts”，
from://{BUILD_VERSION}/g，
至：buildVersion，
AllowEmptypath:false，
};
试一试{
让changedFiles=replace.sync（选项）；
log（'生成版本集：'+buildVersion）；
}
捕获（错误）{
console.error（'发生错误：'，错误）；
}

向package.json添加脚本

"updateBuild": "node ./replace.build.js"

在应用程序中使用

environment.version

生成前调用

npm运行updateBuild--1.0.1

另外，您必须始终记住，{BUILD_VERSION}从未提交过

另外，我在中写了一个更好的解决方案

---

PS.3如@julien-100000所述，您不应提交更新版本的environment.prod.ts。版本更新只能在生成过程中进行。而且永远不应该提交。

没有必要在文件中替换

简单解决方案：使用角度环境
就在您想要的环境中。*.ts文件（有关环境的更多信息，请参阅）需要
package.json
如下所示：

export const environment = {
    version: require('../package.json').version
};

然后在应用程序导入环境中：

import { environment } from '../environments/environment';

您有
environment.version
。
如果您发现
找不到名称“require”
错误，请阅读


注意：正如注释中提到的@VolodymyrBilyachat，这将在最终捆绑文件中包括您的
包.json
文件。
将此步骤添加到您的构建中（即Jenkins作业）：

您可以通过以下方式访问该号码：

import { version } from "../version";

export class AppComponent {
    constructor() {
        console.log("MyApp version " + version.number);
    }
}

这个解决方案是+轻量级的，+易于阅读，+健壮的。
也许这对某些人来说是一个很好的解决方案

他描述的是如何使用git数据并将最后一个提交哈希作为构建号

通过在package.json中添加postinstall步骤，在运行安装脚本时将生成一个文件。
我解决了这个问题，在
index.html
末尾添加了注释和最后一个提交哈希。例如：

ng build --prod

git rev-parse HEAD | awk '{print "<!-- Last commit hash: "$1" -->"}' >> dist/index.html

ng构建--prod
git rev parse HEAD | awk'{print'}'>>dist/index.html

然后，您可以在浏览器中执行“查看源代码”，查看HTML的底部，并查看应用程序的部署版本

当然，这假设您使用git作为版本控制系统。您可以使用输出唯一版本的任何其他命令轻松更改git rev parse HEAD。
我认为您的情况是：
ng build
或
ng serve
加载项
环境。ts
：

export class environment {
  production: false,
  buildTimestamp: new Date()
}

然后在组件中：

import { environment } from 'src/environments/environment'; // or path to your environment.ts file

...

const buildTimestamp = environment.buildTimestamp;

这就是我想要的。
讨论可能有点晚了，但希望我能帮助其他人解决同样的问题

我已经编写了一个名为的小型npm包，它总结了有关当前构建的一些信息，例如构建时间戳、构建应用程序的git用户、缩短的提交哈希以及项目
package.json
文件中的应用程序版本

实现这个包也很简单，它在
src/build.ts
下创建了一个
build.ts
文件，然后您可以将该文件导入Angular应用程序并在任何地方显示信息

实现它的示例如下所示：（
app.component.ts
）

从“@angular/core”导入{Component}；
从“./build”导入{buildInfo}；
从“./environments/environment”导入{environment}；
@组成部分({
选择器：“应用程序根”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
构造函数（）{
console.log(
`\n%c生成信息：\n\n%c❯ 环境：%c${
如果您想记录/显示不仅是版本号，还显示来自Git的信息（像散列、标签等），您可以考虑使用定制的原理图来创建我所创建的角CLI。将它添加到您的角8 +应用程序中与执行一样简单。
ng add@w11k/git info

有关进一步的文档和见解，您可以查看
上提供的文档。我查看了其他解决方案，但使用另一个包或生成JSON（因为JSON不完全在应用程序中）并不能说服我。此外，我不想为未提交的更改而烦恼，如此线程的已接受答案中的更改

最后，我制作了一个小小的bash脚本，自动将我应用程序中某个地方的字符串替换为GIT+构建日期时间的版本

现在，当我构建我的应用程序时，我只需要执行以下脚本：

latesttag=$（git descripe--tags）
现在=$（日期+“%a%y-%m-%d%H:%m”）
sed-i''s/build_info/$latesttag/g./src/app/pages/home/user-preference/user-preference.component.html
sed-i''s/build_time/$now/g./src/app/pages/home/user preference/user-preference.component.html
ng构建——prod；
sed-i''s/$latesttag/build_info/g./src/app/pages/home/user-preference/user-preference.component.html
sed-i“s/$now/build_time/g”。/src/app/pages/home/user preference/user-preference.component.html

在我的文件user-preference.component.html中


构建：构建信息-构建时间
仅供参考，这里是一个独立于平台的.timesta版本
import { environment } from 'src/environments/environment'; // or path to your environment.ts file

...

const buildTimestamp = environment.buildTimestamp;

#!/usr/bin/env node
'use strict';

const fs = require('fs');
const stamp = new Date().toISOString();
fs.writeFileSync('./src/app/timestamp/Timestamp.ts', `export class Timestamp { public static readonly stamp = '${stamp}'; }`);

{
  "scripts": {
    "build": "node ./bin/update-timestamp.js && ng build --prod",
  },
}

import {Timestamp} from './timestamp/Timestamp';

export class AppComponent {

  constructor() {
    console.log("timestamp", Timestamp.stamp);
  }
  
}