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 other?

Uninspired

It is just a convention. – Variety

Answer 1

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.

Schutz

This answer is mostly copy-paste and the part that isn't needs editing to make sense. Owner, please improve your answer. Readers, the other answers to this question are much more worthy of your time. – Narcho

@Narcho Thanks for your feedback. I am not sure what will provide better explanation than the docs (tbh other answers also have the same link) I will try to improve as you mentioned – Schutz

Answer 2

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.

• Root module imports the BrowserModule (if you are rendering in browser). This has the same stuffs as CommonModule but also stuffs that are used for rendering.
• Now if you are creating a feature module, since you already have BrowserModule imported in your root module, it does not make sense and it's an overhead to import the Browser module in your feature module. Also, importing CommonModule  frees feature modules for use on any target platform (e.g. native mobile platform), not just browsers. That's why you import CommonModule in your feature modules and BrowserModule in your root module.

Dismember

Excellent answer! Thank you very much! – Burford

Answer 3

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.

Stoppage

Answer 4

This is the latest update for Angular 13

In Angular, we have two types of modules - Root Module and Feature Module.

Feature modules mainly imports CommonMudule which contains basic directives and pipes such as NgIf, NgClass, and DatePipe.

Root module mainly imports BrowserModule which basically contains all the directives and pipes of CommonMudule, along with that it also provides the features to render the Angular Application in any Browser.

To conclude, the BrowserModule should only be imported once and that too in the root module. For all the other feature modules, it is enough to import the CommonMudule.

Hydraulics

Answer 5

So, based on the definitions of 'BrowserModule' and 'CommonModule', my suggestion for using them is something like this, You should have the 'BrowserModule' in application module level, 'AppModule':

app.module.ts: 
    
         import { BrowserModule } from '@angular/platform-browser';
         imports: [
                BrowserModule.withServerTransition({ appId: 'ng-cli-universal' })]

having the 'CommonModule' in custom component level, in a SharedModule among the other common modules that you use in the project:

shared.module.ts: 
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
    
 imports: [
        CommonModule,
        FormsModule,
        RouterModule     
      ], 
    exports: [
        CommonModule,
        FormsModule,
        RouterModule]

Then inject this 'SharedModule' into any other custom modules, like this:

login.module.ts:  

     import { SharedModule } from '../../shared/shared.module';
        imports: [
            SharedModule]

Subito