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