Angular2: Component declared in shared module not usable in App module - angularjs

Question

I have two shared modules Core and MasterData.
I am facing issue to use MasterData module's components in my applcation though i can use Core Module's Components. Following is my code.
Core Module (core.module.ts)
import { NgModule, ModuleWithProviders, ComponentFactoryResolver } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import {
IgHierarchicalGridComponent,
IgPivotGridComponent,
IgGridComponent
} from 'igniteui-angular2';
import { CacheModule } from 'angular2-cache';
import { AUTH_PROVIDERS } from 'angular2-jwt';
import { CoreComponents, EntryCoreComponents } from './components';
import { CoreService } from './services';
import { ClientInfoServiceProvider } from './client-info';
import { AuthGuard } from './guards/auth.guard';
const IgniteuiComponents = [
IgHierarchicalGridComponent,
IgPivotGridComponent,
IgGridComponent
];
#NgModule({
declarations: [
...CoreComponents,
...IgniteuiComponents
],
providers: [
...CoreService,
AUTH_PROVIDERS,
AuthGuard,
ClientInfoServiceProvider
],
imports: [
CommonModule,
FormsModule,
RouterModule,
HttpModule,
CacheModule,
],
entryComponents: [
...EntryCoreComponents
],
exports: [
HttpModule,
CacheModule,
RouterModule,
FormsModule,
...CoreComponents,
...IgniteuiComponents
]
})
export class CoreModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: QmsCoreModule,
providers: [
...CoreService,
AUTH_PROVIDERS,
AuthGuard,
ClientInfoServiceProvider
]
};
}
}
Master Data Module (which is inheriting Core because I use infragistics library in core and masterdata components) (masterdata.module.ts)
import { NgModule, ModuleWithProviders, ComponentFactoryResolver } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { QmsCoreModule } from 'qms/core/qms-core.module';
import { MasterdataComponents } from './components';
import { MasterdataServices } from './services';
#NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
HttpModule,
QmsCoreModule.forRoot()
],
declarations: [
...MasterdataComponents
],
providers: [
...MasterdataServices
],
exports: [
FormsModule,
RouterModule,
HttpModule,
QmsCoreModule,
...MasterdataComponents
]
})
export class QmsMasterdataModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: QmsMasterdataModule,
providers: [
...MasterdataServices
]
};
}
}
Master data Module has currently only one component name TeamGrid. (Component Selector is ‘team-grid’)
Main Application AppModule (app.module.ts)
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, Provider } from '#angular/core';
import { QmsMasterdataModule } from 'qms/masterdata/qms-masterdata.module';
import { SwacProxyInterface } from 'qms/core/swac';
import { AppRoutingModule } from './app-routing.module';
import { HomeModule } from './home/home.module';
import { ProjectModule } from './project/project.module';
import { AppComponent } from './app.component';
import { SharedServices } from './shared/services';
export const AppModule = (proxyInterface: SwacProxyInterface, provider: Provider[]) => {
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HomeModule,
ProjectModule,
QmsMasterdataModule.forRoot()
],
providers: [
SharedServices,
...provider
],
bootstrap: [AppComponent]
})
class AppModule {
}
return AppModule;
};
Error message is:
'team-grid' is not a known element:
1. If 'team-grid' is an Angular component, then verify that it is part of this module.
2. If 'team-grid' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message.
("
[ERROR ->]<team-grid></team-grid>
Can someone help me to find the correct solution for this?

Answer 1

Above Implementation is correct but only mistake is that each modules (Home.module / Project.module) under App.module should also import masterdata.module or core.module as per required compoenents.

Answer 2

This might help you to find out root cause
shared.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { QmsMasterdataModule } from 'qms/masterdata/qms-masterdata.module';
#NgModule({
declarations: [
],
imports: [
CoreModule,
QmsMasterdataModule
],
exports: [
CoreModule,
QmsMasterdataModule
]
})
export class SharedModule {
}
App Module
import {SharedModule} from './modules/shared/shared.module';
export const AppModule = (proxyInterface: SwacProxyInterface, provider: Provider[]) => {
#NgModule({
declarations: [
AppComponent
],
imports: [
SharedModule
],
providers: [
],
bootstrap: [AppComponent]
})
class AppModule {
}
return AppModule;
};