Modules help organize our code and use it in an efficient way

JavaScript modules and NgModules can help us modularize our code, but they are very different.However, any Angular application that we create depends on both the ways.

The manner in which the code is organised is different for JavaScript and Angular but the ultimate purpose of a module remains the same.

JavaScript modules: Files containing code

A JavaScript-Module is an individual file with JavaScript code, usually containing a class or a library of functions for a specific purpose within your application.

To make the code in a JavaScript module available to other modules, we use an export statement at the end of the relevant code in the module, such as the following:

export class AppComponent { … }

Each module has its own top-level scope. In other words, top-level variables and functions in a module are not seen in other scripts or modules. Each module provides a namespace for identifiers to prevent them from clashing with identifiers in other modules.

PS: The Angular framework itself is loaded as a set of JavaScript modules.

NgModules: Classes with metadata for compiling

An NgModule is a class marked by the @NgModule decorator with a metadata object that describes how that particular part of the application fits together with the other parts. NgModules are specific to Angular.

An NgModule differs from the JS Modules specifically because unlike JS Modules, NgModules includes the metadata. (with the use of this metadata , we can then import in a Module, another NgModules or even another JavaScript modules.)

The @NgModule metadata plays an important role in guiding the Angular compilation process that converts the application code you write into highly performant JavaScript code. The metadata describes how to compile a component’s template and how to create an injector at runtime. It identifies the NgModule’s components, directives, and pipes, and makes some of them public through the exports property so that external components can use them. You can also use an NgModule to add providers for services, so that the services are available elsewhere in your application.

Another difference with JS Modules : Rather than defining all member classes in one giant file as a JavaScript module, we just need to declare the classes (Components/ directives / pipes) belong to the NgModule in the @NgModule.declarations list.

An NgModule can export only the declarable classes it owns or imports from other NgModules. It doesn’t declare or export any other kind of class

An example that uses both

The root NgModule AppModule generated by the Angular CLI for a new application project demonstrates how you use both kinds of modules:

The root NgModule starts with import statements to import JavaScript modules (As we can see it in the first 2 Lines). It then configures the @NgModule with the following arrays:

• declarations: The components, directives, and pipes that belong to the NgModule. A new application project’s root NgModule has only one component, called AppComponent.
• imports: Other NgModules you are using, so that you can use their declarables. The newly generated root NgModule imports BrowserModule in order to use browser-specific services such as DOM rendering, sanitization, and location.
• providers: Providers of services that components in other NgModules can use. There are no providers in a newly generated root NgModule.
• bootstrap: The entry component that Angular creates and inserts into the index.html host web page, thereby bootstrapping the application. This entry component, AppComponent, appears in both the declarations and the bootstrap arrays. (PS: every Angular Module has it´s own specific entry component. this is a start-component our Module. It means the component which is first loaded when we call the module )

Reference:

https://angular.io/