From fdc92189c8ce89aef7851d961da40775fee8b989 Mon Sep 17 00:00:00 2001
From: Daniel Wiehl <daniel.wiehl@sbb.ch>
Date: Tue, 12 Mar 2019 18:17:08 +0100
Subject: [PATCH] refactor: maintain view and viewpart registries in a single
 place and apply the grid in grid-component

This reduces the complexity of managing auxiliary routes and applying viewgrid changes.

The following changes were made:
- `WorkbenchUrlObserver` is the only place to listen for URL grid changes
- changed viewpart grid to be immutable
- maintain viewparts in `WorkbenchViewPartRegistry` in the same way as `WorkbenchViewRegistry` for views
- moved detach/attach logic of the viewparts to `ViewPartGridComponent` because responsible for showing the grid
---
 .../src/util/testing.util.ts                  |  14 +-
 .../src/lib/portal/wb-component-portal.ts     |   2 +-
 .../view-registry-synchronizer.service.ts     |  36 ----
 .../lib/routing/workbench-router.service.ts   |  12 +-
 .../lib/spec/view-part-grid.component.spec.ts |  32 ++--
 .../src/lib/spec/view-part-grid.spec.ts       |  17 +-
 .../view-part-grid-serializer.service.ts      |   4 +-
 .../view-part-grid-url-observer.service.ts    |  78 ---------
 .../view-part-grid.component.html             |   4 +-
 .../view-part-grid.component.ts               | 104 ++++++++++--
 .../view-part-grid/view-part-grid.model.ts    | 127 ++++++++++----
 .../view-part-grid/view-part-grid.service.ts  | 159 ------------------
 .../workbench-view-part-registry.service.ts   | 117 +++++++++++++
 .../view-part-sash-box.component.ts           |  10 +-
 .../view-part/workbench-view-part.service.ts  |  12 +-
 ...e.ts => workbench-url-observer.service.ts} | 104 +++++++-----
 .../workbench/src/lib/workbench.module.ts     |  12 +-
 .../workbench/src/lib/workbench.service.ts    |   8 +-
 18 files changed, 424 insertions(+), 428 deletions(-)
 delete mode 100644 projects/scion/workbench/src/lib/routing/view-registry-synchronizer.service.ts
 delete mode 100644 projects/scion/workbench/src/lib/view-part-grid/view-part-grid-url-observer.service.ts
 delete mode 100644 projects/scion/workbench/src/lib/view-part-grid/view-part-grid.service.ts
 create mode 100644 projects/scion/workbench/src/lib/view-part-grid/workbench-view-part-registry.service.ts
 rename projects/scion/workbench/src/lib/{routing/view-outlet-url-observer.service.ts => workbench-url-observer.service.ts} (52%)

diff --git a/projects/e2e/workbench-application-platform/src/util/testing.util.ts b/projects/e2e/workbench-application-platform/src/util/testing.util.ts
index 0fc4d355f..722785c2b 100644
--- a/projects/e2e/workbench-application-platform/src/util/testing.util.ts
+++ b/projects/e2e/workbench-application-platform/src/util/testing.util.ts
@@ -1,4 +1,4 @@
-import { $, browser, ElementFinder } from 'protractor';
+import { $, browser, ElementFinder, protractor } from 'protractor';
 
 /**
  * Switches browser testing context to the main document.
@@ -115,10 +115,18 @@ export async function expectActivityToShow(expected: { symbolicAppName: string;
   const ctx = `app=${expected.symbolicAppName}, activityCssClass=${expected.activityCssClass}, component=${expected.componentSelector}`;
 
   await switchToMainContext();
-  await expect($(`wb-activity-part .e2e-activity-panel.${expected.activityCssClass}`).isDisplayed()).toBeTruthy(`Expected 'e2e-activity-panel' to show [${ctx}]`);
-  await expect($(`iframe.e2e-activity.e2e-${expected.symbolicAppName}.${expected.activityCssClass}`).isDisplayed()).toBeTruthy(`Expected <iframe> to be displayed [${ctx}]`);
+
+  // wait until activity panel animation completed
+  const panelFinder = $(`wb-activity-part .e2e-activity-panel.${expected.activityCssClass}`);
+  await browser.wait(protractor.ExpectedConditions.presenceOf(panelFinder), 5000);
+  const iframeFinder = $(`iframe.e2e-activity.e2e-${expected.symbolicAppName}.${expected.activityCssClass}`);
+  await browser.wait(protractor.ExpectedConditions.presenceOf(iframeFinder), 5000);
+
+  await expect(panelFinder.isDisplayed()).toBeTruthy(`Expected 'e2e-activity-panel' to show [${ctx}]`);
+  await expect(iframeFinder.isDisplayed()).toBeTruthy(`Expected <iframe> to be displayed [${ctx}]`);
 
   await switchToIFrameContext([`e2e-${expected.symbolicAppName}`, 'e2e-activity', expected.activityCssClass]);
+
   await expect($(expected.componentSelector).isDisplayed()).toBeTruthy(`Expected component <${expected.componentSelector}> to show [${ctx}]`);
 }
 
diff --git a/projects/scion/workbench/src/lib/portal/wb-component-portal.ts b/projects/scion/workbench/src/lib/portal/wb-component-portal.ts
index 9e6bb0099..7c88adcba 100644
--- a/projects/scion/workbench/src/lib/portal/wb-component-portal.ts
+++ b/projects/scion/workbench/src/lib/portal/wb-component-portal.ts
@@ -62,7 +62,7 @@ export class WbComponentPortal<T> {
     }
 
     if (this.isDestroyed) {
-      throw Error('Invalid state: component is destroyed');
+      throw Error('[IllegalStateError] component is destroyed');
     }
 
     this.detachFromComponentTree();
diff --git a/projects/scion/workbench/src/lib/routing/view-registry-synchronizer.service.ts b/projects/scion/workbench/src/lib/routing/view-registry-synchronizer.service.ts
deleted file mode 100644
index 96f968173..000000000
--- a/projects/scion/workbench/src/lib/routing/view-registry-synchronizer.service.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Injectable, OnDestroy } from '@angular/core';
-import { ViewOutletAddEvent, ViewOutletUrlObserver } from './view-outlet-url-observer.service';
-import { WorkbenchViewRegistry } from '../workbench-view-registry.service';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
-import { ViewPartGridUrlObserver } from '../view-part-grid/view-part-grid-url-observer.service';
-
-/**
- * Keeps {WorkbenchViewRegistry} in sync with view outlets as specified in the application URL.
- *
- * If a new view is detected in the application URL, it is added to the registry, or removed otherwise.
- */
-@Injectable()
-export class ViewRegistrySynchronizer implements OnDestroy {
-
-  private readonly _destroy$ = new Subject<void>();
-
-  constructor(viewOutletUrlObserver: ViewOutletUrlObserver, viewRegistry: WorkbenchViewRegistry, gridObserver: ViewPartGridUrlObserver) {
-    viewOutletUrlObserver.viewOutletAdd$
-      .pipe(takeUntil(this._destroy$))
-      .subscribe((event: ViewOutletAddEvent) => {
-        const viewPartGrid = gridObserver.parseUrl(event.activationUrl);
-        viewRegistry.addViewOutlet(event.viewRef, viewPartGrid && viewPartGrid.isViewActive(event.viewRef) || false);
-      });
-
-    viewOutletUrlObserver.viewOutletRemove$
-      .pipe(takeUntil(this._destroy$))
-      .subscribe((viewRef: string) => {
-        viewRegistry.removeViewOutlet(viewRef);
-      });
-  }
-
-  public ngOnDestroy(): void {
-    this._destroy$.next();
-  }
-}
diff --git a/projects/scion/workbench/src/lib/routing/workbench-router.service.ts b/projects/scion/workbench/src/lib/routing/workbench-router.service.ts
index 927d1817c..d75fac309 100644
--- a/projects/scion/workbench/src/lib/routing/workbench-router.service.ts
+++ b/projects/scion/workbench/src/lib/routing/workbench-router.service.ts
@@ -12,10 +12,10 @@ import { Injectable } from '@angular/core';
 import { ACTIVITY_OUTLET_NAME, VIEW_GRID_QUERY_PARAM, VIEW_REF_PREFIX } from '../workbench.constants';
 import { ActivatedRoute, NavigationExtras, PRIMARY_OUTLET, Router, UrlSegment } from '@angular/router';
 import { InternalWorkbenchService } from '../workbench.service';
-import { ViewPartGridUrlObserver } from '../view-part-grid/view-part-grid-url-observer.service';
 import { WorkbenchViewRegistry } from '../workbench-view-registry.service';
 import { Defined } from '../defined.util';
 import { WorkbenchView } from '../workbench.model';
+import { WorkbenchViewPartRegistry } from '../view-part-grid/workbench-view-part-registry.service';
 
 /**
  * Provides workbench view navigation capabilities based on Angular Router.
@@ -61,7 +61,7 @@ export class InternalWorkbenchRouter implements WorkbenchRouter {
   constructor(private _router: Router,
               private _workbench: InternalWorkbenchService,
               private _viewRegistry: WorkbenchViewRegistry,
-              private _viewPartGridUrlObserver: ViewPartGridUrlObserver) {
+              private _viewPartRegistry: WorkbenchViewPartRegistry) {
   }
 
   public navigate(commandList: any[], extras: WbNavigationExtras = {}): Promise<boolean> {
@@ -93,10 +93,10 @@ export class InternalWorkbenchRouter implements WorkbenchRouter {
 
     switch (extras.target || 'blank') {
       case 'blank': {
+        const viewPartGrid = this._viewPartRegistry.grid;
         const newViewRef = this._viewRegistry.computeNextViewOutletIdentity();
-        const viewPartRef = extras.blankViewPartRef || (this._workbench.activeViewPartService && this._workbench.activeViewPartService.viewPartRef) || this._viewPartGridUrlObserver.snapshot.viewPartRefs()[0];
-        const grid = this._viewPartGridUrlObserver.snapshot.addView(viewPartRef, newViewRef).serialize();
-        return routeFn(newViewRef, grid);
+        const viewPartRef = extras.blankViewPartRef || (this._workbench.activeViewPartService && this._workbench.activeViewPartService.viewPartRef) || viewPartGrid.viewPartRefs()[0];
+        return routeFn(newViewRef, viewPartGrid.addView(viewPartRef, newViewRef).serialize());
       }
       case 'self': {
         if (!extras.selfViewRef) {
@@ -109,7 +109,7 @@ export class InternalWorkbenchRouter implements WorkbenchRouter {
           throw Error(`Invalid argument: '${extras.selfViewRef}' is not a valid view outlet.`);
         }
 
-        return routeFn(extras.selfViewRef, this._viewPartGridUrlObserver.snapshot.serialize());
+        return routeFn(extras.selfViewRef, this._viewPartRegistry.grid.serialize());
       }
       default: {
         throw Error('Not supported routing view target.');
diff --git a/projects/scion/workbench/src/lib/spec/view-part-grid.component.spec.ts b/projects/scion/workbench/src/lib/spec/view-part-grid.component.spec.ts
index e448018d6..784d1f5b0 100644
--- a/projects/scion/workbench/src/lib/spec/view-part-grid.component.spec.ts
+++ b/projects/scion/workbench/src/lib/spec/view-part-grid.component.spec.ts
@@ -15,7 +15,7 @@ import { WorkbenchModule } from '../workbench.module';
 import { ViewPartGridComponent } from '../view-part-grid/view-part-grid.component';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { ViewPartGridService } from '../view-part-grid/view-part-grid.service';
+import { WorkbenchViewPartRegistry } from '../view-part-grid/workbench-view-part-registry.service';
 import { WorkbenchRouter } from '../routing/workbench-router.service';
 import { advance } from './util/util.spec';
 
@@ -37,7 +37,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -66,7 +66,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -95,7 +95,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -124,7 +124,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -153,7 +153,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -176,8 +176,8 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const gridService = fixture.componentRef.injector.get(ViewPartGridService);
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPartRegistry = fixture.componentRef.injector.get(WorkbenchViewPartRegistry);
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -195,7 +195,7 @@ describe('ViewPartGridComponent', () => {
     viewPart1Component.moveViewToNewViewPart('view.3', 'east').then();
     advance(fixture);
 
-    const viewPart2 = gridService.resolveViewPartElseThrow('viewpart.2');
+    const viewPart2 = viewPartRegistry.getElseThrow('viewpart.2');
     const viewPart2Component = viewPart2.portal.componentRef.instance;
 
     // Move View 2 to the new ViewPart
@@ -224,7 +224,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -263,7 +263,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -302,7 +302,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -341,7 +341,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -380,8 +380,8 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const gridService = fixture.componentRef.injector.get(ViewPartGridService);
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPartRegistry = fixture.componentRef.injector.get(WorkbenchViewPartRegistry);
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -409,7 +409,7 @@ describe('ViewPartGridComponent', () => {
     });
 
     // Move View 2 to a new ViewPart in the south of ViewPart 2
-    const viewPart2Component = gridService.resolveViewPartElseThrow('viewpart.2').portal.componentRef.instance;
+    const viewPart2Component = viewPartRegistry.getElseThrow('viewpart.2').portal.componentRef.instance;
     expect(viewPart2Component).toBeTruthy();
 
     viewPart2Component.moveViewToNewViewPart('view.2', 'south').then();
diff --git a/projects/scion/workbench/src/lib/spec/view-part-grid.spec.ts b/projects/scion/workbench/src/lib/spec/view-part-grid.spec.ts
index 38010e956..371a175db 100644
--- a/projects/scion/workbench/src/lib/spec/view-part-grid.spec.ts
+++ b/projects/scion/workbench/src/lib/spec/view-part-grid.spec.ts
@@ -24,14 +24,15 @@ describe('ViewPartGrid', () => {
 
   it('allows to set a root viewpart', inject([ViewPartGridSerializerService], (serializer: ViewPartGridSerializerService) => {
     const rootViewPart: ViewPartInfoArray = ['viewPart-root'];
-    const testee = new ViewPartGrid(rootViewPart, serializer);
+
+    const testee = new ViewPartGrid(serializer.serializeGrid(rootViewPart), serializer);
     expect(testee.root).toBe(rootViewPart);
   }));
 
   it('allows to add a sibling viewpart', inject([ViewPartGridSerializerService], (serializer: ViewPartGridSerializerService) => {
     const leftViewPart: ViewPartInfoArray = ['viewPart-left', 'view-2', 'view-1', 'view-2', 'view-3'];
 
-    const testee = new ViewPartGrid(leftViewPart, serializer);
+    const testee = new ViewPartGrid(serializer.serializeGrid(leftViewPart), serializer);
     testee.addSiblingViewPart('east', 'viewPart-left', 'viewPart-right');
 
     expect(testee.root).toEqual({
@@ -47,13 +48,13 @@ describe('ViewPartGrid', () => {
     const leftViewPart = ['viewPart-left', 'view-2', 'view-1', 'view-2', 'view-3'];
     const rightViewPart = ['viewPart-right', 'view-5', 'view-4', 'view-5', 'view-6'];
 
-    const testee = new ViewPartGrid({
+    const testee = new ViewPartGrid(serializer.serializeGrid({
       id: 1,
       sash1: leftViewPart,
       sash2: rightViewPart,
       splitter: .5,
       hsplit: false
-    }, serializer);
+    }), serializer);
 
     testee.removeViewPart('viewPart-left');
     expect(testee.root).toEqual(rightViewPart);
@@ -63,13 +64,13 @@ describe('ViewPartGrid', () => {
     const leftViewPart = ['viewPart-left', 'view-2', 'view-1', 'view-2', 'view-3'];
     const rightViewPart = ['viewPart-right', 'view-5', 'view-4', 'view-5', 'view-6'];
 
-    const testee = new ViewPartGrid({
+    const testee = new ViewPartGrid(serializer.serializeGrid({
       id: 1,
       sash1: leftViewPart,
       sash2: rightViewPart,
       splitter: .5,
       hsplit: false
-    }, serializer);
+    }), serializer);
 
     testee.removeViewPart('viewPart-right');
     expect(testee.root).toEqual(leftViewPart);
@@ -77,7 +78,7 @@ describe('ViewPartGrid', () => {
 
   it('allows to remove the root viewpart', inject([ViewPartGridSerializerService], (serializer: ViewPartGridSerializerService) => {
     const rootViewPart = ['viewPart-root', 'view-2', 'view-1', 'view-2', 'view-3'];
-    const testee = new ViewPartGrid(rootViewPart, serializer);
+    const testee = new ViewPartGrid(serializer.serializeGrid(rootViewPart), serializer);
 
     testee.removeViewPart('viewPart-root');
 
@@ -106,7 +107,7 @@ describe('ViewPartGrid', () => {
     const viewPart_6 = ['viewPart-6'];
 
     // Set ViewPart 1 as root viewpart
-    const testee = new ViewPartGrid(viewPart_1, serializer);
+    const testee = new ViewPartGrid(serializer.serializeGrid(viewPart_1), serializer);
     expect(testee.root).toEqual(viewPart_1, 'Add ViewPart 1');
 
     // Add ViewPart 2 to the east of ViewPart 2
diff --git a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid-serializer.service.ts b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid-serializer.service.ts
index 4a0c7a844..0314f39fa 100644
--- a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid-serializer.service.ts
+++ b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid-serializer.service.ts
@@ -17,11 +17,11 @@ import { VIEW_PART_REF_PREFIX } from '../workbench.constants';
 @Injectable()
 export class ViewPartGridSerializerService {
 
-  public parseGrid(serializedGrid: string): ViewPartSashBox | ViewPartInfoArray {
+  public parseGrid(serializedGrid: string): ViewPartSashBox | ViewPartInfoArray | null {
     return serializedGrid && JSON.parse(atob(serializedGrid)) || null;
   }
 
-  public serializeGrid(grid: ViewPartSashBox | ViewPartInfoArray): string {
+  public serializeGrid(grid: ViewPartSashBox | ViewPartInfoArray): string | null {
     return grid && btoa(JSON.stringify(grid)) || null;
   }
 
diff --git a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid-url-observer.service.ts b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid-url-observer.service.ts
deleted file mode 100644
index 2bf971c87..000000000
--- a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid-url-observer.service.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * Copyright (c) 2018 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- *  SPDX-License-Identifier: EPL-2.0
- */
-
-import { Injectable, OnDestroy } from '@angular/core';
-import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
-import { ViewPartGrid } from './view-part-grid.model';
-import { ViewPartGridSerializerService } from './view-part-grid-serializer.service';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { VIEW_GRID_QUERY_PARAM } from '../workbench.constants';
-import { ActivatedRoute, Router } from '@angular/router';
-
-/**
- * Provides the ability to watch for changes being made to the ViewPart grid in the URL.
- *
- * @see VIEW_GRID_QUERY_PARAM
- */
-@Injectable()
-export class ViewPartGridUrlObserver implements OnDestroy {
-
-  private readonly _destroy$ = new Subject<void>();
-
-  private _serializedGrid$ = new BehaviorSubject<string>(null);
-
-  constructor(route: ActivatedRoute, private _router: Router, private _serializer: ViewPartGridSerializerService) {
-    route
-      .queryParamMap
-      .pipe(
-        map(queryParams => queryParams.get(VIEW_GRID_QUERY_PARAM) || this._serializer.emptySerializedGrid()),
-        distinctUntilChanged(),
-        takeUntil(this._destroy$)
-      )
-      .subscribe(this._serializedGrid$);
-  }
-
-  /**
-   * Parses the given URL for a viewpart grid, or returns `null` if not set.
-   */
-  public parseUrl(url: string): ViewPartGrid {
-    const serializedGrid = this._router.parseUrl(url).queryParamMap.get(VIEW_GRID_QUERY_PARAM);
-    return serializedGrid && this.createViewPartGrid(serializedGrid) || null;
-  }
-
-  /**
-   * Returns a copy of the current grid object, meaning that modifications to that grid object have no side effect.
-   */
-  public get snapshot(): ViewPartGrid {
-    return this.createViewPartGrid(this._serializedGrid$.value);
-  }
-
-  /**
-   * Emits if the viewpart grid changes via application URL.
-   *
-   * Each execution chain gets its separate copy of the grid object, meaning that modifications to that grid object
-   * have no side effect to other subscription's grid object.
-   */
-  public get observe$(): Observable<ViewPartGrid> {
-    return this._serializedGrid$
-      .pipe(
-        distinctUntilChanged(),
-        map(serializedGrid => this.createViewPartGrid(serializedGrid))
-      );
-  }
-
-  private createViewPartGrid(serializedGrid: string): ViewPartGrid {
-    return new ViewPartGrid(this._serializer.parseGrid(serializedGrid), this._serializer);
-  }
-
-  public ngOnDestroy(): void {
-    this._destroy$.next();
-  }
-}
diff --git a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.component.html b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.component.html
index 257e17126..bc2aba05d 100644
--- a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.component.html
+++ b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.component.html
@@ -1,2 +1,2 @@
-<wb-view-part-sash-box *ngIf="rootAsSashBox as sashBox" [sashBox]="sashBox"></wb-view-part-sash-box>
-<wb-portal-outlet *ngIf="rootAsViewPartPortal as viewPartPortal" [wbPortal]="viewPartPortal"></wb-portal-outlet>
+<wb-view-part-sash-box *ngIf="sashBox" [sashBox]="sashBox"></wb-view-part-sash-box>
+<wb-portal-outlet *ngIf="viewPartPortal" [wbPortal]="viewPartPortal"></wb-portal-outlet>
diff --git a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.component.ts b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.component.ts
index e76228943..c9f523032 100644
--- a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.component.ts
+++ b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.component.ts
@@ -8,46 +8,114 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
 import { WbComponentPortal } from '../portal/wb-component-portal';
-import { ViewPartGridService } from './view-part-grid.service';
+import { WorkbenchViewPartRegistry } from './workbench-view-part-registry.service';
 import { VIEW_PART_REF_INDEX, ViewPartInfoArray, ViewPartSashBox } from './view-part-grid-serializer.service';
 import { ViewPartComponent } from '../view-part/view-part.component';
+import { noop, Subject } from 'rxjs';
+import { pairwise, takeUntil } from 'rxjs/operators';
+import { ViewPartGrid, ViewPartGridNode } from './view-part-grid.model';
 
 /**
  * Allows the arrangement of viewparts in a grid.
  *
- * The grid is a tree which consists of sash boxes and portals.
+ * The grid is a tree of nested sash boxes and viewpart portals.
  * A sash box is the container for two sashes, which itself is either a portal or a sash box, respectively.
  */
 @Component({
   selector: 'wb-view-part-grid',
   templateUrl: './view-part-grid.component.html',
   styleUrls: ['./view-part-grid.component.scss'],
-  providers: [ViewPartGridService]
 })
-export class ViewPartGridComponent {
+export class ViewPartGridComponent implements OnDestroy {
 
-  constructor(private _gridService: ViewPartGridService) {
-  }
+  private _destroy$ = new Subject<void>();
 
   /**
-   * Returns the root sash box of the grid, or 'null' if not having a nested grid.
+   * Reference to the root grid node, which is either a sashbox or a viewpart.
+   *
+   * @see viewPartPortal
+   * @see sashBox
    */
-  public get rootAsSashBox(): ViewPartSashBox {
-    const root = this.root;
-    return !Array.isArray(root) ? root : null;
-  }
+  public root: ViewPartSashBox | ViewPartInfoArray;
+
+  /**
+   * Reference to the root viewpart of the grid, or 'null' if having a nested grid.
+   */
+  public viewPartPortal: WbComponentPortal<ViewPartComponent>;
 
   /**
-   * Returns the root portal of the grid, or 'null' if having a nested grid.
+   * Reference to the root sash box of the grid, or 'null' if not having a nested grid.
    */
-  public get rootAsViewPartPortal(): WbComponentPortal<ViewPartComponent> {
-    const root = this.root;
-    return Array.isArray(root) ? this._gridService.resolveViewPartElseThrow(root[VIEW_PART_REF_INDEX]).portal : null;
+  public sashBox: ViewPartSashBox;
+
+  constructor(private _viewPartRegistry: WorkbenchViewPartRegistry, cd: ChangeDetectorRef) {
+    this._viewPartRegistry.grid$
+      .pipe(
+        pairwise(),
+        takeUntil(this._destroy$),
+      )
+      .subscribe(([prevGrid, currGrid]: [ViewPartGrid, ViewPartGrid]) => {
+        // Determine the portals which are about to be re-parented in the DOM, and detach them temporarily from Angular component tree,
+        // so they are not destroyed while being re-parented.
+        const reattachFn = this.detachPortalsToBeMovedFromComponentTree(prevGrid, currGrid);
+
+        // Set the new grid.
+        this.root = currGrid.root;
+        this.sashBox = !Array.isArray(this.root) ? this.root : null;
+        this.viewPartPortal = Array.isArray(this.root) ? this._viewPartRegistry.getElseThrow(this.root[VIEW_PART_REF_INDEX]).portal : null;
+
+        // Trigger a change detection cycle to flush the new grid to the DOM.
+        cd.detectChanges();
+
+        // Re-attach detached portals.
+        reattachFn();
+      });
   }
 
-  public get root(): ViewPartSashBox | ViewPartInfoArray {
-    return this._gridService.grid && this._gridService.grid.root || null;
+  public ngOnDestroy(): void {
+    this._destroy$.next();
+  }
+
+  /**
+   * Determines the portals which are about to be re-parented in the DOM, and detaches them from Angular component tree,
+   * so they are not destroyed while being re-parented.
+   *
+   * Returns a function to attach the detached portals to the Angular component tree anew.
+   */
+  private detachPortalsToBeMovedFromComponentTree(prevGrid: ViewPartGrid, newGrid: ViewPartGrid): () => void {
+    if (!prevGrid) {
+      return noop; // no current grid in place, so no portal is moved
+    }
+
+    // Function to compute the path of a ViewPart to its root sash box
+    const computePathToRootFn = (node: ViewPartGridNode): string => {
+      return node.path.map(it => it.id).join(',');
+    };
+
+    // Compute all ViewPart root paths of the new grid
+    const newViewPartRootPaths = new Map<string, string>();
+    newGrid.visit((newNode: ViewPartGridNode): boolean => {
+      newViewPartRootPaths.set(newNode.viewPartRef, computePathToRootFn(newNode));
+      return true;
+    });
+
+    // Compare ViewPart root paths of the current and the new grid.
+    // If the path changed, the portal will be moved and is therefore detached from Angular component tree.
+    const portalsToBeMoved: WbComponentPortal<any>[] = [];
+    prevGrid.visit((prevNode: ViewPartGridNode): boolean => {
+      const prevPathToRoot = computePathToRootFn(prevNode);
+      const newPathToRoot = newViewPartRootPaths.get(prevNode.viewPartRef);
+
+      if (newPathToRoot !== prevPathToRoot) {
+        const viewPart = this._viewPartRegistry.getElseThrow(prevNode.viewPartRef);
+        portalsToBeMoved.push(viewPart.portal);
+      }
+      return true;
+    });
+
+    portalsToBeMoved.forEach(portal => portal.detach());
+    return (): void => portalsToBeMoved.forEach(portal => portal.attach());
   }
 }
diff --git a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.model.ts b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.model.ts
index 89b4b0fab..ebe12a064 100644
--- a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.model.ts
+++ b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.model.ts
@@ -15,13 +15,16 @@ import { ACTIVE_VIEW_REF_INDEX, VIEW_PART_REF_INDEX, VIEW_REFS_START_INDEX, View
 /**
  * Represents the arrangement of viewparts in a grid and provides methods to modify the grid.
  *
- * The grid is serializable into a URL string.
- * It is a tree which consists of sash boxes {ViewPartSashBox} and viewpart information {ViewPartInfoArray}.
+ * {ViewPartGrid} is an immutable object, meaning that modifications have no side effect. The grid is serializable into a URL string.
+ *
+ * The grid is a tree of {ViewPartSashBox} and {ViewPartInfoArray} objects.
  */
 export class ViewPartGrid {
 
-  constructor(private _root: ViewPartSashBox | ViewPartInfoArray,
-              private _serializer: ViewPartGridSerializerService) {
+  private _root: ViewPartSashBox | ViewPartInfoArray;
+
+  constructor(serializedGrid: string, private _serializer: ViewPartGridSerializerService) {
+    this._root = this._serializer.parseGrid(serializedGrid || this._serializer.emptySerializedGrid());
   }
 
   /**
@@ -31,10 +34,79 @@ export class ViewPartGrid {
     return this._root;
   }
 
+  /**
+   * Returns a new copy of this grid.
+   */
+  public clone(): ViewPartGrid {
+    const serializedGrid = this._serializer.serializeGrid(this._root);
+    return new ViewPartGrid(serializedGrid, this._serializer);
+  }
+
   /**
    * Adds a view to the specified viewpart, and activates it.
+   *
+   * Returns a copy of this grid with the specified view added.
+   */
+  public addView(viewPartRef: string, viewRef: string): ViewPartGrid {
+    return this.clone()._addView(viewPartRef, viewRef);
+  }
+
+  /**
+   * Removes a view and activates the preceding view.
+   * In case the view was the last view of the viewpart, the viewpart is removed as well.
+   *
+   * Returns a copy of this grid with the specified view removed.
    */
-  public addView(viewPartRef: string, viewRef: string): this {
+  public removeView(viewRef: string): ViewPartGrid {
+    return this.clone()._removeView(viewRef);
+  }
+
+  /**
+   * Swaps two views of the specified viewpart.
+   *
+   * Returns a copy of this grid with the specified views switched.
+   */
+  public swapViews(viewPartRef: string, viewRef1: string, viewRef2: string): ViewPartGrid {
+    return this.clone()._swapViews(viewPartRef, viewRef1, viewRef2);
+  }
+
+  /**
+   * Activates a view of the specified viewpart.
+   *
+   * Returns a copy of this grid with the specified view activated.
+   */
+  public activateView(viewPartRef: string, viewRef: string): ViewPartGrid {
+    return this.clone()._activateView(viewPartRef, viewRef);
+  }
+
+  /**
+   * Sets the splitter position.
+   *
+   * Returns a copy of this grid with the specified splitter position changed.
+   */
+  public splitPosition(sashBoxId: number, splitter: number): ViewPartGrid {
+    return this.clone()._splitPosition(sashBoxId, splitter);
+  }
+
+  /**
+   * Adds a new viewpart as a sibling of another viewpart in the region as specified.
+   *
+   * Returns a copy of this grid with the specified viewpart added.
+   */
+  public addSiblingViewPart(region: Region, anchorViewPartRef: string, newViewPartRef: string): ViewPartGrid {
+    return this.clone()._addSiblingViewPart(region, anchorViewPartRef, newViewPartRef);
+  }
+
+  /**
+   * Removes a viewpart from the grid.
+   *
+   * Returns a copy of this grid with the specified viewpart removed.
+   */
+  public removeViewPart(viewPartRef: string): ViewPartGrid {
+    return this.clone()._removeViewPart(viewPartRef);
+  }
+
+  private _addView(viewPartRef: string, viewRef: string): this {
     const viewPartInfoArray = this.getViewPartElseThrow(viewPartRef).viewPartInfoArray;
 
     // Add the view and make it the active view
@@ -44,11 +116,7 @@ export class ViewPartGrid {
     return this;
   }
 
-  /**
-   * Removes a view and activates the preceding view.
-   * In case the view was the last view of the viewpart, the viewpart is removed as well.
-   */
-  public removeView(viewRef: string): this {
+  private _removeView(viewRef: string): this {
     const viewPartRef = this.findContainingViewPartElseThrow(viewRef);
     const viewPartInfoArray = this.getViewPartElseThrow(viewPartRef).viewPartInfoArray;
 
@@ -72,16 +140,13 @@ export class ViewPartGrid {
     // Remove viewpart if its last view is closed.
     const lastView = !(viewPartInfoArray.length > VIEW_REFS_START_INDEX);
     if (lastView) {
-      this.removeViewPart(viewPartRef);
+      this._removeViewPart(viewPartRef);
     }
 
     return this;
   }
 
-  /**
-   * Swaps two views of the specified viewpart.
-   */
-  public swapViews(viewPartRef: string, viewRef1: string, viewRef2: string): this {
+  private _swapViews(viewPartRef: string, viewRef1: string, viewRef2: string): this {
     const viewPartInfoArray = this.getViewPartElseThrow(viewPartRef).viewPartInfoArray;
 
     const view1Index = viewPartInfoArray.indexOf(viewRef1, VIEW_REFS_START_INDEX);
@@ -98,10 +163,7 @@ export class ViewPartGrid {
     return this;
   }
 
-  /**
-   * Activates a view of the specified viewpart.
-   */
-  public activateView(viewPartRef: string, viewRef: string): this {
+  private _activateView(viewPartRef: string, viewRef: string): this {
     const viewPartInfoArray = this.getViewPartElseThrow(viewPartRef).viewPartInfoArray;
     if (viewPartInfoArray.indexOf(viewRef, VIEW_REFS_START_INDEX) === -1) {
       throw Error(`Illegal argument. View not found in viewpart [viewPartRef=${viewPartRef}, viewRef=${viewRef}]`);
@@ -110,10 +172,7 @@ export class ViewPartGrid {
     return this;
   }
 
-  /**
-   * Sets the splitter position.
-   */
-  public splitPosition(sashBoxId: number, splitter: number): this {
+  private _splitPosition(sashBoxId: number, splitter: number): this {
     let sashBox: ViewPartSashBox;
     this.visit(() => true, (it: ViewPartSashBox): boolean => {
       if (it.id === sashBoxId) {
@@ -131,10 +190,7 @@ export class ViewPartGrid {
     return this;
   }
 
-  /**
-   * Adds a new viewpart as a sibling of another viewpart in the region as specified.
-   */
-  public addSiblingViewPart(region: Region, anchorViewPartRef: string, newViewPartRef: string): this {
+  private _addSiblingViewPart(region: Region, anchorViewPartRef: string, newViewPartRef: string): this {
     if (!anchorViewPartRef) {
       throw Error('anchor viewpart must not be null');
     }
@@ -158,19 +214,18 @@ export class ViewPartGrid {
     // Insert the new sash box into the grid
     if (parentSashBox === null) {
       this._root = newSashBox;
-    } else if (parentSashBox.sash1 === anchorViewPartInfoArray) {
+    }
+    else if (parentSashBox.sash1 === anchorViewPartInfoArray) {
       parentSashBox.sash1 = newSashBox;
-    } else {
+    }
+    else {
       parentSashBox.sash2 = newSashBox;
     }
 
     return this;
   }
 
-  /**
-   * Removes a viewpart from the grid.
-   */
-  public removeViewPart(viewPartRef: string): this {
+  private _removeViewPart(viewPartRef: string): this {
     const viewPartNode = this.getViewPartElseThrow(viewPartRef);
     const viewPartInfoArray = viewPartNode.viewPartInfoArray;
     if (this._root === viewPartInfoArray) {
@@ -185,9 +240,11 @@ export class ViewPartGrid {
     const parentSashBox = viewPartNode.path[viewPartNode.path.length - 2] || null;
     if (parentSashBox === null) {
       this._root = siblingSash;
-    } else if (parentSashBox.sash1 === containingSashBox) {
+    }
+    else if (parentSashBox.sash1 === containingSashBox) {
       parentSashBox.sash1 = siblingSash;
-    } else {
+    }
+    else {
       parentSashBox.sash2 = siblingSash;
     }
 
diff --git a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.service.ts b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.service.ts
deleted file mode 100644
index 8c664e8b1..000000000
--- a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid.service.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-/*
- * Copyright (c) 2018 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- *  SPDX-License-Identifier: EPL-2.0
- */
-
-import { ChangeDetectorRef, ComponentFactoryResolver, Injectable, Injector, IterableDiffers, OnDestroy } from '@angular/core';
-import { WbComponentPortal } from '../portal/wb-component-portal';
-import { ViewPartComponent } from '../view-part/view-part.component';
-import { delay, takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
-import { PortalInjector } from '@angular/cdk/portal';
-import { InternalWorkbenchViewPart, WorkbenchViewPart } from '../workbench.model';
-import { ViewPartGridUrlObserver } from './view-part-grid-url-observer.service';
-import { ViewPartGrid, ViewPartGridNode } from './view-part-grid.model';
-import { WorkbenchLayoutService } from '../workbench-layout.service';
-import { WorkbenchViewRegistry } from '../workbench-view-registry.service';
-
-/**
- * Controls the instantiation and disposal of workbench viewparts and manages the viewpart registry.
- */
-@Injectable()
-export class ViewPartGridService implements OnDestroy {
-
-  private readonly _destroy$ = new Subject<void>();
-  private readonly _viewPartRegistry = new Map<string, InternalWorkbenchViewPart>();
-
-  public grid: ViewPartGrid;
-
-  constructor(private _viewRegistry: WorkbenchViewRegistry,
-              private _viewPartGridUrlObserver: ViewPartGridUrlObserver,
-              private _differs: IterableDiffers,
-              private _injector: Injector,
-              private _componentFactoryResolver: ComponentFactoryResolver,
-              private _cd: ChangeDetectorRef,
-              private _layoutService: WorkbenchLayoutService) {
-    this.observeGridChanges();
-  }
-
-  private observeGridChanges(): void {
-    const viewPartsDiffer = this._differs.find([]).create<string>();
-
-    this._viewPartGridUrlObserver.observe$
-      .pipe(
-        delay(0), // process the grid after routing completed
-        takeUntil(this._destroy$)
-      )
-      .subscribe((newGrid: ViewPartGrid) => {
-        // Determine the portals which are re-parented in the DOM, and detach them from
-        // Angular component tree, so they are not destroyed while being re-parented.
-        const reattachFn = this.detachPortalsToBeMovedFromComponentTree(this.grid, newGrid);
-
-        // Register and instantiate new ViewParts, and remove and destroy ViewParts which are no longer used
-        const viewPartsChange = viewPartsDiffer.diff(newGrid.viewPartRefs());
-        if (viewPartsChange) {
-          viewPartsChange.forEachRemovedItem(({item}) => {
-            this._viewPartRegistry.get(item).portal.destroy();
-            this._viewPartRegistry.delete(item);
-          });
-          viewPartsChange.forEachAddedItem(({item}) => {
-            this._viewPartRegistry.set(item, this.createWorkbenchViewPart(item));
-          });
-        }
-
-        // Update ViewPart objects
-        newGrid.visit((it: ViewPartGridNode): boolean => {
-          const viewPart = this.resolveViewPartElseThrow(it.viewPartRef);
-          viewPart.viewRefs = it.viewRefs;
-          viewPart.activeViewRef = it.activeViewRef;
-          return true;
-        });
-
-        // Install the new grid
-        this.grid = newGrid;
-        // Enforce a change detection cycle, so the grid is flushed to the DOM
-        this._cd.detectChanges();
-        // Re-attach portals since the effective grid is in place
-        reattachFn && reattachFn();
-        // Notify about layout change
-        this._layoutService.afterGridChange$.next();
-      });
-  }
-
-  private createWorkbenchViewPart(viewPartRef: string): InternalWorkbenchViewPart {
-    const portal = new WbComponentPortal<ViewPartComponent>(this._componentFactoryResolver, ViewPartComponent);
-    const viewPart = new InternalWorkbenchViewPart(viewPartRef, portal);
-
-    const injectionTokens = new WeakMap();
-    injectionTokens.set(WorkbenchViewPart, viewPart);
-    injectionTokens.set(InternalWorkbenchViewPart, viewPart);
-    portal.init({injector: new PortalInjector(this._injector, injectionTokens)});
-
-    return viewPart;
-  }
-
-  public resolveViewPartElseThrow(viewPartRef: string): InternalWorkbenchViewPart {
-    if (!viewPartRef) {
-      throw Error('Illegal argument: blankViewPartRef must not be null');
-    }
-
-    const viewPart = this._viewPartRegistry.get(viewPartRef);
-    if (!viewPart) {
-      throw Error('Illegal state: viewpart not contained in viewpart registry');
-    }
-    return viewPart;
-  }
-
-  /**
-   * Determines the portals which are re-parented in the DOM, and detaches them from Angular component tree,
-   * so they are not destroyed while being re-parented.
-   *
-   * Returns a function to attach the detached portals to the Angular component tree anew.
-   */
-  private detachPortalsToBeMovedFromComponentTree(currentGrid: ViewPartGrid, newGrid: ViewPartGrid): () => void {
-    if (!currentGrid) {
-      return; // no current grid in place, so no portal is moved
-    }
-
-    // Function to compute the path of a ViewPart to its root sash box
-    const computePathToRootFn = (node: ViewPartGridNode): string => {
-      return node.path.map(it => it.id).join(',');
-    };
-
-    // Compute all ViewPart root paths of the new grid
-    const newViewPartRootPaths = new Map<string, string>();
-    newGrid.visit((newNode: ViewPartGridNode): boolean => {
-      newViewPartRootPaths.set(newNode.viewPartRef, computePathToRootFn(newNode));
-      return true;
-    });
-
-    // Compare ViewPart root paths of the current and the new grid.
-    // If the path changed, the portal will be moved and is therefore detached from Angular component tree.
-    const portalsToBeMoved: WbComponentPortal<any>[] = [];
-    currentGrid.visit((currentNode: ViewPartGridNode): boolean => {
-      const currentPathToRoot = computePathToRootFn(currentNode);
-      const newPathToRoot = newViewPartRootPaths.get(currentNode.viewPartRef);
-      const viewPart = this._viewPartRegistry.get(currentNode.viewPartRef);
-
-      if (viewPart && newPathToRoot !== currentPathToRoot) {
-        portalsToBeMoved.push(viewPart.portal, ...viewPart.viewRefs
-          .map(viewRef => this._viewRegistry.getElseNull(viewRef))
-          .filter(Boolean)
-          .map(view => view.portal));
-      }
-      return true;
-    });
-
-    portalsToBeMoved.forEach(portal => portal.detach());
-    return (): void => portalsToBeMoved.forEach(portal => portal.attach());
-  }
-
-  public ngOnDestroy(): void {
-    this._destroy$.next();
-  }
-}
diff --git a/projects/scion/workbench/src/lib/view-part-grid/workbench-view-part-registry.service.ts b/projects/scion/workbench/src/lib/view-part-grid/workbench-view-part-registry.service.ts
new file mode 100644
index 000000000..ebbcf0d6e
--- /dev/null
+++ b/projects/scion/workbench/src/lib/view-part-grid/workbench-view-part-registry.service.ts
@@ -0,0 +1,117 @@
+/*
+ * Copyright (c) 2018 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+import { ComponentFactoryResolver, Injectable, Injector, IterableDiffers } from '@angular/core';
+import { WbComponentPortal } from '../portal/wb-component-portal';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { PortalInjector } from '@angular/cdk/portal';
+import { InternalWorkbenchViewPart, WorkbenchViewPart } from '../workbench.model';
+import { ViewPartGrid, ViewPartGridNode } from './view-part-grid.model';
+import { WorkbenchLayoutService } from '../workbench-layout.service';
+import { VIEW_PART_COMPONENT_TYPE } from '../workbench.constants';
+
+/**
+ * Registry for {WorkbenchViewPart} objects.
+ */
+@Injectable()
+export class WorkbenchViewPartRegistry {
+
+  private readonly _viewPartRegistry = new Map<string, InternalWorkbenchViewPart>();
+  private readonly _grid$ = new BehaviorSubject<ViewPartGrid>(null);
+
+  constructor(private _differs: IterableDiffers,
+              private _injector: Injector,
+              private _componentFactoryResolver: ComponentFactoryResolver,
+              private _layoutService: WorkbenchLayoutService) {
+  }
+
+  /**
+   * Sets the given viewpart grid.
+   */
+  public setGrid(newGrid: ViewPartGrid): void {
+    const prevGrid = this.grid;
+
+    if (prevGrid && prevGrid.serialize() === newGrid.serialize()) {
+      return; // no grid change
+    }
+
+    // Initialize a viewpart differ
+    const viewPartsDiffer = this._differs.find([]).create<string>();
+    prevGrid && viewPartsDiffer.diff(prevGrid.viewPartRefs());
+
+    // Register new viewparts
+    const viewPartsChange = viewPartsDiffer.diff(newGrid.viewPartRefs());
+    viewPartsChange && viewPartsChange.forEachAddedItem(({item}) => {
+      this._viewPartRegistry.set(item, this.createWorkbenchViewPart(item));
+    });
+
+    // Set viewpart properties
+    newGrid.visit((newGridNode: ViewPartGridNode): boolean => {
+      const viewPart = this.getElseThrow(newGridNode.viewPartRef);
+      viewPart.viewRefs = newGridNode.viewRefs;
+      viewPart.activeViewRef = newGridNode.activeViewRef;
+      return true;
+    });
+
+    // Notify about the grid change
+    this._grid$.next(newGrid);
+
+    // Destroy viewparts which are no longer used.
+    //
+    // Important note:
+    // Destroy viewparts after notifying about the grid change. Otherwise, moving of the last viewpart-view to another viewpart
+    // would fail because the view would already be destroyed.
+    viewPartsChange && viewPartsChange.forEachRemovedItem(({item}) => {
+      this._viewPartRegistry.get(item).portal.destroy();
+      this._viewPartRegistry.delete(item);
+    });
+
+    this._layoutService.afterGridChange$.next();
+  }
+
+  /**
+   * Returns a reference to the viewpart grid, if any. Is `null` until the initial navigation is performed.
+   */
+  public get grid(): ViewPartGrid {
+    return this._grid$.value;
+  }
+
+  /**
+   * Emits the viewpart grid.
+   *
+   * Upon subscription, the current grid is emitted, or `null` if not set yet, and then emits continuously when the grid changes. It never completes.
+   */
+  public get grid$(): Observable<ViewPartGrid> {
+    return this._grid$;
+  }
+
+  private createWorkbenchViewPart(viewPartRef: string): InternalWorkbenchViewPart {
+    const portal = new WbComponentPortal(this._componentFactoryResolver, this._injector.get(VIEW_PART_COMPONENT_TYPE));
+    const viewPart = new InternalWorkbenchViewPart(viewPartRef, portal);
+
+    const injectionTokens = new WeakMap();
+    injectionTokens.set(WorkbenchViewPart, viewPart);
+    injectionTokens.set(InternalWorkbenchViewPart, viewPart);
+    portal.init({injector: new PortalInjector(this._injector, injectionTokens)});
+
+    return viewPart;
+  }
+
+  /**
+   * Returns the viewpart for the specified 'viewPartRef', or throws an Error if not found.
+   */
+  public getElseThrow(viewPartRef: string): InternalWorkbenchViewPart {
+    const viewPart = this._viewPartRegistry.get(viewPartRef);
+    if (!viewPart) {
+      throw Error(`[IllegalStateError] viewpart '${viewPartRef}' not contained in the viewpart registry`);
+    }
+    return viewPart;
+  }
+}
diff --git a/projects/scion/workbench/src/lib/view-part-sash-box/view-part-sash-box.component.ts b/projects/scion/workbench/src/lib/view-part-sash-box/view-part-sash-box.component.ts
index 5fa4795b2..fe46e9dd9 100644
--- a/projects/scion/workbench/src/lib/view-part-sash-box/view-part-sash-box.component.ts
+++ b/projects/scion/workbench/src/lib/view-part-sash-box/view-part-sash-box.component.ts
@@ -12,9 +12,8 @@ import { Component, ElementRef, HostBinding, Input, OnDestroy } from '@angular/c
 import { WbComponentPortal } from '../portal/wb-component-portal';
 import { WorkbenchLayoutService } from '../workbench-layout.service';
 import { ViewPartComponent } from '../view-part/view-part.component';
-import { ViewPartGridService } from '../view-part-grid/view-part-grid.service';
+import { WorkbenchViewPartRegistry } from '../view-part-grid/workbench-view-part-registry.service';
 import { VIEW_PART_REF_INDEX, ViewPartSashBox } from '../view-part-grid/view-part-grid-serializer.service';
-import { ViewPartGridUrlObserver } from '../view-part-grid/view-part-grid-url-observer.service';
 import { VIEW_GRID_QUERY_PARAM } from '../workbench.constants';
 import { Router } from '@angular/router';
 import { debounceTime, takeUntil } from 'rxjs/operators';
@@ -47,9 +46,8 @@ export class ViewPartSashBoxComponent implements OnDestroy {
   }
 
   constructor(private _host: ElementRef,
-              private _viewPartGridService: ViewPartGridService,
+              private _viewPartRegistry: WorkbenchViewPartRegistry,
               private _workbenchLayout: WorkbenchLayoutService,
-              private _viewPartGridUrlObserver: ViewPartGridUrlObserver,
               private _router: Router) {
     this.installSashListener();
   }
@@ -75,7 +73,7 @@ export class ViewPartSashBoxComponent implements OnDestroy {
 
   public sashAsViewPartPortal(which: 'sash1' | 'sash2'): WbComponentPortal<ViewPartComponent> {
     const sash = (which === 'sash1' ? this.sashBox.sash1 : this.sashBox.sash2);
-    return Array.isArray(sash) ? this._viewPartGridService.resolveViewPartElseThrow(sash[VIEW_PART_REF_INDEX]).portal : null;
+    return Array.isArray(sash) ? this._viewPartRegistry.getElseThrow(sash[VIEW_PART_REF_INDEX]).portal : null;
   }
 
   public sashAsSashBox(which: 'sash1' | 'sash2'): ViewPartSashBox {
@@ -94,7 +92,7 @@ export class ViewPartSashBoxComponent implements OnDestroy {
         debounceTime(500)
       )
       .subscribe(() => {
-        const serializedGrid = this._viewPartGridUrlObserver.snapshot
+        const serializedGrid = this._viewPartRegistry.grid
           .splitPosition(this.sashBox.id, this.sashBox.splitter)
           .serialize();
 
diff --git a/projects/scion/workbench/src/lib/view-part/workbench-view-part.service.ts b/projects/scion/workbench/src/lib/view-part/workbench-view-part.service.ts
index ad0aefef7..14bd306a5 100644
--- a/projects/scion/workbench/src/lib/view-part/workbench-view-part.service.ts
+++ b/projects/scion/workbench/src/lib/view-part/workbench-view-part.service.ts
@@ -15,8 +15,8 @@ import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { InternalWorkbenchService } from '../workbench.service';
 import { Router } from '@angular/router';
 import { Region } from './view-drop-zone.directive';
-import { ViewPartGridUrlObserver } from '../view-part-grid/view-part-grid-url-observer.service';
 import { WorkbenchViewRegistry } from '../workbench-view-registry.service';
+import { WorkbenchViewPartRegistry } from '../view-part-grid/workbench-view-part-registry.service';
 import { TaskScheduler } from '../task-scheduler.service';
 
 @Injectable()
@@ -28,8 +28,8 @@ export class WorkbenchViewPartService implements OnDestroy {
 
   constructor(private _workbench: InternalWorkbenchService,
               private _viewRegistry: WorkbenchViewRegistry,
+              private _viewPartRegistry: WorkbenchViewPartRegistry,
               private _router: Router,
-              private _viewPartGridUrlObserver: ViewPartGridUrlObserver,
               private _viewPart: InternalWorkbenchViewPart,
               private _taskScheduler: TaskScheduler) {
     this._workbench.registerViewPartService(this);
@@ -91,7 +91,7 @@ export class WorkbenchViewPartService implements OnDestroy {
       return Promise.resolve(true);
     }
 
-    const serializedGrid = this._viewPartGridUrlObserver.snapshot
+    const serializedGrid = this._viewPartRegistry.grid
       .swapViews(this._viewPart.viewPartRef, viewRef1, viewRef2)
       .serialize();
 
@@ -108,7 +108,7 @@ export class WorkbenchViewPartService implements OnDestroy {
       return Promise.resolve(true);
     }
 
-    const serializedGrid = this._viewPartGridUrlObserver.snapshot
+    const serializedGrid = this._viewPartRegistry.grid
       .activateView(this._viewPart.viewPartRef, viewRef)
       .serialize();
 
@@ -121,7 +121,7 @@ export class WorkbenchViewPartService implements OnDestroy {
    * Note: This instruction runs asynchronously via URL routing.
    */
   public moveViewToThisViewPart(viewRef: string): Promise<boolean> {
-    const grid = this._viewPartGridUrlObserver.snapshot;
+    const grid = this._viewPartRegistry.grid;
 
     const serializedGrid = grid
       .removeView(viewRef)
@@ -138,7 +138,7 @@ export class WorkbenchViewPartService implements OnDestroy {
    * Note: This instruction runs asynchronously via URL routing.
    */
   public moveViewToNewViewPart(viewRef: string, region: Region): Promise<boolean> {
-    const grid = this._viewPartGridUrlObserver.snapshot;
+    const grid = this._viewPartRegistry.grid;
     const newViewPartRef = grid.computeNextViewPartIdentity();
 
     const serializedGrid = grid
diff --git a/projects/scion/workbench/src/lib/routing/view-outlet-url-observer.service.ts b/projects/scion/workbench/src/lib/workbench-url-observer.service.ts
similarity index 52%
rename from projects/scion/workbench/src/lib/routing/view-outlet-url-observer.service.ts
rename to projects/scion/workbench/src/lib/workbench-url-observer.service.ts
index 087a672e9..e94295749 100644
--- a/projects/scion/workbench/src/lib/routing/view-outlet-url-observer.service.ts
+++ b/projects/scion/workbench/src/lib/workbench-url-observer.service.ts
@@ -8,36 +8,44 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 
-import { GuardsCheckEnd, NavigationStart, Route, Router } from '@angular/router';
+import { GuardsCheckEnd, NavigationEnd, NavigationStart, Route, Router } from '@angular/router';
 import { filter, takeUntil } from 'rxjs/operators';
 import { Injectable, IterableDiffers, OnDestroy } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
-import { ViewOutletDiffer } from './view-outlet-differ';
-import { WorkbenchAuxiliaryRoutesRegistrator } from './workbench-auxiliary-routes-registrator.service';
+import { Subject } from 'rxjs';
+import { ViewOutletDiffer } from './routing/view-outlet-differ';
+import { WorkbenchAuxiliaryRoutesRegistrator } from './routing/workbench-auxiliary-routes-registrator.service';
+import { VIEW_GRID_QUERY_PARAM } from './workbench.constants';
+import { ViewPartGridSerializerService } from './view-part-grid/view-part-grid-serializer.service';
+import { WorkbenchViewRegistry } from './workbench-view-registry.service';
+import { WorkbenchViewPartRegistry } from './view-part-grid/workbench-view-part-registry.service';
+import { ViewPartGrid } from './view-part-grid/view-part-grid.model';
 
 /**
- * Provides the ability to watch for changes being made to view outlets in the URL
- * and installs auxiliary routes for view router outlets specified in the URI.
+ * Observes the application URL to update view and viewpart registries, and to dynamically register Angular auxiliary routes for views.
  *
- * If a new view router outlet is detected in the URI, all primary routes are registered with that routing outlet.
- * If a view router outlet is removed, all associated routes are discarded.
+ * When a new view outlet is detected in the URL, all primary routes are registered with that routing outlet as auxiliary routes.
+ * When a view router outlet is removed, all associated auxiliary routes are discarded.
  */
 @Injectable()
-export class ViewOutletUrlObserver implements OnDestroy {
+export class WorkbenchUrlObserver implements OnDestroy {
 
   private _destroy$ = new Subject<void>();
-  private _viewOutletAdd$ = new Subject<ViewOutletAddEvent>();
-  private _viewOutletRemove$ = new Subject<string>();
 
   private _undoRouteRegistrationFn: () => void;
 
-  constructor(private _router: Router, private _auxRoutesRegistrator: WorkbenchAuxiliaryRoutesRegistrator, differs: IterableDiffers) {
+  constructor(private _router: Router,
+              private _auxRoutesRegistrator: WorkbenchAuxiliaryRoutesRegistrator,
+              private _viewPartGridSerializer: ViewPartGridSerializerService,
+              private _viewRegistry: WorkbenchViewRegistry,
+              private _viewPartRegistry: WorkbenchViewPartRegistry,
+              differs: IterableDiffers) {
     this.installNavigationStartRoutingListener(differs);
     this.installGuardsCheckEndRoutingListener(differs);
+    this.installNavigationEndRoutingListener(differs);
   }
 
   /**
-   * Checks for new view router outlets in the URL, and if so, it makes all primary routes available to them (auxiliary routes).
+   * Checks for new view router outlets in the URL, and if so, registers an auxiliary route for every primary route.
    * However, if navigation is rejected due to routing guards, those auxiliary routes must be undone.
    */
   private onNavigationStart(routerEvent: NavigationStart, differ: ViewOutletDiffer): void {
@@ -59,8 +67,8 @@ export class ViewOutletUrlObserver implements OnDestroy {
   }
 
   /**
-   * Checks for removed view router outlets in the URL, and if so, it discards all associated auxiliary routes.
-   * Also, if navigation is rejected, undo any auxiliary route registered in the current routing cycle.
+   * Checks for removed view router outlets in the URL, and if so, discards associated auxiliary routes.
+   * Also, if navigation is rejected, undo registration of auxiliary routes as registered in `onNavigationStart`.
    */
   private onGuardsCheckEnd(routerEvent: GuardsCheckEnd, differ: ViewOutletDiffer): void {
     // Undo route registration if rejected.
@@ -70,46 +78,43 @@ export class ViewOutletUrlObserver implements OnDestroy {
       return;
     }
 
-    // Notify about added and removed outlets, and discard removed routes.
+    // Discard routes of closed views.
     const viewOutletChanges = differ.diff(routerEvent.url);
     if (viewOutletChanges) {
       const routes = this._router.config;
       const discardedRoutes: Route[] = [];
 
-      viewOutletChanges.forEachAddedItem(({item}) => {
-        this._viewOutletAdd$.next({viewRef: item, activationUrl: routerEvent.url});
-      });
-
       viewOutletChanges.forEachRemovedItem(({item}) => {
         discardedRoutes.push(...routes.filter(route => route.outlet === item));
-        this._viewOutletRemove$.next(item);
       });
 
-      // Uninstall discarded routes
       if (discardedRoutes.length > 0) {
         this._auxRoutesRegistrator.replaceRouterConfig(routes.filter(route => !discardedRoutes.includes(route)));
       }
     }
   }
 
-  /***
-   * Emits if a new view outlet is detected in the URL.
-   */
-  public get viewOutletAdd$(): Observable<ViewOutletAddEvent> {
-    return this._viewOutletAdd$;
-  }
+  private onNavigationEnd(routerEvent: NavigationEnd, differ: ViewOutletDiffer): void {
+    // Update viewpart registry.
+    const serializedViewPartGrid = this._router.parseUrl(routerEvent.url).queryParamMap.get(VIEW_GRID_QUERY_PARAM);
+    const viewPartGrid = new ViewPartGrid(serializedViewPartGrid, this._viewPartGridSerializer);
 
-  /***
-   * Emits if a view outlet is no longer contained in the URL.
-   */
-  public get viewOutletRemove$(): Observable<string> {
-    return this._viewOutletRemove$;
-  }
-
-  public ngOnDestroy(): void {
-    this._destroy$.next();
+    // Update view registry.
+    const viewOutletChanges = differ.diff(routerEvent.url);
+    if (viewOutletChanges) {
+      viewOutletChanges.forEachAddedItem(({item}) => {
+        this._viewRegistry.addViewOutlet(item, viewPartGrid.isViewActive(item));
+      });
+      viewOutletChanges.forEachRemovedItem(({item}) => {
+        this._viewRegistry.removeViewOutlet(item);
+      });
+    }
+    this._viewPartRegistry.setGrid(viewPartGrid);
   }
 
+  /**
+   * Delegates `NavigationStart` events to `onNavigationStart` method.
+   */
   private installNavigationStartRoutingListener(differs: IterableDiffers): void {
     const outletDiffer = new ViewOutletDiffer(differs, this._router);
     this._router.events
@@ -122,6 +127,9 @@ export class ViewOutletUrlObserver implements OnDestroy {
       });
   }
 
+  /**
+   * Delegates `GuardsCheckEnd` events to `onGuardsCheckEnd` method.
+   */
   private installGuardsCheckEndRoutingListener(differs: IterableDiffers): void {
     const outletDiffer = new ViewOutletDiffer(differs, this._router);
     this._router.events
@@ -133,9 +141,23 @@ export class ViewOutletUrlObserver implements OnDestroy {
         this.onGuardsCheckEnd(routerEvent, outletDiffer);
       });
   }
-}
 
-export interface ViewOutletAddEvent {
-  viewRef: string;
-  activationUrl: string;
+  /**
+   * Delegates `NavigationEnd` events to `onNavigationEnd` method.
+   */
+  private installNavigationEndRoutingListener(differs: IterableDiffers): void {
+    const outletDiffer = new ViewOutletDiffer(differs, this._router);
+    this._router.events
+      .pipe(
+        filter(event => event instanceof NavigationEnd),
+        takeUntil(this._destroy$),
+      )
+      .subscribe((routerEvent: NavigationEnd) => {
+        this.onNavigationEnd(routerEvent, outletDiffer);
+      });
+  }
+
+  public ngOnDestroy(): void {
+    this._destroy$.next();
+  }
 }
diff --git a/projects/scion/workbench/src/lib/workbench.module.ts b/projects/scion/workbench/src/lib/workbench.module.ts
index 50edb6d47..74c446ba7 100644
--- a/projects/scion/workbench/src/lib/workbench.module.ts
+++ b/projects/scion/workbench/src/lib/workbench.module.ts
@@ -32,14 +32,13 @@ import { WbRouterOutletDirective } from './routing/wb-router-outlet.directive';
 import { ViewPartSashBoxComponent } from './view-part-sash-box/view-part-sash-box.component';
 import { ViewPartGridSerializerService } from './view-part-grid/view-part-grid-serializer.service';
 import { WbPortalOutletComponent } from './portal/wb-portal-outlet.component';
-import { ViewPartGridUrlObserver } from './view-part-grid/view-part-grid-url-observer.service';
 import { WbBeforeDestroyGuard } from './view/wb-before-destroy.guard';
 import { RouteReuseStrategy, RouterModule } from '@angular/router';
 import { InternalWorkbenchRouter, WorkbenchRouter } from './routing/workbench-router.service';
 import { WbRouterLinkDirective, WbRouterLinkWithHrefDirective } from './routing/wb-router-link.directive';
 import { WorkbenchViewRegistry } from './workbench-view-registry.service';
 import { OverlayHostRef } from './overlay-host-ref.service';
-import { ViewOutletUrlObserver } from './routing/view-outlet-url-observer.service';
+import { WorkbenchUrlObserver } from './workbench-url-observer.service';
 import { WbActivityActionDirective } from './activity-part/wb-activity-action.directive';
 import { WbActivityDirective } from './activity-part/wb-activity.directive';
 import { MoveDirective } from './move.directive';
@@ -54,7 +53,6 @@ import { MessageBoxStackComponent } from './message-box/message-box-stack.compon
 import { MessageBoxComponent } from './message-box/message-box.component';
 import { APP_MESSAGE_BOX_SERVICE, MessageBoxService } from './message-box/message-box.service';
 import { EmptyOutletComponent } from './routing/empty-outlet.component';
-import { ViewRegistrySynchronizer } from './routing/view-registry-synchronizer.service';
 import { WbActivityRouteReuseProvider } from './routing/wb-activity-route-reuse-provider.service';
 import { WbRouteReuseStrategy } from './routing/wb-route-reuse-strategy.service';
 import { SciViewportModule } from '@scion/viewport';
@@ -66,6 +64,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { PopupService } from './popup/popup.service';
 import { A11yModule } from '@angular/cdk/a11y';
 import { TaskScheduler } from './task-scheduler.service';
+import { WorkbenchViewPartRegistry } from './view-part-grid/workbench-view-part-registry.service';
 
 @NgModule({
   imports: [
@@ -123,7 +122,7 @@ export class WorkbenchModule {
   // Note: Inject services which should be created eagerly.
   constructor(@Optional() @Inject(WORKBENCH_FORROOT_GUARD) guard: any,
               auxiliaryRoutesRegistrator: WorkbenchAuxiliaryRoutesRegistrator,
-              viewRegistrySynchronizer: ViewRegistrySynchronizer) {
+              workbenchUrlObserver: WorkbenchUrlObserver) {
     auxiliaryRoutesRegistrator.registerActivityAuxiliaryRoutes();
   }
 
@@ -174,11 +173,10 @@ export class WorkbenchModule {
         NotificationService,
         MessageBoxService,
         ViewPartGridSerializerService,
-        ViewOutletUrlObserver,
-        ViewPartGridUrlObserver,
+        WorkbenchUrlObserver,
         WbBeforeDestroyGuard,
         WorkbenchViewRegistry,
-        ViewRegistrySynchronizer,
+        WorkbenchViewPartRegistry,
         OverlayHostRef,
         ContentHostRef,
         InternalWorkbenchRouter,
diff --git a/projects/scion/workbench/src/lib/workbench.service.ts b/projects/scion/workbench/src/lib/workbench.service.ts
index d02e75016..04c5ce519 100644
--- a/projects/scion/workbench/src/lib/workbench.service.ts
+++ b/projects/scion/workbench/src/lib/workbench.service.ts
@@ -9,11 +9,11 @@
  */
 
 import { Injectable } from '@angular/core';
-import { ViewPartGridUrlObserver } from './view-part-grid/view-part-grid-url-observer.service';
 import { WorkbenchViewPartService } from './view-part/workbench-view-part.service';
 import { VIEW_GRID_QUERY_PARAM } from './workbench.constants';
 import { Router } from '@angular/router';
 import { WorkbenchViewRegistry } from './workbench-view-registry.service';
+import { WorkbenchViewPartRegistry } from './view-part-grid/workbench-view-part-registry.service';
 
 /**
  * Root object for the SCION Workbench.
@@ -73,14 +73,14 @@ export class InternalWorkbenchService implements WorkbenchService {
   private _activeViewPartService: WorkbenchViewPartService;
   private _viewPartServices: WorkbenchViewPartService[] = [];
 
-  constructor(private _viewPartGridUrlObserver: ViewPartGridUrlObserver,
-              private _router: Router,
+  constructor(private _router: Router,
+              private _viewPartRegistry: WorkbenchViewPartRegistry,
               private _viewRegistry: WorkbenchViewRegistry) {
   }
 
   public destroyView(...viewRefs: string[]): Promise<boolean> {
     const destroyViewFn = (viewRef: string): Promise<boolean> => {
-      const serializedGrid = this._viewPartGridUrlObserver.snapshot
+      const serializedGrid = this._viewPartRegistry.grid
         .removeView(viewRef)
         .serialize();
       return this._router.navigate([{outlets: {[viewRef]: null}}], {