Difference between angular 2 modules and Javascript ES6 modules

Question

Angular 2 modules allow apps to be divided into multiple modules, each serving a different purpose.

But isn't that what ES6 modules also supposed to do? What is the difference between the two?

Answer 1

Taken from angular.io:

The Angular module classes differ from JavaScript module class in three key respects:

1. An Angular module bounds declarable classes only. Declarables are the only classes that matter to the Angular.

2. Instead of defining all member classes in one giant file (as in a JavaScript module), we list the module's classes in the @NgModule.declarations list.

3. An Angular module can only export the declarable classes it owns or imports from other modules. It doesn't declare or export any other kind of class.

Answer 2

I found great article explaining difference here, Here are key differences:

ES6 modules:

• The ES6 Modules ,which also goes by the name JS modules or JavaScript modules or ECMAScript modules are part of the JavaScript Language.
• The JS Modules are stored in a file. There is exactly one module per file and one file per module.

• These modules contains a small units of independent, reusable code. They export a value, which can be imported and used in some other module.

  Purpose of ES6 Modules:

• Avoid leaking code to the global namespace,

• Encapsulate code to hide implementation details,

Angular Modules:

• Angular Modules are an Angular-specific construct.

• Angular Modules logically group different Angular artifacts such as components, pipes, directives, etc.

• Angular Modules in the form of the @NgModule decorator provide metadata to the Angular compiler which in turn can better “reason about our application” structure and thus introduce optimizations.

  Purpose of Angular Modules:

• organize the Angular application parts into cohesive blocks

• helps to keep the Separation of concerns

Answer 3

ES modules vs Angular modules:

1. ES modules are code files that import or export something while angular modules organize the application into cohesive blocks of functionality.

2. ES modules organize our code while angular modules organize our application.

3. ES modules modularize our code while angular modules modularize our application.

4. ES modules promote code reuse while angular modules promote application boundaries.

Answer 4

Taken from this source: Angular Modules vs ES6 Modules

ES Modules:

1. ES6 modules represent a single file.
2. The ES6 module syntax is a standardized construct of the ECMAScript language specification.

On the other side:

1. Angular Modules are an Angular-specific construct.
2. Angular Modules logically group different Angular artifacts such as components, pipes, directives, etc.
3. Angular Modules in the form of the @NgModule decorator provide metadata to the Angular compiler which in turn can better “reason about our application” structure and thus introduce optimizations.
4. Important features such as lazy loading are done at the Angular Module level.