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.name = ret.name;

f.fileVersion = ret.version;

arr.push(f);

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

const dep = d[key] as Dependency;

if (dep.dev) {

continue;

}

f = new FVSAng();

f.fileVersion = dep.version;

f.name = key;

arr.push(f);

}

return of(arr);



})

);

}

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