Angular 2 multiple modules

Question

I have an application that has several types, such as a spreadsheet, and the other is a two-pane view, as viewing images, searching and filters will be common. Therefore, I added a common module and imported this module into the main module and am now trying to use the common module components in a spreadsheet component. Well, here is my code that will give the correct image:

// 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 import both modules into one main module:

 // 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 component, I am trying to use a header template ( TopNavigation ), for example <top-nav></top-nav> , so this should display the contents of header.html, but it becomes empty. This makes no mistake. Not sure what I'm 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 module, which should only be in app.module.ts

Answer 1

Two things need to be done here:

First export the TopNavigation and Search components from the CommonModule so that 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 must be imported by the module that actually uses it. In your case, the SpreadSheet module should import the 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 declared in other modules. Therefore, when you import a CommonModule into an AppModule , this has no effect.

You can read here for more information.