CommonModule vs BrowserModule in angular

Question

I am pretty new to the world of Angular. What is the difference between CommonModule vs BrowserModule and why one should be preferred over the othe

Answer 1

The root application module, AppModule, imports BrowserModule so that it can have all the services that are essential to launch and run a browser app.

Components in the AppModule also need to have access to the Angular directive(Arrtibute Directive, Structural Directive) such as *ngIf, *ngFor and *ngSwitch etc. and these directive are available in CommonModule which is automatically exported by the BrowserModule. This is why we have access to the directives in the components defined in AppModule.

And according to the docs

Only root application module, AppModule , should import BrowserModule and all other feature module should import CommonModule because we only need the Angular directives in feature module and not the services that are required to launch the app(Which are already available in RootModule).

According to this:

When it comes to components, pipes and directives, every feature module should import its own dependencies disregarding if the same dependencies were imported in the root module or in any other feature module.