@ngrx/store-devtools#StoreDevtoolsModule 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 {}

@NgModule({
  declarations: [
    ScoreboardContainerComponent,
    ScoreboardFirstRouteComponent,
    ScoreboardSecondRouteComponent,
    ScoreboardComponent,
  ],
  exports: [ScoreboardContainerComponent],
  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: [ScoreboardContainerComponent],
})
export class ScoreboardModule implements LoadableApp {
  EntryComponent = ScoreboardContainerComponent;
}

@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, MainSearchComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    UtilI18nModule,
    TranslateModule.forRoot(TRANSLATE_GEONETWORK_CONFIG),
    FeatureSearchModule,
    FeatureCatalogModule,
    UiLayoutModule,
    FeatureMapModule,
    UiMapModule,
    FeatureDatavizModule,
    StoreModule.forRoot({}, { metaReducers }),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    EffectsModule.forRoot(),
    NoopAnimationsModule,
  ],
  providers: [
    {
      provide: Configuration,
      useValue: new Configuration({
        basePath: environment.API_BASE_PATH,
      }),
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(translate: TranslateService) {
    const lang = getDefaultLang()
    translate.setDefaultLang(lang)
    translate.use(lang)
  }
}

@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({
  imports: [
    AppModule,
    CoreModule,
    BrowserAnimationsModule,
    !environment.production ? StoreDevtoolsModule.instrument({logOnly: environment.production}) : [],
  ],
  bootstrap: [AppComponent]
})
export class AppBrowserModule {
}

@NgModule({
  imports: [
    AppModule,
    !environment.production ? StoreDevtoolsModule.instrument({logOnly: environment.production}) : [],
  ],
  bootstrap: [AppComponent],
})
export class AppBrowserModule {
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AppFooterComponent,
    UserCardComponent,
    LoaderComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    StoreModule.forRoot({app: appStore.reducer}),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    StoreModule.forRoot({ app: appStore.reducer }),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AppFooterComponent,
    UserCardComponent,
    LoaderComponent,
    UserDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    StoreModule.forRoot({app: appStore.reducer}),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
    }),
    EffectsModule.forRoot([AppEffects])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AppFooterComponent,
    UserCardComponent,
    LoaderComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    StoreModule.forRoot({ app: appStore.reducer }),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
    }),
    EffectsModule.forRoot([AppEffects]),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AppFooterComponent,
    UserCardComponent,
    LoaderComponent,
    UserDetailComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    StoreModule.forRoot({ app: appStore.reducer, router: routerReducer }),
    StoreRouterConnectingModule.forRoot(),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
    }),
    EffectsModule.forRoot([AppEffects]),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

extModules = [
    StoreDevtoolsModule.instrument({
        maxAge: 25,
    }),
]

@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: [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 {}

modules = [
  StoreDevtoolsModule.instrument({
    maxAge: 20,
  }),
]

@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,
    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: [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({
  exports: [
    BaseComponent,
    GnFacetsComponent,
    GnResultsListComponent,
    GnAggregatedRecordsComponent,
  ],
  declarations: [
    BaseComponent,
    GnFacetsComponent,
    GnResultsListComponent,
    GnAggregatedRecordsComponent,
  ],
  imports: [
    CommonModule,
    UiInputsModule,
    UiSearchModule,
    FeatureSearchModule,
    StoreModule.forRoot({}),
    EffectsModule.forRoot(),
    UtilI18nModule,
    TranslateModule.forRoot(TRANSLATE_GEONETWORK_CONFIG),
    StoreDevtoolsModule.instrument(),
  ],
  providers: [
    {
      provide: Configuration,
      useValue: apiConfiguration,
    },
    SearchFacade,
  ],
})
export class WebcomponentsModule implements DoBootstrap {
  constructor(private injector: Injector) {
    CUSTOM_ELEMENTS.forEach((ceDefinition) => {
      const angularComponent = ceDefinition[0]
      const ceTagName = ceDefinition[1]

      const customElement = createCustomElement(angularComponent, {
        injector,
      })
      if (!customElements.get(ceTagName)) {
        customElements.define(ceTagName, customElement)
      }
    })
  }

  // eslint-disable-next-line
  ngDoBootstrap() {}
}

@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())
  }
}

extModules = [
  StoreDevtoolsModule.instrument({
    maxAge: 25
  })
]

@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 {}

// 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,
              })
            }
          }
        }
      })
  }
}

@NgModule({
  imports: [
    // angular
    CommonModule,
    HttpClientModule,
    FormsModule,

    // material
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatMenuModule,
    MatIconModule,
    MatSelectModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatButtonModule,

    // ngrx
    StoreModule.forRoot(reducers, { metaReducers }),
    StoreRouterConnectingModule.forRoot(),
    EffectsModule.forRoot([
      AuthEffects,
      SettingsEffects,
      GoogleAnalyticsEffects
    ]),
    environment.production
      ? []
      : StoreDevtoolsModule.instrument({
          name: 'MicroFrontends Workshop 2020'
        }),

    // 3rd party
    FontAwesomeModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
    { provide: ErrorHandler, useClass: AppErrorHandler },
    { provide: RouterStateSerializer, useClass: CustomSerializer }
  ],
  exports: [
    // angular
    FormsModule,

    // material
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatMenuModule,
    MatIconModule,
    MatSelectModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatButtonModule,

    // 3rd party
    FontAwesomeModule,
    TranslateModule
  ]
})
export class CoreModule {
  constructor(
    @Optional()
    @SkipSelf()
    parentModule: CoreModule,
    faIconLibrary: FaIconLibrary
  ) {
    if (parentModule) {
      throw new Error('CoreModule is already loaded. Import only in AppModule');
    }
    faIconLibrary.addIcons(
      faCog,
      faBars,
      faRocket,
      faPowerOff,
      faUserCircle,
      faPlayCircle,
      faGithub,
      faMediumM,
      faTwitter,
      faInstagram,
      faYoutube
    );
  }
}

@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 {}