What is Angular workspace configuration?

An Angular workspace is the top-level structure for one or more Angular applications and libraries. Its configuration defines how projects are built, served, tested, and deployed, ensuring consistency and manageability across all development activities. The primary configuration file for an Angular workspace is `angular.json`.

The `angular.json` File

The angular.json file is a crucial part of an Angular workspace. It resides at the root of the workspace and contains the configuration for all projects (applications and libraries) within that workspace, as well as workspace-wide settings for the Angular CLI.

Structure of `angular.json`

The angular.json file is a JSON object with several top-level properties:

• version: The configuration file format version.
• newProjectRoot: The path where new projects will be created, relative to the workspace root.
• defaultProject: The name of the project that will be used by default when no specific project is provided for Angular CLI commands.
• cli: Configuration for Angular CLI features and behaviors.
• schematics: Default options for schematics (code generators) used by the Angular CLI.
• projects: An object containing configuration for each individual project (applications and libraries) in the workspace.

Project-Specific Configuration

Each entry within the projects object represents an application or a library and has its own set of configurations, including:

• projectType: Indicates if it's an 'application' or 'library'.
• root: The root directory for the project, relative to the workspace root.
• sourceRoot: The root directory for the project's source files.
• prefix: The prefix to apply to generated selectors for components and directives within this project.
• architect: (formerly targets) An object containing definitions for various CLI commands (builders) that can operate on the project, such as build, serve, test, e2e, and lint.

`architect` (Builders and Targets)

The architect section within each project is where the real power of Angular configuration lies. It defines various targets (like build, serve, test) and specifies the "builder" (a function that runs a specific CLI command) and its options. Each target can also have multiple configurations, allowing for environment-specific settings (e.g., development, production).

• build: Configures how the application is compiled and bundled. Options include outputPath, index, main, polyfills, tsConfig, assets, styles, scripts, budgets.
• serve: Configures how the application is served during development. Options primarily include browserTarget to link to a build target, and port.
• test: Configures how unit tests are run, typically using Karma. Options include main, tsConfig, karmaConfig.
• e2e: Configures end-to-end tests, typically using Protractor. Options include protractorConfig.
• lint: Configures linting rules, usually utilizing ESLint, for code quality and style consistency.

Other Important Configuration Files

While angular.json is central, several other files contribute significantly to the overall Angular workspace configuration:

• tsconfig.json (and tsconfig.app.json, tsconfig.spec.json): TypeScript compiler configuration files for the workspace and individual projects, defining how TypeScript code is compiled.
• package.json: Manages project dependencies, scripts, and metadata for the entire workspace.
• .browserslistrc: Defines the target browsers for the project, used by tools like Autoprefixer and Babel for CSS and JavaScript compatibility.
• karma.conf.js: (if using Karma) Configuration for the Karma test runner, used for unit tests.
• protractor.conf.js: (if using Protractor) Configuration for the Protractor end-to-end test framework.