如何在Angular CLI中的构建时插入构建号或时间戳

问题描述 投票:26回答:5

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

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

angular angular-cli
5个回答
27
投票
  1. 安装plugin npm install replace-in-file --save-dev
  2. 添加到prod环境src / environments / environment.prod.ts新属性 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 as @ julien-100000提到你不应该使用更新版本提交environment.prod.ts。版本更新必须仅在构建过程中发生。永远不应该承诺。


11
投票

将此步骤添加到jenkins-job:

echo export class MyVersion {public static readonly number = '%SVN_REVISION%'} > src\myVersion.ts

你可以访问这样的数字:

import {MyVersion} from "../myVersion";

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

这个解决方案+轻巧,易读,+健壮。


4
投票

没有必要安装replace-in-file或做任何提到的@VolodymyrBilyac步骤。

简单的解决方案:使用角度环境

就在您想要的环境里面。*。ts文件(有关环境的更多信息,请阅读angular-2-and-environment-variables)需要package.json,如下所示:

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

然后在你的app导入环境中:

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

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

More info

注意:正如评论中提到的@VolodymyrBilyachat,这将在最终的捆绑文件中包含您的package.json文件。


0
投票

我通过在index.html末尾附加一个注释并使用最后一个提交哈希来解决这个问题。例如:

ng build --prod

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

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

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


-3
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.