almost fixed flickering (using preboot)

package.json

@@ -41,6 +41,7 @@
     "linkifyjs": "^2.1.8",
     "ng-zorro-antd": "^7.5.1",
     "node-sass": "^4.12.0",
+    "preboot": "^7.0.0",
     "rxjs": "~6.5.1",
     "source-map-explorer": "^2.0.1",
     "tslib": "^1.9.0",

src/app/app.module.ts

@@ -1,13 +1,13 @@
-import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
-import { NgModule, TRANSLATIONS, LOCALE_ID, TRANSLATIONS_FORMAT, MissingTranslationStrategy } from '@angular/core';
+import { BrowserModule, BrowserTransferStateModule, ɵgetDOM, DOCUMENT } from '@angular/platform-browser';
+import { NgModule, TRANSLATIONS, LOCALE_ID, TRANSLATIONS_FORMAT, MissingTranslationStrategy, APP_INITIALIZER, PLATFORM_ID } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NgZorroAntdModule, NZ_I18N, en_US, NZ_MESSAGE_CONFIG, NZ_NOTIFICATION_CONFIG } from 'ng-zorro-antd';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { registerLocaleData } from '@angular/common';
+import { registerLocaleData, isPlatformBrowser } from '@angular/common';
 
 import en from '@angular/common/locales/en';
 import bg from '@angular/common/locales/bg';
@@ -27,6 +27,8 @@ import { CookieService } from './core/services/cookie.service';
 
 import { TransferHttpCacheModule } from '@hapiness/ng-universal-transfer-http';
 
+import { PrebootModule } from 'preboot';
+
 
 declare const require; // Use the require method provided by webpack
 // const translations = require(`raw-loader!../locale/messages.bg.xlf`);
@@ -44,7 +46,8 @@ registerLocaleData(en); // bg
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'saasWebClient' }),
-    BrowserTransferStateModule,
+    PrebootModule.withConfig({ appRoot: 'app-root' }),
+    // BrowserTransferStateModule,
     TransferHttpCacheModule,
     FormsModule,
     ReactiveFormsModule,
@@ -57,6 +60,28 @@ registerLocaleData(en); // bg
     AppRoutingModule,
   ],
   providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: function(document: HTMLDocument, platformId: Object): Function {
+        return () => {
+          if (isPlatformBrowser(platformId)) {
+            const dom = ɵgetDOM();
+            const styles: any[] = Array.prototype.slice.apply(dom.querySelectorAll(document, `style[ng-transition]`));
+            styles.forEach(el => {
+              // Remove ng-transition attribute to prevent Angular appInitializerFactory
+              // to remove server styles before preboot complete
+              el.removeAttribute('ng-transition');
+            });
+            document.addEventListener('PrebootComplete', () => {
+              // After preboot complete, remove the server scripts
+              setTimeout(() => styles.forEach(el => dom.remove(el)));
+            });
+          }
+        };
+      },
+      deps: [DOCUMENT, PLATFORM_ID],
+      multi: true
+    },
     CookieService,
     {
         provide: 'req',

src/main.ts

@@ -11,5 +11,5 @@ if (environment.production) {
 
 document.addEventListener('DOMContentLoaded', () => {
   platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+    .catch(err => console.error(err));
 });