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

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?

Have you tried adding shared module in import in app module? — Pramod Patil
– Pramod Patil, Commented Mar 31, 2017 at 13:11
Please see import -> import { QmsMasterdataModule } from 'qms/masterdata/qms-masterdata.module'; — Jeet
– Jeet, Commented Mar 31, 2017 at 13:14
i have already shared it. I have two shared modules, core.module.ts and masterdata.module.ts is inside the question. — Jeet
– Jeet, Commented Mar 31, 2017 at 13:22
No..If you have put your modules in shared->modules then you should have shared.module.ts in shared folder and from there you need to export..Let me post you the way possible solution — Pramod Patil
– Pramod Patil, Commented Mar 31, 2017 at 13:27

Jeet · Accepted Answer · 2017-03-31 14:26:40Z

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.

answered Mar 31, 2017 at 14:26

Jeet

2551 gold badge3 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pramod Patil · Accepted Answer · 2017-03-31 13:32:03Z

0

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;
};

answered Mar 31, 2017 at 13:32

Pramod Patil

2,7632 gold badges16 silver badges20 bronze badges

5 Comments

Jeet Over a year ago

When Core components can be used inside Masterdata Module, then Masterdata modules import core module. At the end, We only need to import Masterdata module inside my App.Module.why another shared module?

Pramod Patil Over a year ago

Remove it from shared module and add it in master module. the way you have done earlier but put the shared module in the place and add it in app module

Jeet Over a year ago

I still did not get the reason behind having extra Shared.module.ts. When we can import Core.module in Masterdata.module then it should good to use masterData module directly inside App.module. isn't it? Please throw little bit more light on your approach if am wrong.

Pramod Patil Over a year ago

If that is the scenario, then why would we call shared module.The reason being is shared modules can be bootstrap at very first place and can be used in all components without adding specific module each time.

Jeet Over a year ago

Exactly, if I import MasterData module in my App.module then I can use all core as well as master Data components inside my Application. That is the theory i have used in implementing above code.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related