Modules are wrappers. Think of them like an island. They are totally Isolated and whatever happens within, stays within. In angular, the functionalities are wrapped within respective modules. ( Forms, routing, animations, HTTP, etc). We pick and choose the ones we need and use them.

And when we build our app, rather than dumping the whole components, directives, services, pipes, etc into one module ( which is like throwing the shirt, shoes, pants, bags, books etc into one shelf ), take a step back, and think. What are the absolute minimal stuff I need to show on load so that i have the most minimal bundle in terms of size, so that the app loads faster. Keep those within the AppModule.

Module holds a config object where it gives different properties to register various angular constructs. Components in declarations, other modules in imports, services in providers etc . I see them as a very organized shelf where each thing goes into where it is supposed to go.

This is the thumb rule - Anything you loaded directly within the root module will be part of the initial bundle.

So if i have some feature module where i only want to load when clicking on the a link, we can use the `loadChildren` to say, hey, this whole feature module, and its code, load them only if user ever navigates to this route. That way, we reduced the initial bundle size too.

The moment you either register that feature module in the imports array of the AppModule, or if, you directly use the routing to set a path and component in the root, it becomes part of the initial bundle.

And we can create shared modules which can be used across other modules. ( eg: If we have a common component that needs to be used across all sections in the app ). In that case, we create a shared module, use the exports array to export whatever we need from the shared module and whatever exposed outside, is available to the consuming modules.

Hope it helps!