Introduction
As enterprise applications scale, developers often find themselves managing multiple Angular projects that share common libraries, components, or configurations. Instead of maintaining separate repositories, Angular’s multi-project workspace feature allows you to host multiple applications and libraries within a single workspace all powered by the Angular CLI.
In this article, we’ll explore how to efficiently manage multi-project Angular setups, customize Angular CLI configurations, and optimize your workspace for team collaboration and CI/CD pipelines.
1. Understanding Angular Multi-Project Workspaces
An Angular workspace is a folder created using the Angular CLI that contains multiple Angular applications or libraries, along with a shared configuration file angular.json.
Common use cases:
Enterprise suites with multiple frontends (e.g., admin-app, client-portal, dashboard)
Shared UI component libraries
White-labeled applications for different clients
Shared logic libraries (e.g., interceptors, pipes, guards)
Folder Structure Example
angular-workspace/
├── projects/
│ ├── admin-app/
│ ├── client-app/
│ └── shared-lib/
├── angular.json
├── package.json
└── tsconfig.json
2. Creating a Multi-Project Workspace
You can initialize a new workspace without creating an application using:
ng new enterprise-workspace --create-application false
Then, create multiple apps or libraries:
cd enterprise-workspace
ng generate application admin-app
ng generate application client-app
ng generate library shared-lib
Now, your workspace supports multiple build targets with shared dependencies and consistent tooling.
3. Managing angular.json Configuration
The angular.json file defines how each project behaves during build, serve, test, and lint operations.
Example Configuration
{
"projects": {
"admin-app": {
"projectType": "application",
"root": "projects/admin-app",
"sourceRoot": "projects/admin-app/src",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/admin-app",
"index": "projects/admin-app/src/index.html",
"main": "projects/admin-app/src/main.ts",
"tsConfig": "projects/admin-app/tsconfig.app.json"
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": { "browserTarget": "admin-app:build" }
}
}
},
"shared-lib": {
"projectType": "library",
"root": "projects/shared-lib",
"sourceRoot": "projects/shared-lib/src"
}
},
"defaultProject": "admin-app"
}
You can switch between projects using:
ng serve admin-app
ng serve client-app
4. Advanced CLI Configurations
a) Custom Build Configurations
Angular CLI supports environments and build variants.
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false
},
"staging": {
"optimization": true,
"sourceMap": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
}
}
To build with a specific configuration:
ng build admin-app --configuration staging
b) Shared Global Styles and Assets
For multiple projects using the same theme or branding:
"styles": [
"src/styles/global.scss",
"projects/shared-lib/src/theme.scss"
],
"assets": [
"src/assets",
"projects/shared-lib/src/assets"
]
This ensures consistent look and feel across all sub-applications.
c) Customizing Output Paths
You can configure each project’s build output to go into separate folders:
"outputPath": "dist/apps/admin-app"
This structure makes it easier to deploy applications independently in a CI/CD pipeline.
5. Shared Library Integration
Angular libraries inside a workspace help in reusability and consistency.
To generate a shared library:
ng generate library ui-kit
Then, import it in your app:
import { UiKitModule } from 'ui-kit';
To build the library:
ng build ui-kit
You can also publish it as a private npm package by adjusting ng-package.json.
6. Path Mapping for Shared Modules
To simplify imports, configure path mapping in tsconfig.base.json:
"paths": {
"@shared/*": ["projects/shared-lib/src/lib/*"]
}
Now, you can import modules like:
import { CustomService } from '@shared/services/custom.service';
This improves maintainability and avoids deep relative paths.
7. Managing Environments per Project
Each application can have its own environment configuration:
projects/admin-app/src/environments/
├── environment.ts
├── environment.staging.ts
└── environment.prod.ts
To serve the app in a specific environment:
ng serve admin-app --configuration production
8. Running Multiple Apps Simultaneously
To run multiple Angular apps at once (for example, during integration testing), assign custom ports:
ng serve admin-app --port 4201
ng serve client-app --port 4202
Or use concurrently:
npm install concurrently --save-dev
Add a script:
"scripts": {
"start:all": "concurrently \"ng serve admin-app --port 4201\" \"ng serve client-app --port 4202\""
}
9. CI/CD Integration for Multi-Project Repos
In Jenkins, GitHub Actions, or Azure DevOps pipelines, you can build specific apps using:
ng build admin-app --configuration production
You can optimize by caching node_modules and dist/ outputs for faster builds.
Example GitHub Action step
- name: Build Admin App
run: ng build admin-app --configuration=production
10. Advanced Optimization for Large Workspaces
Use Nx or Lerna: Enhance dependency graph visualization and caching.
Lazy load libraries: Import shared modules only where required.
Parallel Builds: Build apps and libraries concurrently.
Incremental Compilation: Configure tsconfig.build.json for faster rebuilds.
11. Practical Example: Enterprise Workspace Setup
Suppose your company manages a suite of tools:
Your workspace might look like this:
projects/
├── admin-portal/
├── client-portal/
└── shared-auth/
Each project has:
This structure allows multiple teams to work independently while maintaining a consistent architecture.
12. Conclusion
Managing multiple Angular applications within a single CLI workspace provides flexibility, scalability, and consistency for enterprise-level development. With the right configuration of angular.json, shared libraries, and environment management, teams can achieve faster builds, simplified dependency management, and easier deployments.
By mastering Angular CLI’s advanced configuration options, you ensure your workspace is not just multi-project but multi-capable, modular, and future-ready.