How to add into a feature module

[mp3por]

Hello,

How to include this module not in the AppRoot module but as part of a SharedModule ( feature module ) which is then loaded in the AppRoot module.

Here is my AppRoot module:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { environment } from '../environments/environment';

// root imports import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import './rxjs-extensions';

// feature modules import { SharedModule } from './shared/shared.module'; import { CoreModule } from './core/core.module';

@NgModule({ imports: [ BrowserModule, FormsModule, HttpModule,

SharedModule.forRoot(),
CoreModule,

AppRoutingModule,

], declarations: [ AppComponent ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }

and my SharedModule

import { AmountFormatPipe } from './pipes/amount.pipe'; import { CommasPipe } from './pipes/commas.pipe'; import { CriterionTypeService } from './utils/criterion-type.service'; import { DiscountsService } from './utils/discounts.service'; import { OccurrenceTypeService } from './utils/occurrence-type.service'; import { RewardsService } from './utils/rewards.service'; import { ConditionValuesService } from './utils/condition-value.service'; import { ValidationService } from './utils/validation.service'; import { KeyValueFilterPipe } from './pipes/key-value-filter.pipe'; import { StatsService } from './utils/stats.service'; import { RewardTypeService } from './utils/reward-type.service'; import { VenuesService } from './utils/venues.service'; import { OperatorsService } from './utils/operators.service'; import { UtilService } from './utils/utils.service'; import { CustomHttpService } from './utils/custom-http.service'; import { ModuleWithProviders, NgModule, Injector } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { XHRBackend, RequestOptions } from '@angular/http'; import { RouterModule, Router } from '@angular/router';

// directives import { EqualValidatorDirective } from './directives/equal-validator.directive';

// charts import { ChartModule } from 'angular2-highcharts';

// alert import { AlertService, AlertComponent } from './alert/index';

// component header import { ComponentHeaderComponent } from './component-header/index';

// widgets import { ProfileDropdownComponent } from './index';

// utils import { SecureHttpService } from './utils/secure-http.service'; import { ConstantsService } from './utils/constants.service'; import { MerchantService } from './utils/merchant.service'; // import { SecurityService } from './utils/security.service'; import { DropdownWithInfoComponent } from './components/dropdown-with-info/dropdown-with-info.component'; import { DaysRunningPipe } from './pipes/days-running.pipe'; import { StatsDisplayComponent } from './components/stats-display/stats-display.component'; import { BaseRuleService } from './utils/base-rule.service'; import { ControlMessageComponent } from './components/control-message/control-message.component'; import { StatsDisplayContainerComponent } from './components/stats-display-container/stats-display-container.component'; import { StatsDisplay2Component } from './components/stats-display-2/stats-display-2.component'; import { DateDisplayComponent } from './components/date-display/date-display.component'; import { RoundPicComponent } from './components/round-pic/round-pic.component'; import { PopUpComponent } from './components/pop-up/pop-up.component'; import { OrderByPipe } from './pipes/order-by.pipe'; import { SuggestionPopUpComponent } from './components/suggestion-pop-up/suggestion-pop-up.component'; import { StatsDisplay3Component } from './components/stats-display-3/stats-display-3.component'; import { Daterangepicker } from 'ng2-daterangepicker';

const sharedComponents = [ AlertComponent, ComponentHeaderComponent, ProfileDropdownComponent, EqualValidatorDirective, DropdownWithInfoComponent, DaysRunningPipe, StatsDisplayComponent, KeyValueFilterPipe, ControlMessageComponent, CommasPipe, StatsDisplayContainerComponent, StatsDisplay2Component, DateDisplayComponent, RoundPicComponent, PopUpComponent, OrderByPipe, AmountFormatPipe, SuggestionPopUpComponent, StatsDisplay3Component ];

const sharedProviders = [ AlertService, ConstantsService, UtilService, OperatorsService, VenuesService, RewardTypeService, StatsService, BaseRuleService, ValidationService, ConditionValuesService, RewardsService, OccurrenceTypeService, DiscountsService, CriterionTypeService, // SecurityService, // SecureHttpService, { provide: SecureHttpService, useFactory: SecureHttpFactory, deps: [XHRBackend, RequestOptions, Router] }, { provide: MerchantService, useFactory: MerchantServiceFactory, deps: [SecureHttpService] } ];

// needed for AoT compilation export function SecureHttpFactory(backend: XHRBackend, defaultOptions: RequestOptions, r: Router) { return new SecureHttpService(backend, defaultOptions, r); }

export function MerchantServiceFactory(shttp: SecureHttpService) { return new MerchantService(shttp); }

@NgModule({ imports: [ CommonModule, FormsModule, // ChartModule, RouterModule, Daterangepicker ], declarations: [ ...sharedComponents ], // don't include so that the providers are instantiated only once // providers: [ // // ...sharedProviders // // CustomHttpService // ], exports: [ CommonModule, FormsModule, ReactiveFormsModule, // ChartModule, RouterModule, Daterangepicker, ...sharedComponents ] }) export class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: sharedProviders }; } };

[attilacsanyi]

@mp3por just remove the comments in SharedModule so import and also export ChartModule from SharedModule, thats it.