Si desea usar/mostrar el número de versión en su aplicación angular, haga lo siguiente:

requisitos previos:

• Estructura angular de archivos y carpetas creada a través de Angular CLI

Pasos para Angular 6.1 (TS 2.9+) hasta Angular 11

1. En su /tsconfig.json (a veces también es necesario en /src/tsconfig.app.json ) habilite la siguiente opción (después se requiere reiniciar el servidor de desarrollo webpack):

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

2. Luego, en su componente, por ejemplo, /src/app/app.component.ts use la información de la versión de esta manera:

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

Cuando use este código con Angular 12+, probablemente obtendrá: Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon) . En este caso, utilice el siguiente código:

Pasos para Angular 12+

1. En su /tsconfig.json (a veces también es necesario en /src/tsconfig.app.json ) habilite las siguientes opciones (se requiere reiniciar el servidor webpack dev después):

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

2. Luego, en su componente, por ejemplo, /src/app/app.component.ts use la información de la versión de esta manera:

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

También es posible realizar el paso 2 en su archivo environment.ts, haciendo que la información de la versión sea accesible desde allí.

Gracias @Ionaru y @MarcoRinck por ayudar.

Esta solución no debe incluir el contenido de package.json al realizar una compilación de producción, solo el número de versión (marcado con Angular 8 y 13).

Para estar seguro, compruebe también el archivo main.#hash#.js generado.

Si está usando webpack o angular-cli (que usa webpack), puede requerir package.json en su componente y mostrar esa propiedad.

 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

Y luego tienes tu componente.

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

Usando la opción --resolveJsonModule puede importar archivos json en Typescript.

En el archivo environment.ts:

 import { version } from '../../package.json'; export const environment = { VERSION: version, };

Ahora puede usar environment.VERSION en su aplicación.