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?

Solution 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.

Solution 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

Solution 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/

Solution 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 { }

Solution 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.

View more solutions

Comments

[Scott]

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.

[Satrughna]

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

[Sayed Uz Zaman]

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.

[Sajeetharan]

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

[Prid]

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 :)

[Sajeetharan]

@Prid thanks for sharing your thoughts ! Feel free to modify the answer

[lorless]

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.

[Michael S.]

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?

[Sajeetharan]

@MichaelS. You could consider partitions in that case.

[Andrew Koper]

Angular builds web applications with components