Angular: Designing and Architecting Web Applications/

...

/

Reviewing the Files

Reviewing the Files

Let’s review some of the files to feel more comfortable with the project.

We'll cover the following...

The starter project by Angular can be overwhelming at first. The CLI downloads a bunch of files that it can be confusing as to where to start. We’ll review some of the files to become more comfortable with the project. This review won’t be super comprehensive. We’ll be briefly looking at things.

Here are the files for the project the CLI scaffolded for us:

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', async () => {
    await page.navigateTo();
    expect(await page.getTitleText()).toEqual('starter 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));
  });
});

Root Files

We’ll start with the files in the root directory of the project.

.browserslistrc

Angular is built with various tools, such as Webpack. Most tools can be configured to output different results for specific browsers. It can be tedious to configure each tool for different browsers. This is where the .browserslistrc file comes into play.

Instead of configuring each tool, you can outsource the list of browsers to support in one file. The current configuration will support the latest browser but not IE. You can click on the link at the top of the file for various queries that can be added for more browser support. You can also run the following command to get the list of browsers the configuration will support:

npx browserslist

.editorconfig

The first file is ...