{"id":1381,"date":"2023-08-29T05:00:00","date_gmt":"2023-08-29T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1381"},"modified":"2023-08-28T15:19:57","modified_gmt":"2023-08-28T22:19:57","slug":"what-you-need-to-know-about-ngmodules","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-you-need-to-know-about-ngmodules\/","title":{"rendered":"What you need to know about ngModules"},"content":{"rendered":"\n

Angular modules (ngModules<\/a>) are a source of confusion for Angular developers. This short guide will clarify what they are and how to think about ngModules<\/code> in general.<\/p>\n\n\n\n

Why ngModules?<\/h2>\n\n\n\n

Angular uses a Typescript compiler and a template compiler that turns our HTML templates into Javascript instructions to render the DOM in a browser.<\/p>\n\n\n\n

The Typescript compiler knows how to compile our Typescript code (all our classes) because all dependencies have to be imported in these Typescript files:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Compiling the HTML template for the above component is a different task because *ngIf<\/code> is not imported anywhere in our Typescript code. Yet, the Angular compiler must know about all directive\/component\/pipe dependencies of a component’s template to turn all that HTML into DOM instructions.<\/p>\n\n\n\n

The solution to that problem was the introduction of ngModules<\/code>. ngModules<\/code> expose features meant to be used by the template compiler and does so in a “global” way, in the sense that importing an ngModule<\/code> once is enough to enable all its code for all components within that module.<\/p>\n\n\n\n

That’s why we rarely think twice about using ngFor<\/code> or ngIf<\/code> or any pipe: They are all part of CommonModule<\/code>, which is automatically imported into the AppModule<\/code> by default:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Do I need to create ngModules in my app?<\/h2>\n\n\n\n

Most likely, no. The Angular team introduced standalone components<\/a> as an alternative to ngModules<\/code>. A standalone component does not need such modules because all its dependencies are listed in the Typescript code itself:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

There were only two reasons why you’d need to create your own ngModules in the past:<\/p>\n\n\n\n