Làm cách nào để hiển thị phiên bản ứng dụng trong Angular?

Làm cách nào để hiển thị phiên bản ứng dụng trong ứng dụng góc? phiên bản nên được lấy từ package.jsontập tin

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

Trong góc 1.x, tôi có html này:

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

Trong góc, đây không phải là số phiên bản, mà thay vào đó chỉ được in như nó là ( <%=version %>thay vì 0.0.1).

Nếu bạn muốn sử dụng / hiển thị số phiên bản trong ứng dụng góc cạnh của mình, vui lòng làm như sau:

Điều kiện tiên quyết:

• Cấu trúc tệp và thư mục góc được tạo thông qua Angular CLI

• TypeScript 2.9 trở lên! (Được hỗ trợ từ Angular 6.1 trở lên)

Các bước:

1. Trong /tsconfig.json(đôi khi cũng cần thiết trong /src/tsconfig.app.json), hãy bật tùy chọn giải quyếtJsonModule (yêu cầu khởi động lại máy chủ webpack sau đó):

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

2. Sau đó, trong thành phần của bạn, ví dụ /src/app/app.component.tssử dụng thông tin phiên bản:

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

Cũng có thể thực hiện bước 2 trong tệp môi trường của bạn, làm cho thông tin phiên bản có thể truy cập được từ đó.

Thx @Ionaru và @MarcoRinck đã giúp đỡ.

Giải pháp này sẽ không bao gồm nội dung pack.json, chỉ có số phiên bản.
Đã kiểm tra w / Angular8 / Node10 / TypeScript3.4.3.

Vui lòng cập nhật ứng dụng của bạn để sử dụng giải pháp này vì tùy thuộc vào nội dung của gói.json, giải pháp ban đầu có thể tiềm ẩn các vấn đề bảo mật.

Nếu bạn đang sử dụng webpack hoặc angular-cli (người sử dụng gói web), bạn chỉ có thể yêu cầu gói.json trong thành phần của mình và hiển thị chỗ dựa đó.

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

Và sau đó bạn có thành phần của bạn

@Component({
  selector: 'stack-overflow',
  templateUrl: './stack-overflow.component.html'
})
export class StackOverflowComponent {
  public appVersion

  constructor() {
    this.appVersion = appVersion
  }
}

Sử dụng tùy chọn tsconfig, --resolveJsonModulebạn có thể nhập các tệp json trong Bản in.

Trong tệp môi trường.ts:

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

export const environment = {
    VERSION: version,
};

Bây giờ bạn có thể sử dụng environment.VERSIONtrong ứng dụng của bạn.

Thử dùng câu trả lời của DyslexicDcuk cannot find name require

Sau đó, đọc phần 'Tải mô-đun tùy chọn và các kịch bản tải nâng cao khác' trong https://www.typescriptlang.org/docs/handbook/modules.html đã giúp tôi giải quyết vấn đề này. (Được đề cập bởi Gary tại đây https://stackoverflow.com/a/41767479/7047595 )

Sử dụng khai báo dưới đây để yêu cầu gói.json.

declare function require(moduleName: string): any;

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

Giải pháp đơn giản cho người dùng cli góc.

Thêm declare module '*.json';vàosrc/typings.d.ts

Và sau đó src/environments/environment.ts:

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

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

Làm xong :)

Đó là một ý tưởng tốt để khai báo versionlà biến môi trường Vì vậy bạn có thể sử dụng nó ở mọi nơi trong dự án của bạn. (đặc biệt trong trường hợp các tập tin tải để được lưu trữ dựa trên phiên bản e.g. yourCustomjsonFile.json?version=1.0.0)
Để ngăn chặn vấn đề an ninh (như @ZetaPR đề cập) chúng ta có thể sử dụng này cách tiếp cận (trên @sgwatgit 's bình luận)
Nói tóm lại: chúng ta tạo ra một yourProjectPath \ PreBuild.js tập tin. Như thế này:

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

Đoạn mã trên sẽ tạo một tệp mới /src/environments/version.tschứa hằng số được đặt tên versionvà đặt nó theo giá trị được trích xuất từ package.jsontệp.

Để chạy nội dung PreBuild.jsontrên bản dựng, Chúng tôi thêm tệp này vào Package.json-> "scripts": { ... }"phần như sau. Vì vậy, chúng tôi có thể chạy dự án bằng mã này npm start::

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

Bây giờ chúng tôi chỉ có thể nhập phiên bản và sử dụng nó bất cứ nơi nào chúng tôi muốn:

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

Bản đánh máy

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>

Tôi không nghĩ rằng "Phần trăm khung góc" có liên quan gì đến angular1. Đó có thể là giao diện cho một API khác mà bạn không nhận ra đang được sử dụng trong dự án trước đó của mình.

Giải pháp đơn giản nhất của bạn: chỉ cần liệt kê số phiên bản theo cách thủ công trong tệp HTML của bạn hoặc lưu trữ nó trong một biến toàn cục nếu bạn đang sử dụng nó ở nhiều nơi:

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

Giải pháp khó hơn của bạn: chạy bước tự động hóa bản dựng trích xuất số phiên bản từ tệp pack.json và sau đó viết lại tệp index.html (hoặc tệp js / ts) để bao gồm giá trị:

• Có thể chỉ cần nhập hoặc yêu cầu tệp pack.json, nếu bạn đang làm việc trong môi trường hỗ trợ tệp đó:

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

• Điều này cũng có thể được thực hiện trong một tập lệnh bash đọc gói.json và sau đó chỉnh sửa một tệp khác.

• Bạn có thể thêm tập lệnh NPM hoặc sửa đổi tập lệnh bắt đầu của mình để sử dụng các mô-đun bổ sung để đọc và ghi tệp.
• Bạn có thể thêm grunt hoặc gulp vào đường ống của mình và sau đó sử dụng các mô-đun bổ sung để đọc hoặc ghi tệp.

Tôi đã cố gắng giải quyết điều này theo một cách hơi khác, cũng xem xét sự dễ dàng của sự thuận tiện và khả năng bảo trì.

Tôi đã sử dụng tập lệnh bash để thay đổi phiên bản trên toàn bộ ứng dụng. Kịch bản sau đây sẽ yêu cầu bạn cho số phiên bản mong muốn và tương tự được áp dụng trong toàn bộ ứng dụng.

#!/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;

Tôi đã lưu tập lệnh này trong một tệp có tên version-manager.sh trong thư mục gốc của dự án và trong tệp pack.json của tôi, tôi cũng đã tạo một tập lệnh để chạy nó khi cần sửa đổi phiên bản.

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

Cuối cùng, tôi chỉ có thể thay đổi phiên bản bằng cách thực thi

npm run change-version 

Lệnh này sẽ thay đổi phiên bản trong mẫu index.html và cả trong tệp pack.json. Sau đây là một vài ảnh chụp màn hình được lấy từ ứng dụng hiện có của tôi.

Bạn có thể đọc gói.json giống như bất kỳ tệp nào khác, với http.get như vậy:

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