Identify version for application and components for Backend(.NET Core) and FrontEnd(Angular)–part 3- FrontEnd

Part1 : Introduction and Concepts

Part 2: Obtaining BackEnd Components Version

Part 3: Obtaining FrontEnd Component Version and Final Library

Live Demo 

NPM component
Copy paste NET code

Identifying the version of Angular components that we are using is a bit tricky. The package.json is having, by default, components using version “greater than”. More than that , after AOT compiling it remains no evidence of the original software used. However, there is a helper  npm-shrinkwrap : this will generate a npm-shrinkwrap.json file that fixes the versioning.

So the second part is to request the .NET version and the npm-shrinkwrap.json  file content with Angular front-end

For this we have a class that takes , by Dependency Injection, the HTTP Client and request versions from .NET Core and Angular:


export class VersionsNetcoreAngularService {

constructor(private http: HttpClient) {

const self = this;


public FVS(): Observable<FileVersionInfo[]> {

console.log('get fvs');

return this.http.get<FileVersionInfo[]>('api/Utils/GetVersions');


public FVSAngular(): Observable<FVSAng[]> {

console.log('get fvs angular');

return this.http.get('npm-shrinkwrap.json').pipe


switchMap(data => {

const ret = data as PackageJSONVersion ;

const d = ret.dependencies;

const arr = new Array<FVSAng>();

let f = new FVSAng(); =;

f.fileVersion = ret.version;


for (const key of Array.from( Object.keys(d)) ) {

const dep = d[key] as Dependency;

if ( {



f = new FVSAng();

f.fileVersion = dep.version; = key;



return of(arr);




The rest is history – just display the version in a HTML GUI.