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.