What is an angular library? When should it be preferred? How can we use?

It is suggested to partition small applications according to user roles or working processes when working on some large projects. Especially, if we get based on e commerce site, else beside only shopping for the last user, sellers can be needed area where to upload their products. Even, three or more projects may be a good choice when developers enhance a marketplace. Of course micro-frontend is reasonable to come up with a solution for these problems and that is most accurate. But we’ll focus angular library mostly today.

As we previously discussed, in the modern software industry, solving certain large problems by partitioning them into smaller parts works out to be a really excellent choice. Avoiding repetition as a developer is crucial for creating robust and extensible applications, according to DRY (Don’t Repeat Yourself). If we go with the initial example, imagine that we have a product model that derives from the backend.

Product Model Example

A product model to set our product, which is either uploaded or received, is at the top. If we create three different applications for sellers, users, and administrators, we must use this model in all of them. As a result, we must prove this model in various angular projects. When we modify this model at the backend, even the change must affect every component of the project. We will specifically use the structure of the Angular library to profit from fixing these difficulties. By the way, we can aggregate all of class and service that supports other projects. We also need to pay attention to the fact that using this library structure, a npm package may be created and published. We’ll leave that for the following piece.

For the time being, it can be a pretty good alternative to create and distribute angular components like models, services, directives, and pipes. Actually, developers who are interested in C# will be familiar with this situation. Because we use “solution” to group all projects under one framework in C#. You can create one solution with the angular library and a few projects can feed with the angular library. It is clear from this that the Library is not a directly accessible application for users, but rather a library that may be used by other applications in your project. It is clear from this that the Library is not a directly accessible application for users, but rather a library that may be used by other applications in your project.

When Should We Use Angular Library?

Actually, it needs to be an architectural choice. Developers can therefore transfer classes and services that are used by all applications except those that require your software architecture’s business logic. Here, “loose coupling” is the point that the application needs to reach. if a classes and services has a loose coupling each other at a software, this elements don’t effect each other during the enhancing. Therefore being probability of problem is less. It is my recommendation that you move your “DTO” (Data Transfer Object) or “View Model” classes that are created from the backend and used in your business logic. Aside from that, I believe your service structure should be in your library for access from other applications. Therefore, the structure which effect Html like component, directive, pipe must be in angular library if other application will use the these elements.

How Can I Use Angular Library?

The “Angular CLI” for building angular libraries will be useful to us.

ng new my-workspace --no-create-application

We can create angular workspace with the above code. At the same time we used “ — no-create-application” directive and we have been said the cli don’t create an application.

cd my-workspace

Yu can change your directory with using above code.

ng generate library my-lib

With the “ng generate”, We have an angular workspace with the library at our hand. Now it is time to make another application. We execute these three commands in any order

ng generate application user
ng generate application seller
ng generate application admin

After executing these command with the help of angular cli, view of angular project have to be in the following picture. Now we arranged all of angular projects to feed from angular library.

Angular project structure after angular library

We are up the after overview on discussing an angular library topic. we will focus how to use this angular library as effective and efficient at next stage.

Good works…