Project Setup With Mono Repo - Angular Architecture


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,
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.


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.
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
  1. Node Installed
  2. Angular CLI installed
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
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
  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
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.
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

Similar Articles