Angular 2 multiple modules

Question

I have an app which has multiple views like one is spreadsheet & other is the two-panel view, for both views navigation, searching & filters will be common. So I added a common module and imported that module to the main module & now trying to use common modules components in spreadsheet component. Well below is my code that will give the proper picture:

// Spreadsheet module - spreadsheet.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { Spreadsheet } from './components/spreadsheet.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ Spreadsheet ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SpreadsheetModule { }

// Common module - common.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { TopNavigation } from './components/header.component';
import { Search } from './components/search.component';
import { AccountInfo } from './services/accountInfo';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ TopNavigation, Search ],
  providers: [ AccountInfo ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CommonModule {}

Now I am importing both this module to one main module which is:

// App module - app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CommonModule } from './common/common.module';
import { SpreadsheetModule } from './spreadsheet/spreadsheet.module';

@NgModule({
  imports: [ BrowserModule, CommonModule, SpreadsheetModule ],
  declarations: [ AppComponent ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

So in my spreadsheet's component, I am trying to use header's (TopNavigation) template like <top-nav></top-nav> so this should show header.html content but its coming as blank. It's not giving any error as well. Not sure what I am doing wrong.

Note: If I directly declare TopNavigation in spreadsheet.module.ts it works fine. But since navigation and search are common I don't want to declare it in every single modules that should only be in app.module.ts

Answer 1

Two things need to be done here:

First, export TopNavigation & Search components from the CommonModule so they can be used in other modules:

// Common module - common.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { TopNavigation } from './components/header.component';
import { Search } from './components/search.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ TopNavigation, Search ],
  exports: [ TopNavigation, Search ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CommonModule {}

Secondly, the CommonModule should be imported by the Module that actually uses it. In your case the SpreadSheet module should import CommonModule

// Spreadsheet module - spreadsheet.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { Spreadsheet } from './components/spreadsheet.component';
import { CommonModule } from './common/common.module';

@NgModule({
  imports: [ BrowserModule, CommonModule],
  declarations: [ Spreadsheet ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SpreadsheetModule { }

Modules do not inherit components are declared in other modules. So when you import CommonModule in AppModule it does not have any effect.

You can read here for more info.