Project Setup With Mono Repo - Angular Architecture

Problem

 

While building an enterprise-level application, it is hard to manage:

1. The building blocks of the application
2. Maintaining the reusable components like custom libraries, and upgrading them over time
3. Different sections, which can be considered as additional modules for the application which can be created as a sub-projects of the application, like blogs.application.com, about.application.com

I have personally felt that every enterprise-level application requires lots of reusable components (library) to be developed, and that can also be published over GitHub/NPM to the community (public or private repo, based on the use case or requirement) so that others also can use it.

 

Solution

 

Angular provides a way to set up one workspace with multiple projects and libraries sharing the same dependencies across all projects.

 

Benefits of using Mono Repo approach,

1. No need to worry about handling multiple project dependencies.
2. A feature-rich component can be created as a library and can be used by other modules.
3. Additional projects also can be deployed separately
4. The custom libraries are easy to maintain
5. Upgrading from one version of angular to another.

Note

I am not talking about creating a shared component or merging feature related components, services, models in a module or creating a wrapper-components for the third party plugins. Those things can be handled at the application level.

 

In this article what I am covering is:

1. Creating a workspace
2. Adding a subproject
3. Publishing the main project
4. Publishing the subproject as standalone.
5. Adding a library
6. Removing subproject/library from workspace

Prerequisites

1. Node Installed
2. Angular CLI installed

Note

Angular CLI version, which I am using.

 

 

Let’s start,

 

Step 1 - Create an angular app

 

ng new angular-enterprise-app-setup

 

And run it [see the current stage of application on Github, here].

 

ng serve

 

Step 2

 

Now our workspace is ready.

 

Imagine, the company publishes articles about their product and they want a project to be developed to publish their articles (suppose blogs).

 

Let’s create a subproject called blog inside the workspace.

 

ng generate application blog

 

Note

You need to execute the above command inside your workspace

 

 

A new folder called projects has been added and inside it, a blog folder has been created which contains our blog project 

 

 

See the changeset

 

To run the blog application

 

ng serve --project blog

 

Note

1. Adding a project to the same workspace updates the angular.json file [see the changeset]
2. Project blog can be deployed as standalone and can be merged into the main application
3. If you wish to run both the application at the same time, you can use --port in angular cli as
   
   ng serve --project=blog --port=4201

Step 3

 

ng build --prod

 

This will create an application folder inside the dist folder and can be deployed from there.

 

Step 4

 

Deploying subproject (blog) as standalone

 

ng build --project blog --prod

 

The will create a blog folder inside the dist folder and can be deployed from there.

 

Step 5

 

Let’s suppose we need a library that can help us view any kind of article.

 

This library can be used in the blog project, or it can be published as a package and consume by other projects within the organization or can be published as an open-source project over Github.

 

Adding a library to the workspace,

 

ng generate library article-viewer

 

 

See the changeset

 

Note

Adding the library project to an existing workspace, causes changes in angular.json, package-lock.json, and package.json.

 

Step 6

Removing application/library from an existing workspace.

 

As of now, there is no such feature available in Angular CLI.

 

But it can be performed manually.

 

https://github.com/nrwl/nx/issues/333

 

Github Repo

 

Please comment below, if you want me to develop the project even further with the below features,

• Using article-library into the blog project
• Merging blog project into the angular-enterprise-app-setup project
• Hosting blog project as a standalone application on Heroku
• Publishing article-library as a package using Github Package Registry over NPM