Taking Benefit of Angular Component's Structure

From the last 2 months, I have been totally working on the UI i.e. mainly Angular. The task was to convert our legacy ASP.NET aspx code to Angular UI using the latest version of Angular 9 (though Angular 9 is not latest anymore as Angular 10 is out). We are also using Syncfusion for some of our obvious components like DatePicker, DateTimePicker, Grid, Charts etc so that we don't have to spend time in writing those.

We had 4-5 Angular apps where we used to use syncfusion directly and spending a considerable amount of time in each app. But the problem was we did not have a base project where we could have created a component and used it everywhere. So since we are starting out a new project we thought of streamlining some of the processes, like creating one component and use it everywhere.

Along with that Angular has a feature called Workspace, where you can set any number of angular applications and libraries. It has one angular.json at the root level and thus all the configuration related to all the projects or project-specific goes here, similarly only one package.json where you can keep all the dependencies at one place. So we have first started with Initializing Angular Workspace.

PC: Pixabay.com

Now along with Workspace, we have Angular Library which differs from a normal app, the library should be imported in an application and use it there. So it will be the best candidate to keep all your common components there. So what we have done is that we encapsulated all our Syncfusion components in our own components and kept it inside the base library. This way all the Syncfusion changes will be done at one place and we use our own library in another project. Along with any component which we write also go into the same library.

This way we are taking the benefit of Angular Component and thus creating building blocks of a large application inside the library. Some of the problems we faced when using the library and the workaround which we have done to solve the issue is -

1. Testing Component - For testing, we cannot directly test it in the library, so we need to create a test app to test all those components in the library. The library creates a single .js file for all components and thus it was little hard to test it in the browser.
2. Localization - In Angular Library, we cannot directly import assets folder and thus it was hard to do localization on the component, what we had to do is to write a post-build script to copy the assets to the project.

Though the above 2 issues were not big and the good thing is that we had a workaround and thus we can use the library. Once we have created enough components in the library, we have imported those in the actual application and used it. So actually we have taken benefit of Angular component structure to break down our large application into smaller and simpler blocks and use it everywhere.

PC: Pixabay.com

This was a POC and it did go well and now we are in a process to move all our application with this structure. We might face some issues doing it, but I hope we might have some workaround to fix those issues.

I think with Angular, React and Vue framework, building Web UI is much simpler nowadays and thus anyone having some knowledge of CSS, HTML and Javascript can use these frameworks and create their own web UI as per their choice.