Angular – Shared Feature Module

Overview

When a SPA get pretty large in size, it’s not uncommon to break up parts of the application into Feature Modules (Link to Tutorial). To avoid rebuilding the same components for each module, components can be shared with a “Shared Feature Module“. This module will be eager loaded and imported into each feature Module that needs access to the shared components.

Create a Shared Feature Module

Run the following Angular CLI command.

ng generate module shared

Under the Shared Feature Module create components as follows:

ng generate component shared-bar-chart --module=shared

Note: The module name has to be specified with –module=shared

The Shared Feature Module will need the basic imports.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';

WARNING! Do not import the Browser animation libraries if you import them in your root folder. Same rule applies to the other Feature Modules.

Put your components in the Declarations and Export sections in the shared.module.ts file.

declarations: 
[
   // All Components
],
imports: []
exports: 
[
   // Shared Components
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
entryComponents: []

Access the Shared Feature Module in other Modules.

In the Root or Feature Modules that will need access the Shared Components, import the Shared Module.

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

A typical example of Shared and Feature Modules