How to use the ngx-device-detector.DeviceDetectorModule.forRoot function in ngx-device-detector

import { DeviceDetectorModule } from 'ngx-device-detector';
 import { BootstrapFramework, WebExtensionModule } from '@project-sunbird/web-extensions';
 import { WebExtensionsConfig, PluginModules } from './framework.config.offline';
@NgModule({
  declarations: [
  ],
  imports: [
    CoreModule,
    CommonModule,
    BrowserModule,
    HttpClientModule,
    SuiModule,
    SharedModule.forRoot(),
    WebExtensionModule.forRoot(),
    TelemetryModule.forRoot(),
    DeviceDetectorModule.forRoot(),
    SharedFeatureModule,
    PluginModules,
    AppRoutingOfflineModule // don't add any module below this because it contains wildcard route
  ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    CacheService,
    { provide: CacheStorageAbstract, useClass: CacheSessionStorage },
  ]
})
export class AppModuleOffline {
  constructor(bootstrapFramework: BootstrapFramework) {
    bootstrapFramework.initialize(WebExtensionsConfig);
  }
}

import { PluginModules } from './framework.config';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserAnimationsModule, // used this instaed of browser module since it includes in it.
    CoreModule,
    CommonModule,
    HttpClientModule,
    SuiSelectModule, SuiModalModule, SuiAccordionModule, SuiPopupModule, SuiDropdownModule, SuiProgressModule,
    SuiRatingModule, SuiCollapseModule,
    SharedModule.forRoot(),
    WebExtensionModule.forRoot(),
    TelemetryModule.forRoot(),
    DeviceDetectorModule.forRoot(),
    SharedFeatureModule,
    ...PluginModules,
    AppRoutingModule // don't add any module below this because it contains wildcard route
  ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    CacheService,
    { provide: CacheStorageAbstract, useClass: CacheSessionStorage },
    // { provide: HTTP_INTERCEPTORS, useClass: SessionExpiryInterceptor, multi: true }
  ]
})
export class AppModule {
  constructor(bootstrapFramework: BootstrapFramework) {
    bootstrapFramework.initialize(WebExtensionsConfig);
  }

})
class AppComponent {
  propsToShow = ["userAgent", "os", "browser", "device", "os_version", "browser_version"];
  device: DeviceInfo = null;
  constructor(private deviceService: DeviceDetectorService){
    this.device = deviceService.getDeviceInfo();
    console.log(this.device);
    console.log('isMobile', this.deviceService.isMobile());
    console.log('isTablet', this.deviceService.isTablet());
  }
}

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [ AppComponent, KeysPipe ],
  imports: [ BrowserModule, DeviceDetectorModule.forRoot() ]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

FormsModule,
    HttpClientModule,
    RouterModule,
    SharedModule,
    ClickOutsideModule,
    GuardsModule,
    BrowserAnimationsModule,
    NotificationsModule,
    AlertModule.forRoot(),
    BsDatepickerModule.forRoot(),
    BsDropdownModule.forRoot(),
    PopoverModule.forRoot(),
    ModalModule.forRoot(),
    TimepickerModule.forRoot(),
    TypeaheadModule.forRoot(),
    DeviceDetectorModule.forRoot(),
  ],
  declarations: [HomeComponent, RedirectComponent],
  providers: [
    {
      provide: ErrorHandler,
      useClass: SentryErrorHandler,
    },
    httpInterceptorProviders,
    CollectionService,
    DocumentService,
    OrganizationService,
    ProjectService,
    SearchService,
    BaseService,
    ImportService,
    UserService,

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        DeviceDetectorModule.forRoot()
      ],
      declarations: [
        AppComponent,
        KeysPipe
      ],
      providers: []
    }).compileComponents();
  }));

AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    CdkTableModule,
    CartographyModule,
    HotkeyModule.forRoot(),
    PersistenceModule,
    NgxElectronModule,
    FileUploadModule,
    MatSidenavModule,
    ResizableModule,
    DragAndDropModule,
    DragDropModule,
    MATERIAL_IMPORTS,
    DeviceDetectorModule.forRoot()
  ],
  providers: [
    SettingsService,
    { provide: ErrorHandler, useClass: ToasterErrorHandler },
    D3Service,
    VersionService,
    ProjectService,
    SymbolService,
    ServerService,
    TemplateService,
    NodeService,
    LinkService,
    DrawingService,
    IndexedDbService,
    HttpServer,
    SnapshotService,

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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CoreModule,
    SharedModule,
    AppRoutingModule,
    LoadingBarHttpClientModule,
    LoadingBarRouterModule,
    DeviceDetectorModule.forRoot(),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { KeysPipe } from './pipes/keys.pipe';
import { CommonModule } from '@angular/common';
import { DeviceDetectorModule } from 'ngx-device-detector';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    KeysPipe
  ],
  imports: [
    NoopAnimationsModule,
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    CommonModule,
    DeviceDetectorModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }