How to use preboot - 10 common examples

let components = appRef.components;
        let prebootCode;
        // TODO(gdi2290): hide cache in (ngPreboot|UniversalPreboot)
        let key = (typeof _config.preboot === 'object') && JSON.stringify(_config.preboot) || null;
        let prebootEl;
        let el;
        let lastRef;
        try {
          if (key && NodePlatform._cache.has(key)) {
            prebootEl = NodePlatform._cache.get(key).prebootEl;
            // prebootCode = NodePlatform._cache.get(key);
          } else if (key && !prebootEl) {
            config.time && console.time('preboot insert: ' + config.id);
            prebootCode = parseFragment(''+
              '' +
            '');
            prebootEl = DOM.createElement('div');

            for (let i = 0; i < prebootCode.childNodes.length; i++) {
              DOM.appendChild(prebootEl, prebootCode.childNodes[i]);
            }
            NodePlatform._cache.set(key, {prebootCode, prebootEl});
            config.time && console.timeEnd('preboot insert: ' + config.id);
          }
          //  else {
          //   prebootCode = getInlineCode(_config.preboot);
          // }
          // assume last component is the last component selector
          // TODO(gdi2290): provide a better way to determine last component position
          lastRef = components[components.length - 1];

let components = appRef.components;
        let prebootCode = null;
        // TODO(gdi2290): hide cache in (ngPreboot|UniversalPreboot)
        let key = (typeof UNIVERSAL_CONFIG.preboot === 'object') && JSON.stringify(UNIVERSAL_CONFIG.preboot) || null;
        let prebootEl = null;
        let el = null;
        let lastRef = null;
        try {
          if (key && NodePlatform._cache.has(key)) {
            prebootEl = NodePlatform._cache.get(key).prebootEl;
            // prebootCode = NodePlatform._cache.get(key);
          } else if (key && !prebootEl) {
            config.time && console.time('id: ' + config.id + ' preboot insert: ');
            prebootCode = parseFragment('' +
              '' +
            '');
            prebootEl = DOM.createElement('div');
            DOM.appendChild(prebootEl, prebootCode.childNodes[0]);
            NodePlatform._cache.set(key, {prebootCode, prebootEl});
            config.time && console.timeEnd('id: ' + config.id + ' preboot insert: ');
          }
          //  else {
          //   prebootCode = getInlineCode(_config.preboot);
          // }
          // assume last component is the last component selector
          // TODO(gdi2290): provide a better way to determine last component position
          lastRef = components[components.length - 1];
          el = lastRef.location.nativeElement;
          DOM.insertAfter(el, prebootEl);
          // let script = parseFragment(prebootCode);

import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ServerModule } from '@angular/platform-server';
import { PrebootModule } from 'preboot';
import { AppComponent } from './app.component';
import { AppModuleShared } from './app.module';

import { TransferHttpCacheModule, StateTransferInitializerModule } from '@nguniversal/common';

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    // Our Common AppModule
    AppModuleShared,

    ServerModule,
    PrebootModule.withConfig({ appRoot: 'app-root' }),
    NoopAnimationsModule,

    TransferHttpCacheModule, // still needs fixes for 5.0
    //   Leave this commented out for now, as it breaks Server-renders
    //   Looking into fixes for this! - @MarkPieszak
    // StateTransferInitializerModule // <-- broken for the time-being with ASP.NET
  ]
})
export class AppModule {
  constructor() {}
}

import { AppComponent } from './app.component';
import { AppModuleShared } from './app.module';

export function getOriginUrl() {
  return window.location.origin;
}

export function getRequest() {
  // the Request object only lives on the server
  return { cookie: document.cookie };
}

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    PrebootModule.withConfig({ appRoot: 'app-root' }),
    BrowserAnimationsModule,

    // Our Common AppModule
    AppModuleShared
  ],
  providers: [
    {
      // We need this for our Http calls since they'll be using an ORIGIN_URL provided in main.server
      // (Also remember the Server requires Absolute URLs)
      provide: ORIGIN_URL,
      useFactory: getOriginUrl
    },
    {
      // The server provides these in main.server
      provide: REQUEST,
      useFactory: getRequest

appRoot: options.appRoots || ['body'],
        eventSelectors: [
            // for recording changes in form elements
            { selector: 'input,textarea', events: ['keypress', 'keyup', 'keydown', 'input', 'change'] },
            { selector: 'select,option', events: ['change'] },
            // when user hits return button in an input box
            { selector: 'input', events: ['keyup'], preventDefault: true, keyCodes: [13], freeze: true },
            // for tracking focus (no need to replay)
            { selector: 'input,textarea', events: ['focusin', 'focusout', 'mousedown', 'mouseup'], noReplay: true },
            { selector: 'button[type="submit"]', events: ['submit'], preventDefault: false, freeze: true },
            { selector: 'form', events: ['submit'], preventDefault: true, freeze: true },
            // user clicks on a button
            { selector: 'button:not([type="submit"])', events: ['click'], preventDefault: true, freeze: true }
        ]
      }, options.prebootOptions);
      const inlinePrebootCode = preboot.getInlineCode(prebootOptions);
      html = appendToHead(html, `\r\n\r\n`);

      // preboot_browser can replay events that were stored by the preboot code
      html = appendToBody(html, `\r\n
      `);
  }

  return html;
};

import { BrowserTransferStateModule } from '@angular/platform-browser';
import { BrowserPrebootModule } from 'preboot/browser';

export function getOriginUrl() {
  return window.location.origin;
}

export function getRequest() {
  // the Request object only lives on the server
  return { cookie: document.cookie };
}

@NgModule({
    bootstrap: [AppComponent],
    imports: [
        BrowserPrebootModule.replayEvents(),
        BrowserAnimationsModule,

        // Our Common AppModule
        AppModuleShared

    ],
    providers: [
        {
            // We need this for our Http calls since they'll be using an ORIGIN_URL provided in main.server
            // (Also remember the Server requires Absolute URLs)
            provide: ORIGIN_URL,
            useFactory: (getOriginUrl)
        }, {
            // The server provides these in main.server
            provide: REQUEST,
            useFactory: (getRequest)

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { AppModuleShared } from './app.module';
import { AppComponent } from './app.component';
import { ServerTransferStateModule } from '@angular/platform-server';

import { ServerPrebootModule } from 'preboot/server';

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    // Our Common AppModule
    AppModuleShared,

    ServerModule,
    ServerPrebootModule.recordEvents({ appRoot: 'app-root' }),
    NoopAnimationsModule,

    // HttpTransferCacheModule still needs fixes for 5.0
    //   Leave this commented out for now, as it breaks Server-renders
    //   Looking into fixes for this! - @MarkPieszak
    // ServerTransferStateModule // <-- broken for the time-being with ASP.NET
  ]
})
export class AppModule {

  constructor() { }

}

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ServerPrebootModule } from 'preboot/server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule, // 导入客户端根模块
    ServerModule,
    ServerPrebootModule.recordEvents({ appRoot: 'app-root' }),
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent],
  providers: []
})
export class AppServerModule {}

socket.on(MSG.IDLE, (response: PARAM_IDLE) => {

                debug('received IDLE from EEE', response.uid, response.url, response.html.length);

                debug('responseCache = ', response.exportedCache);

                const serialized = JSON.stringify(response.exportedCache);
                const script = ``;
                let superHTML: string = response.html.replace(/<\/head>/, script);


                if(this.preboot) {
                    const prebootOptions = {
                        appRoot: 'document.body'
                    };
                    const inlinePrebootCode = '';
                    superHTML = superHTML.replace(/<\/body>/, inlinePrebootCode);
                }

                if( Bridge_Pool.pool[response.uid].query.strategy === ENUM_CACHE_STATUS.RENDER_CACHE) {
                    const newUrl = new UrlCache(Bridge_Pool.pool[response.uid].query.url);
                    newUrl.set(superHTML, {}, (err, status) => {
                        if(err) {
                            ServerLog.Log.child({uid: response.uid, script: 'Bridge_S2'}).error({response: response, err: err});
                            throw err;
                        }
                        debug('Cache on Bridge_MSG_2.CACHE_IT status = ', status);
                    });
                }
                Bridge_Pool.sendHTML_to_Client(response.uid, superHTML);
                socket.emit(MSG.IDLE + response.uid);
            });

BrowserTransferStateModule,
} from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { PrebootModule } from 'preboot';

import { NgAisModule } from 'angular-instantsearch';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: 'my-app' }),
    PrebootModule.withConfig({ appRoot: 'app-root' }),
    HttpClientModule,
    BrowserTransferStateModule,
    NgAisModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}