Angular Module vs. Library vs. Application vs. Workspace

The Angular CLI is an invaluable tool for generating Angular projects efficiently. You can use it to create components, services, and directives from the command line, as well as handle building, testing, and deploying your Angular applications.

Since Angular 6, the CLI introduced the concept of a workspace, which is essentially a collection of projects. These projects can be either "libraries" or "applications." This evolution raises questions about the distinctions between these components.

Key Takeaways

• An Angular workspace is a collection of projects that can include both applications and libraries.
• An Angular library is a reusable collection of components and services, while an application includes everything needed to run as a standalone app.
• Modules help organize functionality internally, while libraries facilitate external reuse.

What is an Angular Workspace?

Angular workspaces were introduced in Angular 6 as a way to manage multiple projects under a single roof. When you create a workspace using the ng new command, it sets up a new workspace:

ng new myworkspace

This creates a new workspace called myworkspace. By default, an application is generated at the root under the src/ folder, but this can be omitted:

ng new myworkspace --no-create-application

This command sets up a workspace without an initial application. So, why do this? Primarily, it provides a way to organize projects within a single angular.json file, allowing shared code reuse via libraries.

What is an Angular Library?

An Angular library is a collection of components, services, and directives that can be shared across different projects. You can generate a library using:

ng generate library mylibrary

This will create a library named mylibrary under the projects directory of your workspace.

If you want to add an application, use:

ng generate application myapp

This creates an application called myapp in the projects folder.

Angular Library vs. Application

Applications include files necessary for browser deployment (e.g., index.html, main.ts), whereas libraries don't. Libraries instead focus on reusable code, generating files like public_api.ts and configuration for ng-packagr in ng-package.json.

public_api.ts serves as the entry point for your library, declaring components and services available for external use.

ng-package.json configures packaging with ng-packagr, which turns your library into a distribution-ready npm package.

Understanding the Difference - angular.json

The angular.json file in a workspace lists all projects under the projects section. Applications have configuration for browser properties, while libraries use ng-packagr for builds:

"build": {
  "builder": "@angular-devkit/build-ng-packagr:build",
  "options": {
    "tsConfig": "projects/mylib/tsconfig.lib.json",
    "project": "projects/mylib/ng-package.json"
  }
},

Applications target browser environments, while libraries focus on reusable components.

What is an Angular Module?

Angular modules, defined in .module.ts files, organize components, services, and directives. Both applications and libraries include modules, but modules are not directly equivalent to libraries.

Modules facilitate functionality organization within a project, while libraries make collections of components and services available for other projects.

Wrapping Up...

Understanding the distinctions between workspaces, libraries, applications, and modules clarifies project organization in Angular. When generating components and services, specifying the target project using the --project flag ensures proper placement:

ng generate component mycomponent --project=myapp
ng generate component mycomponent --project=mylib

Conclusion

An Angular workspace organizes both libraries and applications, each with its own purpose. A library is reusable and often published, while an application is a complete project meant to run in a browser environment. Understanding these roles can streamline your Angular development process.

For more on Angular projects, check the Angular documentation or explore community tutorials.

FAQ

Are Angular workspaces mandatory for projects?

Angular workspaces are not mandatory but highly beneficial for managing multiple related projects and sharing code across libraries and applications.

Can a single Angular application use multiple libraries?

Yes, a single Angular application can integrate multiple libraries, allowing reuse of components and services built into those libraries.

What are the benefits of using Angular libraries?

Angular libraries promote code reuse, offer easy deployment via npm, and streamline project maintenance by modularizing functionality.