在Angular 12中，从'../../package.json'导入{version};给出一个错误:

. / src /环境/环境。ts:10:13-20 -错误:不应该从默认导出模块导入命名的导出'version'(作为'version'导入)(只有默认导出可用)

继续导入版本，而不会带来包的全部内容的安全隐患。Json到构建中，你可以做:

export const environment = {
  ...
  VERSION: require('../../package.json').version,
};

从https://github.com/angular/angular-cli/issues/3770 # issuecomment - 269822722

如果遇到无法找到名称“要求”错误，请参阅https://stackoverflow.com/a/43129815/418819和https://stackoverflow.com/a/54004979/418819

角13+ /离子型

这对我来说很管用:

把它放在dev和prod环境文件下。

environment.ts

declare const require: any;

export const environment = {
 appVersion: require('../../package.json').version,
};

任何组件的示例用法:

import { environment } from 'src/environments/environment';

     constructor() {
        console.log(environment.appVersion);
      }

打印稿

import { Component, OnInit } from '@angular/core';
declare var require: any;

@Component({
  selector: 'app-version',
  templateUrl: './version.component.html',
  styleUrls: ['./version.component.scss']
})
export class VersionComponent implements OnInit {
  version: string = require( '../../../../package.json').version;

  constructor() {}

  ngOnInit() {

  }
}

HTML

<div class="row">
    <p class="version">{{'general.version' | translate}}: {{version}}</p>
</div>

在Angular 12中，从'../../package.json'导入{version};给出一个错误:

. / src /环境/环境。ts:10:13-20 -错误:不应该从默认导出模块导入命名的导出'version'(作为'version'导入)(只有默认导出可用)

继续导入版本，而不会带来包的全部内容的安全隐患。Json到构建中，你可以做:

export const environment = {
  ...
  VERSION: require('../../package.json').version,
};

从https://github.com/angular/angular-cli/issues/3770 # issuecomment - 269822722

如果遇到无法找到名称“要求”错误，请参阅https://stackoverflow.com/a/43129815/418819和https://stackoverflow.com/a/54004979/418819

你可以看包装。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);
    }
}

我尝试用一种不同的方式来解决这个问题，同时考虑到便利性和可维护性。

我使用bash脚本在整个应用程序中更改版本。下面的脚本将询问您所需的版本号，并且在整个应用程序中应用相同的方法。

#!/bin/bash
set -e

# This script will be a single source of truth for changing versions in the whole app
# Right now its only changing the version in the template (e.g index.html), but we can manage
# versions in other files such as CHANGELOG etc.

PROJECT_DIR=$(pwd)
TEMPLATE_FILE="$PROJECT_DIR/src/index.html"
PACKAGE_FILE="$PROJECT_DIR/package.json"

echo ">> Change Version to"
read -p '>> Version: ' VERSION

echo
echo "  #### Changing version number to $VERSION  ####  "
echo

#change in template file (ideally footer)
sed -i '' -E "s/<p>(.*)<\/p>/<p>App version: $VERSION<\/p>/" $TEMPLATE_FILE
#change in package.json
sed -i '' -E "s/\"version\"\:(.*)/\"version\"\: \"$VERSION\",/" $PACKAGE_FILE


echo; echo "*** Mission Accomplished! ***"; echo;

我将这个脚本保存在项目根目录下一个名为version-manager.sh的文件中，并保存在我的包中。json文件，我还创建了一个脚本，当需要修改版本时运行它。

"change-version": "bash ./version-manager.sh"

最后，我可以通过执行来更改版本

npm run change-version 

这个命令将改变index.html模板和包中的版本。json文件。以下是我从现有应用中截取的几张截图。