অ্যাঙ্গুলারে অ্যাপের সংস্করণটি কীভাবে প্রদর্শিত করবেন?

Question

আমি কৌণিক অ্যাপ্লিকেশনটিতে অ্যাপ্লিকেশন সংস্করণটি কীভাবে প্রদর্শিত করব? সংস্করণটি package.jsonফাইল থেকে নেওয়া উচিত

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

কৌণিক 1.x এ, আমার এই এইচটিএমএল রয়েছে:

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

কৌণিক ক্ষেত্রে, এটি সংস্করণ নম্বর হিসাবে রেন্ডার করা হয় না, পরিবর্তে এটি কেবল ( <%=version %>পরিবর্তে 0.0.1) হিসাবে প্রিন্ট করা হয় ।

Comments

আপনার যদি কিছু বিল্ড সিস্টেম থাকে তবে আপনার কিছু গাল্প বা গ্রুর্ট প্লাগইন দরকার। এঙ্গুলারে বর্তমানে এএফআইকে তেমন কোনও ব্যবস্থা নেই

— কৌণিক বিশ্ববিদ্যালয়

আমি অ্যাপ্লিকেশনটিতে অ্যাপটি ব্যবহার করি typescript, npm startসংকলনটি চালাতে SystemJSএবং কনফিগারেশনটি সেট করতে ব্যবহার করি। এর কোনটি ব্যবহার করে সংস্করণ সেট করার কোনও উপায় আছে?

— Zbynek

Answer 1

আপনি যদি নিজের কৌণিক অ্যাপ্লিকেশনটিতে সংস্করণ নম্বরটি ব্যবহার / প্রদর্শন করতে চান তবে দয়া করে নিম্নলিখিতটি করুন:

পূর্বশর্ত:

• কৌণিক ফাইল এবং ফোল্ডার কাঠামো কৌণিক সিএলআই এর মাধ্যমে তৈরি করা হয়েছে

• টাইপস্ক্রিপ্ট ২.৯ বা তারপরে! (উপরের দিকে কৌণিক 6.1 থেকে সমর্থিত)

পদক্ষেপ:

1. আপনার /tsconfig.json(কখনও কখনও /src/tsconfig.app.jsonএটিতেও প্রয়োজনীয় ) রেজলিউশন জসনমডুল বিকল্পটি সক্ষম করুন (এর পরে ওয়েবপ্যাক ডেভ সার্ভার পুনঃসূচনা প্রয়োজন):

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

2. তারপরে আপনার উপাদানটিতে উদাহরণস্বরূপ /src/app/app.component.tsসংস্করণ তথ্যটি ব্যবহার করুন:

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

সংস্করণ তথ্যটি সেখান থেকে অ্যাক্সেসযোগ্য করে তুলতে আপনার এনভায়রনমেন্ট.এসটি ফাইলে দ্বিতীয় পদক্ষেপ করাও সম্ভব।

ধন্যবা @Ionaru এবং @MarcoRinck সাহায্য করার জন্য।

এই সমাধানটিতে প্যাকেজ.জসন সামগ্রী অন্তর্ভুক্ত করা হবে না, কেবল সংস্করণ নম্বর।
W / Angular8 / Node10 / TypeScript3.4.3 পরীক্ষিত।

আপনার প্যাকেজটির সামগ্রীর উপর নির্ভর করে এই সমাধান কারণটি ব্যবহার করতে দয়া করে আপনার অ্যাপ্লিকেশনগুলিকে আপডেট করুন j

Comments

এটি কৌনিক 5 এবং আউট সংকলনের সাথে কাজ করে যদি কেউ ভাবছেন

— নিকোলা।লুকোভিচ

গুরুত্বপূর্ণ দ্রষ্টব্য: এটি কার্যকর করার জন্য আপনার সার্ভারটি পুনরায় চালু করুন (এনজি সার্ভিস বা এনপিএম আবার শুরু করুন)!

— ব্যবহারকারী 1884155

@ মার্কোআরঙ্ক: এটি দেখানোর জন্য ধন্যবাদ। আমি এই সমস্যা পুনরুত্পাদন করতে পারে। এটি অতীতে উত্তরটির সম্পাদনার কারণে এসেছিল কিনা তা জানেন না তবে এটির জন্য যে কেউ আর পুরানো সমাধানটি ব্যবহার না করে আমি উত্তরটি সম্পাদনা করেছি এবং এতে প্রয়োজনীয় সমস্যাযুক্ত কলটি সরিয়ে ফেলেছি।

— রেডোমেট

কৌণিক 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 ফাইলটিতে "প্রকারের" অভ্যন্তরে "নোড" টাইপ যুক্ত করতে হবে। << "প্রকার": ["নোড"] >>। কৌণিক ভি 4-তে পরীক্ষিত

— টমাসজ চেকোভস্কি

@ বাইও - আমার প্রায়শ এক বছর ধরে আমার প্রোডাকশন অ্যাপগুলিতে কোডের এই স্নিপেট চলছে (প্রযোজনায় এওটি চলছে)। আমি কি আপনার সমস্যাটি কোনওভাবে ডিবাগ করতে সহায়তা করতে পারি?

— ডিসাইলিকডিকুক

এই পোস্টে কিছুটা সময় থাকা সত্ত্বেও আমি এটি উল্লেখ করতে হবে যে এটি সম্ভাব্যভাবে কিছু বিল্ড এবং ডেভেলপমেন্ট তথ্য সরবরাহ করতে পারে এবং এটি সম্ভাব্য ক্ষতিকারক একটি উত্পাদন পরিবেশের জন্য।

— জেটপাআর

@ জেটপাআর ঠিক প্রস্তাবিত নয়!

— জিমি কেন

সুরক্ষা দৃষ্টিকোণ থেকে সংস্করণ নম্বরযুক্ত @ ডিসলেক্সিকডকুক লাইব্রেরি সংবেদনশীল ডেটা।

— রাফিক

Answer 3

Tsconfig বিকল্পটি ব্যবহার করে --resolveJsonModuleTsconfig আপনি টাইপস্ক্রিপ্টে json ফাইলগুলি আমদানি করতে পারেন।

এনভায়রনমেন্ট.টস ফাইলটিতে:

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

export const environment = {
    VERSION: version,
};

আপনি এখন environment.VERSIONআপনার অ্যাপ্লিকেশন ব্যবহার করতে পারেন ।

Comments

@ লোনারু প্যাকেজ.জসন ফাইলটি আমদানি করার সময় কোনও সুরক্ষা সম্পর্কিত বিষয়গুলি রয়েছে। আমি ভাবছি যদি এটি কোনওভাবে প্যাকেজ.জসনের সামগ্রী প্রকাশ করে?

— tif

@tif কোনও সুরক্ষা জড়িত থাকা উচিত না কারণ প্যাকেজ.জসন পুরোপুরি আমদানি করা হয়নি। সংস্করণটি হ'ল একমাত্র জিনিস যা উত্পাদন বিল্ডে শেষ হয়।

— আয়নারু

Answer 4

ডিসলেক্সিকডকুকের উত্তরের চেষ্টা করে ফলাফল হয়েছে cannot find name require

তারপরে, https://www.typescriptlang.org/docs/handbook/modules.html এ 'alচ্ছিক মডিউল লোডিং এবং অন্যান্য উন্নত লোডিং সিনারিওস' বিভাগটি পড়তে আমাকে এটি সমাধান করতে সহায়তা করেছে। (এখানে গ্যারি উল্লেখ করেছেন 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)
সুরক্ষা সমস্যাগুলি রোধ করার জন্য (@ জেটাপিআর উল্লিখিত হিসাবে) আমরা এই পদ্ধতির ব্যবহার করতে পারি (@ এস.গাওয়াটিগাইটের মন্তব্যে)
সংক্ষেপে: আমরা আপনার প্রজেক্টপথ তৈরি করি \ প্রাকবিল্ড.জেএস ফাইল। এটার মত:

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 এর ইন্টারফেস।

আপনার সবচেয়ে সহজ সমাধান: কেবলমাত্র আপনার এইচটিএমএল ফাইলটিতে সংস্করণ নম্বরটি ম্যানুয়ালি তালিকাবদ্ধ করুন বা আপনি যদি এটি একাধিক জায়গায় ব্যবহার করে থাকেন তবে এটি একটি বৈশ্বিক পরিবর্তনশীলে সংরক্ষণ করুন:

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

আপনার আরও কঠিন সমাধান: একটি বিল্ড অটোমেশন পদক্ষেপ চালান যা আপনার প্যাকেজ.জসোন ফাইল থেকে সংস্করণ নম্বরটি বের করে এবং তারপরে মানটি অন্তর্ভুক্ত করতে আপনার সূচিপত্রের html ফাইলটি (বা জেএস / টিএস ফাইল) পুনরায় লিখে দেয়:

• আপনি যদি এমন পরিবেশে কাজ করে যা এটি সমর্থন করে তবে কেবল প্যাকেজ.জসন ফাইলটি আমদানি করতে বা প্রয়োজনীয় হতে পারে:

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

• এটি বাশ স্ক্রিপ্টেও করা যেতে পারে যা প্যাকেজ.জসন পড়ে এবং অন্য কোনও ফাইল সম্পাদনা করে।

• আপনি একটি এনপিএম স্ক্রিপ্ট যুক্ত করতে পারেন বা ফাইল পড়তে এবং লিখতে অতিরিক্ত মডিউল ব্যবহার করতে আপনার শুরু স্ক্রিপ্টটি সংশোধন করতে পারেন ।
• আপনি আপনার পাইপলাইনে গ্রান্ট বা ঝাঁকুনি যুক্ত করতে পারেন এবং তারপরে ফাইলগুলি পড়তে বা লিখতে অতিরিক্ত মডিউল ব্যবহার করতে পারেন।

Comments

প্রয়োজনীয় টিপ ব্যবহার না করে, এটি আসলে সেরা উত্তর। কারণ উত্পাদন বিল্ডে কোনও অপ্রয়োজনীয় / সংবেদনশীল তথ্য থাকবে না।

— রাফিক

<% %>সাধারণত সি #

— ড্যানওয়েলম্যান

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;

আমি এই স্ক্রিপ্টটি প্রকল্পের মূল সংস্করণ- manager.sh নামে একটি ফাইলে এবং আমার প্যাকেজ.জসন ফাইলে সংরক্ষণ করেছি, যখন সংস্করণটি সংশোধন করার প্রয়োজন হয় তখন এটি চালানোর জন্য আমি একটি স্ক্রিপ্টও তৈরি করেছি।

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

অবশেষে, আমি কেবল সম্পাদন করে সংস্করণটি পরিবর্তন করতে পারি

npm run change-version 

এই কমান্ডটি সূচী। Html টেম্পলেট এবং প্যাকেজ.জসন ফাইলে সংস্করণ পরিবর্তন করবে। আমার বিদ্যমান অ্যাপ্লিকেশন থেকে নেওয়া কয়েকটি স্ক্রিনশট নীচে দেওয়া হয়েছিল।

Answer 10

আপনি অন্য ফাইলগুলির মতোই প্যাকেজ.জসনটি পড়তে পারতেন, যেমন 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);
    }
}