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

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

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

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

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

:完成)

你可以看包装。Json就像任何其他文件一样，带有http。像这样:

import {Component, OnInit} from 'angular2/core';
import {Http} from 'angular2/http';

@Component({
    selector: 'version-selector',
    template: '<div>Version: {{version}}</div>'
})

export class VersionComponent implements OnInit {

    private version: string;

    constructor(private http: Http) { }

    ngOnInit() {
        this.http.get('./package.json')
            .map(res => res.json())
            .subscribe(data => this.version = data.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
  ...

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

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

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

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

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

:完成)

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

在环境方面。ts文件:

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

export const environment = {
    VERSION: version,
};

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

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

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