{"id":1931,"date":"2022-05-25T09:26:37","date_gmt":"2022-05-25T07:26:37","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1931"},"modified":"2022-05-25T09:26:37","modified_gmt":"2022-05-25T07:26:37","slug":"javascript-modules-vs-ngmodules","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/05\/25\/javascript-modules-vs-ngmodules\/","title":{"rendered":"JavaScript Modules vs. NgModules"},"content":{"rendered":"\n

Modules help organize our code and use it in an efficient way<\/p>\n\n\n\n

JavaScript modules<\/em><\/strong> and NgModules<\/em><\/strong> can help us modularize our code, but they are very different.However, any Angular application that we create depends on both the ways.<\/p>\n\n\n\n

The manner in which the code is organised is different for JavaScript and Angular but the ultimate purpose of a module remains the same.<\/p>\n\n\n\n

JavaScript modules: Files containing code<\/h4>\n\n\n\n

A JavaScript-Module <\/strong><\/em>is an individual file with JavaScript code, usually containing a class or a library of functions for a specific purpose within your application.<\/p>\n\n\n\n

To make the code in a JavaScript module available to other modules, we use an\u00a0export<\/code>\u00a0statement at the end of the relevant code in the module, such as the following:<\/p>\n\n\n\n

export class AppComponent { \u2026 }<\/code><\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
PS:<\/em><\/strong> The Angular framework itself is loaded as a set of JavaScript modules<\/strong>.<\/span><\/em><\/p>\n\n\n\n
<\/div>\n\n\n\n
NgModules: Classes with metadata for compiling<\/h4>\n\n\n\n
 An\u00a0NgModule<\/a>\u00a0is a class marked by the\u00a0@NgModule<\/a><\/code>\u00a0decorator with a metadata object that describes how that particular part of the application fits together with the other parts. NgModules are specific to Angular.<\/p>\n\n\n\n
An NgModule <\/em><\/strong>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.)<\/em> <\/p>\n\n\n\n
The\u00a0@NgModule<\/a><\/code>\u00a0metadata 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\u00a0injector<\/a>\u00a0at runtime. It identifies the NgModule’s\u00a0components<\/a>,\u00a0directives<\/a>, and\u00a0pipes<\/a>, and makes some of them public through the\u00a0exports<\/code>\u00a0property so that external components can use them. You can also use an NgModule to add\u00a0providers<\/a>\u00a0for\u00a0services<\/a>, so that the services are available elsewhere in your application.<\/p>\n\n\n\n
Another difference with JS Modules : <\/span><\/strong> 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\u00a0@NgModule.declarations<\/a><\/code>\u00a0list.<\/em><\/p>\n\n\n\n
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<\/p>\n\n\n\n
<\/div>\n\n\n\n
An example that uses both<\/h4>\n\n\n\n
The root NgModule\u00a0AppModule<\/code>\u00a0generated by the\u00a0Angular CLI<\/a>\u00a0for a new application project demonstrates how you use both kinds of modules:<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
The root NgModule starts with\u00a0import<\/code>\u00a0statements to import JavaScript modules (As we can see it in the first 2 Lines<\/em>). It then configures the\u00a0@NgModule<\/a><\/code>\u00a0with the following arrays:<\/p>\n\n\n\n