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
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.