如何在 Angular CLI 的构建时插入内部版本号或时间戳

Question

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

如何在 AOT 编译/构建时使用 Angular2 中的 AngularCLI 执行此操作？

Answer 1

1. 安装pluginnpm install replace-in-file --save-dev

2. 添加到 prod 环境 src/environments/environment.prod.ts new 属性

   export const environment = {
       production: true,
       version: '{BUILD_VERSION}'
   }
   

3. 将构建文件replace.build.js 添加到文件夹的根目录

   var replace = require('replace-in-file');
   var buildVersion = process.argv[2];
   const options = {
       files: 'src/environments/environment.prod.ts',
       from: /{BUILD_VERSION}/g,
       to: buildVersion,
       allowEmptyPaths: false,
   };
   
   try {
       let changedFiles = replace.sync(options);
       console.log('Build version set: ' + buildVersion);
   }
   catch (error) {
       console.error('Error occurred:', error);
   }
   

4. 将脚本添加到 package.json

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

5. 在您的应用中使用environment.version

6. 在构建之前调用npm run updateBuild -- 1.0.1

PS。您必须始终记住 {BUILD_VERSION} 永远不会被提交。

PS。我在my blog写了一个更好的解决方案

PS.3 正如@julien-100000 提到的，您不应该使用更新版本提交 environment.prod.ts。版本更新必须仅在构建过程中发生。并且永远不应该提交。

Answer 2

将此步骤添加到您的构建中（即 Jenkins-Job）：

echo export const version = { number: '%SVN_REVISION%' } > src\version.ts

您可以这样访问号码：

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

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

这个解决方案是+轻量级，+易读，+健壮。

Answer 3

不需要replace-in-file。

简单的解决方案：使用 Angular 环境

就在您想要的环境中。*.ts 文件（有关环境的更多信息请阅读angular-2-and-environment-variables）需要package.json，如下所示：

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

然后在你的应用导入环境中：

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

你有environment.version。 如果您收到cannot find name 'require' 错误，请阅读this answer

More info

注意：正如 cmets 中提到的@VolodymyrBilyachat，这将在最终的捆绑文件中包含您的 package.json 文件。

Answer 4

我通过在index.html 的末尾附加一个带有最后提交哈希的注释来解决这个问题。例如：

ng build --prod

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

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

这当然假设您使用 git 作为版本控制系统。您可以使用任何其他输出唯一版本的命令轻松更改 git rev-parse HEAD。

Answer 5

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

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

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

实现它的示例如下所示：(app.component.ts)

import { Component } from "@angular/core";
import { buildInfo } from "../build";
import { environment } from "../environments/environment";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    constructor() {
        console.log(
            `\n%cBuild Info:\n\n%c ❯ Environment: %c${
                environment.production ? "production ?" : "development ?"
            }\n%c ❯ Build Version: ${buildInfo.version}\n ❯ Build Timestamp: ${
                buildInfo.timestamp
            }\n ❯ Built by: ${buildInfo.user}\n ❯ Commit: ${buildInfo.hash}\n`,
            "font-size: 14px; color: #7c7c7b;",
            "font-size: 12px; color: #7c7c7b",
            environment.production
                ? "font-size: 12px; color: #95c230;"
                : "font-size: 12px; color: #e26565;",
            "font-size: 12px; color: #7c7c7b"
        );
    }
}

会输出： link to console screenshot

我希望这会对某人有所帮助！ :)

Answer 6

我查看了其他解决方案，但我并没有被使用另一个包或生成 JSON 所说服（因为 JSON 并不完全在应用程序中）。另外，我不想为未提交的更改而烦恼，例如在该线程的已接受答案中。

我最终制作了一个小型 bash 脚本，该脚本自动将位于我的应用程序某处的字符串替换为从 GIT 获得的版本 + 构建的日期时间。

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

latesttag=$(git describe --tags)
now=$(date +'%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 build --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

<footer class="footer mt-auto">
    <div class="container text-center">
        Build: build_info - build_time
    </div>
</footer>

Answer 7

1. 创建简单的js文件createBuildDate.js

   例如：

   const { writeFileSync } = require('fs')
   const { join } = require('path')
   
   const TIME_STAMP_PATH = join(__dirname, 'buildDate.json');
   
   const createBuildDate = {
       year: new Date()
   }
   
   writeFileSync(TIME_STAMP_PATH, JSON.stringify(createBuildDate, null, 2));  
   

2. 在 package.json 中编辑脚本

   "build": "node src/environments/createBuildDate.js && ng build"
   

   或者你可以使用prebuild

3. 编辑 tsconfig.json

   "resolveJsonModule": true,
   

4. 在组件中导入json并使用

Answer 8

仅供参考，这里是slartidan's answer 的平台无关版本。在构建期间使用 node.js 脚本 (bin/update-timestamp.js) 更新时间戳。

bin/update-timestamp.js

#!/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}'; }`);

package.json

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

app.component.ts

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

export class AppComponent {

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

Answer 9

如果您不仅想记录/显示版本号，还想记录来自 git 的信息（如哈希、标签等），您可以考虑为我创建的 angular-cli 使用自定义示意图。将其添加到您的 Angular 8+ 应用程序就像执行一样简单 ng add @w11k/git-info

有关更多文档和见解，您可以查看https://github.com/w11k/angular-git-info 上提供的文档

Answer 10

也许这对某人来说是一个很好的解决方案.. https://medium.com/@amcdnl/version-stamping-your-app-with-the-angular-cli-d563284bb94d

他描述的是如何使用你的 git 数据并将最后的提交哈希作为内部版本号。

通过在 package.json 中添加安装后步骤，运行安装脚本时将生成一个文件。

Answer 11

我认为适合您的情况：ng build 或 ng serve 添加 environment.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;

这就是我要找的。​​p>