จะแสดงเวอร์ชั่นของแอพใน 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) ของคุณเปิดใช้งานตัวเลือก resolJsonModule (ต้องรีสตาร์ทเซิร์ฟเวอร์ webpack dev หลังจากนั้น):

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

2. จากนั้นในองค์ประกอบของคุณเช่น/src/app/app.component.tsใช้ข้อมูลรุ่น:

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

อาจเป็นไปได้ที่จะทำขั้นตอนที่ 2 ในไฟล์ environment.ts ของคุณซึ่งทำให้สามารถเข้าถึงข้อมูลรุ่นได้

ขอบคุณ@Ionaruและ@MarcoRinckสำหรับความช่วยเหลือ

วิธีการแก้ปัญหานี้จะไม่รวมเนื้อหา package.json เพียงหมายเลขรุ่น
ผ่านการทดสอบ w / Angular8 / Node10 / TypeScript3.4.3

โปรดอัปเดตแอปของคุณเพื่อใช้วิธีแก้ปัญหานี้ทั้งนี้ขึ้นอยู่กับเนื้อหาของ package.json โซลูชันดั้งเดิมของคุณอาจเกี่ยวข้องกับปัญหาด้านความปลอดภัย

หากคุณใช้ webpack หรือ angular-cli (ผู้ที่ใช้ webpack) คุณเพียงแค่ต้องการ package.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คุณสามารถนำเข้าไฟล์ json ใน typescript

ในไฟล์ 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');

วิธีการแก้ปัญหาที่ง่ายสำหรับผู้ใช้ CLI เชิงมุม

เพิ่ม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>

ฉันไม่คิดว่า "Angle Bracket Percent" มีส่วนเกี่ยวข้องกับ 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 หากคุณทำงานในสภาพแวดล้อมที่สนับสนุน:

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

• สิ่งนี้สามารถทำได้ในสคริปต์ทุบตีที่อ่าน package.json แล้วแก้ไขไฟล์อื่น

• คุณสามารถเพิ่มสคริปต์ NPMหรือแก้ไขสคริปต์เริ่มต้นของคุณเพื่อใช้โมดูลเพิ่มเติมเพื่ออ่านและเขียนไฟล์
• คุณสามารถเพิ่มเสียงฮึดฮัดหรืออึกไปป์ไลน์ของคุณแล้วใช้โมดูลเพิ่มเติมเพื่ออ่านหรือเขียนไฟล์

ฉันได้พยายามที่จะแก้ปัญหานี้ในวิธีที่แตกต่างกันเล็กน้อยพิจารณาความสะดวกสบายและบำรุงรักษา

ฉันใช้สคริปต์ทุบตีเพื่อเปลี่ยนเวอร์ชันในแอปพลิเคชันทั้งหมด สคริปต์ต่อไปนี้จะขอหมายเลขรุ่นที่คุณต้องการและจะมีการใช้งานตลอดทั้งแอปพลิเคชัน

#!/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 ภาพต่อไปนี้เป็นภาพหน้าจอบางส่วนที่นำมาจากแอพที่ฉันมีอยู่

คุณสามารถอ่าน package.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);
    }
}