Multiple ways to get a version of Angular, CLI and application with examples

Multiple ways to get a version of Angular, CLI and application with examples

This tutorial explains how to find the angular version used in the Application. It also includes finding the angular CLI version. In the Angular app, sometimes It is required to get the application version.

application version is declared in package.json.

How to get the angular CLI version?

You can get a global or local version using the below command.

For the global angular CLI version, type the command anywhere in the command line. It gives a global installed angular CLI version.

In the project, you can get the angular CLI version using the below command in the root directory of a project.

ng v
ng --version

This needs angular CLI installed on your machine.

How to find the angular version used in the application project?

For angular 1.x projects or applications,

You can get the angular version using the below command in the Browser console.

angular.version

You can type this in the console of browser developer tools or console print.

console.log(angular.version);

For Angular version > 2.x, Many ways are there to get version.

First Way,

  • Go to the application root project
  • Find the node_modules/@angular/core/package.json, open it in a text editor, and find the version attribute and its value is the version used in a project. Second way,

Inspect Angular rendered page source code DOM, which the angular compiler adds to the main root component. i.e app-root element. The ng-version attribute of app-root elements is the angular version used.

It contains the following entry.

<app-root _nghost-lxe-c17="" ng-version="13.0.2"></app-root>

Here is a completely rendered HTML DOM

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>AngularPipeExamples</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css">
    <style>
      /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJhcHAuY29tcG9uZW50LnNjc3MifQ==*/
    </style>
    <style>
      .text[_ngcontent-lxe-c16] {
        display: -webkit-box;
        max-width: 200px;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    </style>
    <style></style>
  </head>
  <body>
    <app-root _nghost-lxe-c17="" ng-version="13.0.2">
      <app-decimal-pipe-example_ngcontent-lxe-c17="" _nghost-lxe-c16="">
        <p_ngcontent-lxe-c16="">Angular trucate text example </p>
          <div _ngcontent-lxe-c16=""> long form long form &gt;&gt;&gt; </div>
          </app-decimal-pipe-example> 2.0.1
    </app-root>
    <script src="runtime.js" type="module"></script>
    <script src="polyfills.js" type="module"></script>
    <script src="styles.js" defer=""></script>
    <script src="vendor.js" type="module"></script>
    <script src="main.js" type="module"></script>
  </body>
</html>

The third way, display the angular version in Angular code import VERSION object from ‘@angular/core’, contains full complete versions such as full, major, minor, and patch versions.

Here is a complete code

import { Component } from "@angular/core";
import { VERSION } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  angularVersionFull = VERSION.full;
  angularVersionMajor = VERSION.major;
  angularVersionMinor = VERSION.minor;
  angularVersionPatch = VERSION.patch;
}

<h1>Print Angular version in project</h1>
<div>Full Version {{angularVersionFull}}</div>
<div>Major Version {{angularVersionMajor}}</div>
<div>Minor Version {{angularVersionMinor}}</div>
<div>Patch Version {{angularVersionPatch}}</div>

Display the angular complete version on the page

Print the Angular version in the project
Full Version 13.0.2
Major Version 13
Minor Version 0
Patch Version 2

How to get the Application version in Angular code

Since the Application version is defined in the package.json file as given below

{
  "name": "angular-app-examples",
  "version": "2.0.1"
}

To print the application version in the Angular component, import json file, and display the version property.

import is an ES6 feature that does not work for non-javascript files by default.

So you have to apply the below compiler option typescript compiler to treat allowSyntheticDefaultImports: This option allows you to import from a file without the default export defined.

resolveJsonModule: It allows you to import json files like normal javascript modules.

{
"compileOnSave": false,
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"resolveJsonModule":true,
}
}

Once this configuration is set, the next require code changes.

  • import packagejson and read this as an object

    .

  • assign the object version property to a variable

import { Component } from "@angular/core";
import packagejson from "../../package.json";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  appVersion = packagejson.version;
}

In the application HTML file, print the variable using angular template syntax.

App version:{{appVersion}}

It displays the following text on the browser page upon accessing the application.

App version:2.0.1

Conclusion

Learn the following things.

  • Get the Angular CLI version during development
  • Angular version print
  • Application version in Angular project