In this post, we will learn how to create and organize multiple Angular applications in one project or workspace. This is useful for enterprises that use a single repository and global configuration for all Angular projects.
Prerequisites
You need to have Angular CLI installed. You can check the version by running ng --version
in your terminal. If you donāt have it, you can install it by running npm install -g @angular/cli
.
Steps
- Create a workspace with the following option. This will create a workspace with all the workspace-wide configuration files, but no root-level application.
ng new MultiProjectApp --create-application=false
cd MultiProjectApp
- Use the following command to add as many applications as you want.
ng generate application Project1
ng generate application Project2
- To run an application, use
ng serve
with the application name or the--project
flag.
ng serve Project1
# or
ng serve --project="Project1"
- To build a production application, use
ng build ProjectName
with the--configuration=production
flag. The build output will be stored in the dist folder with the application name.
ng build Project1 --configuration=production
ng build Project2 --configuration=production
Folder Structure
The folder structure of the workspace is as follows:
Benefits
There are several benefits of having multiple Angular applications in one project:
- You do not have to run the time-consuming npm install for every application.
- The node_modules folder is shared with all the other applications, saving disk space and time.
- All the applications can be updated to the next version easily with a single command.
- You can use a single source-control repository (such as git) for all the applications.
- You can create and use libraries that contain shared components, services, directives, pipes, etc. across the applications.
Conclusion
In this post, I have shown you how to create and organize multiple Angular applications in one project or workspace. This is a useful technique for enterprises that use a single repository and global configuration for all Angular projects. It also supports library development and code reuse. I hope you found this post helpful and learned something new. If you have any questions, comments, or suggestions, please feel free to share them below. Thank you for reading!
Top comments (0)