Angular Workspace: The Basics

As Angular developers, we often work on multiple projects that share standard code and dependencies. To tackle this complexity, Angular introduces the concept of Workspace.

An Angular Workspace is essentially a container that can hold multiple projects and libraries, making it easier to manage and organize your codebase.

A newly generated application is equipped with the necessary source files for a root module, complete with a root component and template. All application logic, data, and assets can be found within the 'src' folder.

You can edit the generated files directly or make use of Angular CLI commands to add new files for components, services, pipes, and more.

The ng generate command is your go-to for adding these elements.

Remember, commands such as ng generate and ng add must be executed from within a workspace or project folder.

How to create a New Angular Workspace?

The first step in working with Angular Workspace is to create a new one.

This is where the ng new command comes in. Simply run this command and it will generate a new Angular workspace folder and set up a new application skeleton for you.

Here's an example of how to create a new Angular Workspace:

ng new my-workspace

This will generate a new Angular Workspace with all application logic, data, and assets.

Adding Applications and Libraries in Angular Workspace

In addition to creating new applications, you can also add additional applications or libraries to your Angular Workspace.

The ng generate command is here to help. Use it to add new components, services, pipes, directives, and more to your projects.

Here's an example of how to add a new application to an Angular Workspace:

ng generate application my-new-app

This will generate a new application inside the /projects root subfolder and add the needed configurations.

Angular Workspace and Project Configuration

To manage your Angular Workspace and project configuration, Angular provides the ng config command.

This command allows you to set and retrieve configuration values from the command line or directly edit the angular.json file.

For instance, to retrieve the current value of a configuration setting, you can use the following command:

ng config <setting-name>

And to set a new value for a configuration setting, simply run this command:

ng config <setting-name> <new-value>

I usually edit the angular.json file directly, it's easier to find the configuration I need but is useful to know we can retrieve and update the workspace configurations from the command shell.

That's it!

These are the basics of Angular Workspaces you should know, no more 'water' and complicated stuff about it.

To deep dive, more into Angular Workspaces, we need to understand how Angular CLI works and how to use it.

In conclusion, Angular Workspaces offer a convenient way to manage multiple projects and dependencies within a single container.

With this knowledge under your belt, you're ready to tackle any Angular project easily.