The Angular Masterclass/

...

/

Modules

Modules

Get introduced to the Angular module and dissect the functionality of the main app module.

We'll cover the following...

What are the modules?

Modules are the glue that hold an application together. They are single TypeScript files that reference all the other files used within the application. They allow us, as Angular developers, to group the functionality of our application together.

We’ve now provided an overview of the general structure of an Angular app, so we’re going to be looking further into modules, or, as they are known in the Angular world, NgModules.

Structure of module

To see an example of a module, open the app.module.ts file of our Angular app. You should see the following:

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('angular-architecture 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));
  });
});
app.module.ts file of our Angular app

This is the main App module. As you can see, it’s made up of four main parts:

  • The declarations array
  • The imports array
  • The providers array
  • The bootstrap array

📝 ...