Angular: inspect Workspace programmatically

How to load your angular.json file correctly!

I have been developing Enterprise-level applications together with my collaborators for years, mainly using .NET Core and Angular.

Speaking more specifically about the frontend side I can say that I have used the most famous task runners (ex grunt / gulp) but recently I can say that I have focused my interests more in the capabilities made available by @angular/cli.

Specifically, to this article, I would like to focus on very common use on big projects and that is the possibility of creating project’s libraries:

ng generate library my-lib

Thanks to the creation of libraries, the project can grow in a structured way, thus allowing the concepts that are implemented from time to time to be separated correctly.

Angular Workspace

It is, therefore, time to talk about workspaces and what officially angular means by this concept very familiar to java projects:

You develop applications in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise a standalone application or a shareable library.

A workspace is, therefore, a container of multiple projects which can be Applications or Libraries configured thanks to a single JSON file present in the root: angular.json.

By opening the angular.json file we are immediately faced with a complex structure, where multiple definitions of projects coexist and define their own characteristics.

For more examples about angular.json file see the official documentation page.

As the project grows we will find ourselves to work with many shared libraries in the workspace. If we took, for example, the current project that I am developing for an important customer we would find a workspace made up of more than 50 different libraries.

But how can we increase our productivity by going to perform some automatic tasks on all the libraries in our workspace?

The correct answer is to rely on the angular.json file (the same that is analyzed and inspected by @angular/cli when executing the build, test, or lint commands).

And here we come to the main question evoked by the article’s title, how can I programmatically inspect the workspace file?

Inspect in RAW mode:

The simplest answer is to read the file with a simple file reader, parse the content (JSON format) and look for the corresponding keys inside the object loaded in memory:

A simple way to load, parse and use angular.json file (raw version)

As we can guess, the RAW reading of our workspace does not guarantee us security with respect to future angular updates, nor a correct type check of the information contained therein.

Inspect using @angular-devkit packages:

But there is a simpler and safer method to be able to inspect our file and that is to use the packages made available by angular to perform the workspace inspection:

A simple way to load, parse and use angular.json file (angular devkit approach)

As a first step, the @angular-devkit package provides us with the workspace class useful for reading our workspace correctly.

At this point, we can inspect the list of projects present and check whether they are applications or libraries (they are the only two types of projects possible within an angular workspace). Finally, for each project, we can understand if there is a build/test or lint target defined.

Thanks to the features made available by angular’s devKit packages, we can easily build our productivity tasks by going directly to inspect the workspace of our solution.

Please, Subscribe and Clap! Grazie!