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 other?
CommonModule is used to export all the basic Angular directives and pipes. It is re-exported when we import BrowserModule into our angular application, BrowserModule is automatically imported into our application when we create our Angular application using 'ng new' command.
BrowserModule provides services that are essential to launch and run a browser app. BrowserModule also re-exports CommonModule from @angular/common, which means that components in the AppModule module also have access to the Angular directives every app needs, such as NgIf and NgFor.
BrowserModule and CommonModule link BrowserModule imports CommonModule , which contributes many common directives such as ngIf and ngFor .
withServerTransition()linkConfigures a browser-based app to transition from a server-rendered app, if one is present on the page. static withServerTransition(params: { appId: string; }): ModuleWithProviders<BrowserModule>
What you have to understand is, with Angular, you create modular application and there are two types of modules. One is root module and another is feature module.
CommonModule
but also stuffs that are used for rendering. CommonModule
in your feature modules and BrowserModule
in your root module. From the docs
BrowserModule provides services that are essential to launch and run a browser app.
BrowserModule also re-exports CommonModule from @angular/common, which means that components in the AppModule module also have access to the Angular directives every app needs, such as NgIf and NgFor.
whereas
CommonModule (all the basics of Angular templating: bindings, *ngIf, *ngFor…), except in the first app module, because it’s already part of the BrowserModule
Also read this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With