title: Angular2: Component declared in shared module not usable in App module
body: <p>I have two shared modules <strong>Core</strong> and <strong>MasterData</strong>. </p>
  
  <p>I am <strong><em>facing issue to use MasterData module's components in my applcation though i can use Core Module's Components.</em></strong> Following is my code.</p>
  
  <ol>
  <li><strong>Core Module</strong> (core.module.ts)</li>
  </ol>
  
  <blockquote>
  <pre><code>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
              ]
          };
      }
  }
  </code></pre>
  </blockquote>
  
  <ol start="2">
  <li><strong>Master Data Module (which is inheriting Core because I use infragistics library in core and masterdata components)</strong> (masterdata.module.ts)</li>
  </ol>
  
  <blockquote>
  <pre><code>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
              ]
          };
      }
  }
  </code></pre>
  </blockquote>
  
  <p>Master data Module has currently only one component name TeamGrid. (Component Selector is ‘<strong>team-grid</strong>’)</p>
  
  <ol start="3">
  <li>Main Application <strong>AppModule</strong> (app.module.ts)</li>
  </ol>
  
  <blockquote>
  <pre><code>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[]) =&gt; {
  
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HomeModule,
        ProjectModule,
        QmsMasterdataModule.forRoot()
      ],
      providers: [
        SharedServices,
        ...provider
      ],
      bootstrap: [AppComponent]
    })
  
    class AppModule {
    }
  
    return AppModule;
  };
  </code></pre>
  </blockquote>
  
  <p>Error message is: </p>
  
  <blockquote>
    <p>'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.
    ("
            </p></p>
  
  <pre><code>    [ERROR -&gt;]&lt;team-grid&gt;&lt;/team-grid&gt;
  </code></pre>
  </blockquote>
  
  <p>Can someone help me to find the correct solution for this? </p>