How to approach JS Modules vs Angular Modules

Last updated on February 1, 2021

In this blog post, we will be going to learn about the key difference between JS Modules vs Angular Modules.

JavaScript Module

In a nutshell, each file would be represented as a module. This would be for accessing different JavaScript file within a JavaScript file.

For example,

// product.js

export class Product {
  constructor() { }
  
  getProducts() { }

  getProductById(id) { }

  addProducts() { }

}

In terms of SOLID principle, each file would be for single responsibility. In this case, the file product.js handles only for product entities.

Now, product.js would be a JavaScript Module and we can export multiple things out of this using export keyword. When it doesn’t have any exports then it won’t be a module.

Angular Module

In a nutshell, the module is comprised of different features/building blocks. such as a collection of components directives , pipes , services and so on. Think like it is a container which contains small lego blocks.

Even an angular module can have an external angular module.

For example,

// app.module.ts

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

From the @NgModule definition you can come to know that it will have a collection of different pieces which are all nothing but simple file. Here it would be .ts file.

In addition to this, we have React, Vue and Svelte JavaScript frameworks available but those are all simple JavaScript Modules but Angular Module is the slight different from those key players.