TypeScript - איך להציג את גרסת האפליקציה ב-Angular?

איך אני מציג את גרסת האפליקציה באפליקציית Angular? הגרסה צריכה להילקח מקובץ package.json.

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

ב-Angular 1.x, יש לי את ה-HTML הזה:

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

ב-Angular, זה אינו מוצג כמספר גרסה, אלא פשוט מודפס כפי שהוא (<%=version %> במקום 0.0.1).

תשובה #1

אם אתם רוצים להשתמש/להציג את מספר הגרסה באפליקציית האנגלר שלכם, אנא עשו את הדברים הבאים:

דרישות מוקדמות:

• מבנה קבצים ותיקיות של Angular שנוצר באמצעות Angular CLI

שלבים עבור Angular 6.1 (TypeScript 2.9+) עד Angular 11

1. בקובץ /tsconfig.json שלך (לפעמים גם נחוץ ב-/src/tsconfig.app.json) הפעל את האפשרות הבאה (נדרש אתחול של שרת הפיתוח של webpack לאחר מכן):

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

2. אז ברכיב שלך, לדוגמה /src/app/app.component.ts, השתמש במידע הגרסה כך:

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

כאשר משתמשים בקוד זה עם 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) הפעל את האפשרויות הבאות (נדרש הפעלה מחדש של שרת הפיתוח של webpack לאחר מכן):

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

2. אז ברכיב שלך, לדוגמה /src/app/app.component.ts, השתמש במידע הגרסה כך:

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

גם ניתן לבצע את שלב 2 בקובץ environment.ts שלך, ולהפוך את מידע הגרסה לנגיש משם.

תודה ל-@Ionaru ול-@MarcoRinck על העזרה.

פתרון זה לא צריך לכלול את תוכן הקובץ package.json בעת בניית גרסת ייצור - רק את מספר הגרסה (נבדק עם Angular 8 ו-13).

לצורך הבטחה אנא בדוק גם את הקובץ הראשי שנוצר שלך main.#hash#.js!

תשובה #2

אם אתה משתמש ב-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
  }
}

תשובה #3

באמצעות אפשרות ה-tsconfig --resolveJsonModule ניתן לייבא קבצי JSON ב-TypeScript.

בקובץ environment.ts:

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

export const environment = {
    VERSION: version,
};

אתה יכול כעת להשתמש ב-environment.VERSION ביישום שלך.

תשובה #4

לנסות את התשובה של DyslexicDcuk גרם ל-cannot find name require

אז, הקריאה בקטע 'טעינת מודולים אופציונלית ותסריטי טעינה מתקדמים אחרים' בכתובת https://www.typescriptlang.org/docs/handbook/modules.html עזרה לי לפתור את זה. (נזכר על ידי גארי כאן https://stackoverflow.com/a/41767479/7047595)

השתמש בהצהרה שלהלן כדי לדרוש את package.json.

declare function require(moduleName: string): any;

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

תשובה #5

רעיון טוב להכריז על version כמשתנה סביבה כדי שתוכל להשתמש בו בכל מקום בפרויקט שלך. (במיוחד במקרה של טעינת קבצים שיוגדרו במטמון על בסיס גרסה לדוגמה: 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, { 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.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;
}

תשובה #6

טייפסקריפט

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>

תשובה #7

הפתרון הפשוט ביותר למשתמשי Angular CLI.

הוסף declare module '*.json'; בקובץ src/typings.d.ts

ואז ב-src/environments/environment.ts:

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

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

סיים :)

תשובה #8

ב-Angular 12 import { version } from '.../../package.json'; נותן שגיאה:

./src/environments/environment.ts:10:13-20 - שגיאה: אסור לייבא את הייצוא המפורש 'version' (שייבוא כ-'version') ממודול המייצא ברירת מחדל (זמין בקרוב רק הייצוא ברירת מחדל)

כדי להמשיך לייבא את הגרסה מבלי לסבול מהשלכות אבטחה של הבאת כל תוכן קובץ package.json לבנייה, אפשר לעשות את הבא:

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