在一个有棱角的(>= 2)应用程序中，如何包含来自npm包的版本信息。json文件进入编译后的输出文件?

Information:

信息:

I have created an Angular (version >= 2) application using @angular/cli.

我创建了一个使用@ angle /cli的(版本>= 2)应用程序。
This application is undergoing version changes.

这个应用程序正在进行版本更改。
I do keep the semantic version information of my application updated inside my package.json file using the command npm version major or npm version minor or npm version patch.

我将应用程序的语义版本信息更新到包中。json文件使用命令npm版本主要或npm版本次要或npm版本补丁。
I was unable to find this version information inside any files on the "dist" output folder when I run ng build or ng build --prod.

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

Question:

问题:

Is there a way to bring my application's version information automatically from the package.json file into one of the output files (perhaps inside an html file or a js file)?

是否有一种方法可以自动从包中获取我的应用程序的版本信息?json文件到一个输出文件(可能在html文件或js文件中)?

Sample from my package.json file:

从我的包样品。json文件:

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

Ideally, I would want to create an "about" component where I would like to publish my application's version information when I visit a URL similar to:

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

http://localhost:4200/about

http://localhost:4200 /

Expected Output on the page:

期望输出:

Application version: v17.6.27

1 个解决方案

#1

You can create a custom script that will read information from your package.json and run echo "export const APP_VERSION = $version" > src/app/version.ts.

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

Then you call this script before the build.

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

If you create your app with ng-cli, you should already have script entries in your package.json. Something like :

如果您使用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"
},

You can replace build by something like

你可以用类似的东西来代替。

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

I think you can find some fancy tools that do that better than a poor script.sh, and wired them before the build.

我认为您可以找到一些比糟糕的脚本更好的工具。并在构建之前将它们连接起来。

#1