Angular에서 앱 버전을 표시하는 방법은 무엇입니까?

각도 응용 프로그램에서 앱 버전을 어떻게 표시합니까? 버전은 package.json파일 에서 가져와야합니다

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

각도 1.x에는 다음과 같은 HTML이 있습니다.

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

각도에서는 버전 번호로 렌더링되지 않고 그대로 ( <%=version %>대신 0.0.1) 인쇄됩니다 .

각도 앱에서 버전 번호를 사용 / 표시하려면 다음을 수행하십시오.

전제 조건 :

• Angular CLI를 통해 생성 된 각도 파일 및 폴더 구조

• TypeScript 2.9 이상! (Angular 6.1 이상에서 지원)

단계 :

1. 에서 /tsconfig.json(때로는 필요함 /src/tsconfig.app.json)에서 resolveJsonModule 옵션을 활성화하십시오 (나중에 webpack dev 서버를 다시 시작해야 함).

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

2. 그런 다음 구성 요소 /src/app/app.component.ts에서 버전 정보 를 사용하십시오.

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

environment.ts 파일에서 2 단계를 수행하여 버전 정보에 액세스 할 수도 있습니다.

Thx @Ionaru 및 @MarcoRinck 도와합니다.

이 솔루션에는 package.json 내용이 포함되지 않으며 버전 번호 만 포함됩니다.
Angular8 / Node10 / TypeScript로 테스트 3.4.3.

패키지의 내용에 따라이 솔루션 원인을 사용하도록 앱을 업데이트하십시오. 원래 솔루션으로 인해 보안 문제가 발생할 수 있습니다.

webpack 또는 angular-cli (webpack을 사용하는 사람)를 사용하는 경우 구성 요소에 package.json 만 있으면 해당 prop을 표시 할 수 있습니다.

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

tsconfig 옵션 사용 --resolveJsonModule 을 Typescript에서 json 파일을 가져올 수 있습니다.

environment.ts 파일에서 :

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

export const environment = {
    VERSION: version,
};

이제 environment.VERSION응용 프로그램에서 사용할 수 있습니다 .

DyslexicDcuk의 답변을 시도한 결과 cannot find name require

그런 다음 https://www.typescriptlang.org/docs/handbook/modules.html의 '선택적 모듈 로딩 및 기타 고급 로딩 시나리오'섹션을 읽으면 이 문제를 해결하는 데 도움이되었습니다. (Gary가 언급 한 https://stackoverflow.com/a/41767479/7047595 )

package.json을 요구하려면 아래 선언을 사용하십시오.

declare function require(moduleName: string): any;

const {version : appVersion} = require('path-to-package.json');

각진 클리 사용자를위한 간단한 솔루션.

추가 declare module '*.json';에src/typings.d.ts

그리고 나서 src/environments/environment.ts:

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

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

완료 :)

version환경 변수 로 선언하는 것이 좋습니다. 따라서 프로젝트의 어느 곳에서나 사용할 수 있습니다. (특별히로드 파일의 경우 버전에 따라 캐시 할 e.g. 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, { flat: '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에서 추출 된 값으로 설정 package.json합니다.

PreBuild.json빌드시 컨텐츠를 실행하기 위해이 파일을 다음과 같이 Package.json-> "scripts": { ... }"섹션에 추가합니다 . 이 코드를 사용하여 프로젝트를 실행할 수 있습니다 npm start:

{
  "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;
}

타이프 스크립트

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>

"앵글 브라켓 퍼센트"는 angular1과 관련이 있다고 생각하지 않습니다. 아마 당신이 모르는 다른 API에 대한 인터페이스가 이전 프로젝트에서 사용되고있을 것입니다.

가장 쉬운 해결책 : 버전 번호를 HTML 파일에 수동으로 나열하거나 여러 곳에서 사용하는 경우 전역 변수에 저장하십시오.

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

더 어려운 솔루션 : package.json 파일에서 버전 번호를 추출한 다음 index.html 파일 (또는 js / ts 파일)을 다시 작성하여 값을 포함하는 빌드 자동화 단계를 실행하십시오.

• package.json 파일을 지원하는 환경에서 작업하는 경우 단순히 package.json 파일을 가져 오거나 필요할 수 있습니다.

  var version = require("../package.json").version;

• package.json을 읽고 다른 파일을 편집 하는 bash 스크립트 에서 수행 할 수도 있습니다 .

• NPM 스크립트를 추가 하거나 시작 스크립트를 수정하여 추가 모듈 을 사용하여 파일을 읽고 쓸 수 있습니다.
• 파이프 라인 에 grunt 또는 gulp 를 추가 한 다음 추가 모듈을 사용하여 파일을 읽거나 쓸 수 있습니다.

편의성과 유지 관리 용이성을 고려하여 약간 다른 방식 으로이 문제를 해결하려고했습니다.

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 파일에 저장 하고 package.json 파일에 버전을 수정해야 할 때 실행할 스크립트를 작성했습니다.

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

마지막으로 실행하여 버전을 변경할 수 있습니다.

npm run change-version 

이 명령은 index.html 템플리트 및 package.json 파일의 버전을 변경합니다. 다음은 기존 앱에서 가져온 몇 가지 스크린 샷입니다.

http.get을 사용하여 다른 파일과 마찬가지로 package.json을 읽을 수 있습니다.

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