Creating a New Project

We'll start working on the next project to learn about components.

In the last section, we tunnel-visioned on a few files and features. It’s time to expand a little more. We’ll continue to take the approach of slowly peeling away the features in Angular.

The main focus of this section is components. Before we get started, let’s create a new project to work in. If you’re using Educative to run the code examples, you can skip this lesson.

In the command line, run the following command:

ng new components

After running the command, we’ll be asked about routing and our choice of CSS. We’ll select the default settings for everything.

Here’s what the project files should look like:

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));
  });
});