Introduction

In this tutorial, we will learn how to generate components and modules using Angular CLI. Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications.

The goal of this tutorial is to help you understand how to use Angular CLI to generate components and modules to structure your Angular application.

By the end of this tutorial, you will:

• Understand the importance of components and modules in Angular
• Be able to generate components and modules using Angular CLI
• Know how to organize your Angular application using components and modules

Prerequisites: Before you start, you should have a basic understanding of Angular and have Angular CLI installed on your system.

Step-by-Step Guide

Components are the most basic building block of an Angular application. A component controls a part of the screen — a view — through its associated template.

Modules, on the other hand, are a great way to organize your application. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule.

We will use Angular CLI commands to generate both.

Generating a Component

To generate a component, use the following command:

ng generate component component-name

Or you can use the shorter version:

ng g c component-name

This will create a new directory component-name with four files:
- component-name.component.ts
- component-name.component.html
- component-name.component.css
- component-name.component.spec.ts

These are the TypeScript, HTML, CSS, and test files for your component, respectively.

Generating a Module

To generate a module, use the following command:

ng generate module module-name

Or the shorter version:

ng g m module-name

This will create a new directory module-name with a single file: module-name.module.ts. This file will contain your new NgModule.

Code Examples

Let's create a component named hello and a module named greetings.

Generating the hello Component

Run the following command:

ng g c hello

This will generate:

• hello/hello.component.ts
• hello/hello.component.html
• hello/hello.component.css
• hello/hello.component.spec.ts

Your hello.component.ts will look like this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

This is a basic Angular component with an empty ngOnInit lifecycle hook.

Generating the greetings Module

Run the following command:

ng g m greetings

This will generate:

• greetings/greetings.module.ts

Your greetings.module.ts will look like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class GreetingsModule { }

This is a basic Angular module, with no declarations or imports.

Summary

In this tutorial, we learned how to generate components and modules using Angular CLI. We generated a hello component and a greetings module.

Next, you could learn about routing in Angular and how to add components to modules.

You can refer to the official Angular documentation for more detailed information: Angular Components and Angular Modules.

Practice Exercises

1. Generate a module named users and a component named user-list inside this module.
2. Generate a module named products and three components: product-list, product-detail, and product-edit inside this module.

Tips for further practice: Try to add more components to your modules and nest them. This will give you a better understanding of how components and modules interact.