The Modules in Angular facilitate to organize an application into cohesive blocks of functionality. Every Angular application contain many modules and are dedicated to the single purpose. Following are the major concepts covered.

• Module
• Working of ES 2015 Module
• Angular Module
• Differences between ES 2015 Module and Angular Module

A module in Angular 2 is a used to group the related components, pipes, services and directives. So that they can be merged with other modules for developing an application. With JavaScript, there is always the problem of namespaces. If developers are not careful, they can easily end up with variables or functions in the global namespace. In addition, JavaScript didn't provide features to help with code organization. Modules help resolve these issues. Angular 1 has modules to help developers in organizing the code and resolve some namespacing issues. TypeScript also has modules that help keep things out of the global namespace. ES 2015 set a standard for defining a module. In ES 2015, a module is a file, and a file is a module. So when coding in ES 2015, we don't need to define or name modules. Just create a file, write some code, export or import something, the file becomes a module. Angular 2, leverages ES 2015 modules. So as one could code files and import or export something, can create the modules for the application. Angular 2 also has Angular Modules. Angular Modules are separate and different from Angular's implementation of ES 2015 Modules.

In order to know the ES 2015 Module working create a code file, assume as product.ts and export a class names product from the file. This file then becomes a module. Because the class is exported, developer can use that class in any other module by importing it.  Suppose a file called product-list.ts, and import the Product class. This file also becomes a module because of importing something. Notice the syntax from the above image. In curly braces, one can find the name which is to be imported, in this case, Product is the name, and also define the file want to import it from. Here, product.js is the file to import the name. The Product class is in product.ts. But when compiled, the TypeScript file is transpiled into an ES 5 JavaScript file. So at runtime, one can import from the .js file. But, the extension have not been listed anywhere.

Angular Modules help organizing an application into cohesive blocks of functionality. The figure below give the structure of angular modules in an Angular 2 application. Every Angular application has at least one Angular Module, by convention called At Module. As an application gets more features, one can group those features into their own feature modules and even define shared or common modules for code used by multiple Angular Modules. This keeps the code organized and provides a cohesive unit, developer can unit and can load on start, or lazy load as needed. In each Angular Module, one can declare the set of components and other code files associated with the module, and the dependencies needed by those components. Each created component is declared in and belongs to one, and only one, Angular Module.

The table below give the difference between ES 2015 and Angular Module.

• Module help in organizing the Angular application into cohesive blocks of functionality.
• Angular contain many modules and each dedicated to the single purpose.
• The modules are mainly used to export the classes, values and function.