CODEWITHSUNDEEP
angularjs
Jeet
Jeet

Reputation: 245

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

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.

  1. 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
            ]
        };
    }
}
  1. 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’)

  1. 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?

Upvotes: 1

Views: 2187

Answers (2)

Jeet
Jeet

Reputation: 245

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.

Upvotes: 1

Pramod Patil
Pramod Patil

Reputation: 2763

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

Upvotes: 0

Related Questions