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
What Is A WorkSpace?
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.
Using WorkSpaces
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.
What Are Differences?
Let's show the differences between ng new myproject and the flag--create-application=false?
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.
Add Projects To WorkSpace
We are going to add three new projects to our workspace:
- Two applications:
amazing_web, andamazing_landing. - 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/
dany@dany:~/Desktop/amazing_company/projects$ ls
amazing_landing amazing_web
We have our two applications generated. Next, we create a library to share code between apps.
Add Library
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.
Building and Running Projects
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 useng servewithout the application name.
ng serve amazing_landing
ng build amazing-library
Recap
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.
Foto de Thomas Park en Unsplash
Top comments (1)
Exactly what I was looking for! Thank you!