diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
index 22ab277..7381a42 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
@@ -64,7 +64,7 @@
         line 0) Create an SVG Grouping and apply the onosZoomableOf directive to it,
             passing in the whole SVG canvas (#svgZoom)
         -->
-        <svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom">
+        <svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom" #onosZoom>
             <svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc>
             <!-- Template explanation
             Line 0) Create an instance of the onos-gridsvg component with the name gridFull
@@ -116,7 +116,7 @@
                    [hostLabelToggle]="prefsState.hlbls"
                    [showHosts]="prefsState.hosts"
                    [highlightPorts]="prefsState.porthl"
-                   [scale]="window.innerHeight / (window.innerWidth * zoomDirective.zoomCached.sc)"
+                   [scale]="window.innerHeight / (window.innerWidth * zoomDirective?.zoomCached.sc)"
                    (selectedNodeEvent)="nodeSelected($event)">
                 <svg:desc>The Force SVG component - contains all the devices, hosts and links</svg:desc>
             </svg:g>
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.spec.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.spec.ts
index 76dc2a4..29dab54 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.spec.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.spec.ts
@@ -149,6 +149,7 @@
 /**
  * ONOS GUI -- Topology View -- Unit Tests
  */
+// Skipping temporarily
 describe('TopologyComponent', () => {
     let fs: FnService;
     let ar: MockActivatedRoute;
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
index 35daf9d..0aeaee7 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import {
-    AfterContentInit,
     Component, HostListener, Inject, Input,
     OnDestroy,
     OnInit, SimpleChange,
@@ -147,11 +146,11 @@
 export class TopologyComponent implements OnInit, OnDestroy {
     @Input() bannerHeight: number = 48;
     // These are references to the components inserted in the template
-    @ViewChild(InstanceComponent) instance: InstanceComponent;
-    @ViewChild(DetailsComponent) details: DetailsComponent;
-    @ViewChild(BackgroundSvgComponent) background: BackgroundSvgComponent;
-    @ViewChild(ForceSvgComponent) force: ForceSvgComponent;
-    @ViewChild(ZoomableDirective) zoomDirective: ZoomableDirective;
+    @ViewChild(InstanceComponent, {static: true}) instance: InstanceComponent;
+    @ViewChild(DetailsComponent, {static: true}) details: DetailsComponent;
+    @ViewChild(BackgroundSvgComponent, {static: true}) background: BackgroundSvgComponent;
+    @ViewChild(ForceSvgComponent, {static: true}) force: ForceSvgComponent;
+    @ViewChild(ZoomableDirective, {static: true}) zoomDirective: ZoomableDirective;
 
     flashMsg: string = '';
     // These are used as defaults if nothing is set on the server
@@ -204,6 +203,8 @@
             this.doLion();
         }
 
+        this.log.warn('Constructor', this.zoomDirective);
+
         this.is.loadIconDef('active');
         this.is.loadIconDef('bgpSpeaker');
         this.is.loadIconDef('bird');
@@ -290,12 +291,21 @@
      */
     ngOnInit() {
         this.bindCommands();
+
         // The components from the template are handed over to TopologyService here
         // so that WebSocket responses can be passed back in to them
         // The handling of the WebSocket call is delegated out to the Topology
         // Service just to compartmentalize things a bit
         this.ts.init(this.instance, this.background, this.force);
 
+        // Scale the window initially - then after resize
+        const zoomMapExtents = ZoomUtils.zoomToWindowSize(
+            this.bannerHeight, this.window.innerWidth, this.window.innerHeight);
+        this.zoomDirective.changeZoomLevel(zoomMapExtents, true);
+        this.log.debug('TopologyComponent initialized',
+            this.bannerHeight, this.window.innerWidth, this.window.innerHeight,
+            zoomMapExtents);
+
         // For the 2.1 release to not listen to updates of prefs as they are
         // only the echo of what we have sent down and the event mechanism
         // does not discern between users. Can get confused if multiple windows open
@@ -304,14 +314,6 @@
         this.prefsState = this.ps.getPrefs(TOPO2_PREFS, this.prefsState);
         this.mapIdState = this.ps.getPrefs(TOPO_MAPID_PREFS, this.mapIdState);
         this.trs.init(this.force);
-
-        // Scale the window initially - then after resize
-        const zoomMapExtents = ZoomUtils.zoomToWindowSize(
-            this.bannerHeight, this.window.innerWidth, this.window.innerHeight);
-        this.zoomDirective.changeZoomLevel(zoomMapExtents, true);
-        this.log.debug('TopologyComponent initialized',
-            this.bannerHeight, this.window.innerWidth, this.window.innerHeight,
-            zoomMapExtents);
     }
 
     /**