When we build our Angular apps, splitting the code into modules is good to keep the code in a specific place, but sometimes we need to break it into the project to put everything in an isolated area.
By default, Angular CLI generates an initial application, but what happens when our project grows? Maybe we start with a basic web but need to create a landing page and want to share components between pages using a library. It is the perfect scenario to use Angular Workspace.
Read more about Angular WorkSpaces Official
The Angular workspaces allow us to split and organize our code in multiple projects, making it easy to manage dependencies, build with a single
npm install for applications and
node_modules, and put it all together in a single repo.
To start using the workspace, we must create the main structure. For example, our company is
amazing_company with a few projects under it.
We run the
ng new using the flag
--create-application=false to not generate the default project.
ng new amazing_company --create-application=false
It builds a file structure with package.json, tslint, tsconfig, etc., all necessary to manage, register and create new projects using the CLI.
Let's show the differences between
ng new myproject and the flag
It is the list of files generated by
ng new myproject with the directory
src and example app to start to code.
angular.json package.json src tsconfig.spec.json
karma.conf.js package-lock.json tsconfig.app.json
node_modules README.md tsconfig.json
With the flag
--create-application=false, only generate the minimal files to manage the project.
angular.json package.json README.md
node_modules package-lock.json tsconfig.json
Perfect, we have differences apparent, following add projects to the workspaces.
We are going to add three new projects to our workspace:
- Two applications:
- One library,
amazing_libraryto share components between apps.
First, add the two applications using the CLI command
ng g short version of
generate with the flag application and the project's name.
ng g application amazing_landing
ng g application amazing_web
The CLI creates the directory
projects and registers the applications in the directory.
angular.json package.json projects tsconfig.json
node_modules package-lock.json README.md
dany@dany:~/Desktop/amazing_company$ cd projects/
We have our two applications generated. Next, we create a library to share code between apps.
To add a library as a project, we run the command
ng g library amazing-library:
ng g library amazing-library
The CLI creates a list of files for the library with his package.json to register his dependencies.
karma.conf.js package.json src tsconfig.lib.prod.json
ng-package.json README.md tsconfig.lib.json tsconfig.spec.json
Perfect, we already create the library with his files. Our next point is to build and run the projects.
Learn more about Angular CLI Commands.
As we worked before with the CLI, we can run our applications or build using the
ng commands like
ng server or
ng build with the application name.
By default, the
angular.jsonsets the first project as default and loads the first project created if you use
ng servewithout the application name.
ng serve amazing_landing
ng build amazing-library
We learn why to use the angular workspace to split our project and how the angular CLI efficiently manages projects, running, and building. I hope it helps you in your next projects.