client/src/app/app.module.ts

   1 import { ApplicationRef, NgModule } from '@angular/core'
   2 import { BrowserModule } from '@angular/platform-browser'
   3 import {
   4   removeNgStyles,
   5   createNewHosts,
   6   createInputTransfer
   7 } from '@angularclass/hmr'
   8
   9 import { MetaModule, MetaLoader, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
  10 import 'bootstrap-loader'
  11
  12 import { ENV_PROVIDERS } from './environment'
  13 import { AppRoutingModule } from './app-routing.module'
  14 import { AppComponent } from './app.component'
  15 import { AppState, InternalStateType } from './app.service'
  16
  17 import { AccountModule } from './account'
  18 import { CoreModule } from './core'
  19 import { LoginModule } from './login'
  20 import { SignupModule } from './signup'
  21 import { SharedModule } from './shared'
  22 import { VideosModule } from './videos'
  23 import { MenuComponent, MenuAdminComponent } from './menu'
  24
  25 export function metaFactory (): MetaLoader {
  26   return new MetaStaticLoader({
  27     pageTitlePositioning: PageTitlePositioning.PrependPageTitle,
  28     pageTitleSeparator: ' - ',
  29     applicationName: 'PeerTube',
  30     defaults: {
  31       title: 'PeerTube',
  32       description: 'PeerTube, a decentralized video streaming platform using P2P (BitTorrent) directly in the web browser'
  33     }
  34   })
  35 }
  36
  37 type StoreType = {
  38   state: InternalStateType,
  39   restoreInputValues: () => void,
  40   disposeOldHosts: () => void
  41 }
  42
  43 // Application wide providers
  44 const APP_PROVIDERS = [
  45   AppState
  46 ]
  47
  48 @NgModule({
  49   bootstrap: [ AppComponent ],
  50   declarations: [
  51     AppComponent,
  52
  53     MenuComponent,
  54     MenuAdminComponent
  55   ],
  56   imports: [
  57     BrowserModule,
  58
  59     CoreModule,
  60     SharedModule,
  61
  62     AppRoutingModule,
  63
  64     AccountModule,
  65     CoreModule,
  66     LoginModule,
  67     SignupModule,
  68     SharedModule,
  69     VideosModule,
  70
  71     MetaModule.forRoot({
  72       provide: MetaLoader,
  73       useFactory: (metaFactory)
  74     })
  75   ],
  76   providers: [ // expose our Services and Providers into Angular's dependency injection
  77     ENV_PROVIDERS,
  78     APP_PROVIDERS
  79   ]
  80 })
  81 export class AppModule {
  82   constructor (
  83     public appRef: ApplicationRef,
  84     public appState: AppState
  85   ) {}
  86
  87   public hmrOnInit (store: StoreType) {
  88     if (!store || !store.state) {
  89       return
  90     }
  91     console.log('HMR store', JSON.stringify(store, null, 2))
  92     /**
  93      * Set state
  94      */
  95     this.appState._state = store.state
  96     /**
  97      * Set input values
  98      */
  99     if ('restoreInputValues' in store) {
 100       let restoreInputValues = store.restoreInputValues
 101       setTimeout(restoreInputValues)
 102     }
 103
 104     this.appRef.tick()
 105     delete store.state
 106     delete store.restoreInputValues
 107   }
 108
 109   public hmrOnDestroy (store: StoreType) {
 110     const cmpLocation = this.appRef.components.map((cmp) => cmp.location.nativeElement)
 111     /**
 112      * Save state
 113      */
 114     const state = this.appState._state
 115     store.state = state
 116     /**
 117      * Recreate root elements
 118      */
 119     store.disposeOldHosts = createNewHosts(cmpLocation)
 120     /**
 121      * Save input values
 122      */
 123     store.restoreInputValues = createInputTransfer()
 124     /**
 125      * Remove styles
 126      */
 127     removeNgStyles()
 128   }
 129
 130   public hmrAfterDestroy (store: StoreType) {
 131     /**
 132      * Display new elements
 133      */
 134     store.disposeOldHosts()
 135     delete store.disposeOldHosts
 136   }
 137 }