Importing angular component to be available in all

Question

I've recently started playing with angular 2 and my experience so far is awesome. I have some good experience with ng1 and React as well. So, this is more of a general question and a confusion as well. I am pretty sure this would help out a lot of other people as well as I haven't really found any direct answer to this.

So let's say I have this module protected.module.ts where I have some components registered. So, in order to use primitive directives ngFor, ngIf I would have to import CommonModule to the the specific module but along with that I would have to import this to the main entry module i.e. app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CommonModule  } from '@angular/common';
import { AlertModule  } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProtectedModule } from './protected/protected.module';
import { PageNotFoundComponent } from './shared/components/not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    HttpModule,
    AlertModule.forRoot(),
    LayoutModule,
    ProtectedModule,
    UsersModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

protected.module.ts

import { NgModule } from '@angular/core';
import { CommonModule  } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { ProtectedRoutingModule } from './protected-routing.module';

@NgModule({
  imports: [ProtectedRoutingModule, CommonModule],
  declarations: [HomeComponent],
  exports: [HomeComponent]
})
export class ProtectedModule { }

So, the confusion I had was if there was a way to just import some module globally in app.module if we wanted to use that module across all the modules that we would eventually have? With this way, it seems like a overhaul to me that we need to import it to different places. Or am I missing some point here completely?

Thank you in advance and I really hope this would be beneficial for me and to other folks as well.

Answer 1

I think you'd be best served with a shared module

Your other modules (typically feature modules in my experience) can all import this shared module.
As described in the documentation, you can reduce the repeated import statements by having the SharedModule re-export common dependencies e.g. CommonModule, FormsModule

As an example, you can have a shared module just re-export BrowserModule, FormsModule and HttpModule like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

@NgModule({
    exports: [BrowserModule, FormsModule, HttpModule]
})
export class SharedModule { }

And then in your other modules, instead of importing those same modules, just import the SharedModule like below. Every module that imports the SharedModule will be able to use everything exported from the SharedModule without explicitly importing it again.

import { NgModule } from '@angular/core';
import { SharedModule } from './path_to_shared_module/shared.module';
...

@NgModule({
    imports: [SharedModule, ...],
    ...
})
export class OtherModule { }