Get App Name And Version In Angular

March 22, 2020 · 3 min read

#angular #javascript #webdev #typescript

Photo by Joe Chau on Unsplash

I share one trick a day until the end of the COVID-19 quarantine in Switzerland, April 19th 2020. Twenty-height days left until hopefully better days.

Today, Sunday, I had to upgrade an application I’ve developed last year with Ionic and Angular because my client seems to finally have decided to publish it in stores (better start without technical debt 😉).

I’ve to say, the update process to Angular v9 and Ionic v5 went just smoothly. It took me a bit more time to upgrade the Cordova plugins, specially the one dedicated to Firebase, but fortunately I found the solution shared by his maintainer, Dave Alden, who always does an outstanding job.

Once done, I was still facing one last issue. I didn’t touched the app in months and meanwhile, Google Analytics had been really deprecated and I was not able anymore to build my platform because the corresponding plugin was outdated.

Instead of finding the solution, I just removed my old GA implementation and migrated to the new Firebase Analytics implementation in less time than expected.

For the web, I’m using AngularFire, which offers an option to track deployments with application’s name and versions.

Therefore here is how you can get or read the name and version of your application in Angular.

Import JSON File In TypeScript

We don’t want to duplicate the app’s name or version, that’s why I suggest that we read these from our package.json . In order to import JSON files in TypeScript, we need to instruct the compiler to accept such type of data. To do so, in our tsonfig.json we turn the option resolveJsonModule to true .

"compilerOptions": { "resolveJsonModule": true },

Environment Variables

A convenient way to handle environment variables is possible, out of the box, in Angular through the use of the multiples environment.ts files. That’s why we enhance these to “inject” our application’s name and version.

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

That’s it, in our code we have now access the information 😁.

AngularFire Analytics

If like me, you use AngularFire and would like to track these information, proceed as the following in your app.module.ts . Note that in the spinet I also set anonymize_ip to true , as it should, in my humble opinion, always be the case.

import {AngularFireAnalyticsModule, APP_NAME, APP_VERSION, CONFIG} from '@angular/fire/analytics'; import {environment} from '../environments/environment'; @NgModule({ providers: [ { provide: CONFIG, useValue: { allow_ad_personalization_signals: false, anonymize_ip: true } }, {provide: APP_NAME, useValue:}, {provide: APP_VERSION, useValue: environment.version} ] }) export class AppModule { }


I’m agree, this isn’t the deepest and longest blog post I have ever written but I hope it might be useful anyway to someone in the future, one never knows 😄.

Stay home, stay safe!



Read the article

A Little Scanner App Made With The Web

January 4th 2021 · 11 min read

#webdev #showdev #javascript #react

Read the article

More Gatsby i18n Tips And Tricks

December 24th 2020 · 5 min read

#gatsby #react #javascript #i18n

Read the article

Copy URL To Clipboard On Npm Run Start

December 11th 2020 · 3 min read

#javascript #webdev #nodejs #npm

More articles

Company / Address

Fluster GmbH c/o The Hub Zürich Association Sihlquai 131 8005 Zürich

On the web

This website is open source. Its code is available on GitHub