कोणीय में एप्लिकेशन संस्करण कैसे प्रदर्शित करें?

Question

मैं कोणीय अनुप्रयोग में एप्लिकेशन संस्करण कैसे प्रदर्शित करूं? संस्करण को package.jsonफ़ाइल से लिया जाना चाहिए

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

कोणीय 1.x में, मेरे पास यह html है:

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

कोणीय में, यह संस्करण संख्या के रूप में प्रदान नहीं किया जाता है, बल्कि इसके बजाय केवल मुद्रित होता है ( <%=version %>इसके बजाय 0.0.1)।

Comments

यदि आपके पास कोई बिल्ड सिस्टम है, तो आपको कुछ gulp या ग्रन्ट प्लग इन की आवश्यकता है। वर्तमान में इसके लिए एंगुलर में कोई तंत्र नहीं है

— कोणीय विश्वविद्यालय

मैं प्रोग्राम को एप्लिकेशन में उपयोग करता हूं typescript, npm startसंकलन चलाने और SystemJSकॉन्फ़िगरेशन सेट करने के लिए उपयोग करता हूं । क्या इनमें से किसी का उपयोग करके संस्करण सेट करने का एक तरीका है?

— ज़बिनक

Answer 1

यदि आप अपने कोणीय ऐप में संस्करण संख्या का उपयोग / दिखाना चाहते हैं तो कृपया निम्नलिखित करें:

आवश्यक शर्तें:

• कोणीय फ़ाइल और फ़ोल्डर संरचना कोणीय सीएलआई के माध्यम से बनाया गया है

• टाइपस्क्रिप्ट 2.9 या बाद में! (कोणीय 6.1 से ऊपर की ओर समर्थित)

कदम:

1. आपके /tsconfig.json(कभी-कभी आवश्यक भी /src/tsconfig.app.json) में समाधान में सक्षम करेंJJSModule विकल्प (बाद में आवश्यक वेबपैक देव सर्वर पुनरारंभ):

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

2. फिर आपके घटक में, उदाहरण के /src/app/app.component.tsलिए संस्करण जानकारी का उपयोग करें:

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

आपके पर्यावरण के फ़ाइल में चरण 2 करना भी संभव है, जिससे संस्करण की जानकारी वहां से सुलभ हो जाएगी।

मदद करने के लिए Thx @Ionaru और @MarcoRinck ।

इस समाधान में package.json सामग्री, केवल संस्करण संख्या शामिल नहीं होगी।
परीक्षण किया w / Angular8 / Node10 / TypeScript3.4.3।

कृपया अपने पैकेज की सामग्री के आधार पर इस समाधान कारण का उपयोग करने के लिए अपने एप्लिकेशन अपडेट करें। मूल समाधान सुरक्षा मुद्दों को शामिल कर सकते हैं।

Comments

यह कोणीय 5 और aot संकलन के साथ काम करता है अगर कोई भी सोच रहा था

— निकोलिया लुकोविच

महत्वपूर्ण नोट: प्रभावी होने के लिए अपने सर्वर को पुनरारंभ करें (एनजी सर्व या फिर से शुरू करें)!

— user1884155

@MarcoRinck: इसे इंगित करने के लिए Thx। मैं इस मुद्दे को पुन: पेश कर सकता था। पता नहीं कि यह अतीत में उत्तर को संपादित करने के कारण आया था, लेकिन यह सुनिश्चित करने के लिए कि कोई भी पुराने समाधान का उपयोग नहीं करता है, मैंने उत्तर को संपादित किया और इसमें समस्याग्रस्त आवश्यकता () कॉल को हटा दिया।

— रेडोमेट

कोणीय 8 की पुष्टि

— vuhung3990

कोणीय 9 की पुष्टि की गई

— माइक डी क्लार्क

Answer 2

यदि आप वेबपैक या कोणीय-क्ली (जो वेबपैक का उपयोग करते हैं) का उपयोग कर रहे हैं, तो आपको केवल अपने कंपोनेंट में पैकेज.जोन की आवश्यकता हो सकती है और उस प्रॉपर्टी को प्रदर्शित कर सकते हैं।

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

Comments

यह उल्लेख के लायक है कि अगर कोई व्यक्ति आपके समाधान को लागू करने के बाद "नाम नहीं खोज सकता है" की आवश्यकता है तो tsconfig.app.ts फ़ाइल में "नोड" प्रकार "संपत्ति" के अंदर जोड़ना होगा। << "प्रकार": ["नोड"] >> कोणीय v4 में परीक्षण किया गया

— टॉमसोज चेकोवस्की

@ बेबियो - मेरे पास लगभग एक साल से अपने प्रोडक्शन एप्स में चल रहे कोड का स्निपेट है (उत्पादन में एओटी चल रहा है)। क्या मैं किसी तरह आपकी समस्या को दूर करने में आपकी मदद कर सकता हूँ?

— डिस्लेक्सिकडक

इस पोस्ट के बावजूद मुझे कुछ समय देना पड़ता है, जिससे संभावित रूप से कुछ बिल्ड और डेवलपमेंट की जानकारी प्राप्त होती है, जिसमें इंट प्रॉडक्शन बिल्ड होता है और जो संभावित रूप से हानिकारक होता है।

— ZetaPR 25'18

@ZPRPR बिल्कुल अनुशंसित नहीं है!

— जिमी केन

@DyslexicDcuk संस्करण संख्या के साथ लाइब्रेरी सुरक्षा के दृष्टिकोण से संवेदनशील डेटा है।

— रफीक

Answer 3

Tsconfig विकल्प का उपयोग करके --resolveJsonModuleआप टाइपस्क्रिप्ट में json फ़ाइलें आयात कर सकते हैं।

Environment.ts फ़ाइल में:

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

export const environment = {
    VERSION: version,
};

अब आप environment.VERSIONअपने आवेदन में उपयोग कर सकते हैं ।

Comments

@lonaru पैकेज.जॉन फ़ाइल आयात करते समय किसी भी सुरक्षा निहितार्थ हैं। मैं सोच रहा हूं कि क्या यह किसी तरह से पैकेज की सामग्री को उजागर करता है।

— tif

@tif कोई सुरक्षा निहितार्थ नहीं होना चाहिए क्योंकि package.json पूरी तरह से आयातित नहीं है। संस्करण केवल एक चीज है जो उत्पादन बिल्ड में समाप्त होता है।

— इओनरू

Answer 4

DyslexicDcuk के उत्तर की कोशिश करने के परिणामस्वरूप cannot find name require

फिर, https://www.typescriptlang.org/docs/handbook/modules.html में 'वैकल्पिक मॉड्यूल लोड हो रहा है और अन्य उन्नत लोड परिदृश्य' अनुभाग को पढ़ने से मुझे इसे हल करने में मदद मिली। (गैरी द्वारा यहाँ उल्लेख https://stackoverflow.com/a/41767479/7047595 )

पैकेज की आवश्यकता के लिए नीचे की घोषणा का उपयोग करें।

declare function require(moduleName: string): any;

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

Answer 5

कोणीय क्लि उपयोगकर्ताओं के लिए सरल समाधान।

declare module '*.json';पर जोड़ेंsrc/typings.d.ts

और फिर src/environments/environment.ts:

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

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

किया हुआ :)

Comments

आपको "allowSyntheticDefaultImports": trueअपने कोणीय संस्करण के आधार पर अपने tsconfig.json में जोड़ना पड़ सकता है ।

— ब्योर्नअल्म

Answer 6

versionपर्यावरण चर के रूप में घोषित करना एक अच्छा विचार है, इसलिए आप इसे अपनी परियोजना में हर जगह उपयोग कर सकते हैं। (विशेष रूप से संस्करण के आधार पर कैश की जाने वाली फ़ाइलों को लोड करने के मामले में e.g. yourCustomjsonFile.json?version=1.0.0)
सुरक्षा के मुद्दों (@ZetaPR के रूप में उल्लेख किया गया है) को रोकने के लिए हम इस दृष्टिकोण (@sgwatgit की टिप्पणी पर) का उपयोग कर सकते हैं
: संक्षेप में: हम एक yourProjectPit \ 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;
}

Answer 7

टाइपप्रति

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() {

  }
}

एचटीएमएल

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

Answer 8

मुझे नहीं लगता कि "एंगल ब्रैकेट प्रतिशत" का कोणीय 1 से कोई लेना-देना है। संभव है कि आपको अपने पिछले प्रोजेक्ट में उपयोग किए जा रहे दूसरे API का इंटरफ़ेस दिखाई दे।

आपका सबसे आसान समाधान: बस संस्करण संख्या को अपनी HTML फ़ाइल में मैन्युअल रूप से सूचीबद्ध करें या यदि आप इसे कई स्थानों पर उपयोग कर रहे हैं तो इसे वैश्विक चर में संग्रहीत करें:

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

आपका कठिन समाधान: एक बिल्ड ऑटोमेशन चरण चलाएँ जो आपके पैकेज से संस्करण संख्या को निकालता है। Json फ़ाइल और फिर मूल्य को शामिल करने के लिए अपनी index.html फ़ाइल (या js / ts फ़ाइल) को फिर से लिखता है:

• यदि आप इसे सपोर्ट करने वाले वातावरण में काम कर रहे हैं, तो आप केवल पैकेज। Json फ़ाइल को आयात या उसकी आवश्यकता कर सकते हैं:

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

• यह भी एक bash स्क्रिप्ट में किया जा सकता है जो पैकेज को पढ़ता है। json और फिर दूसरी फाइल को एडिट करता है।

• आप फ़ाइलों को पढ़ने और लिखने के लिए अतिरिक्त मॉड्यूल का उपयोग करने के लिए एक एनपीएम स्क्रिप्ट जोड़ सकते हैं या अपनी स्टार्ट स्क्रिप्ट को संशोधित कर सकते हैं ।
• आप अपनी पाइपलाइन में ग्रन्ट या गल्प जोड़ सकते हैं और फिर फ़ाइलों को पढ़ने या लिखने के लिए अतिरिक्त मॉड्यूल का उपयोग कर सकते हैं।

Comments

आवश्यकता का उपयोग करने के लिए टिप के बिना, यह वास्तव में सबसे अच्छा जवाब है। क्योंकि उत्पादन निर्माण में कोई अनावश्यक / संवेदनशील जानकारी नहीं होगी।

— रफीक

<% %>आमतौर पर एक .Net भाषा जैसे c #

— danwellman

Answer 9

मैंने इसे कुछ अलग तरीके से हल करने की कोशिश की है, सुविधा और रखरखाव की आसानी पर भी।

मैंने पूरे एप्लिकेशन में संस्करण को बदलने के लिए बैश स्क्रिप्ट का उपयोग किया है। निम्न स्क्रिप्ट आपको वांछित संस्करण संख्या के लिए पूछेगा, और पूरे आवेदन में वही लागू किया जाएगा।

#!/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 नाम की फ़ाइल में सहेजा है , और मेरे पैकेज.जसन फ़ाइल में, मैंने इसे चलाने के लिए एक स्क्रिप्ट भी बनाई है जब संस्करण को संशोधित करना आवश्यक है।

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

अंत में, मैं केवल निष्पादित करके संस्करण को बदल सकता हूं

npm run change-version 

यह कमांड इंडेक्स। टेम्प्लेट में और पैकेज में भी संस्करण को बदलेगा। फ़ाइल में। निम्नलिखित मेरे मौजूदा ऐप से लिए गए कुछ स्क्रीनशॉट थे।

Answer 10

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