What's the difference between an Angular component and module

Question

I've been watching videos and reading articles but this specific article make me so confused, at the start of the article it says

The applications in Angular follow modular structure. The Angular apps will contain many modules, each dedicated to the single purpose. Typically module is a cohesive group of code which is integrated with the other modules to run your Angular apps.

A module exports some classes, function and values from its code. The Component is a fundamental block of Angular and multiple components will make up your application.

A module can be a library for another module. For instance, the angular2/core library which is a primary Angular library module will be imported by another component.

Are they exchangeable terms? Is a component a module? But not viceversa?

Symphonious

Answer 1

Components control views (html). They also communicate with other components and services to bring functionality to your app.

Modules consist of one or more components. They do not control any html. Your modules declare which components can be used by components belonging to other modules, which classes will be injected by the dependency injector and which component gets bootstrapped. Modules allow you to manage your components to bring modularity to your app.

Morven

Answer 2

Well, it's too late to post an answer, but I feel my explanation will be easy to understand for beginners with Angular. The following is one of the examples that I give during my presentation.

Consider your angular Application as a building. A building can have N number of apartments in it. An apartment is considered as a module. An Apartment can then have N number of rooms which correspond to the building blocks of an Angular application named components.

Now each apartment (Module)` will have rooms (Components), lifts (Services) to enable larger movement in and out the apartments, wires (Pipes) to transform around and make it useful in the apartments.

You will also have places like swimming pool, tennis court which are being shared by all building residents. So these can be considered as components inside SharedModule.

Basically, the difference is as follows,

Here is my session on Building Blocks of Angular for beginners

Follow my slides to understand the building blocks of an Angular application

Discombobulate

A very simple and good example. But one thing is again confusing me, you said pipes move around data(transporting), is it correct? As far as I know, pipes are for transforming data. – Lakshmi

That's correct, probably with the edited answer it got changed. Thanks for reminding! – Discombobulate

the Pipes analogy is still wrong (transform = change). I would say Pipes are like Kitchens in the building, where you can turn raw ingredients (raw data) into different kinds of food you want (cooked, peppered, fried, baked, etc.). Or you could say Pipes are like Workshops in the building, where you can use different automated machines to easily modify your object as needed -- put them in, and get modified out :) – Fibroin

@Fibroin thanks for sharing your thoughts ! Feel free to modify the answer – Discombobulate

It's a nice analogy in general, indeed. Just, how does that work with modularity and nesting of modules and components? Do you have apartments inside apartments or rooms inside rooms? – Backtrack

@MichaelS. You could consider partitions in that case. – Discombobulate

Answer 3

Simplest Explanation:

Module is like a big container containing one or many small containers called Component, Service, Pipe

A Component contains :

• HTML template or HTML code

• Code(TypeScript)

• Service: It is a reusable code that is shared by the Components so that rewriting of code is not required

• Pipe: It takes in data as input and transforms it to the desired output

Reference: https://scrimba.com/

Fortissimo

Not crazy about all of this. Yes, your component will use a service, but the service must be indicated in the module, in the providers array. Your diagram doesn't show this. – Octillion

Can I add a child module inside a component and several components to that module? – Austerlitz

This isn't right. A component CONTAINS a template (html), styles (css/less/scss), a controller (typescript), and a spec file for tests (typescript). It USES a pipe or service which is within the same module as the component or exported by a another module. – Shekinah

Answer 4

Angular Component

A component is one of the basic building blocks of an Angular app. An app can have more than one component. In a normal app, a component contains an HTML view page class file, a class file that controls the behaviour of the HTML page and the CSS/scss file to style your HTML view. A component can be created using @Component decorator that is part of @angular/core module.

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

and to create a component

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

To create a component or angular app here is the tutorial

Angular Module

An angular module is set of angular basic building blocks like component, directives, services etc. An app can have more than one module.

A module can be created using @NgModule decorator.

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

Enhanced

Answer 5

A picture is worth a thousand words !

The concept of Angular is very simple. It propose to "build" an app with "bricks" -> modules.

This concept makes it possible to better structure the code and to facilitate reuse and sharing.

Be careful not to confuse the Angular modules with the ES2015 / TypeScript modules.

Regarding the Angular module, it is a mechanism for:

1- group components (but also services, directives, pipes etc ...)

2- define their dependencies

3- define their visibility.

An Angular module is simply defined with a class (usually empty) and the NgModule decorator.

Amourpropre

Angular builds web applications with components – Polivy

Answer 6

A module in Angular 2 is something which is made from components, directives, services etc. One or many modules combine to make an Application. Modules breakup application into logical pieces of code. Each module performs a single task.

Components in Angular 2 are classes where you write your logic for the page you want to display. Components control the view (html). Components communicate with other components and services.

Beastings

Answer 7

Component is the template(view) + a class (Typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template).

Modules basically group the related components, services together so that you can have chunks of functionality which can then run independently. For example, an app can have modules for features, for grouping components for a particular feature of your app, such as a dashboard, which you can simply grab and use inside another application.

Philis