---
title: "Optimizing Your Workflow with Multiple Projects in Angular"
date: "2022-08-11"
slug: "optimizing-your-workflow-with-multiple-projects-in-angular"
author: "Dany Paredes"
canonical: "https://danywalls.com/optimizing-your-workflow-with-multiple-projects-in-angular"
description: "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 appli..."
---

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](https://angular.io/guide/workspace-config)

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

```bash
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.

```bash
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.

```bash
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`, and `amazing_landing`.
- One library, `amazing_library` to 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.

```bash
ng g application amazing_landing
ng g application amazing_web
```

The CLI creates the directory `projects` and registers the applications in the directory.

```bash
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`:

```bash
ng g library amazing-library
```
The CLI creates a list of files for the library with his package.json to register his dependencies. 

```bash
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](https://angular.io/cli#command-overview).

## 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.json` sets the first project as default and loads the first project created if you use `ng serve` without the application name.

```bash
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.