在 Angular (>= 2) 应用程序中，如何将 npm package.json 文件中的版本信息包含到已编译的输出文件中？

Question

信息：

1. 我使用 @angular/cli 创建了一个 Angular（版本 >= 2）应用程序。

2. 此应用程序正在进行版本更改。

3. 我确实使用命令npm version major 或npm version minor 或npm version patch 在我的package.json 文件中更新了我的应用程序的语义版本信息。

4. 当我运行 ng build 或 ng build --prod 时，我无法在“dist”输出文件夹的任何文件中找到此版本信息。

问题：

有没有办法自动将我的应用程序的版本信息从 package.json 文件带入其中一个输出文件（可能在 html 文件或 js 文件中）？

来自我的package.json 文件的示例：

{
  "name": "angular-ui",
  "version": "17.6.27",
  "description": "My awesome UI application",
  "license": "MIT",
  ...
}

理想情况下，我想创建一个“关于”组件，当我访问类似于以下内容的 URL 时，我想在其中发布应用程序的版本信息：

http://localhost:4200/about

页面上的预期输出：

Application version: v17.6.27

Answer 1

您可以创建一个自定义脚本，该脚本将从您的 package.json 中读取信息并运行 echo "export const APP_VERSION = $version" > src/app/version.ts。

然后你在构建之前调用这个脚本。

如果您使用 ng-cli 创建应用，您的 package.json 中应该已经有脚本条目。类似的东西：

"scripts": {
  "ng": "ng",
  "changelog": "standard-changelog",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

您可以将 build 替换为

"scripts": {
  "build": "sh version-script.sh && ng build",
}

我认为您可以找到一些比糟糕的 script.sh 做得更好的精美工具，并在构建之前将它们连接起来。