Adding a new module

In this example, we will, so that you can see how to build applications using the Angular CLI. Even in this very basic example, we will cover the following points:

• How to organize an Angular application
• Creating modules
• Creating services
• Template data binding
• Running an application in production

Now, let's create a module that shows us a list of beers:

1. Open VS Code, and, inside the integrated Terminal, type the following command:

ng g module beers

Note that the command ng g module is a shortcut to ng generate module <module-name>, and this command just creates the module; we need to add routes, components, and templates, and also import the beers module in app.modules.ts, at the root of the app folder. The preceding command will generate the following structure and file content inside of our project: src/app/beers/beers.module.ts. The beers.module.ts contents are as follows:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
    @NgModule({
    imports: [
    CommonModule
    ],
    declarations: []
    })
export class BeersModule { }

This is a pretty simple boilerplate code, but it is very useful. Now, we will add the missing pieces.

2. Add the beers module to your app module; open app.module.ts and replace the code with the following lines:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BeersModule } from './beers/beers.module';
    @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BeersModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Note that we imported BeersModule and added it to the imports array.