How to use Shared Modules with Angular 2

This demo assumes that you already have an angular 2.x app bootstrapped.

First lets create our shared module called “SharedModule“.

app/shared/shared.module.ts

import { CommonModule } from '@angular/common';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
...

Now let us import some services and components as well. Let us assume we have created a service called “httpService” and a custom component called ‘loaderComponent‘.

import { CommonModule } from '@angular/common';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { loaderComponent } from './loader.component';
import { httpService } from './http.service';
...

Next is to create the module itself.

 

@NgModule({
    imports: [ 
        CommonModule, FormsModule, HttpModule
    ], // import modules
    declarations: [
        loaderComponent
    ], // declare components
    exports: [
        CommonModule, FormsModule, HttpModule, loaderComponent
    ] // all the modules and components that are needed to be shared across modules.
})

export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [ httpService ] // all the services that are needed to be shared across modules.
        }
    }
}

 

Since services are singletons, that means services should be declared only once. So the most crucial point to note here is  “ModuleWithProviders”. We define a static method called “forRoot()” that returns ab object of type “ModuleWithProviders“.

 

Now in our main module, import “SharedModule” with forRoot() and for all other lazy loaded modules, just import “SharedModule“.

 

app/app.modules.ts

...
import { SharedModule } from "./shared/shared.module";
...

@NgModule({
    ...
    imports: [
        ...
        SharedModule.forRoot()
    ]
})

 

For all the other lazy loaded modules,

 

...
import { SharedModule } from "./shared/shared.module";
...

@NgModule({
    ...
    imports: [
        ...
        SharedModule
    ]
})

 

78 comments on “How to use Shared Modules with Angular 2

  1. Hey, It’s Mahmud here. Recently your website caught my attention while searching for similar domain names. After entering the website, It seems that your website is brand new or not complete yet. So I thought I should try to contact you by leaving a comment on your website. Because as a Freelancer, I provide WordPress-related services like Website Design & Development, Theme Customization, Speed Optimization, Website Migration, On-Page SEO Setup, Malware Removal services to my clients.
    .
    For safety reasons, you can hire me through Upwork Marketplace using Upword Direct Contact. This is a great way to hire a freelancer, especially one you don’t know. Because It’s safe for both clients and freelancers. The biggest advantage of hiring me is that you have to pay much less than hiring a Agency. For the past 3 years, I have been providing services to various clients in our country. Currently I’m offering Freelance services to International clients. That’s why I’m trying to reach clients in various ways.
    .
    So let me know what kind of service you need. I will try my best to make you happy through the service. You can contact me by Email or Whatsapp if you want to know more details or call a meeting with me. You can also request a Free Consultation Service to find out what kind of improvements are needed for your websites. Thank you for your attention.
    .
    Best regards,
    Mahmud Ghazni
    Web Design & Developer
    WhatsApp: +8801322311024
    Email: mahmud.ghazni@yahoo.com

Leave a Reply

Your email address will not be published. Required fields are marked *