@ngrx/store#StoreModule TypeScript Examples

@NgModule({
  declarations: [
    AppComponent,
    ...components,
    ...directives,
    ...pipes
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    FontAwesomeModule,
    CommonsModule,
    StoreModule.forRoot({app: appReducer, fs: fileExplorerReducer}),
    EffectsModule.forRoot([AppEffects]),
    StoreDevtoolsModule.instrument({maxAge: 25, logOnly: environment.production})
  ],
  providers: [...services],
  bootstrap: [AppComponent]
})
export class AppModule {}

// tslint:enable:max-line-length

describe('DashboardComponent', () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [DashboardComponent, ProjectsComponent, ProjectStatusNormalComponent, ModuleSearchComponent],
      imports: [
        NoopAnimationsModule,
        RouterTestingModule,
        StoreModule.forRoot({}),
        EffectsModule.forRoot([]),
        EntityDataModule.forRoot(entityConfig),
        EntityStoreModule,
        HttpClientTestingModule,
        LayoutModule,
        NgxDatatableModule,
        AppMaterialModule,
        AppComponentsModule,
      ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should compile', () => {
    expect(component).toBeTruthy();
  });
});

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    StoreModule.forRoot({ app: appStore.reducer }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forFeature(fromAuth.AUTH_FEATURE_KEY, fromAuth.reducer),
    EffectsModule.forFeature([AuthEffects]),
  ],
})
export class AuthStoreModule {
  static forRoot(options: Partial<IAuthStoreOptions> = {}): ModuleWithProviders<AuthStoreModule> {
    return {
      ngModule: AuthStoreModule,
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: AuthInterceptor,
          multi: true
        },
        {
          provide: IAuthFacade,
          useClass: options.facade || BaseAuthFacade
        },
        {
          provide: IAuthStorage,
          useClass: options.storage || BaseAuthStorage
        },
        {
          provide: IAuthApollo,
          useClass: options.apollo || BaseAuthApollo
        }
      ]
    }
  }
}

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MaterialModule,
    StoreModule.forFeature(fromAuth.authFeatureKey, fromAuth.reducers),
    EffectsModule.forFeature([AuthEffects]),
  ],
  declarations: COMPONENTS,
  exports: COMPONENTS,
})
export class AuthModule {}

@NgModule({
  imports: [
    StoreModule.forFeature(
      fromMembers.membersFeatureKey,
      fromMembers.reducer
    ),
    EffectsModule.forFeature([
      MembersEffects,
      MemberEffects,
    ])
  ],
})
export class MembersStoreModule {}

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        EffectsModule.forRoot(),
        StoreModule.forRoot({}),
      ],
      declarations: [AppComponent],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents()
  })

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent)
    const app = fixture.componentInstance
    expect(app).toBeTruthy()
  })
})

@NgModule({
  declarations: [
    CounterContainerComponent,
    CounterFirstRouteComponent,
    CounterSecondRouteComponent,
    CounterComponent,
  ],
  exports: [CounterContainerComponent],
  imports: [
    CommonModule,
    MatButtonModule,
    RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' }),
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
      },
    }),
    StoreRouterConnectingModule.forRoot({
      routerState: RouterState.Minimal,
      serializer: CustomSerializer,
    }),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      // logOnly: environment.production,
    }),
  ],
  entryComponents: [CounterContainerComponent],
})
export class CounterModule implements LoadableApp {
  EntryComponent = CounterContainerComponent;
}

@NgModule({
  declarations: [
    AppComponent,
    IssuesComponent,
    NewIssueComponent,
    IssueListComponent,
    IssueDetailComponent,
    LoaderComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    EffectsModule.forRoot([HydrationEffects, RouterEffects]),
    StoreRouterConnectingModule.forRoot({ routerState: RouterStateMinimal }),
    EntityDataModule.forRoot(entityConfig),
    modules,
    InMemoryWebApiModule.forRoot(DatabaseService),
  ],
  providers: [
    { provide: DefaultDataServiceConfig, useValue: defaultDataServiceConfig },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  imports: [
    CommonModule,
    RoleRoutingModule,
    NbButtonModule,
    NbCardModule,
    NbLayoutModule,
    NbInputModule,
    NbCheckboxModule,
    NbTreeGridModule,
    NbListModule,
    Ng2SmartTableModule,
    NbSelectModule,
    NbIconModule,
    SharedModule,
    NbEvaIconsModule,
    FormsModule,
    ReactiveFormsModule,

    /**
     * Define feature state
     */
    StoreModule.forFeature(fromRoles.roleFeatureKey, fromRoles.reducers),
    EffectsModule.forFeature([RoleApiEffects, RoleRouteEffects, RoleNotificationEffects]),
  ],
  declarations: [
    RoleDetailComponent,
    RoleComponent,
    RoleFormComponent,
    FsIconComponent,
    RoleCreateComponent,
    RoleEditComponent,
    PermissionListItemComponent,
  ],
  providers: [RoleExistsGuard, FormPermissionService],
  entryComponents: [],
})
export class RoleModule {}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    FlexLayoutModule,
    CoreModule,
    HttpClientModule,
    SharedModule,
    StoreModule.forRoot(reducers, {metaReducers}),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    EffectsModule.forRoot([AppEffects]),
    NgxMdModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

@NgModule({
  declarations: [],
  imports: [
    CurrentUserApiModule,
    StoreModule.forFeature(fromCurrentUser.currentUserFeatureKey, fromCurrentUser.reducer),
    EffectsModule.forFeature([CurrentUserEffects]),
  ],
})
export class CurrentUserModule { }

@NgModule({
  imports: [
    StoreModule.forFeature(STORE_KEY, rootReducer),
    StoreModule.forFeature(COMMON_DATA_STORE_KEY, commonDataStoreReducer),
    StoreModule.forFeature(TENSORFLOW_STATS_STORE_KEY, tensorFlowStatsReducer),
    StoreModule.forRoot({}),
  ],
})
export class RootStoreModule {
}

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        AppMaterialModule,
        HttpClientModule,
        AppComponentsModule,
        StoreModule.forRoot({}),
        EffectsModule.forRoot([]),
        EntityDataModule.forRoot(entityConfig),
        EntityStoreModule,
        HttpClientTestingModule,
        LayoutModule,
      ],
      declarations: [AppComponent, HeaderComponent, FooterComponent, SideNavComponent],
      providers: [
        NavService,
        {
          provide: AuthService,
          useValue: {
            userInfo: jest.fn().mockReturnValueOnce({ role: 'Admin' }),
          },
        },
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'barista-web'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('barista-web');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1 span').textContent).toContain('Barista');
  });
});

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    OverlayComponent,
    SearchComponent,
    CarsListComponent,
    CarCardComponent,
    FilterByBrandBarComponent,
    FilterByColorComponent,
    CarFilterComponent,
    HomepageComponent,
    FooterComponent,
    CarPageComponent,
    FilterCarPipe,
    FilterColorPipe,
    FilterBrandPipe,
    FilterCarDetailPipe,
    CarsPageComponent,
    SliceBrandPipe,
    CheckoutPageComponent,
    NotFoundPageComponent,
    AdminDashboardPageComponent,
    CarsDashboardComponent,
    CarAddFormComponent,
    CarEditFormComponent,
    CarImageFormComponent,
    BrandsDashboardComponent,
    ColorsDashboardComponent,
    BrandAddFormComponent,
    BrandEditFormComponent,
    ColorAddFormComponent,
    ColorEditFormComponent,
    LoginPageComponent,
    RegisterPageComponent,
    LogoutPageComponent,
    LoadingSpinnerComponent,
    AccountPageComponent,
    HiddenCreditCardNoPipe,
    WalletPageComponent,
    HoverDirective,
    PasswordInputComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      positionClass: 'toast-bottom-right',
    }),
    StoreModule.forRoot(AppReducers),
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,

    /**
     * StoreModule.forRoot is imported once in the root module, accepting a reducer
     * function or object map of reducer functions. If passed an object of
     * reducers, combineReducers will be run creating your application
     * meta-reducer. This returns all providers for an @ngrx/store
     * based application.
     */
    StoreModule.forRoot(ROOT_REDUCERS, {
      metaReducers,
      runtimeChecks: {
        // strictStateImmutability and strictActionImmutability are enabled by default
        strictStateSerializability: true,
        strictActionSerializability: true,
        strictActionWithinNgZone: true,
        strictActionTypeUniqueness: true,
      },
    }),

    /**
     * @ngrx/router-store keeps router state up-to-date in the store.
     */
    // StoreRouterConnectingModule.forRoot(),

    /**
     * Store devtools instrument the store retaining past versions of state
     * and recalculating new states. This enables powerful time-travel
     * debugging.
     *
     * To use the debugger, install the Redux Devtools extension for either
     * Chrome or Firefox
     *
     * See: https://github.com/zalmoxisus/redux-devtools-extension
     */
    StoreDevtoolsModule.instrument({
      name: 'NgRx Book Store App',

      // In a production build you would want to disable the Store Devtools
      // logOnly: environment.production,
    }),

    /**
     * EffectsModule.forRoot() is imported once in the root module and
     * sets up the effects class to be initialized immediately when the
     * application starts.
     *
     * See: https://ngrx.io/guide/effects#registering-root-effects
     */
    EffectsModule.forRoot([UserEffects]),
    CoreModule,
  ],
  bootstrap: [AppComponent],
  providers: [provideComponentRouter()],
})
export class AppModule {}

@NgModule({
  declarations: [
    AppComponent,
    UploadDataPageComponent,
    UploadDataComponent,
    UploadDataRulesComponent,
    AnalysisProgressPageComponent,
    DatasetValidationPageComponent,
    DataImportValidationMapPanelComponent,
    UploadDataErrorDialogComponent,
    UploadDataBackgroundComponent,
    UploadDataIllustrationComponent,
    AnalysisProgressIllustrationsComponent,
    FormsPageComponent,
    PublishPageComponent,
    PublishPageIllustrationComponent,
    SuccessPublishPageComponent,
    SuccessPublishPageIllustrationComponent,
    SummarizePageComponent,
    SummarizeIllustrationComponent,
    SummarizeBackgroundComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UiInputsModule,
    UiWidgetsModule,
    HttpClientModule,
    UtilI18nModule,
    FeatureEditorModule,
    ApiModule.forRoot(apiConfigurationFactory),
    TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG),
    StoreModule.forRoot({
      [DATAFEEDER_STATE_KEY]: reducer,
    }),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(translate: TranslateService) {
    translate.use(getLangFromBrowser() || getDefaultLang())
  }
}

@NgModule({
  declarations: [DashboardContainerComponent],
  exports: [DashboardContainerComponent],
  imports: [
    FeatureAppViewModule,
    CommonModule,
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
      },
    }),
    // StoreRouterConnectingModule.forRoot({
    //   routerState: RouterState.Minimal,
    //   serializer: CustomSerializer,
    // }),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
    }),
    RouterModule.forChild(routes),
    AppUtilsModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
  ],
})
export class DashboardModule implements LoadableApp {
  EntryComponent = DashboardContainerComponent;

  static forRoot(
    productionBuild: boolean
  ): ModuleWithProviders<DashboardModule> {
    return {
      ngModule: DashboardModule,
      providers: [
        {
          provide: AVAILABLE_APPS,
          useFactory: () => {
            return AvailableApps(productionBuild).reduce(
              (acc, appRegistration) => ({
                ...acc,
                [appRegistration.name]: appRegistration,
              }),
              {}
            );
          },
        },
      ],
    };
  }
}

@NgModule({
  declarations: [
    AppComponent,
    SearchComponent,
    DisplayComponent,
    BonusCardOptionComponent,
    BirdCardComponent,
    BonusCardComponent,
    IconizePipe,
    StatsComponent,
    CardDetailComponent,
    ConsentComponent,
    BirdCardDetailComponent,
    BonusCardDetailComponent,
    TranslatePipe,
    LanguageDialogComponent,
    AnalyticsEventDirective,
    ApplinkDirective,
    SafePipe,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    InfiniteScrollModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatCardModule,
    MatChipsModule,
    MatDialogModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatSelectModule,
    MatTooltipModule,
    Ng5SliderModule,
    ReactiveFormsModule,
    StoreModule.forRoot({ app: appReducer, router: routerReducer }, {}),
    StoreRouterConnectingModule.forRoot(),
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    EffectsModule.forRoot([AppEffects]),
  ],
  providers: [
    AnalyticsService,
    CookiesService,
    TranslatePipe,
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    BirdCardDetailComponent,
    BonusCardDetailComponent,
    LanguageDialogComponent,
  ]
})
export class AppModule { }

@NgModule({
  declarations: [AppComponent],
  imports: [
    RouterModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    LoginModule,

    /** Theme modules */
    ThemeModule.forRoot(),
    CoreModule.forRoot(),
    NbSidebarModule.forRoot(),
    NbMenuModule.forRoot(),
    NbDatepickerModule.forRoot(),
    NbWindowModule.forRoot(),
    NbToastrModule.forRoot(),
    NbEvaIconsModule,

    /** ngrx root modules */
    StoreModule.forRoot(
      { Root: reducer },
      {
        runtimeChecks: {
          strictActionImmutability: false,
        },
      },
    ),
    EffectsModule.forRoot([
      SecurityApiEffects,
      SecurityRouteEffects,
      SecurityNotificationEffects,
      RoleSearchApiEffects,
      UserSearchApiEffects,
      CustomerSearchApiEffects,
      OfficeSearchApiEffects,
    ]),

    StoreDevtoolsModule.instrument({
      name: 'Digital bank',
    }),
  ],
  providers: [
    HttpClientService,
    AuthenticationService,
    PermittableGroupIdMapper,
    IdentityService,
    NotificationService,
    ExistsGuardService,
    DepositAccountService,
    CurrencyService,
    AccountingService,
    ImageService,
    PayrollService,
    CustomerService,
    CatalogService,
    OfficeService,
    CountryService,
    TellerService,
    ChequeService,
    ...appRoutingProviders,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    LazyElementsModule,
    SharedModule,
    ExamplesRoutingModule,
    StoreModule.forFeature(FEATURE_NAME, reducers),
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      isolate: true
    }),
    EffectsModule.forFeature([
      ExamplesEffects,
      TodosEffects,
      StockMarketEffects,
      BooksEffects,
      FormEffects
    ])
  ],
  declarations: [
    ExamplesComponent,
    TodosContainerComponent,
    StockMarketContainerComponent,
    ParentComponent,
    ChildComponent,
    AuthenticatedComponent,
    CrudComponent,
    FormComponent,
    NotificationsComponent,
    UserComponent,
    ElementsComponent
  ],
  providers: [StockMarketService, UserService]
})
export class ExamplesModule {
  constructor() {}
}

@NgModule({
  declarations: [
    AppComponent,
    LineChartComponent,
    AlgoSelectorComponent,
    ToolbarComponent,
    GroupToggleComponent,
    StatsTableComponent,
    PortfolioSettingsComponent,
    OpenTradesComponent,
    DateFilterComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    MatIconModule,
    MatTabsModule,
    MatTreeModule,
    MatCardModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatInputModule,
    MatCheckboxModule,
    MatTableModule,
    MatSortModule,
    MatListModule,
    MatProgressSpinnerModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSlideToggleModule,
    AngularResizedEventModule,
    ChartModule,
    StoreModule.forRoot(
      { tradeLogs: tradeLogsReducer },
      { metaReducers: [storageSyncMetaReducer] }
    ),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production,
    }),
    EffectsModule.forRoot([TradeLogEffects]),
  ],
  providers: [
    {
      provide: useMockData,
      useFactory: () => !!environment.useMockData,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  declarations: [
    AdminComponent,
    PagerComponent,
    EditprofileComponent,
    ImagemanagerpopupComponent,
    CONTAINERS.AuthLayoutComponent,
    CONTAINERS.CommonLayoutComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'spurtcommerce' }),
    DefaultRoutingModule,
    PerfectScrollbarModule,
    BrowserAnimationsModule,
    FormsModule,
    ContainersModule,
    ComponentsModule,
    DefaultCommonModule,
    MaterialModule,
    CommonModule,
    ReactiveFormsModule,
    HttpClientModule,
    ToastrModule.forRoot(),
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production
    }),
    StoreModule.forRoot(reducers, { metaReducers }),
    EffectsModule.forRoot([
      EditprofileEffect,
      OrderstatusEffects,
      StockEffects
    ]),
    CKEditorModule,
    NgbModule,
    NumberAcceptModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
    },
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    ConfigService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RequestInterceptor,
      multi: true
    },
    HTTPStatus,
    AppApiClient,
    AuthGuard,
    AuthService,
    AuthSandbox,
    StockService,
    StockSandbox,
    EditprofileSandbox,
    EditprofileService,
    OrderstatusSandbox,
    OrderstatusApiClientService
  ],

  bootstrap: [AdminComponent],
  entryComponents: [ImagemanagerpopupComponent]
})
export class AdminModule {}

@NgModule({
  declarations: [
    AppComponent,
    TgSvgSpriteComponent,
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({}, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
        strictStateSerializability: true,
        strictActionSerializability: true,
        strictActionTypeUniqueness: true,
      },
    }),
    extModules,
    EffectsModule.forRoot([]),
    StoreRouterConnectingModule.forRoot(),
    ReactiveComponentModule,
    TranslateModule.forRoot(),
  ],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [ConfigService, TranslateService],
      useFactory: (appConfigService: ConfigService, translate: TranslateService) => {
        return () => {
          return appConfigService.fetch().then((config) => {
            translate.setDefaultLang(config.defaultLanguage);
            translate.use(config.defaultLanguage);

            return config;
          });
        };
      },
    },
  ],
})
export class AppModule {}

@NgModule({
  declarations: [
    AppComponent,
    HeaderItemComponent,
    LandingComponent,
    FooterItemComponent,
    ColorCardItemComponent,
    ExploreComponent,
    AuctionsComponent,
    MyColorsComponent,
    AuctionModalComponent,
    ColorHistoryModalComponent,
    ShortenPipe,
    AmountConverterPipe,
    CountdownComponent,
    ColorCardListComponent,
    WatchlistComponent,
    ActivityComponent,
    StatsComponent,
    AddressDetailComponent,
    TokenDetailComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    BsDropdownModule.forRoot(),
    FontAwesomeModule,
    AlertModule.forRoot(),
    ModalModule.forRoot(),
    NgxChartsModule,
    AccordionModule.forRoot(),
    CollapseModule.forRoot(),
    MomentModule,
    StoreModule.forRoot(reducers, {
      metaReducers,
    }),
    EffectsModule.forRoot([AppEffects, ConnectWalletEffects]),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIcons(fasStar, faCog, faDog, faWindowRestore)
    library.addIcons(
      farStar,
      farMoon,
      farSun,
      faSortAmountUp,
      faSortAmountDown,
      faSortAlphaUp,
      faSortAlphaDown
    )
  }
}

@NgModule({
  declarations: [
    AppComponent,
    BillOfMaterialsComponent,
    BomGroupedLicenseModulesComponent,
    BomGroupedLicensesComponent,
    BomGroupedLicenseModulesDialogComponent,
    BomLicenseExceptionDetailsComponent,
    BomLicenseExceptionDetailsDialogComponent,
    BomLicenseExceptionsComponent,
    BomLicensesComponent,
    BomManualLicenseDetailsComponent,
    BomManualLicenseDetailsDialogComponent,
    BomManualLicensesComponent,
    BomSecurityExceptionComponent,
    BomSecurityExceptionDetailsComponent,
    BomSecurityExceptionDetailsDialogComponent,
    BomVulnerabilitiesComponent,
    DashboardComponent,
    FlexLayoutTypeComponent,
    FooterComponent,
    githubValidDirective,
    HeaderComponent,
    HomeComponent,
    LicenseDetailsComponent,
    LicenseObligationComponent,
    LicenseScanResultComponent,
    LicenseScanResultItemDetailsComponent,
    LicenseScanResultItemsComponent,
    LicensesComponent,
    LicensesExceptionsComponent,
    ModuleSearchComponent,
    ObjectDetailsComponent,
    ObligationDetailsComponent,
    ObligationDetailsViewComponent,
    ObligationsComponent,
    OutputFormatComponent,
    OutputFormatTypeDetailsComponent,
    PackageManagerDetailsComponent,
    PackageManagersComponent,
    ProjectAttributionComponent,
    ProjectDetailsComponent,
    ProjectNotesComponent,
    ProjectNotesDetailsComponent,
    ProjectNotesDetailsDialogComponent,
    ProjectScanDetailsComponent,
    ProjectScansComponent,
    ProjectStatsComponent,
    ProjectStatusComponent,
    ProjectStatusNormalComponent,
    ProjectStatusTypeDetailsComponent,
    ProjectStatusTypesComponent,
    ProjectsComponent,
    ScanLogsComponent,
    SecurityScanResultComponent,
    SecurityScanResultItemDetailsComponent,
    SecurityScanResultItemsComponent,
    SideNavComponent,
    SigninComponent,
    SignupComponent,
    StatusComponent,
    SystemConfigurationComponent,
    TooltipsComponent,
    TooltipDetailsComponent,
    VulnerabilityStatusDeploymentTypesComponent,
    VulnerabilityStatusDeploymentTypesDetailsComponent,
    BannerComponent,
    ChartGaugeComponent,
    ChartBarHorizontalComponent,
    ChartBarVerticalComponent,
  ],
  imports: [
    StoreModule.forRoot(
      {},
      {
        runtimeChecks: {
          strictStateImmutability: true,
          strictActionImmutability: true,
          strictActionSerializability: true,
        },
      },
    ),
    // Instrumentation must be imported after importing StoreModule (config is optional)
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
    EffectsModule.forRoot([]),
    EntityDataModule.forRoot(entityConfig),
    EntityStoreModule,
    BrowserModule,
    ApiModule.forRoot(apiConfigFactory),
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    FlexLayoutModule,
    FormlyModule.forRoot({
      types: [{ name: 'flex-layout', component: FlexLayoutTypeComponent }],
    }),
    FormlyMaterialModule,
    LayoutModule,
    AppMaterialModule,
    NgxDatatableModule,
    TableModule,
    MultiSelectModule,
    AppComponentsModule,
    TrustHtmlModule,
    SafePipeModule,
    PrettyJsonModule,
    DashboardModule,
    AppServicesModule,
  ],
  providers: [
    HttpCancelService,
    { provide: HTTP_INTERCEPTORS, useClass: ManageHttpInterceptor, multi: true },
    { provide: BASE_PATH, useValue: environment.API_BASE_PATH },
    NavService,
    {
      provide: HTTP_INTERCEPTORS,
      useFactory: (router: Router, authService: AuthService) => {
        return new AuthInterceptor(router, authService);
      },
      multi: true,
      deps: [Router, AuthService],
    },
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    AppDialogComponent,
    BomLicenseExceptionDetailsDialogComponent,
    BomManualLicenseDetailsDialogComponent,
    BomSecurityExceptionDetailsDialogComponent,
    ProjectNotesDetailsDialogComponent,
    BomGroupedLicenseModulesDialogComponent,
  ],
})
export class AppModule {}

// https://github.com/nrwl/nx/issues/191

@NgModule({
  declarations: [
    AppComponent,
    SearchPageComponent,
    RecordPreviewDatahubComponent,
    SearchHeaderComponent,
    HeaderBadgeButtonComponent,
    HeaderRecordComponent,
    RecordPageComponent,
    SearchSummaryComponent,
    NavigationBarComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([], {
      initialNavigation: 'enabledBlocking',
    }),
    StoreModule.forRoot(
      {},
      {
        metaReducers,
        runtimeChecks: {
          strictStateImmutability: false,
          strictActionImmutability: false,
        },
      }
    ),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    EffectsModule.forRoot(),
    UtilI18nModule,
    TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG),
    FeatureSearchModule,
    DefaultRouterModule.forRoot({
      searchStateId: 'mainSearch',
      searchRouteComponent: SearchPageComponent,
      recordRouteComponent: RecordPageComponent,
    }),
    FeatureRecordModule,
    FeatureCatalogModule,
    UiSearchModule,
    UtilSharedModule,
    MatIconModule,
    UiInputsModule,
    UiLayoutModule,
  ],
  providers: [
    { provide: RESULTS_LAYOUT_CONFIG, useValue: DATAHUB_RESULTS_LAYOUT_CONFIG },
    {
      provide: Configuration,
      useFactory: () =>
        new Configuration({
          basePath: getGlobalConfig().GN4_API_URL,
        }),
    },
    {
      provide: PROXY_PATH,
      useFactory: () => getGlobalConfig().PROXY_PATH,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(
    translate: TranslateService,
    router: Router,
    @Inject(DOCUMENT) private document: Document
  ) {
    translate.setDefaultLang(getDefaultLang())
    translate.use(getLangFromBrowser() || getDefaultLang())
    ThemeService.applyCssVariables(
      getThemeConfig().PRIMARY_COLOR,
      getThemeConfig().SECONDARY_COLOR,
      getThemeConfig().MAIN_COLOR,
      getThemeConfig().BACKGROUND_COLOR,
      getThemeConfig().MAIN_FONT,
      getThemeConfig().TITLE_FONT,
      getThemeConfig().FONTS_STYLESHEET_URL
    )
    ThemeService.generateBgOpacityClasses(
      'primary',
      getThemeConfig().PRIMARY_COLOR,
      [10, 25]
    )

    router.events
      .pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
      .subscribe((e) => {
        if (e.position) {
          // backward navigation
        } else {
          if (e.routerEvent.url.startsWith(`/${ROUTER_ROUTE_DATASET}`)) {
            const recordPageElement = document.getElementById('record-page')
            if (recordPageElement) {
              recordPageElement.scrollTo({
                top: 0,
              })
            }
          }
        }
      })
  }
}

xdescribe('IssueListComponent', () => {
  describe('Unit Tests', () => {
    let component: IssueListComponent;
    let fixture: ComponentFixture<IssueListComponent>;
    let store: MockStore<RootState>;
    let factory: IssueFactory;

    beforeEach(async () => {
      factory = new IssueFactory();
      await TestBed.configureTestingModule({
        declarations: [IssueListComponent],
        providers: [provideMockStore<RootState>({ initialState: mockState() })],
        imports: [RouterTestingModule],
      }).compileComponents();
      store = TestBed.inject(MockStore);
      fixture = TestBed.createComponent(IssueListComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

    it('should create', () => {
      expect(component).toBeTruthy();
    });

    it('should display issues', () => {
      let elements = fixture.debugElement.queryAll(By.css('li'));
      expect(elements.length).toBe(0);
      const issues = [factory.entity(), factory.entity()];
      store.setState(mockState({
        issue: factory.state({
          loaded: true,
          entities: factory.entities(...issues),
        }),
      }));
      fixture.detectChanges();
      elements = fixture.debugElement.queryAll(By.css('li'));
      expect(elements.length).toBe(issues.length);
    });

    it('should display issues (selector override)', () => {
      let elements = fixture.debugElement.queryAll(By.css('li'));
      const selector = store.overrideSelector(fromIssue.selectFiltered, []);
      fixture.detectChanges();
      expect(elements.length).toBe(0);
      const issues = [factory.entity(), factory.entity()];
      selector.setResult(issues);
      store.refreshState();
      fixture.detectChanges();
      elements = fixture.debugElement.queryAll(By.css('li'));
      expect(elements.length).toBe(issues.length);
    });

    it('should dispatch search', () => {
      const dispatchSpy = spyOn(store, 'dispatch');
      const text = 'abc';
      const input = fixture.debugElement.query(By.css('input'));
      input.nativeElement.value = text;
      input.nativeElement.dispatchEvent(new Event('input'));
      fixture.detectChanges();
      expect(dispatchSpy).toHaveBeenCalledWith(IssueActions.search({ text }));
    });
  });

  describe('Integration Tests', () => {
    let component: IssueListComponent;
    let fixture: ComponentFixture<IssueListComponent>;
    let store: Store<RootState>;
    let factory: IssueFactory;

    beforeEach(async () => {
      factory = new IssueFactory();
      await TestBed.configureTestingModule({
        declarations: [IssueListComponent],
        imports: [RouterTestingModule, StoreModule.forRoot(reducers)],
      }).compileComponents();
      store = TestBed.inject(Store);
      fixture = TestBed.createComponent(IssueListComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

    it('should display issues', () => {
      let elements = fixture.debugElement.queryAll(By.css('li'));
      fixture.detectChanges();
      expect(elements.length).toBe(0);
      store.dispatch(IssueActions.submitSuccess({ issue: factory.entity() }));
      fixture.detectChanges();
      elements = fixture.debugElement.queryAll(By.css('li'));
      expect(elements.length).toBe(1);
    });
  });
});

@NgModule({
  declarations: [
    AppComponent,
    RepoSearchComponent,
    DialogDetails,
    DialogAddCustom,
    HeaderComponent,
    CodeViewComponent,
    CanvasComponent,
    HomeComponent,
    ManageProjectDialogComponent,
    ManageVolumesDialogComponent,
    SpinnerComponent,
    CheckCircleComponent,
    ConfirmDialogComponent,
    NodeComponent,
    MarkedPipe,
    TruncateTextPipe,
    KeyValueComponent,
    ManageNetworksDialogComponent,
    SideBarComponent,
    LoginComponent,
    RegistrationComponent,
    ManageUserDialogComponent,
    CallbackComponent,
    ImportDialogComponent,
    GlobalDialogComponent,
    RecipeComponent,
    DialogPublishRecipe,
    DialogRecipeDetails,
    BuildDialogComponent,
    DeployDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatSelectModule,
    MatTabsModule,
    MatButtonToggleModule,
    MatProgressSpinnerModule,
    MatSliderModule,
    MatTooltipModule,
    MatCheckboxModule,
    MatMenuModule,
    MatStepperModule,
    MatAutocompleteModule,
    DragDropModule,
    HighlightModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    StoreModule.forRoot({ project: projectReducer, globalSpinnerState: globalSpinnerReducer, globalError: globalDialogReducer, globalAppConfiguration: globalConfigurationReducer }),
    ClipboardModule,
    EffectsModule.forRoot([ProjectEffects]),
    AngularSplitModule.forRoot(),
    CodemirrorModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: <HighlightOptions>{
        lineNumbers: true,
        languages: getHighlightLanguages(),
      }
    },
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    EventEmitterService,
    NodeService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}