Angular에서 앱 버전을 표시하는 방법

Angular에서 앱 버전을 표시하는 방법

Angular 어플리케이션에서 앱 버전을 표시하려면 어떻게 해야 하나요?입니다.package.jsonfilename을 클릭합니다.

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

Angular 1.x에는 다음 html이 있습니다.

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

Angular에서는 Angular 서서는 서 in서 서 in in in in in in in in in in in in in in in in in in ） 。<%=version %>0.0.1를 참조해 주세요.

앵귤러 앱에서 버전 번호를 사용하거나 표시하려면 다음을 수행하십시오.

전제 조건:

• Angular CLI를 통해 작성된 Angular 파일 및 폴더 구조

Angular 6.1(TS 2.9+)에서 Angular 11까지의 단계

1. 고객님의 고객명/tsconfig.json하게 되는 경우도 있습니다./src/tsconfig.app.json을 하게 합니다(후에 webpack dev server restart 필요).

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

2. 다음에 를 들면, 에서는요./src/app/app.component.ts버전 정보를 다음과 같이 사용합니다.

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

를 Angular 12 Angular 12+가 될 입니다.Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon) 다음

Angular 12+의 순서

1. 고객님의 고객명/tsconfig.json하게 되는 경우도 있습니다./src/tsconfig.app.json )을 하게 합니다

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

2. 다음에 를 들면, 에서는요./src/app/app.component.ts버전 정보를 다음과 같이 사용합니다.

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

environment.ts 파일에서 스텝2 를 실행할 수도 있습니다.이 파일에서 버전 정보에 액세스 할 수 있습니다.

@Ionaru와 @MarcoRinck가 도와드립니다.

이 솔루션에는 패키지가 포함되어 있지 않습니다.프로덕션 빌드 시 json 컨텐츠 - 버전 번호만(Angular 8 및 13에서 확인)

만약을 위해 생성된 메인 파일을 확인해 주세요.#syslog#.syslog 파일도!

webpack 또는 angular-cli(webpack을 사용하는 경우)를 사용하는 경우 패키지만 있으면 됩니다.json을 컴포넌트에 삽입하여 그 소품을 표시합니다.

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타이프스크립트.

environment.ts 파일:

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

export const environment = {
    VERSION: version,
};

해서 '어울리지 않다'를 할 수 되었습니다.environment.VERSION를 참조해 주세요.

을 시험한 DydlexicDcuk가 .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');

.version(버전에 )e.g. yourCustomjsonFile.json?version=1.0.0)
(@ZetaPR에서 언급한 바와 같이) 보안 문제를 방지하기 위해 (@sgwatgit의 코멘트에 따라) 이 방법을 사용할 수 있습니다.
즉, ProjectPath\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추출한 값으로 설정합니다.package.jsonfilename을 클릭합니다.

「 」의 하려면 , 「 」를 해 주세요.PreBuild.json시 이 을 에 합니다.Package.json->"scripts": { ... }"뭇매를 맞다 이할 수 .npm start:

{
  "name": "YourProject",
  "version": "1.0.0",
  "license": "...",
  "scripts": {
    "ng": "...",
    "start": "node PreBuild.js & ng serve",
  },...
}

이제 버전을 Import하여 원하는 장소에서 사용할 수 있습니다.

import { version } from '../../../../environments/version';
...
export class MyComponent{
  ...
  public versionUseCase: string = version;
}

앵귤러 CLI 사용자를 위한 심플한 솔루션.

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

나서 ★★★★★★★★★★★★★★★★★★★.src/environments/environment.ts:

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

export const environment = {
  version: npm.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>

12 도의12 。import { version } from '../../package.json';에러가 표시됩니다.

./src/environments/environment.ts: 10:13-20 - 오류:명명된 내보내기 '버전'('버전'으로 가져오기)을 기본 내보내기 모듈에서 가져오지 않아야 함(곧 기본 내보내기만 사용 가능)

패키지의 전체 내용을 가져오는 보안상의 영향 없이 버전을 계속 가져옵니다.다음과 같은 작업을 수행할 수 있습니다.

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

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

「」가 Cannot find name 'require'에러, https://stackoverflow.com/a/43129815/418819 및 https://stackoverflow.com/a/54004979/418819 를 참조해 주세요.

앵글 브라켓 퍼센트는 angular1과 관계가 없는 것 같아요.이전 프로젝트에서 사용되고 있다는 것을 깨닫지 못한 다른 API에 대한 인터페이스일 수 있습니다.

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

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

보다 어려운 솔루션: 패키지에서 버전 번호를 추출하는 빌드 자동화 단계를 실행합니다.json 파일을 입력한 후 다음 값을 포함하도록 index.disc 파일(또는 js/ts 파일)을 다시 씁니다.

• 단순히 패키지를 Import하거나 요구할 수 있습니다.json 파일을 지원하는 환경에서 작업하는 경우:

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

• 이는 패키지를 읽는 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가 포함되어 있습니다.json 파일, 버전 수정이 필요할 때 실행하는 스크립트도 만들었습니다.

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

마지막으로 버전 변경만 하면 됩니다.

npm run change-version 

이 명령어는 index.html 템플릿 및 패키지의 버전을 변경합니다.json 파일.다음은 기존 앱에서 캡처한 스크린샷입니다.

이 https://github.com/angular/angular-cli/issues/5190에는 셸 파일을 사용하여 version.ts 파일을 생성하는 흥미로운 솔루션이 있습니다.@sanjeev는 이 포럼에서 같은 솔루션을 제공했습니다.

이 솔루션에서는 Node, javascript 및 fs 모듈을 사용하여 동일한 기능을 구현합니다.Linux 에서는 확실히 동작합니다.노드/fs는 크로스 플랫폼이기 때문에 Windows에서는 정상적으로 동작합니다.그렇죠?

1. 패키지에 행을 추가합니다.json:

   {
     "version": "0.0.1",
     ... 
     "scripts": {
       "version": "node gen_version.js $npm_package_version",
        ...
     },
   ...
   }
   

2. create gen_version.discript (주의: 타입 스크립트가 아닙니다)

   var fs = require('fs');
   
   // arg[0]: node path
   // arg[1]: this script's path
   // arg[2]: 1st arg on command line
   console.log('current version: ' + process.argv[2])
   
   path = 'src/environments/version.ts'
   
   script = 'export class Constants {'
   script += '  static readonly version = \'' + process.argv[2] + '\''
   script += '}'
   
   fs.writeFile(path, script, function (err, file) {
     if (err) throw err;
     console.log('file saved:', path);
   });
   

3. npm부터 실행:

   npm run version
   
   > omnitool@0.0.1 version ...
   > node gen_version.js $npm_package_version
   
   current version: 0.0.1
   file saved: src/environments/version.ts
   

4. 앱에서 사용:

   import {Constants} from "../environments/version"
   ...
   console.log('Version:', Constants.version)
   

이 답변은 Angular 12+에만 해당됩니다.웹 팩 5를 사용합니다.

webpack5 매뉴얼에 따름

이는 새 규격에서 지원되지 않으며 경고가 표시됩니다.대신:

import { version } from './package.json';
console.log(version);

용도:

import pkg from './package.json';
console.log(pkg.version);

또한 tsconfig.json에 입력해야 합니다.

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

으로 JS 스크립트는 JS의 버전을 의 JS에 .constant파일에 파일처럼 수 .ts 파일에 저장되므로 다른 TS 파일과 동일하게 읽을 수 있습니다.

새로운 버전이 변경되기 전에 이 스크립트를 호출합니다.

코드는 다음과 같습니다.

// easier with fs-extra, but possible also with node build-in fs
const fs = require('fs-extra');

function storeVersionInTsFile() {
  const packageJson = fs.readJSONSync('./package.json');
  const file = `./src/app/version.ts`;
  const contents = `/**\n * Auto generated file, do not edit.\n */\n\nexport const appVersion = '${packageJson.version}';\n`;
  fs.writeFileSync(file, contents);
}

storeVersionInTsFile()

★★의 내용version.ts:

/**
 * Auto generated file, do not edit.
 */

export const appVersion = '0.3.2';

편의를 위해 스크립트도 패키지에 추가했습니다.json:

...
"store-version": "node store-version.js",
"build": "npm run store-version && ng build --configuration production"
...

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

소포를 가져오는 것을 좋아하지 않는 사람들을 위해.빌드 폴더에 json, 이 플러그인 ngx-build-plus를 확인합니다.

---

hint: 다른 파일에서 VERSION을 사용하려면 주입 토큰을 사용하여 VERSION을 제공하므로 더 이상 선언문을 사용하지 않습니다.

당신은 패키지를 읽을 수 있다.json은 다른 파일과 마찬가지로 http.get을 사용합니다.

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

언급URL : https://stackoverflow.com/questions/34907682/how-to-display-the-app-version-in-angular