If you are familiar with composite application blocks in other UI technologies, then you may notice that Angular modules are similar in that they share the notion of enabling application-level modularity.

Conceptually, Angular modules are simple containers. Every part of your application, such as components, directives, and pipes, must be registered as part of a module. You should think about modules as a set of logical containers in which you structure features and code.

There are numerous approaches to deciding how to modularize apps, and there is no single approach to this question. Many concerns can affect this decision: security, lazy loading, varied packaging, and feature encapsulation, to name a few.

Let's review the auto-generated AppModule module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

As you can see, Angular modules are just classes; the @NgModule decorator makes it an actual Angular module. The decorator receives a configuration object with the following key properties:

• declarations: An array of declarable. Declarable can be either components, directives, or pipes. Every declarable you wish to use must be registered in a module, meaning that a module must declare it as part of its declarations property.
• imports: An array of other modules that this module requires. A module can use other modules' exported parts by importing the module it depends on.
• providers: An array of providers to be incorporated into the Angular injector to support dependency injection.
• bootstrap: An array of root components that should be bootstrapped and mounted to the HTML DOM. Normally, an application has only one root component.
• exports: An array of exported declarable, and even modules. If a module's parts are to be used in other modules, then these should be specified as part of its exports.

In this chapter, you will implement the following modules as part of our Everyday Market app:

• AppModule: This is the root module of the application, which is automatically generated when you create a new project using Angular CLI
• CoreModule: This is the module that contains the core application infrastructure
• SharedModule: This is the module that contains common application components
• MarketModule: This is a feature module responsible for navigating product-related pages and information

First, create all the relevant modules using Angular CLI:

1. Open the Terminal or Command Prompt
2. Navigate to the project's root folder at everyday-market-ng
3. Create modules using Angular CLI's generate command:

ng generate module modules/core
ng generate module modules/shared
ng generate module modules/market

You can navigate through the created folders and see the modules that were generated. You will add functionality to these modules very soon, as you'll learn about components next.