The Angular Masterclass/

...

/

The angular.json File

The angular.json File

Let's learn about the different sections of the angular.json file.

We'll cover the following...

Angular CLI workspace file

In the previous section, we mentioned the angular.json file. This is an extremely important part of an Angular application, so it is worth exploring this file some more.

The angular.json file is always found in the root folder of a CLI generated project, along with the package.json file. Originally, this file was named .angular-CLI.json, but as of Angular 6+, the file was renamed to angular.json, though its official name is the Angular CLI workspace file.

The main source of configuration for the entire project

This file is used as the main source of configuration for the entire project, as we’ve already seen in the configuration section and the environment settings file. There are many more settings that we can change within this JSON file in order to optimize our application. Let’s have a look at some of the sections of this file.

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('Client-Contacts-Manager-Angular app is running!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});
angular.json file

The schema section

The first part of the JSON file defines the schema that this file should be checked against and the version of the application. After this, we have the projects section.

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,

The Projects

...