Angular.json structure for beginners - what we can set

Introduction

During the creation of an Angular project in the root directory, the angular.json file is created. It contains some properties which allow us to configure how the project behaves and how the CLI generates new parts of the project. In this article, I will explain this configuration structure and what those properties are about.

New project generation

First of all, We need the project. For that, I will use the @angular/cli command line tool, which the developer can install by typing in the command line:

npm install -g @angular/cli

-g means I am installing it globally on my OS.
To create a fresh new project, I am typing:

ng new config-explanation

The config-explanation is the name of my new project.
The first question asked by the CLI:

Would you like to add Angular routing? (y/N)

• yes option also creates a root routing file app-routing.module.ts
• no option skips the creation Next question:

Which stylesheet format would you like to use? (Use arrow keys)

• CSS - pure CSS
• SCSS - CSS pre-processor with Rust underneath
• Sass - like above, just different syntax
• Less - CSS pre-processor but with JavaScript underneath The developer can change that option later in the angular.json file. After answering all of those questions, a new project is created.

Main angular.json properties

Angular.json file has nested different structures; below are definitions for each nested set of properties.

Root level

The main properties of the "level 0" angular.json are:

• $schema is used for defining definitions and structure for the rest of the current JSON file,
• version version of the angular.json schema,
• newProjectRoot place where new projects are created by the CLI,
• projects list of projects created in the current workspace, with name as a key and configuration as a value.

Project

• projectType type of the project application or library,
• schematics explained below
• root root of the project
• sourceRoot place where files like index.html, assets, images, and fonts are kept
• prefix prefix for component selectors, for example, when set to app sets all created components with app-* prefix
• architect explained below

Schematics

Angular Schematics is a tool for generating and modifying code in an Angular application. They can automate repetitive tasks and enforce consistent coding standards across your projects.

Schematics are templates that define a set of actions that can be applied to a project. These actions include generating new files, modifying existing files, or updating configuration files. Schematics can be run using the Angular CLI or programmatically using the Schematic Engine API.

Angular Schematics can create custom generators, such as generating components, services, or directives with specific configurations or modifying existing codebases to align with a predefined code style. Additionally, Angular provides many built-in schematics that can be used out of the box to add features to your application or modify your codebase.
Overall, Angular Schematics provides a powerful way to automate common tasks in Angular development, helping to reduce errors, save time, and maintain consistent code quality across projects.

In the angular.json file, You can configure the schematics available in the current project. By selecting scss during the project creation, we define a schematic:

"@schematics/angular:component": {
    "style": "scss"
}

Which sets all of the components to use scss by default.
Another example properties that we can set for component schematic are:

• inlineStyle which sets styles as inline,
• standalone which sets the component as a standalone
• prefix - like on the project level.

Other angular default schematics can be found here.

Architect

Angular Architect is a tool in the Angular framework that allows developers to define and execute complex build and deployment processes. A command-line interface (CLI) automates many tasks in creating, testing, and deploying an Angular application.

Angular Architect also provides a set of builders that can be used to perform various tasks, such as building the application, running tests, and deploying the application to multiple environments. These builders can be run using the "ng" command-line tool. For example:

ng build

which will run builder @angular-devkit/build-angular:browser.

Overall, Angular Architect helps developers to streamline their development and deployment workflows, reducing the time and effort required to build and deploy Angular applications.

Each of those builders has common properties:

• builder - the name of a builder used in the current command,
• options - a set of properties used by the current builder,
• configurations - set of properties divided for each environment,
• defaultConfiguration - default configuration that the project will use.

Here is the link with default Angular architects.

Summary

Angular.json file is a powerful config file that allows us to define many details of a project and is a good starting point when We are learning an existing project or if We want to describe how our new project will be structured and configured so then We won't have to configure everything from the scratches.