Open mp3por opened 7 years ago
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 { }
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 }; } };
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 }; } };
@mp3por just remove the comments in SharedModule so import and also export ChartModule from SharedModule, thats it.
SharedModule
ChartModule
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:
and my SharedModule