Angular.json structure for beginners - what we can set
Tags: webdev, beginners, angular, javascript
Published: 2023-03-20 20:55:33

### 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:
```json
"@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](https://github.com/angular/angular-cli/tree/main/packages/schematics/angular).

#### 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](https://github.com/angular/angular-cli/tree/main/packages/angular_devkit/build_angular/src/builders) 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.