如何在 Angular 应用程序中显示应用程序构建版本答案

【问题标题】：How to display application build version in an angular application如何在 Angular 应用程序中显示应用程序构建版本
【发布时间】：2021-04-14 06:40:21
【问题描述】：

我有一个构建和部署 Angular 应用程序的 jenkins 管道。是否可以在构建期间从 Jenkins 引入构建参数并将其显示在 Angular 应用程序中？

编辑：目的是在 jenkins 管道中的构建时引入一个参数，该参数将在构建时接受输入以描述创建此构建的问题（例如：问题的 JIRA 编号）。然后需要在 Angular 应用程序中显示此问题/错误修复编号，以便用户可以在应用程序页脚中看到此修复编号，并确定在应用程序中部署的修复。我希望能澄清这个问题。

我从可用的环境变量内部版本号开始并尝试在 Jenkins 管道脚本阶段（'Replace'）{ agent any when { environment name: 'showVersionCheckout', value: 'true'} 步骤中使用以下脚本 {

            checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: 'xyz', url: 'https://abcd.git']]])
                script {
                    sh "sed -i -e 's/VERSION/${env.version}/g' src/environments/environment.dev.ts"
                }
            }
    }

在 Angular 应用程序中：export const environment = { production: false, VERSION: '0.0.2' } 因此，当 Jenkins 管道构建 Angular 应用程序时，我仍然看到 0.0.2 的旧值，而不是我们使用 sed 替换的值。谁能帮忙？

【问题讨论】：

尝试扩展您的问题，“是”将是此问题的最佳答案，但可能无法按预期帮助您。
@JanZahradnik - 我试图详细描述问题。

标签： angular jenkins build versioning

【解决方案1】：

不完全符合您的要求，但我在我的应用程序中执行以下操作。我有一个自定义 webpackconfig 并定义了这些变量：

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            'APP_VERSION': JSON.stringify(packageJSON.version),
            'APP_LASTCOMMIT': JSON.stringify(childProcess.execSync('git rev-parse HEAD').toString())
        })
    ]
}

环境.ts：

declare var APP_VERSION;
declare var APP_LASTCOMMIT;
export const environment = {
    appName: 'WebCommander-DEV',
    appVersion: APP_VERSION,
    appLastCommit: APP_LASTCOMMIT,
    production: false,
};

我确定您可以调整此过程以将您的 jenkins build-id 传递到构建过程中

【讨论】：

【解决方案2】：

我不熟悉 Jenkins，但 TeamCity 有一个内置的预构建步骤，称为 文件内容替换，在 Gitlab CI 中，您可以在脚本中使用预定义变量列表，所以其余的我使用sed：

sed -i "s|regex to be replaced|replacement with $VARIABLE|" fileToBeModified.ts

【讨论】：

【解决方案3】：

我能够使用链接在 Angular 应用程序中显示内部版本号 Get Jenkins BUILD_NUMBER variable and display it in angular application

【讨论】：