Category: version

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:

 

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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.

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

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 the dll’s  used on the backend is fairly simple. All we need is to iterate into the current directory and find the version of the dlls.  It is just a simple controller that receives via Dependency Injection the path to the current directory. It is no harder than that code:

 

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
[HttpGet]
 
public FileVersionInfo[] GetVersions([FromServices] IHostingEnvironment hosting)
 
{
 
var dirPath = hosting.ContentRootPath;
 
var ret = new List&lt;FileVersionInfo&gt;();
 
var files = Directory.EnumerateFiles(dirPath, "*.dll", SearchOption.AllDirectories).Union(Directory.EnumerateFiles(dirPath, "*.exe", SearchOption.AllDirectories));
 
 
 
foreach (string item in files)
 
{
 
try
 
{
 
var info = FileVersionInfo.GetVersionInfo(item);
 
ret.Add(info);
 
&nbsp;
 
}
 
catch (Exception)
 
{
 
//TODO: log
 
}
 
}
 
return ret.ToArray();
 
}
 
}

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

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

In our days recognizing fast the version of the software you deploy it is important ( very important , if you do not have a continuum upgrade strategy – like Chrome does or in my days , using Click Once ). More, you should be able to recognize what components you are using in the software.

This was very interesting for me ( see http://msprogrammer.serviciipeweb.ro/2014/10/13/tt-add-more-informations-net-version-build/  and http://msprogrammer.serviciipeweb.ro/2019/01/14/opensource-library-versioning/ ). However, this is not about how to version the application – but how to display the version for BackEnd and FrontEnd components.

So – we need a front-end HTML page ( or WPF, or WinForm or other front-end ) and 2 informations  : 1 for the components for the backend and one for the components for the front end .

I have made such a component – it is made for Angular and .NET Core. It can be adapted very easy for all others , by transforming the  Angular library to a WebComponent library and the WEB API .NET Core into node.js  HTTP Rest.

If you want to see the final product , please check the https://www.npmjs.com/package/versions-netcore-angular  and the  live demo at https://azurestankins.azurewebsites.net/about

You will see the version of .NET Components and Angular Components that we are using.

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.