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

Program / 글쓴이

각도 응용 프로그램에서 앱 버전을 어떻게 표시합니까? 버전은 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
      ...
  1. 그런 다음 구성 요소 /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>