Angular-cli: Obtaining project version from package.json

[sumigoma]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Win 10 x64

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.24
node: 6.2.2
os: win32 x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

I would like to obtain the version of my project from within my code (e.g. component), for instance, to display the version number in an ABOUT dialog.

What is the recommended way to do this using angular-cli?
It seems require() is not recommended/supported particularly with AoT becoming the norm, and I've also tried using node-pkginfo (https://github.com/indexzero/node-pkginfo) but this fails to find package.json from the directory tree since the build isn't inside a node environment.

(I should note that I do not want to expose my package.json for security reasons. I only want to read the version number for use at build time.)

---

Thanks! We'll be in touch soon.

[Destreyf]

@sumigoma My recommendation would be to use a node.js script to operate your build process, grab the package data from there, and then write it to your environment file that is used for building, or another js/ts file you could include in your application and reference to store your version, then after that point you could trigger a build.

[sumigoma]

Thanks for the suggestion @Destreyf.

I actually managed to get this to work by simply using require('path/to/package.json') in environment.ts, which does not affect the build. It's not like using require in a component where angular needs to generate component factories through static analysis, etc. and the compiler doesn't complain.
Since package.json is just getting required at build time, the other contents of that file shouldn't be exposed either.

Here is my environment.ts for reference:

export const environment = {
  production: false,
  hmr: false,
  version: require('../../package.json').version
};

Hope this helps anyone else trying to do something similar.

[Destreyf]

@sumigoma I hadn't actually tried to use the environment file directly with a require, this is an awesome solution, thanks!

[wOOx92]

_Cannot find name 'require'_
Did I miss something?

[devoto13]

@wOOx92 Type definitions.

declare const require: any; in typings.d.ts.

Although I'm 95% sure, that mentioned solution will bring whole package.json into your bundle.

[wOOx92]

@devoto13 oh, I forgot - thx!

[raghles]

@devoto13 Your solution solved my problem. But when I try to run Test cases, I am getting below error.

ERROR in app/src/typings.d.ts (2,15): Cannot redeclare block-scoped variable 'require'.
ERROR in app/node_modules/@types/node/index.d.ts (73,13): Cannot redeclare block-scoped variable 'require'.

I am using angular-cli. Do you have any solution for this. Thanks in advance.

[devoto13]

@raghles Try to move declare const require: any; into environment.ts, so it will be local in the module instead of global. Potentially it should prevent conflict with other typing. I don't use this approach myself, so can only guess...

[daanoz]

We solved it differently:

Add a prepare npm script (which runs after install, before publish):

{
  ...
  "scripts" : {
    "prepare": "node -e \"console.log('APP_VERSION = \\'' + process.env.npm_package_version +'\\';')\" > src/version.js"
  }
}

Then alter your .angular-cli.json so that in the scripts array, it contains "version.js". Now you will have a global window variable in your application called "APP_VERSION".

Note: it can be handy to put the src/version.js in your .gitignore file to avoid conflicts

[aholbreich]

@daanoz this is probably most clean solution, since it's copy only the version filed to bundle.
But i see a disadvantage, since this need to bi trigerred separately.
Especially ng serve, ng test and ng build are not calling prepare script out of the box..
Any ideas how to include this into the workflow?

[daanoz]

For us, every build and package is executed by Jenkins, which also runs install (and with that the prepare step)... Worst case a local developer has a out-of-date version number in his/her application.

[nmobregon]

To those getting Cannot find name 'require'.
you can solve by it by installing node types correctly into the project

npm install --save @types/node

[Marielk]

Hi!
I was having the same issue when try to do this package.json require, it was very anoying but i found that after install the @types/node library you have to declare type: ["node"] on your tsconfig.json and tsconfig.app.json (both), this work for me

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}