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

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

如果你想在你的angular应用中使用/显示版本号，请执行以下操作:

先决条件:

通过Angular CLI创建的Angular文件和文件夹结构

Angular 6.1 (TS 2.9+)到Angular 11的步骤

在/tsconfig中。Json(有时在/src/tsconfig.app.json中也需要)启用以下选项(之后需要重新启动webpack开发服务器):

    "compilerOptions": {
      ...
      "resolveJsonModule": true,
      ...

然后在你的组件中，例如/src/app/app.component.ts使用这样的版本信息:

    import { version } from '../../package.json';
    ...
    export class AppComponent {
      public version: string = version;
    }

当在Angular 12+中使用这段代码时，你可能会得到:错误:不应该从default- exports模块导入命名的export 'version'(导入为'version')(很快只有default export可用)。 在这种情况下，请使用以下代码:

Angular 12+的步骤

在/tsconfig中。/src/tsconfig.app.json(有时在/src/tsconfig.app.json中也需要)启用以下选项(之后需要重新启动webpack开发服务器):

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

然后在你的组件中，例如/src/app/app.component.ts使用这样的版本信息:

    import packageJson from '../../package.json';
    ...
    export class AppComponent {
      public version: string = packageJson.version;
    }

在您的环境中也可以执行第2步。Ts文件，使版本信息可从那里访问。

谢谢@Ionaru和@MarcoRinck的帮助。

这个解决方案不应该包含包。json内容——只有版本号(在Angular 8和13中勾选)。

为了确保这一点，请检查生成的main.#hash#.js文件!

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

在环境方面。ts文件:

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

export const environment = {
    VERSION: version,
};

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

将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;
}

为angular cli用户提供简单的解决方案。

添加声明模块'*.json';在src / typings.d.ts

然后在src/environments/environment.ts上:

import * as npm from '../../package.json';

export const environment = {
  version: npm.version
};

:完成)

这个答案只针对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
  ...