[解決済み】Angularでアプリのバージョンを表示する方法は？

質問

angularアプリケーションでアプリのバージョンを表示するにはどうすればよいですか？ package.json ファイル

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

angular 1.xでは、こんなhtmlがあります。

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

angularでは、バージョン番号としてレンダリングされず、そのまま出力されます( <%=version %> ではなく 0.0.1 ).

解決方法は？

angularアプリでバージョン番号を使用/表示したい場合は、以下のようにしてください。

前提条件

• Angular CLIで作成したAngularのファイルおよびフォルダ構造

Angular 6.1 (TS 2.9+)からAngular 11までの手順

1. あなたの /tsconfig.json (で必要な場合もあります）。 /src/tsconfig.app.json ) を有効にします (その後、webpack dev server restart が必要です)。

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

1. そして、あなたのコンポーネントの中で、例えば /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 dev server restart が必要です)。

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

1. そして、コンポーネントの中で、例えば /src/app/app.component.ts は、このようにバージョン情報を使用します。

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

また、手順2をenvironment.tsファイル内で行い、そこからバージョン情報にアクセスできるようにすることも可能です。

ありがとうございました。 伊緒奈 と マルコ・リンク（MarcoRinck を手伝ってくれました。

このソリューションは、本番ビルドを行う際にpackage.jsonの内容を含まないようにします - バージョン番号のみ（Angular 8と13で確認済み）。

念のため、生成された main.#hash#.js ファイルもチェックしてください。