Search⌘ K
AI Features
Home
Courses
The Angular Masterclass

Modules

Explore the role of Angular modules in structuring applications by grouping components, services, and other files. Understand the parts of NgModule, including declarations, imports, providers, bootstrap, and exports. Gain insight into how modules help avoid naming conflicts and support collaborative development within Angular apps.

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

📝 Note: There is another part of a module that is not shown in this example: the export array.

So, what do all these different arrays do? Well, let’s look at each one, as follows:

One of the first things to point out is the use of a class decoratorA class decorator explains the purpose of the class, i.e., whether a particular class is a component or module. The decorator allows us to define this purpose without putting any code inside the class. to tell Angular about the details of this module. As you can see, the @NgModule is a decorator. Angular sees this and knows that this TypeScript class is a module and that the details within the @NgModule decorator are all parts of this module. So, through this decorator, Angular knows that this module has its own version of AppComponent that belongs to this module. It then imports another module called BrowserModule, and when Angular boots up, it should use the AppComponent as part of this Bootstrap process.

declarations array

This contains the components, directives, and pipes that are part of this module.

imports array

This contains other modules, whose classes are needed by components of the module they are being imported into.

providers array

This contains any services that are required by components. If a service is added to the module level, it is available to all components that are part of the module, but services can also be imported at just the component level.

bootstrap array

This contains the main component, or the root component, which starts the whole application. Only the root module (in our architecture application, it’s the app.module.ts file) that we have opened can have a bootstrap array.

export array

This contains a list of declarations that are available by components in other modules.

The functionality of NgModules

NgModules main role is to tell the framework what components belong where when the application is being compiled. For example, suppose that I have a component called ComponentOne.ts, and in the same application, another developer working on the project also creates a new component and decides to call it ComponentOne.ts. The compiler wouldn’t know which ComponentOne to use when the application was running. By using a module, we can say that one ComponentOne belongs to this module, and the other one belongs to another module. Then, when the compiler is running the application, and it is running the code that belongs to a module, the compiler knows which ComponentOne file to use. This helps to group functionality together and allows a different developer to work on separate parts of an application without affecting the part of the application that another developer is working on.

With NgModule, we can say that one ComponentOne.ts belongs to the admin modules, admin.module.ts, and the other ComponentOne.ts belongs to the ordering module, ordering.module.ts. Each component has a context of where it belongs. So, Angular knows where each ComponentOne belongs and that they are separate components.

✏️ Best coding practice: Naming components the same name is never a good idea. It’s sometimes unavoidable, especially when incorporating a third-party library into your project.

📝 Note: We will be going further into NgModule in NgModules chapter, where we will not only look into a more complex module file but will also start to create modules for our demo app.