Example resolver for render blocking

package.json

@@ -27,7 +27,7 @@
     "@angular/platform-server": "~5.0.0",
     "@angular/router": "~5.0.0",
     "@angular/upgrade": "~5.0.0",
-    "@splitsoftware/splitio": "^10.2.0",
+    "@splitsoftware/splitio": "^10.3.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.0",
     "zone.js": "^0.8.4"

src/app/app-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { FeaturesComponent }   from './features/features.component';
+
+// We'll only resolve Split here but we could potentially
+// use it for other prerrequisite data.
+import { AppResolver } from './app.resolver';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: FeaturesComponent, resolve: {
+    prerrequisitesReady: AppResolver
+  }}
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule {}

src/app/app.component.html

@@ -1,2 +1,3 @@
 <h1>{{title}}</h1>
-<app-features></app-features>
+<!-- Here's where our actual page will be -->
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'Example App Angular';
+  title = 'App component is kind of dumb, used for root <router-outlet>';
 }

src/app/app.module.ts

@@ -4,20 +4,26 @@ import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 
+import { AppRoutingModule } from './app-routing.module';
+
 // splitio sdk
 import { SplitioService } from './splitio.service';
+import { AppResolver } from './app.resolver';
 import { FeaturesComponent } from './features/features.component';
 
 @NgModule({
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule,
+    AppRoutingModule
   ],
   declarations: [
     AppComponent,
     FeaturesComponent
   ],
-  providers: [ 
+  providers: [
+    // Import the resolver
+    AppResolver,
     SplitioService
   ],
   bootstrap: [ AppComponent ]

src/app/app.resolver.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SplitioService } from './splitio.service';
+
+@Injectable()
+export class AppResolver implements Resolve<any> {
+  // Inject the service on the resolver.
+  constructor(private splitService: SplitioService) {}
+
+  resolve() {
+    // Use it on the resolve function and return a promise
+    // for the ready.
+    return this.splitService.getReadyPromise();
+  }
+}

src/app/features/features.component.ts

@@ -13,6 +13,6 @@ export class FeaturesComponent implements OnInit {
   constructor(public splitioService: SplitioService) { }
 
   ngOnInit() {
-    this.splitioService.initSdk();
+    this.splitioService.getTreatments();
   }
 }

src/app/splitio.service.ts

@@ -10,26 +10,18 @@ export class SplitioService {
   isReady: boolean = false;
   treatments: SplitIO.Treatments
   features: string[] = [
-    'feature_1',
-    'feature_2',
-    'feature_3'
+    'feature_1', 'feature_2'
   ];
 
-  constructor() { }
+  constructor() {
+    this.initSdk();
+  }
 
   initSdk(): void {
-    // Running the SDK in 'off-the-grid' Mode since authorizationKey : 'localhost'
-    // To bind a non 'off-the-grid' client, inject the real API Key
     this.splitio = SplitFactory({
       core: {
-        authorizationKey: 'localhost',
+        authorizationKey: 'your-api-key',
         key: 'customer-key'
-      },
-      // In non-localhost mode, this map is ignored.
-      features: {
-        feature_1: 'off',
-        feature_2: 'on',
-        feature_3: 'v2'
       }
     });
 
@@ -39,16 +31,20 @@ export class SplitioService {
     this.verifyReady();
   }
 
+  getReadyPromise(): Promise<boolean> {
+    return this.splitClient.ready().then(()=> true).catch(() => false);
+  }
+
   private verifyReady(): void {
     const isReadyEvent = fromEvent(this.splitClient, this.splitClient.Event.SDK_READY);
 
     const subscription = isReadyEvent.subscribe({
-      next() { 
+      next() {
         this.isReady = true;
-        console.log('Sdk ready: ', this.isReady);         
+        console.log('Sdk ready: ', this.isReady);
       },
-      error(err) { 
-        console.log('Sdk error: ', err); 
+      error(err) {
+        console.log('Sdk error: ', err);
         this.isReady = false;
       }
     });