如何在Angular中显示应用版本?

如何在Angular应用中显示应用版本?版本应该从包中取出。json文件。

{
  "name": "angular-app",
  "version": "0.0.1",
  ...
}

在Angular 1中。x，我有这个html:

<p><%=version %></p>

在Angular中，它不会被渲染为版本号，而是直接打印出来(<%=version %>而不是0.0.1)。

当前回答

如果你正在使用webpack或angular-cli(使用webpack)，你可以只需要package。Json，然后显示那个道具。

const { version: appVersion } = require('../../package.json')
// this loads package.json
// then you destructure that object and take out the 'version' property from it
// and finally with ': appVersion' you rename it to const appVersion

然后是分量

@Component({
  selector: 'stack-overflow',
  templateUrl: './stack-overflow.component.html'
})
export class StackOverflowComponent {
  public appVersion

  constructor() {
    this.appVersion = appVersion
  }
}

2016-12-23 10:04:56

其他回答

使用tsconfig选项——resolveJsonModule你可以在Typescript中导入json文件。

在环境方面。ts文件:

import { version } from '../../package.json';

export const environment = {
    VERSION: version,
};

现在可以使用environment了。应用程序中的版本。

2019-05-02 08:56:28

这个答案只针对Angular 12+。它使用Webpack 5。

根据webpack5文档

新规范不支持这一点，您将得到一个警告。而不是:

import { version } from './package.json';
console.log(version);

use:

import pkg from './package.json';
console.log(pkg.version);

另外，你必须在tsconfig.json中提供

"compilerOptions": {
  ...
  "allowSyntheticDefaultImports": true
  "resolveJsonModule":true
  ...

2021-05-13 08:20:07

我不认为“角括号百分比”与angar1有任何关系。这很可能是到另一个API的接口，您没有意识到在您之前的项目中正在使用该API。

你最简单的解决方案:在HTML文件中手动列出版本号，或者如果你在多个地方使用它，则将它存储在一个全局变量中:

<script>
  var myAppVersionNumber = "0.0.1";
</script>
...
<body>
  <p>My App's Version is: {{myAppVersionNumber}}</p>
</body>

更难的解决方案:运行一个构建自动化步骤，从包中提取版本号。Json文件，然后重写index.html文件(或js/ts文件)，以包括以下值:

可以简单地导入或要求包。Json文件，如果你在支持它的环境中工作: Var version = require("../package.json").version; 这也可以在读取包的bash脚本中完成。json和然后编辑另一个文件。您可以添加一个NPM脚本或修改您的启动脚本来使用用于读写文件的附加模块。你可以加上grunt或gulp 然后使用附加模块来读取或写入文件。

2016-01-21 01:18:54

对于那些不喜欢带包裹的人。查看这个插件ngx-build-plus。

提示:如果你想在不同的文件中使用它，就使用一个注入令牌来提供VERSION，这样就没有更多的declare语句了。

2021-06-05 17:54:19

将version声明为环境变量是个好主意，这样你就可以在项目的任何地方使用它。(特别是在加载基于版本缓存的文件时，例如yourCustomjsonFile.json?version=1.0.0) 为了防止安全问题(正如@ZetaPR提到的)，我们可以使用这种方法(关于@sgwatgit的评论) 简而言之:我们创建了一个yourProjectPath\PreBuild.js文件。是这样的:

const path = require('path');
const colors = require('colors/safe');
const fs = require('fs');
const dada = require.resolve('./package.json');
const appVersion = require('./package.json').version;

console.log(colors.cyan('\nRunning pre-build tasks'));

const versionFilePath = path.join(__dirname + '/src/environments/version.ts');

const src = `export const version = '${appVersion}';
`;
console.log(colors.green(`Dada ${colors.yellow(dada)}`));

// ensure version module pulls value from package.json
fs.writeFile(versionFilePath, src, { flag: 'w' }, function (err) {
if (err) {
    return console.log(colors.red(err));
}

console.log(colors.green(`Updating application version         
${colors.yellow(appVersion)}`));
console.log(`${colors.green('Writing version module to 
')}${colors.yellow(versionFilePath)}\n`);
});

上面的代码段将创建一个新文件/src/environments/version。Ts包含一个名为version的常量，并通过从包中提取的值来设置它。json文件。

为了运行预构建的内容。我们把这个文件添加到包中。Json -> "scripts":{…}”部分。所以我们可以使用下面的代码运行项目:

{
  "name": "YourProject",
  "version": "1.0.0",
  "license": "...",
  "scripts": {
    "ng": "...",
    "start": "node PreBuild.js & ng serve",
  },...
}

现在我们可以简单地导入版本并在任何我们想要的地方使用它:

import { version } from '../../../../environments/version';
...
export class MyComponent{
  ...
  public versionUseCase: string = version;
}

2018-05-09 07:14:17

如何在Angular中显示应用版本?

推荐文章

最新文章

标签