Merge branch 'master' into metadata-and-relationships-combined-in-submission

2025-10-07 18:14:17 +00:00 · 2020-02-24 11:42:55 +01:00
parent c98a4a1c3f 92ee38c9ff
commit 9d059e190e
125 changed files with 2667 additions and 1929 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,21 +1,28 @@
 .git
-node-modules
-__build__
-__server_build__
+.idea
+.vscode
+.DS_Store
+*.iml
+
+# Build folders
+node_modules
+build
+dist
 typings
 tsd_typings
-npm-debug.log
-dist
 coverage
-.idea
-*.iml
+__build__
+__server_build__
+
+# Node
+*.log
+npm-debug.log.*
+
+# Angular files
 *.ngfactory.ts
 *.css.shim.ts
 *.scss.shim.ts
-.DS_Store
+
+# Webpack files
 webpack.records.json
-npm-debug.log.*
-morgan.log
-yarn-error.log
-*.css
 package-lock.json
--- a/.travis.yml
+++ b/.travis.yml
@@ -44,8 +44,8 @@ after_script:
 language: node_js

 node_js:
-  - "8"
  - "10"
+  - "12"

 cache:
  yarn: true
--- a/2
+++ b/2
@@ -1,7 +1,7 @@
 # This image will be published as dspace/dspace-angular
 # See https://dspace-labs.github.io/DSpace-Docker-Images/ for usage details

-FROM node:8-alpine
+FROM node:12-alpine
 WORKDIR /app
 ADD . /app/
 EXPOSE 3000
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ You can find additional information on the DSpace 7 Angular UI on the [wiki](htt
 Quick start
 -----------

-**Ensure you're running [Node](https://nodejs.org) `v8.0.x` or `v10.0.x`, [npm](https://www.npmjs.com/) >= `v5.x` and [yarn](https://yarnpkg.com) >= `v1.x`**
+**Ensure you're running [Node](https://nodejs.org) `v10.x` or `v12.x`, [npm](https://www.npmjs.com/) >= `v5.x` and [yarn](https://yarnpkg.com) >= `v1.x`**

 ```bash
 # clone the repo
@@ -65,7 +65,7 @@ Requirements
 ------------

 -	[Node.js](https://nodejs.org), [npm](https://www.npmjs.com/), and [yarn](https://yarnpkg.com)
-	Ensure you're running node `v8.x` or `v10.x`, npm >= `v5.x` and yarn >= `v1.x`
+-	Ensure you're running node `v10.x` or `v12.x`, npm >= `v5.x` and yarn >= `v1.x`

 If you have [`nvm`](https://github.com/creationix/nvm#install-script) or [`nvm-windows`](https://github.com/coreybutler/nvm-windows) installed, which is highly recommended, you can run `nvm install --lts && nvm use` to install and start using the latest Node LTS.

--- a/docker/docker-compose-rest.yml
+++ b/docker/docker-compose-rest.yml
@@ -5,7 +5,7 @@ services:
    container_name: dspace
    depends_on:
    - dspacedb
-    image: dspace/dspace:dspace-7_x-jdk8-test
+    image: dspace/dspace:dspace-7_x-test
    networks:
      dspacenet:
    ports:
--- a/docker/docker-compose-travis.yml
+++ b/docker/docker-compose-travis.yml
@@ -5,7 +5,7 @@ services:
    container_name: dspace
    depends_on:
    - dspacedb
-    image: dspace/dspace:dspace-7_x-jdk8-test
+    image: dspace/dspace:dspace-7_x-test
    networks:
      dspacenet:
    ports:
--- a/docker/local.cfg
+++ b/docker/local.cfg
@@ -1,6 +1,5 @@
 dspace.dir=/dspace
 db.url=jdbc:postgresql://dspacedb:5432/dspace
-dspace.hostname=dspace
-dspace.baseUrl=http://localhost:8080/server
+dspace.server.url=http://localhost:8080/server
 dspace.name=DSpace Started with Docker Compose
 solr.server=http://dspacesolr:8983/solr
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
  },
  "license": "BSD-2-Clause",
  "engines": {
-    "node": "8.* || >= 10.*"
+    "node": "10.* || >= 12.*"
  },
  "resolutions": {
    "serialize-javascript": ">= 2.1.2",
@@ -75,30 +75,28 @@
    "sync-i18n": "node ./scripts/sync-i18n-files.js"
  },
  "dependencies": {
-    "@angular/animations": "^7.2.15",
-    "@angular/cdk": "7.3.7",
-    "@angular/cli": "^7.3.5",
-    "@angular/common": "^7.2.15",
-    "@angular/core": "^7.2.15",
-    "@angular/forms": "^7.2.15",
-    "@angular/http": "^7.2.15",
-    "@angular/platform-browser": "^7.2.15",
-    "@angular/platform-browser-dynamic": "^7.2.15",
-    "@angular/platform-server": "^7.2.15",
-    "@angular/router": "^7.2.15",
+    "@angular/animations": "^8.2.14",
+    "@angular/cdk": "8.2.3",
+    "@angular/cli": "^8.3.25",
+    "@angular/common": "^8.2.14",
+    "@angular/core": "^8.2.14",
+    "@angular/forms": "^8.2.14",
+    "@angular/platform-browser": "^8.2.14",
+    "@angular/platform-browser-dynamic": "^8.2.14",
+    "@angular/platform-server": "^8.2.14",
+    "@angular/router": "^8.2.14",
    "@angularclass/bootloader": "1.0.1",
-    "@ng-bootstrap/ng-bootstrap": "^4.1.0",
-    "@ng-dynamic-forms/core": "^7.1.0",
-    "@ng-dynamic-forms/ui-ng-bootstrap": "^7.1.0",
-    "@ngrx/effects": "^7.3.0",
-    "@ngrx/router-store": "^7.3.0",
-    "@ngrx/store": "^7.3.0",
-    "@nguniversal/express-engine": "^7.1.1",
+    "@ng-bootstrap/ng-bootstrap": "^5.2.1",
+    "@ng-dynamic-forms/core": "8.1.1",
+    "@ng-dynamic-forms/ui-ng-bootstrap": "8.1.1",
+    "@ngrx/effects": "^8.6.0",
+    "@ngrx/router-store": "^8.6.0",
+    "@ngrx/store": "^8.6.0",
+    "@nguniversal/express-engine": "^8.2.6",
    "@ngx-translate/core": "11.0.1",
    "@ngx-translate/http-loader": "4.0.0",
-    "@nicky-lenaers/ngx-scroll-to": "^1.0.0",
+    "@nicky-lenaers/ngx-scroll-to": "^3.0.1",
    "angular-idle-preload": "3.0.0",
-    "angular-sortablejs": "^2.5.0",
    "angular2-text-mask": "9.0.0",
    "angulartics2": "7.5.2",
    "body-parser": "1.18.2",
@@ -106,7 +104,7 @@
    "cerialize": "0.1.18",
    "compression": "1.7.1",
    "cookie-parser": "1.4.3",
-    "core-js": "^2.6.5",
+    "core-js": "^3.6.4",
    "debug-loader": "^0.0.1",
    "express": "4.16.2",
    "express-session": "1.15.6",
@@ -126,17 +124,18 @@
    "moment": "^2.22.1",
    "moment-range": "^4.0.2",
    "morgan": "^1.9.1",
-    "ng-mocks": "^7.6.0",
+    "ng-mocks": "^8.1.0",
    "ng2-file-upload": "1.2.1",
    "ng2-nouislider": "^1.8.2",
-    "ngx-bootstrap": "^3.2.0",
+    "ngx-bootstrap": "^5.3.2",
    "ngx-infinite-scroll": "6.0.1",
    "ngx-moment": "^3.4.0",
    "ngx-pagination": "3.0.3",
+    "ngx-sortablejs": "^3.1.4",
    "nouislider": "^11.0.0",
    "pem": "1.13.2",
    "reflect-metadata": "0.1.12",
-    "rxjs": "6.4.0",
+    "rxjs": "6.5.4",
    "rxjs-spy": "^7.5.1",
    "sass-resources-loader": "^2.0.0",
    "sortablejs": "1.7.0",
@@ -147,17 +146,17 @@
    "uuid": "^3.2.1",
    "webfontloader": "1.6.28",
    "webpack-cli": "^3.2.0",
-    "zone.js": "^0.8.29"
+    "zone.js": "^0.9.1"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.5",
-    "@angular/compiler": "^7.2.15",
-    "@angular/compiler-cli": "^7.2.15",
+    "@angular-devkit/build-angular": "^0.803.25",
+    "@angular/compiler": "^8.2.14",
+    "@angular/compiler-cli": "^8.2.14",
    "@fortawesome/fontawesome-free": "^5.5.0",
-    "@ngrx/entity": "^7.3.0",
-    "@ngrx/schematics": "^7.3.0",
-    "@ngrx/store-devtools": "^7.3.0",
-    "@ngtools/webpack": "^7.3.9",
+    "@ngrx/entity": "^8.6.0",
+    "@ngrx/schematics": "^8.6.0",
+    "@ngrx/store-devtools": "^8.6.0",
+    "@ngtools/webpack": "^8.3.25",
    "@schematics/angular": "^0.7.5",
    "@types/acorn": "^4.0.3",
    "@types/cookie-parser": "1.4.1",
@@ -215,8 +214,6 @@
    "karma-webdriver-launcher": "^1.0.7",
    "karma-webpack": "3.0.0",
    "ncp": "^2.0.0",
-    "ngrx-store-freeze": "^0.2.4",
-    "node-sass": "^4.11.0",
    "nodemon": "^1.15.0",
    "npm-run-all": "4.1.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
@@ -247,7 +244,7 @@
    "ts-node": "4.1.0",
    "tslint": "5.11.0",
    "typedoc": "^0.9.0",
-    "typescript": "3.1.6",
+    "typescript": "3.5.3",
    "webdriver-manager": "^12.1.7",
    "webpack": "^4.29.6",
    "webpack-bundle-analyzer": "^3.3.2",
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -853,7 +853,7 @@

  "item.edit.tabs.relationships.head": "Item Relationships",

-  "item.edit.tabs.relationships.title": "Item Edit -  Relationships",
+  "item.edit.tabs.relationships.title": "Item Edit - Relationships",

  "item.edit.tabs.status.buttons.authorizations.button": "Authorizations...",

@@ -1978,12 +1978,16 @@

  "uploader.drag-message": "Drag & Drop your files here",

-  "uploader.or": ", or ",
+  "uploader.or": ", or",

  "uploader.processing": "Processing",

  "uploader.queue-length": "Queue length",

+  "virtual-metadata.delete-item.info": "Select the types for which you want to save the virtual metadata as real metadata",
+
+  "virtual-metadata.delete-item.modal-head": "The virtual metadata of this relation",
+
  "virtual-metadata.delete-relationship.modal-head": "Select the items for which you want to save the virtual metadata as real metadata",
 }

--- a/spec-bundle.js
+++ b/spec-bundle.js
@@ -13,8 +13,8 @@
 */
 Error.stackTraceLimit = Infinity;

-require('core-js/es6');
-require('core-js/es7/reflect');
+require('core-js/es');
+require('core-js/features/reflect');

 // Typescript emit helpers polyfill
 require('ts-helpers');
--- a/src/app/+admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.spec.ts
+++ b/src/app/+admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.spec.ts
@@ -43,7 +43,7 @@ describe('AddBitstreamFormatComponent', () => {
    });

    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [AddBitstreamFormatComponent],
      providers: [
        {provide: Router, useValue: router},
@@ -83,7 +83,7 @@ describe('AddBitstreamFormatComponent', () => {
      });

      TestBed.configureTestingModule({
-        imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+        imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
        declarations: [AddBitstreamFormatComponent],
        providers: [
          {provide: Router, useValue: router},
--- a/src/app/+admin/admin-registries/bitstream-formats/bitstream-formats.component.spec.ts
+++ b/src/app/+admin/admin-registries/bitstream-formats/bitstream-formats.component.spec.ts
@@ -92,7 +92,7 @@ describe('BitstreamFormatsComponent', () => {
    });

    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [BitstreamFormatsComponent, PaginationComponent, EnumKeysPipe],
      providers: [
        {provide: BitstreamFormatDataService, useValue: bitstreamFormatService},
@@ -214,7 +214,7 @@ describe('BitstreamFormatsComponent', () => {
        });

        TestBed.configureTestingModule({
-          imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+          imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
          declarations: [BitstreamFormatsComponent, PaginationComponent, EnumKeysPipe],
          providers: [
            {provide: BitstreamFormatDataService, useValue: bitstreamFormatService},
@@ -260,7 +260,7 @@ describe('BitstreamFormatsComponent', () => {
        });

        TestBed.configureTestingModule({
-          imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+          imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
          declarations: [BitstreamFormatsComponent, PaginationComponent, EnumKeysPipe],
          providers: [
            {provide: BitstreamFormatDataService, useValue: bitstreamFormatService},
--- a/src/app/+admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.spec.ts
+++ b/src/app/+admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.spec.ts
@@ -49,7 +49,7 @@ describe('EditBitstreamFormatComponent', () => {
    });

    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [EditBitstreamFormatComponent],
      providers: [
        {provide: ActivatedRoute, useValue: routeStub},
@@ -99,7 +99,7 @@ describe('EditBitstreamFormatComponent', () => {
      });

      TestBed.configureTestingModule({
-        imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+        imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
        declarations: [EditBitstreamFormatComponent],
        providers: [
          {provide: ActivatedRoute, useValue: routeStub},
--- a/src/app/+admin/admin-registries/bitstream-formats/format-form/format-form.component.spec.ts
+++ b/src/app/+admin/admin-registries/bitstream-formats/format-form/format-form.component.spec.ts
@@ -40,7 +40,7 @@ describe('FormatFormComponent', () => {

  const initAsync = () => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), ReactiveFormsModule, FormsModule, TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), ReactiveFormsModule, FormsModule, TranslateModule.forRoot(), NgbModule],
      declarations: [FormatFormComponent],
      providers: [
        {provide: Router, useValue: router},
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.actions.ts
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.actions.ts
@@ -148,4 +148,6 @@ export type MetadataRegistryAction
  | MetadataRegistryEditFieldAction
  | MetadataRegistryCancelFieldAction
  | MetadataRegistrySelectFieldAction
-  | MetadataRegistryDeselectFieldAction;
+  | MetadataRegistryDeselectFieldAction
+  | MetadataRegistryDeselectAllSchemaAction
+  | MetadataRegistryDeselectAllFieldAction;
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.spec.ts
@@ -53,7 +53,7 @@ describe('MetadataRegistryComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [MetadataRegistryComponent, PaginationComponent, EnumKeysPipe],
      providers: [
        { provide: RegistryService, useValue: registryServiceStub },
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.spec.ts
@@ -34,7 +34,7 @@ describe('MetadataSchemaFormComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [ MetadataSchemaFormComponent, EnumKeysPipe ],
      providers: [
        { provide: RegistryService, useValue: registryServiceStub },
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
@@ -42,7 +42,7 @@ describe('MetadataFieldFormComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [ MetadataFieldFormComponent, EnumKeysPipe ],
      providers: [
        { provide: RegistryService, useValue: registryServiceStub },
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
@@ -99,7 +99,7 @@ describe('MetadataSchemaComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [MetadataSchemaComponent, PaginationComponent, EnumKeysPipe],
      providers: [
        { provide: RegistryService, useValue: registryServiceStub },
--- a/src/app/+browse-by/+browse-by-date-page/browse-by-date-page.component.spec.ts
+++ b/src/app/+browse-by/+browse-by-date-page/browse-by-date-page.component.spec.ts
@@ -68,7 +68,7 @@ describe('BrowseByDatePageComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [BrowseByDatePageComponent, EnumKeysPipe, VarDirective],
      providers: [
        { provide: GLOBAL_CONFIG, useValue: ENV_CONFIG },
--- a/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
+++ b/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
@@ -86,7 +86,7 @@ describe('BrowseByMetadataPageComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [BrowseByMetadataPageComponent, EnumKeysPipe, VarDirective],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRouteStub },
--- a/src/app/+browse-by/+browse-by-title-page/browse-by-title-page.component.spec.ts
+++ b/src/app/+browse-by/+browse-by-title-page/browse-by-title-page.component.spec.ts
@@ -64,7 +64,7 @@ describe('BrowseByTitlePageComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [BrowseByTitlePageComponent, EnumKeysPipe, VarDirective],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRouteStub },
--- a/src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.spec.ts
+++ b/src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.spec.ts
@@ -116,7 +116,7 @@ describe('CollectionItemMapperComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [CollectionItemMapperComponent, ItemSelectComponent, SearchFormComponent, PaginationComponent, EnumKeysPipe, VarDirective, ErrorComponent, LoadingComponent],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRouteStub },
--- a/src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.ts
+++ b/src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.ts
@@ -48,7 +48,7 @@ export class CollectionItemMapperComponent implements OnInit {
   * A view on the tabset element
   * Used to switch tabs programmatically
   */
-  @ViewChild('tabs') tabs;
+  @ViewChild('tabs', {static: false}) tabs;

  /**
   * The collection to map items to
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts
@@ -116,7 +116,7 @@ describe('CommunityPageSubCollectionList Component', () => {
        TranslateModule.forRoot(),
        SharedModule,
        RouterTestingModule.withRoutes([]),
-        NgbModule.forRoot(),
+        NgbModule,
        NoopAnimationsModule
      ],
      declarations: [CommunityPageSubCollectionListComponent],
--- a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts
+++ b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts
@@ -117,7 +117,7 @@ describe('CommunityPageSubCommunityListComponent Component', () => {
        TranslateModule.forRoot(),
        SharedModule,
        RouterTestingModule.withRoutes([]),
-        NgbModule.forRoot(),
+        NgbModule,
        NoopAnimationsModule
      ],
      declarations: [CommunityPageSubCommunityListComponent],
--- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.spec.ts
+++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.spec.ts
@@ -107,7 +107,7 @@ describe('TopLevelCommunityList Component', () => {
        TranslateModule.forRoot(),
        SharedModule,
        RouterTestingModule.withRoutes([]),
-        NgbModule.forRoot(),
+        NgbModule,
        NoopAnimationsModule
      ],
      declarations: [TopLevelCommunityListComponent],
--- a/src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.spec.ts
@@ -98,7 +98,7 @@ describe('ItemCollectionMapperComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [ItemCollectionMapperComponent, CollectionSelectComponent, SearchFormComponent, PaginationComponent, EnumKeysPipe, VarDirective, ErrorComponent, LoadingComponent],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRouteStub },
--- a/src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.ts
+++ b/src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.ts
@@ -39,7 +39,7 @@ export class ItemCollectionMapperComponent implements OnInit {
   * A view on the tabset element
   * Used to switch tabs programmatically
   */
-  @ViewChild('tabs') tabs;
+  @ViewChild('tabs', {static: false}) tabs;

  /**
   * The item to map to collections
--- a/src/app/+item-page/edit-item-page/item-delete/item-delete.component.html
+++ b/src/app/+item-page/edit-item-page/item-delete/item-delete.component.html
@@ -0,0 +1,98 @@
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+
+            <h2>{{headerMessage | translate: {id: item.handle} }}</h2>
+            <p>{{descriptionMessage | translate}}</p>
+            <ds-modify-item-overview [item]="item"></ds-modify-item-overview>
+
+            <ng-container *ngVar="(types$ | async) as types">
+
+                <div *ngIf="types && types.length > 0" class="mb-4">
+
+                    {{'virtual-metadata.delete-item.info' | translate}}
+
+                    <div *ngFor="let type of types" class="mb-4">
+
+                        <div *ngVar="(isSelected(type) | async) as selected"
+                             class="d-flex flex-row">
+
+                            <div class="m-2" (click)="setSelected(type, !selected)">
+                                <label>
+                                    <input type="checkbox" [checked]="selected">
+                                </label>
+                            </div>
+
+                            <div class="flex-column flex-grow-1">
+                                <h5 (click)="setSelected(type, !selected)">
+                                    {{getRelationshipMessageKey(getLabel(type) | async) | translate}}
+                                </h5>
+                                <div *ngFor="let relationship of (getRelationships(type) | async)"
+                                     class="d-flex flex-row">
+                                    <ng-container *ngVar="(getRelatedItem(relationship) | async) as relatedItem">
+
+                                        <ds-listable-object-component-loader
+                                                *ngIf="relatedItem"
+                                                [object]="relatedItem"
+                                                [viewMode]="viewMode">
+                                        </ds-listable-object-component-loader>
+                                        <div class="ml-auto">
+                                            <div class="btn-group">
+                                                <button class="btn btn-outline-info btn-sm"
+                                                        (click)="openVirtualMetadataModal(virtualMetadataModal)">
+                                                    <i class="fas fa-info fa-fw"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+
+                                        <ng-template #virtualMetadataModal>
+                                            <div>
+                                                <div class="modal-header">
+                                                    {{'virtual-metadata.delete-item.modal-head' | translate}}
+                                                    <button type="button" class="close"
+                                                            (click)="closeVirtualMetadataModal()" aria-label="Close">
+                                                        <span aria-hidden="true">×</span>
+                                                    </button>
+                                                </div>
+                                                <div class="modal-body">
+                                                    <ds-listable-object-component-loader
+                                                            *ngIf="relatedItem"
+                                                            [object]="relatedItem"
+                                                            [viewMode]="viewMode">
+                                                    </ds-listable-object-component-loader>
+                                                    <div *ngFor="let metadata of (getVirtualMetadata(relationship) | async)">
+                                                        <div>
+                                                            <div class="font-weight-bold">
+                                                                {{metadata.metadataField}}
+                                                            </div>
+                                                            <div>
+                                                                {{metadata.metadataValue.value}}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </ng-template>
+
+                                    </ng-container>
+                                </div>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </ng-container>
+
+            <button (click)="performAction()"
+                    class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
+            </button>
+            <button [routerLink]="['/items/', item.id, 'edit']" class="btn btn-outline-secondary cancel">
+                {{cancelMessage| translate}}
+            </button>
+
+        </div>
+    </div>
+</div>
--- a/src/app/+item-page/edit-item-page/item-delete/item-delete.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-delete/item-delete.component.spec.ts
@@ -1,44 +1,132 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Item } from '../../../core/shared/item.model';
-import { RouterStub } from '../../../shared/testing/router-stub';
-import { of as observableOf } from 'rxjs';
-import { RemoteData } from '../../../core/data/remote-data';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service-stub';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ItemDataService } from '../../../core/data/item-data.service';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { ItemDeleteComponent } from './item-delete.component';
-import { getItemEditPath } from '../../item-page-routing.module';
-import { RestResponse } from '../../../core/cache/response.models';
-import { createSuccessfulRemoteDataObject } from '../../../shared/testing/utils';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import { ItemType } from '../../../core/shared/item-relationships/item-type.model';
+import { Relationship } from '../../../core/shared/item-relationships/relationship.model';
+import {Item} from '../../../core/shared/item.model';
+import {RouterStub} from '../../../shared/testing/router-stub';
+import {of as observableOf} from 'rxjs';
+import {NotificationsServiceStub} from '../../../shared/testing/notifications-service-stub';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterTestingModule} from '@angular/router/testing';
+import {TranslateModule} from '@ngx-translate/core';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {ActivatedRoute, Router} from '@angular/router';
+import {ItemDataService} from '../../../core/data/item-data.service';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {ItemDeleteComponent} from './item-delete.component';
+import {getItemEditPath} from '../../item-page-routing.module';
+import {createSuccessfulRemoteDataObject} from '../../../shared/testing/utils';
+import {VarDirective} from '../../../shared/utils/var.directive';
+import {ObjectUpdatesService} from '../../../core/data/object-updates/object-updates.service';
+import {RelationshipService} from '../../../core/data/relationship.service';
+import {RelationshipType} from '../../../core/shared/item-relationships/relationship-type.model';
+import {RemoteData} from '../../../core/data/remote-data';
+import {PaginatedList} from '../../../core/data/paginated-list';
+import {PageInfo} from '../../../core/shared/page-info.model';
+import {EntityTypeService} from '../../../core/data/entity-type.service';

 let comp: ItemDeleteComponent;
 let fixture: ComponentFixture<ItemDeleteComponent>;

 let mockItem;
+let itemType;
+let type1;
+let type2;
+let types;
+let relationships;
 let itemPageUrl;
 let routerStub;
 let mockItemDataService: ItemDataService;
 let routeStub;
+let objectUpdatesServiceStub;
+let relationshipService;
+let entityTypeService;
 let notificationsServiceStub;
+let typesSelection;

 describe('ItemDeleteComponent', () => {
  beforeEach(async(() => {

    mockItem = Object.assign(new Item(), {
      id: 'fake-id',
+      uuid: 'fake-uuid',
      handle: 'fake/handle',
      lastModified: '2018',
      isWithdrawn: true
    });

+    itemType = Object.assign(new ItemType(), {
+      id: 'itemType',
+      uuid: 'itemType',
+    });
+
+    type1 = Object.assign(new RelationshipType(), {
+      id: '1',
+      uuid: 'type-1',
+    });
+
+    type2 = Object.assign(new RelationshipType(), {
+      id: '2',
+      uuid: 'type-2',
+    });
+
+    types = [type1, type2];
+
+    relationships = [
+      Object.assign(new Relationship(), {
+        id: '1',
+        uuid: 'relationship-1',
+        relationshipType: observableOf(new RemoteData(
+          false,
+          false,
+          true,
+          null,
+          type1
+        )),
+        leftItem:  observableOf(new RemoteData(
+          false,
+          false,
+          true,
+          null,
+          mockItem,
+        )),
+        rightItem:  observableOf(new RemoteData(
+          false,
+          false,
+          true,
+          null,
+          Object.assign(new Item(), {})
+        )),
+      }),
+      Object.assign(new Relationship(), {
+        id: '2',
+        uuid: 'relationship-2',
+        relationshipType: observableOf(new RemoteData(
+          false,
+          false,
+          true,
+          null,
+          type2
+        )),
+        leftItem:  observableOf(new RemoteData(
+          false,
+          false,
+          true,
+          null,
+          mockItem,
+        )),
+        rightItem:  observableOf(new RemoteData(
+          false,
+          false,
+          true,
+          null,
+          Object.assign(new Item(), {})
+        )),
+      }),
+    ];
+
    itemPageUrl = `fake-url/${mockItem.id}`;
    routerStub = Object.assign(new RouterStub(), {
      url: `${itemPageUrl}/edit`
@@ -54,16 +142,56 @@ describe('ItemDeleteComponent', () => {
      })
    };

+    typesSelection = {
+      type1: false,
+      type2: true,
+    };
+
+    entityTypeService = jasmine.createSpyObj('entityTypeService',
+      {
+        getEntityTypeByLabel: observableOf(new RemoteData(
+          false,
+          false,
+          true,
+          null,
+          itemType,
+        )),
+        getEntityTypeRelationships: observableOf(new RemoteData(
+          false,
+          false,
+          true,
+          null,
+          new PaginatedList(new PageInfo(), types),
+        )),
+      }
+    );
+
+    objectUpdatesServiceStub = {
+      initialize: () => {
+        // do nothing
+      },
+      isSelectedVirtualMetadata: (type) => observableOf(typesSelection[type]),
+    };
+
+    relationshipService = jasmine.createSpyObj('relationshipService',
+      {
+        getItemRelationshipsArray: observableOf(relationships),
+      }
+    );
+
    notificationsServiceStub = new NotificationsServiceStub();

    TestBed.configureTestingModule({
-      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
-      declarations: [ItemDeleteComponent],
+      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
+      declarations: [ItemDeleteComponent, VarDirective],
      providers: [
        { provide: ActivatedRoute, useValue: routeStub },
        { provide: Router, useValue: routerStub },
        { provide: ItemDataService, useValue: mockItemDataService },
        { provide: NotificationsService, useValue: notificationsServiceStub },
+        { provide: ObjectUpdatesService, useValue: objectUpdatesServiceStub },
+        { provide: RelationshipService, useValue: relationshipService },
+        { provide: EntityTypeService, useValue: entityTypeService },
      ], schemas: [
        CUSTOM_ELEMENTS_SCHEMA
      ]
@@ -91,7 +219,8 @@ describe('ItemDeleteComponent', () => {
    it('should call delete function from the ItemDataService', () => {
      spyOn(comp, 'notify');
      comp.performAction();
-      expect(mockItemDataService.delete).toHaveBeenCalledWith(mockItem);
+      expect(mockItemDataService.delete)
+        .toHaveBeenCalledWith(mockItem, types.filter((type) => typesSelection[type]).map((type) => type.id));
      expect(comp.notify).toHaveBeenCalled();
    });
  });
--- a/src/app/+item-page/edit-item-page/item-delete/item-delete.component.ts
+++ b/src/app/+item-page/edit-item-page/item-delete/item-delete.component.ts
@@ -1,29 +1,323 @@
-import { Component } from '@angular/core';
-import { first } from 'rxjs/operators';
-import { AbstractSimpleItemActionComponent } from '../simple-item-action/abstract-simple-item-action.component';
-import { getItemEditPath } from '../../item-page-routing.module';
-import { RestResponse } from '../../../core/cache/response.models';
+import {Component, Input, OnInit} from '@angular/core';
+import {filter, first, map, switchMap, take} from 'rxjs/operators';
+import {AbstractSimpleItemActionComponent} from '../simple-item-action/abstract-simple-item-action.component';
+import {getItemEditPath} from '../../item-page-routing.module';
+import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';
+import {combineLatest as observableCombineLatest, combineLatest, Observable} from 'rxjs';
+import {RelationshipType} from '../../../core/shared/item-relationships/relationship-type.model';
+import {VirtualMetadata} from '../virtual-metadata/virtual-metadata.component';
+import {Relationship} from '../../../core/shared/item-relationships/relationship.model';
+import {getRemoteDataPayload, getSucceededRemoteData} from '../../../core/shared/operators';
+import {hasValue, isNotEmpty} from '../../../shared/empty.util';
+import {Item} from '../../../core/shared/item.model';
+import {MetadataValue} from '../../../core/shared/metadata.models';
+import {ViewMode} from '../../../core/shared/view-mode.model';
+import {ActivatedRoute, Router} from '@angular/router';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {ItemDataService} from '../../../core/data/item-data.service';
+import {TranslateService} from '@ngx-translate/core';
+import {ObjectUpdatesService} from '../../../core/data/object-updates/object-updates.service';
+import {RelationshipService} from '../../../core/data/relationship.service';
+import {EntityTypeService} from '../../../core/data/entity-type.service';

@Component({
  selector: 'ds-item-delete',
-  templateUrl: '../simple-item-action/abstract-simple-item-action.component.html'
+  templateUrl: '../item-delete/item-delete.component.html'
 })
 /**
 * Component responsible for rendering the item delete page
 */
-export class ItemDeleteComponent extends AbstractSimpleItemActionComponent {
+export class ItemDeleteComponent
+  extends AbstractSimpleItemActionComponent
+  implements OnInit {
+
+  /**
+   * The current url of this page
+   */
+  @Input() url: string;

  protected messageKey = 'delete';

  /**
-   * Perform the delete action to the item
+   * The view-mode we're currently on
+   */
+  viewMode = ViewMode.ListElement;
+
+  /**
+   * A list of the relationship types for which this item has relations as an observable.
+   * The list doesn't contain duplicates.
+   */
+  types$: Observable<RelationshipType[]>;
+
+  /**
+   * A map which stores the relationships of this item for each type as observable lists
+   */
+  relationships$: Map<RelationshipType, Observable<Relationship[]>>
+    = new Map<RelationshipType, Observable<Relationship[]>>();
+
+  /**
+   * A map which stores the related item of each relationship of this item as an observable
+   */
+  relatedItems$: Map<Relationship, Observable<Item>> = new Map<Relationship, Observable<Item>>();
+
+  /**
+   * A map which stores the virtual metadata (of the related) item corresponding to each relationship of this item
+   * as an observable list
+   */
+  virtualMetadata$: Map<Relationship, Observable<VirtualMetadata[]>> = new Map<Relationship, Observable<VirtualMetadata[]>>();
+
+  /**
+   * Reference to NgbModal
+   */
+  public modalRef: NgbModalRef;
+
+  constructor(protected route: ActivatedRoute,
+              protected router: Router,
+              protected notificationsService: NotificationsService,
+              protected itemDataService: ItemDataService,
+              protected translateService: TranslateService,
+              protected modalService: NgbModal,
+              protected objectUpdatesService: ObjectUpdatesService,
+              protected relationshipService: RelationshipService,
+              protected entityTypeService: EntityTypeService,
+  ) {
+    super(
+      route,
+      router,
+      notificationsService,
+      itemDataService,
+      translateService,
+    );
+  }
+
+  /**
+   * Set up and initialize all fields
+   */
+  ngOnInit() {
+
+    super.ngOnInit();
+    this.url = this.router.url;
+
+    this.types$ = this.entityTypeService.getEntityTypeByLabel(
+      this.item.firstMetadataValue('relationship.type')
+    ).pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      switchMap((entityType) => this.entityTypeService.getEntityTypeRelationships(entityType.id)),
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      map((relationshipTypes) => relationshipTypes.page),
+      switchMap((types) =>
+        combineLatest(types.map((type) => this.getRelationships(type))).pipe(
+          map((relationships) =>
+            types.reduce<RelationshipType[]>((includedTypes, type, index) => {
+              if (!includedTypes.some((includedType) => includedType.id === type.id)
+                && !(relationships[index].length === 0)) {
+                return [...includedTypes, type];
+              } else {
+                return includedTypes;
+              }
+            }, [])
+          ),
+        )
+      ),
+    );
+
+    this.types$.pipe(
+      take(1),
+    ).subscribe((types) =>
+      this.objectUpdatesService.initialize(this.url, types, this.item.lastModified)
+    );
+  }
+
+  /**
+   * Open the modal which lists the virtual metadata of a relation
+   * @param content the html content of the modal
+   */
+  openVirtualMetadataModal(content: any) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  /**
+   * Close the modal which lists the virtual metadata of a relation
+   */
+  closeVirtualMetadataModal() {
+    this.modalRef.close();
+  }
+
+  /**
+   * Get the i18n message key for a relationship
+   * @param label   The relationship type's label
+   */
+  getRelationshipMessageKey(label: string): string {
+    if (hasValue(label) && label.indexOf('Of') > -1) {
+      return `relationships.${label.substring(0, label.indexOf('Of') + 2)}`
+    } else {
+      return label;
+    }
+  }
+
+  /**
+   * Get the relationship type label relevant for this item as an observable
+   * @param relationshipType  the relationship type to get the label for
+   */
+  getLabel(relationshipType: RelationshipType): Observable<string> {
+
+    return this.getRelationships(relationshipType).pipe(
+      switchMap((relationships) =>
+        this.isLeftItem(relationships[0]).pipe(
+          map((isLeftItem) => isLeftItem ? relationshipType.leftwardType : relationshipType.rightwardType),
+        )
+      ),
+    )
+  }
+
+  /**
+   * Get the relationships of this item with a given type as an observable
+   * @param relationshipType  the relationship type to filter the item's relationships on
+   */
+  getRelationships(relationshipType: RelationshipType): Observable<Relationship[]> {
+
+    if (!this.relationships$.has(relationshipType)) {
+      this.relationships$.set(
+        relationshipType,
+        this.relationshipService.getItemRelationshipsArray(this.item).pipe(
+          // filter on type
+          switchMap((relationships) =>
+            observableCombineLatest(
+              relationships.map((relationship) => this.getRelationshipType(relationship))
+            ).pipe(
+              map((types) => relationships.filter(
+                (relationship, index) => relationshipType.id === types[index].id
+              )),
+            )
+          ),
+        )
+      );
+    }
+
+    return this.relationships$.get(relationshipType);
+  }
+
+  /**
+   * Get the type of a given relationship as an observable
+   * @param relationship  the relationship to get the type for
+   */
+  private getRelationshipType(relationship: Relationship): Observable<RelationshipType> {
+
+    return relationship.relationshipType.pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      filter((relationshipType: RelationshipType) => hasValue(relationshipType) && isNotEmpty(relationshipType.uuid))
+    );
+  }
+
+  /**
+   * Get the item this item is related to through a given relationship as an observable
+   * @param relationship  the relationship to get the other item for
+   */
+  getRelatedItem(relationship: Relationship): Observable<Item> {
+
+    if (!this.relatedItems$.has(relationship)) {
+
+      this.relatedItems$.set(
+        relationship,
+        this.isLeftItem(relationship).pipe(
+          switchMap((isLeftItem) => isLeftItem ? relationship.rightItem : relationship.leftItem),
+          getSucceededRemoteData(),
+          getRemoteDataPayload(),
+        ),
+      );
+    }
+
+    return this.relatedItems$.get(relationship);
+  }
+
+  /**
+   * Get the virtual metadata for a given relationship of the related item.
+   * @param relationship  the relationship to get the virtual metadata for
+   */
+  getVirtualMetadata(relationship: Relationship): Observable<VirtualMetadata[]> {
+
+    if (!this.virtualMetadata$.has(relationship)) {
+
+      this.virtualMetadata$.set(
+        relationship,
+        this.getRelatedItem(relationship).pipe(
+          map((relatedItem) =>
+            Object.entries(relatedItem.metadata)
+              .map(([key, value]) => value
+                .filter((metadata: MetadataValue) =>
+                  metadata.authority && metadata.authority.endsWith(relationship.id))
+                .map((metadata: MetadataValue) => {
+                  return {
+                    metadataField: key,
+                    metadataValue: metadata,
+                  }
+                }))
+              .reduce((previous, current) => previous.concat(current))
+          ),
+        )
+      );
+    }
+
+    return this.virtualMetadata$.get(relationship);
+  }
+
+  /**
+   * Check whether this item is the left item of a given relationship, as an observable boolean
+   * @param relationship  the relationship for which to check whether this item is the left item
+   */
+  private isLeftItem(relationship: Relationship): Observable<boolean> {
+
+    return relationship.leftItem.pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      filter((item: Item) => hasValue(item) && isNotEmpty(item.uuid)),
+      map((leftItem) => leftItem.uuid === this.item.uuid)
+    );
+  }
+
+  /**
+   * Check whether a given relationship type is selected to save the corresponding virtual metadata
+   * @param type  the relationship type for which to check whether it is selected
+   */
+  isSelected(type: RelationshipType): Observable<boolean> {
+    return this.objectUpdatesService.isSelectedVirtualMetadata(this.url, this.item.uuid, type.uuid);
+  }
+
+  /**
+   * Select/deselect a given relationship type to save the corresponding virtual metadata
+   * @param type      the relationship type to select/deselect
+   * @param selected  whether the type should be selected
+   */
+  setSelected(type: RelationshipType, selected: boolean): void {
+    this.objectUpdatesService.setSelectedVirtualMetadata(this.url, this.item.uuid, type.uuid, selected);
+  }
+
+  /**
+   * Perform the delete operation
   */
  performAction() {
-    this.itemDataService.delete(this.item).pipe(first()).subscribe(
-      (succeeded: boolean) => {
-        this.notify(succeeded);
-      }
-    );
+
+    this.types$.pipe(
+      switchMap((types) =>
+        combineLatest(
+          types.map((type) => this.isSelected(type))
+        ).pipe(
+          map((selection) => types.filter(
+            (type, index) => selection[index]
+          )),
+          map((selectedTypes) => selectedTypes.map((type) => type.id)),
+        )
+      ),
+    ).subscribe((types) => {
+      this.itemDataService.delete(this.item, types).pipe(first()).subscribe(
+        (succeeded: boolean) => {
+          this.notify(succeeded);
+        }
+      );
+    });
  }

  /**
--- a/src/app/+item-page/edit-item-page/item-move/item-move.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-move/item-move.component.spec.ts
@@ -82,7 +82,7 @@ describe('ItemMoveComponent', () => {
  describe('ItemMoveComponent success', () => {
    beforeEach(async(() => {
      TestBed.configureTestingModule({
-        imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+        imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
        declarations: [ItemMoveComponent],
        providers: [
          {provide: ActivatedRoute, useValue: routeStub},
@@ -143,7 +143,7 @@ describe('ItemMoveComponent', () => {
  describe('ItemMoveComponent fail', () => {
    beforeEach(async(() => {
      TestBed.configureTestingModule({
-        imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+        imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
        declarations: [ItemMoveComponent],
        providers: [
          {provide: ActivatedRoute, useValue: routeStub},
--- a/src/app/+item-page/edit-item-page/item-private/item-private.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-private/item-private.component.spec.ts
@@ -60,7 +60,7 @@ describe('ItemPrivateComponent', () => {
    notificationsServiceStub = new NotificationsServiceStub();

    TestBed.configureTestingModule({
-      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [ItemPrivateComponent],
      providers: [
        { provide: ActivatedRoute, useValue: routeStub },
--- a/src/app/+item-page/edit-item-page/item-public/item-public.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-public/item-public.component.spec.ts
@@ -60,7 +60,7 @@ describe('ItemPublicComponent', () => {
    notificationsServiceStub = new NotificationsServiceStub();

    TestBed.configureTestingModule({
-      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [ItemPublicComponent],
      providers: [
        { provide: ActivatedRoute, useValue: routeStub },
--- a/src/app/+item-page/edit-item-page/item-reinstate/item-reinstate.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-reinstate/item-reinstate.component.spec.ts
@@ -60,7 +60,7 @@ describe('ItemReinstateComponent', () => {
    notificationsServiceStub = new NotificationsServiceStub();

    TestBed.configureTestingModule({
-      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [ItemReinstateComponent],
      providers: [
        { provide: ActivatedRoute, useValue: routeStub },
--- a/src/app/+item-page/edit-item-page/item-status/item-status.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-status/item-status.component.spec.ts
@@ -33,7 +33,7 @@ describe('ItemStatusComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [ItemStatusComponent],
      providers: [
        { provide: ActivatedRoute, useValue: routeStub },
--- a/src/app/+item-page/edit-item-page/item-withdraw/item-withdraw.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-withdraw/item-withdraw.component.spec.ts
@@ -60,7 +60,7 @@ describe('ItemWithdrawComponent', () => {
    notificationsServiceStub = new NotificationsServiceStub();

    TestBed.configureTestingModule({
-      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot(),],
+      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule,],
      declarations: [ItemWithdrawComponent],
      providers: [
        { provide: ActivatedRoute, useValue: routeStub },
--- a/src/app/+item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.spec.ts
@@ -83,7 +83,7 @@ describe('AbstractSimpleItemActionComponent', () => {
    notificationsServiceStub = new NotificationsServiceStub();

    TestBed.configureTestingModule({
-      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
+      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
      declarations: [MySimpleItemActionComponent],
      providers: [
        { provide: ActivatedRoute, useValue: routeStub },
--- a/src/app/+item-page/simple/field-components/specific-field/uri/item-page-uri-field.component.spec.ts
+++ b/src/app/+item-page/simple/field-components/specific-field/uri/item-page-uri-field.component.spec.ts
@@ -11,6 +11,7 @@ let fixture: ComponentFixture<ItemPageUriFieldComponent>;

 const mockField = 'dc.identifier.uri';
 const mockValue = 'test value';
+const mockLabel = 'test label';

 describe('ItemPageUriFieldComponent', () => {
  beforeEach(async(() => {
@@ -32,6 +33,8 @@ describe('ItemPageUriFieldComponent', () => {
    fixture = TestBed.createComponent(ItemPageUriFieldComponent);
    comp = fixture.componentInstance;
    comp.item = mockItemWithMetadataFieldAndValue(mockField, mockValue);
+    comp.fields = [mockField];
+    comp.label = mockLabel;
    fixture.detectChanges();
  }));

--- a/src/app/+item-page/simple/field-components/specific-field/uri/item-page-uri-field.component.ts
+++ b/src/app/+item-page/simple/field-components/specific-field/uri/item-page-uri-field.component.ts
@@ -8,7 +8,8 @@ import { ItemPageFieldComponent } from '../item-page-field.component';
  templateUrl: './item-page-uri-field.component.html'
 })
 /**
- * This component is used for displaying the uri (dc.identifier.uri) metadata of an item
+ * This component can be used to represent any uri on a simple item page.
+ * It expects 4 parameters: The item, a separator, the metadata keys and an i18n key
 */
 export class ItemPageUriFieldComponent extends ItemPageFieldComponent {

@@ -21,19 +22,16 @@ export class ItemPageUriFieldComponent extends ItemPageFieldComponent {
   * Separator string between multiple values of the metadata fields defined
   * @type {string}
   */
-  separator: string;
+  @Input() separator: string;

  /**
   * Fields (schema.element.qualifier) used to render their values.
-   * In this component, we want to display values for metadata 'dc.identifier.uri'
   */
-  fields: string[] = [
-    'dc.identifier.uri'
-  ];
+  @Input() fields: string[];

  /**
   * Label i18n key for the rendered metadata
   */
-  label = 'item.page.uri';
+  @Input() label: string;

 }
--- a/src/app/+item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/+item-page/simple/item-types/publication/publication.component.html
@@ -63,7 +63,10 @@
      [fields]="['dc.identifier.citation']"
      [label]="'item.page.citation'">
    </ds-generic-item-page-field>
-    <ds-item-page-uri-field [item]="object"></ds-item-page-uri-field>
+    <ds-item-page-uri-field [item]="object"
+      [fields]="['dc.identifier.uri']"
+      [label]="'item.page.uri'">
+    </ds-item-page-uri-field>
    <ds-item-page-collections [item]="object"></ds-item-page-collections>
    <div>
      <a class="btn btn-outline-primary" [routerLink]="['/items/' + object.id + '/full']">
--- a/src/app/+item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.spec.ts
+++ b/src/app/+item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.spec.ts
@@ -29,7 +29,7 @@ describe('TabbedRelatedEntitiesSearchComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), NoopAnimationsModule, NgbModule.forRoot()],
+      imports: [TranslateModule.forRoot(), NoopAnimationsModule, NgbModule],
      declarations: [TabbedRelatedEntitiesSearchComponent, VarDirective],
      providers: [
        {
--- a/src/app/+my-dspace-page/my-dspace-page.component.spec.ts
+++ b/src/app/+my-dspace-page/my-dspace-page.component.spec.ts
@@ -84,7 +84,7 @@ describe('MyDSpacePageComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NoopAnimationsModule, NgbCollapseModule.forRoot()],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NoopAnimationsModule, NgbCollapseModule],
      declarations: [MyDSpacePageComponent, RoleDirective],
      providers: [
        { provide: SearchService, useValue: searchServiceStub },
--- a/src/app/+search-page/search.component.scss
+++ b/src/app/+search-page/search.component.scss
@@ -5,6 +5,6 @@
  }
 }

-/deep/ .search-controls {
+::ng-deep .search-controls {
    margin-bottom: $spacer;
 }
--- a/src/app/+search-page/search.component.spec.ts
+++ b/src/app/+search-page/search.component.spec.ts
@@ -90,7 +90,7 @@ const routeServiceStub = {

 export function configureSearchComponentTestingModule(compType) {
  TestBed.configureTestingModule({
-    imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NoopAnimationsModule, NgbCollapseModule.forRoot()],
+    imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NoopAnimationsModule, NgbCollapseModule],
    declarations: [compType],
    providers: [
      { provide: SearchService, useValue: searchServiceStub },
--- a/src/app/app.metareducers.ts
+++ b/src/app/app.metareducers.ts
@@ -1,4 +1,3 @@
-import { isNotEmpty } from './shared/empty.util';
 import { StoreActionTypes } from './store.actions';

 // fallback ngrx debugger
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,14 +6,12 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

 import { EffectsModule } from '@ngrx/effects';
 import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store';
-import { META_REDUCERS, MetaReducer, StoreModule } from '@ngrx/store';
+import { META_REDUCERS, MetaReducer, StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';

 import { TranslateModule } from '@ngx-translate/core';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';

-import { storeFreeze } from 'ngrx-store-freeze';
-
 import { ENV_CONFIG, GLOBAL_CONFIG, GlobalConfig } from '../config';
 import { AdminSidebarSectionComponent } from './+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
 import { AdminSidebarComponent } from './+admin/admin-sidebar/admin-sidebar.component';
@@ -23,7 +21,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';

 import { appEffects } from './app.effects';
-import { appMetaReducers, debugMetaReducers } from './app.metareducers';
+import { appMetaReducers, debugMetaReducers, universalMetaReducer } from './app.metareducers';
 import { appReducers, AppState } from './app.reducer';

 import { CoreModule } from './core/core.module';
@@ -51,8 +49,7 @@ export function getBase() {
 }

 export function getMetaReducers(config: GlobalConfig): Array<MetaReducer<AppState>> {
-  const metaReducers: Array<MetaReducer<AppState>> = config.production ? appMetaReducers : [...appMetaReducers, storeFreeze];
-  return config.debug ? [...metaReducers, ...debugMetaReducers] : metaReducers;
+  return config.debug ? [...appMetaReducers, ...debugMetaReducers] : appMetaReducers;
 }

 const IMPORTS = [
@@ -63,11 +60,11 @@ const IMPORTS = [
  AppRoutingModule,
  CoreModule.forRoot(),
  ScrollToModule.forRoot(),
-  NgbModule.forRoot(),
+  NgbModule,
  TranslateModule.forRoot(),
  EffectsModule.forRoot(appEffects),
  StoreModule.forRoot(appReducers),
-  StoreRouterConnectingModule,
+  StoreRouterConnectingModule.forRoot(),
 ];

 const ENTITY_IMPORTS = [
@@ -92,7 +89,7 @@ const PROVIDERS = [
    useFactory: (getBase)
  },
  {
-    provide: META_REDUCERS,
+    provide: USER_PROVIDED_META_REDUCERS,
    useFactory: getMetaReducers,
    deps: [GLOBAL_CONFIG]
  },
--- a/src/app/core/data/data.service.ts
+++ b/src/app/core/data/data.service.ts
@@ -318,9 +318,11 @@ export abstract class DataService<T extends CacheableObject> {
  /**
   * Delete an existing DSpace Object on the server
   * @param dso The DSpace Object to be removed
-   * Return an observable that emits true when the deletion was successful, false when it failed
+   * @param copyVirtualMetadata (optional parameter) the identifiers of the relationship types for which the virtual
+   *                            metadata should be saved as real metadata
+   * @return an observable that emits true when the deletion was successful, false when it failed
   */
-  delete(dso: T): Observable<boolean> {
+  delete(dso: T, copyVirtualMetadata?: string[]): Observable<boolean> {
    const requestId = this.requestService.generateRequestId();

    const hrefObs = this.halService.getEndpoint(this.linkPath).pipe(
@@ -329,6 +331,13 @@ export abstract class DataService<T extends CacheableObject> {
    hrefObs.pipe(
      find((href: string) => hasValue(href)),
      map((href: string) => {
+        if (copyVirtualMetadata) {
+          copyVirtualMetadata.forEach((id) =>
+            href += (href.includes('?') ? '&' : '?')
+              + 'copyVirtualMetadata='
+              + id
+          );
+        }
        const request = new DeleteByIDRequest(requestId, href, dso.uuid);
        this.requestService.configure(request);
      })
--- a/src/app/core/data/object-updates/object-updates.actions.ts
+++ b/src/app/core/data/object-updates/object-updates.actions.ts
@@ -279,4 +279,6 @@ export type ObjectUpdatesAction
  | ReinstateObjectUpdatesAction
  | RemoveObjectUpdatesAction
  | RemoveFieldUpdateAction
-  | SelectVirtualMetadataAction;
+  | SelectVirtualMetadataAction
+  | SetEditableFieldUpdateAction
+  | SetValidFieldUpdateAction;
--- a/src/app/core/data/relationship.service.ts
+++ b/src/app/core/data/relationship.service.ts
@@ -1,36 +1,47 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { MemoizedSelector, select, Store } from '@ngrx/store';
-import { combineLatest, combineLatest as observableCombineLatest } from 'rxjs';
-import { distinctUntilChanged, filter, map, mergeMap, startWith, switchMap, take, tap } from 'rxjs/operators';
-import { compareArraysUsingIds, paginatedRelationsToItems, relationsToItems } from '../../+item-page/simple/item-types/shared/item-relationships-utils';
-import { AppState, keySelector } from '../../app.reducer';
-import { hasValue, hasValueOperator, isNotEmpty, isNotEmptyOperator } from '../../shared/empty.util';
 import { ReorderableRelationship } from '../../shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component';
-import { RemoveNameVariantAction, SetNameVariantAction } from '../../shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/name-variant.actions';
-import { NameVariantListState } from '../../shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/name-variant.reducer';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
-import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
-import { configureRequest, getRemoteDataPayload, getResponseFromEntry, getSucceededRemoteData } from '../shared/operators';
-import { SearchParam } from '../cache/models/search-param.model';
-import { ObjectCacheService } from '../cache/object-cache.service';
-import { DeleteRequest, FindListOptions, PostRequest, RestRequest } from './request.models';
-import { RestResponse } from '../cache/response.models';
-import { CoreState } from '../core.reducers';
-import { HttpOptions } from '../dspace-rest-v2/dspace-rest-v2.service';
+import { RequestService } from './request.service';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { hasValue, hasValueOperator, isNotEmpty, isNotEmptyOperator } from '../../shared/empty.util';
+import { distinctUntilChanged, filter, map, mergeMap, startWith, switchMap, take, tap } from 'rxjs/operators';
+import {
+  configureRequest,
+  getRemoteDataPayload,
+  getResponseFromEntry,
+  getSucceededRemoteData
+} from '../shared/operators';
+import { DeleteRequest, FindListOptions, PostRequest, RestRequest } from './request.models';
+import { Observable } from 'rxjs/internal/Observable';
+import { RestResponse } from '../cache/response.models';
+import { Item } from '../shared/item.model';
+import { Relationship } from '../shared/item-relationships/relationship.model';
 import { RelationshipType } from '../shared/item-relationships/relationship-type.model';
 import { RemoteData, RemoteDataState } from './remote-data';
+import { combineLatest, combineLatest as observableCombineLatest } from 'rxjs';
 import { PaginatedList } from './paginated-list';
 import { ItemDataService } from './item-data.service';
-import { Relationship } from '../shared/item-relationships/relationship.model';
-import { Item } from '../shared/item.model';
+import {
+  compareArraysUsingIds,
+  paginatedRelationsToItems,
+  relationsToItems
+} from '../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { ObjectCacheService } from '../cache/object-cache.service';
 import { DataService } from './data.service';
+import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
+import { MemoizedSelector, select, Store } from '@ngrx/store';
+import { CoreState } from '../core.reducers';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { DefaultChangeAnalyzer } from './default-change-analyzer.service';
-import { RequestService } from './request.service';
-import { MetadataValue, VIRTUAL_METADATA_PREFIX } from '../shared/metadata.models';
-import { Observable } from 'rxjs/internal/Observable';
+import { SearchParam } from '../cache/models/search-param.model';
+import { HttpOptions } from '../dspace-rest-v2/dspace-rest-v2.service';
+import { AppState, keySelector } from '../../app.reducer';
+import { NameVariantListState } from '../../shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/name-variant.reducer';
+import {
+  RemoveNameVariantAction,
+  SetNameVariantAction
+} from '../../shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/name-variant.actions';

 const relationshipListsStateSelector = (state: AppState) => state.relationshipLists;

--- a/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
+++ b/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
@@ -4,7 +4,6 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'

 import { DSpaceRESTV2Response } from './dspace-rest-v2-response.model';
-import { HttpObserve } from '@angular/common/http/src/client';
 import { RestRequestMethod } from '../data/rest-request-method';
 import { hasNoValue, isNotEmpty } from '../../shared/empty.util';
 import { DSpaceObject } from '../shared/dspace-object.model';
@@ -14,7 +13,7 @@ export interface HttpOptions {
  body?: any;
  headers?: HttpHeaders;
  params?: HttpParams;
-  observe?: HttpObserve;
+  observe?: 'body' | 'events' | 'response';
  reportProgress?: boolean;
  responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
  withCredentials?: boolean;
--- a/src/app/core/index/index.actions.ts
+++ b/src/app/core/index/index.actions.ts
@@ -91,4 +91,4 @@ export class RemoveFromIndexBySubstringAction implements Action {
 /**
 * A type to encompass all HrefIndexActions
 */
-export type IndexAction = AddToIndexAction | RemoveFromIndexByValueAction;
+export type IndexAction = AddToIndexAction | RemoveFromIndexByValueAction | RemoveFromIndexBySubstringAction;
--- a/src/app/core/index/index.reducer.ts
+++ b/src/app/core/index/index.reducer.ts
@@ -126,7 +126,7 @@ function removeFromIndexByValue(state: MetaIndexState, action: RemoveFromIndexBy
 * @return MetaIndexState
 *    the new state
 */
-function removeFromIndexBySubstring(state: MetaIndexState, action: RemoveFromIndexByValueAction): MetaIndexState {
+function removeFromIndexBySubstring(state: MetaIndexState, action: RemoveFromIndexByValueAction | RemoveFromIndexBySubstringAction): MetaIndexState {
  const subState = state[action.payload.name];
  const newSubState = Object.create(null);
  for (const value in subState) {
--- a/src/app/core/json-patch/builder/json-patch-operations-builder.ts
+++ b/src/app/core/json-patch/builder/json-patch-operations-builder.ts
@@ -7,7 +7,7 @@ import {
 } from '../json-patch-operations.actions';
 import { JsonPatchOperationPathObject } from './json-patch-operation-path-combiner';
 import { Injectable } from '@angular/core';
-import { hasNoValue, isEmpty, isNotEmpty } from '../../../shared/empty.util';
+import { hasNoValue, hasValue, isEmpty, isNotEmpty } from '../../../shared/empty.util';
 import { dateToISOFormat } from '../../../shared/date.util';
 import { AuthorityValue } from '../../integration/models/authority.value';
 import { FormFieldMetadataValueObject } from '../../../shared/form/builder/models/form-field-metadata-value.model';
@@ -35,11 +35,13 @@ export class JsonPatchOperationsBuilder {
   *    A boolean representing if the value to be added is a plain text value
   */
  add(path: JsonPatchOperationPathObject, value, first = false, plain = false) {
-    this.store.dispatch(
-      new NewPatchAddOperationAction(
-        path.rootElement,
-        path.subRootElement,
-        path.path, this.prepareValue(value, plain, first)));
+    if ((typeof value === 'object' && hasValue(value.value)) || hasValue(value)) {
+      this.store.dispatch(
+        new NewPatchAddOperationAction(
+          path.rootElement,
+          path.subRootElement,
+          path.path, this.prepareValue(value, plain, first)));
+    }
  }

  /**
--- a/src/app/core/services/route.actions.ts
+++ b/src/app/core/services/route.actions.ts
@@ -162,4 +162,5 @@ export type RouteActions =
  | AddQueryParameterAction
  | AddParameterAction
  | ResetRouteStateAction
-  | SetParameterAction;
+  | SetParameterAction
+  | SetQueryParameterAction;
--- a/src/app/entity-groups/research-entities/metadata-representations/org-unit/org-unit-item-metadata-list-element.component.html
+++ b/src/app/entity-groups/research-entities/metadata-representations/org-unit/org-unit-item-metadata-list-element.component.html
@@ -9,5 +9,5 @@
 <ds-truncatable [id]="metadataRepresentation.id">
  <a [routerLink]="['/items/' + metadataRepresentation.id]"
     [innerHTML]="metadataRepresentation.getValue()"
-     [tooltip]="metadataRepresentation.allMetadata(['dc.description']).length > 0 ? descTemplate : null"></a>
+     [tooltip]="metadataRepresentation.allMetadata(['organization.legalName']).length > 0 ? descTemplate : null"></a>
 </ds-truncatable>
--- a/src/app/entity-groups/research-entities/metadata-representations/org-unit/org-unit-item-metadata-list-element.component.spec.ts
+++ b/src/app/entity-groups/research-entities/metadata-representations/org-unit/org-unit-item-metadata-list-element.component.spec.ts
@@ -23,7 +23,7 @@ describe('OrgUnitItemMetadataListElementComponent', () => {
      declarations: [OrgUnitItemMetadataListElementComponent],
      schemas: [NO_ERRORS_SCHEMA]
    }).overrideComponent(OrgUnitItemMetadataListElementComponent, {
-      set: { changeDetection: ChangeDetectionStrategy.Default }
+      // set: { changeDetection: ChangeDetectionStrategy.Default }
    }).compileComponents();
  }));

--- a/src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.spec.ts
+++ b/src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.spec.ts
@@ -18,7 +18,7 @@ describe('NameVariantModalComponent', () => {
    init();
    TestBed.configureTestingModule({
      declarations: [NameVariantModalComponent],
-      imports: [NgbModule.forRoot(), TranslateModule.forRoot()],
+      imports: [NgbModule, TranslateModule.forRoot()],
      providers: [{ provide: NgbActiveModal, useValue: modal }]
    })
      .compileComponents();
--- a/src/app/search-navbar/search-navbar.component.ts
+++ b/src/app/search-navbar/search-navbar.component.ts
@@ -22,7 +22,7 @@ export class SearchNavbarComponent {
  isExpanded = 'collapsed';

  // Search input field
-  @ViewChild('searchInput') searchField: ElementRef;
+  @ViewChild('searchInput', {static: false}) searchField: ElementRef;

  constructor(private formBuilder: FormBuilder, private router: Router, private searchService: SearchService) {
    this.searchForm = this.formBuilder.group(({
--- a/src/app/shared/browse-by/browse-by.component.spec.ts
+++ b/src/app/shared/browse-by/browse-by.component.spec.ts
@@ -51,7 +51,7 @@ describe('BrowseByComponent', () => {
        CommonModule,
        TranslateModule.forRoot(),
        SharedModule,
-        NgbModule.forRoot(),
+        NgbModule,
        StoreModule.forRoot({}),
        TranslateModule.forRoot({
          loader: {
--- a/src/app/shared/chips/chips.component.spec.ts
+++ b/src/app/shared/chips/chips.component.spec.ts
@@ -6,16 +6,16 @@ import { Chips } from './models/chips.model';
 import { UploaderService } from '../uploader/uploader.service';
 import { ChipsComponent } from './chips.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { SortablejsModule } from 'angular-sortablejs';
 import { By } from '@angular/platform-browser';
 import { FormFieldMetadataValueObject } from '../form/builder/models/form-field-metadata-value.model';
-import { createTestComponent, hasClass } from '../testing/utils';
+import { createTestComponent } from '../testing/utils';
 import { AuthorityConfidenceStateDirective } from '../authority-confidence/authority-confidence-state.directive';
 import { TranslateModule } from '@ngx-translate/core';
 import { GlobalConfig } from '../../../config/global-config.interface';
 import { GLOBAL_CONFIG } from '../../../config';
 import { MOCK_SUBMISSION_CONFIG } from '../testing/mock-submission-config';
 import { ConfidenceType } from '../../core/integration/models/confidence-type';
+import { SortablejsModule } from 'ngx-sortablejs';

 describe('ChipsComponent test suite', () => {

@@ -32,7 +32,7 @@ describe('ChipsComponent test suite', () => {

    TestBed.configureTestingModule({
      imports: [
-        NgbModule.forRoot(),
+        NgbModule,
        SortablejsModule.forRoot({animation: 150}),
        TranslateModule.forRoot()
      ],
--- a/src/app/shared/chips/chips.component.ts
+++ b/src/app/shared/chips/chips.component.ts
@@ -1,13 +1,13 @@
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, } from '@angular/core';

 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-import { SortablejsOptions } from 'angular-sortablejs';
 import { isObject } from 'lodash';

 import { Chips } from './models/chips.model';
 import { ChipsItem } from './models/chips-item.model';
 import { UploaderService } from '../uploader/uploader.service';
 import { TranslateService } from '@ngx-translate/core';
+import { Options } from 'sortablejs';

@Component({
  selector: 'ds-chips',
@@ -25,7 +25,7 @@ export class ChipsComponent implements OnChanges {
  @Output() remove: EventEmitter<number> = new EventEmitter<number>();
  @Output() change: EventEmitter<any> = new EventEmitter<any>();

-  options: SortablejsOptions;
+  options: Options;
  dragged = -1;
  tipText: string[];

--- a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.spec.ts
+++ b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.spec.ts
@@ -119,7 +119,6 @@ describe('ComColFormComponent', () => {
            }
          }
        );
-
        comp.onSubmit();

        expect(comp.submitForm.emit).toHaveBeenCalledWith(
@@ -313,9 +312,9 @@ describe('ComColFormComponent', () => {
    comp.formModel = [];
    comp.dso = dso;
    (comp as any).type = Community.type;
-    comp.uploaderComponent = Object.assign({
-      uploader: {}
-    });
+    comp.uploaderComponent = {uploader: {}} as any;
+
+    console.log(comp);
    (comp as any).dsoService = dsoService;
    fixture.detectChanges();
    location = (comp as any).location;
--- a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.ts
+++ b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.ts
@@ -43,7 +43,7 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit, OnDe
  /**
   * The logo uploader component
   */
-  @ViewChild(UploaderComponent) uploaderComponent: UploaderComponent;
+  @ViewChild(UploaderComponent, {static: true}) uploaderComponent: UploaderComponent;

  /**
   * DSpaceObject that the form represents
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss
@@ -9,7 +9,7 @@
  justify-content: center;
 }

-:host /deep/ .custom-select {
+:host ::ng-deep .custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts
@@ -162,7 +162,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
      imports: [
        FormsModule,
        ReactiveFormsModule,
-        NgbModule.forRoot(),
+        NgbModule,
        DynamicFormsCoreModule.forRoot(),
        SharedModule,
        TranslateModule.forRoot(),
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
@@ -30,13 +30,13 @@ import {
  DYNAMIC_FORM_CONTROL_TYPE_SELECT,
  DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA,
  DYNAMIC_FORM_CONTROL_TYPE_TIMEPICKER,
-  DynamicDatePickerModel,
+  DynamicDatePickerModel, DynamicFormComponentService,
  DynamicFormControl,
  DynamicFormControlContainerComponent,
  DynamicFormControlEvent,
-  DynamicFormControlModel, DynamicFormInstancesService,
+  DynamicFormControlModel,
  DynamicFormLayout,
-  DynamicFormLayoutService,
+  DynamicFormLayoutService, DynamicFormRelationService,
  DynamicFormValidationService,
  DynamicTemplateDirective,
 } from '@ng-dynamic-forms/core';
@@ -73,8 +73,8 @@ import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-a
 import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
 import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './models/relation-group/dynamic-relation-group.model';
 import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component';
-import { map, startWith, switchMap, find, take, tap, filter } from 'rxjs/operators';
-import { combineLatest, combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
+import { map, startWith, switchMap, find, take } from 'rxjs/operators';
+import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
 import { SearchResult } from '../../../search/search-result.model';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -97,10 +97,8 @@ import { Relationship } from '../../../../core/shared/item-relationships/relatio
 import { Collection } from '../../../../core/shared/collection.model';
 import { MetadataValue } from '../../../../core/shared/metadata.models';
 import { FormService } from '../../form.service';
-import { deepClone } from 'fast-json-patch';
 import { SelectableListState } from '../../../object-list/selectable-list/selectable-list.reducer';
 import { SubmissionService } from '../../../../submission/submission.service';
-import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';

 export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<DynamicFormControl> | null {
  switch (model.type) {
@@ -204,25 +202,25 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
  @Output('dfFocus') focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
  @Output('ngbEvent') customEvent: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
  /* tslint:enable:no-output-rename */
-  @ViewChild('componentViewContainer', { read: ViewContainerRef }) componentViewContainerRef: ViewContainerRef;
+  @ViewChild('componentViewContainer', { read: ViewContainerRef, static: true }) componentViewContainerRef: ViewContainerRef;

  private showErrorMessagesPreviousStage: boolean;

  get componentType(): Type<DynamicFormControl> | null {
-    return this.layoutService.getCustomComponentType(this.model) || dsDynamicFormControlMapFn(this.model);
+    return dsDynamicFormControlMapFn(this.model);
  }

  constructor(
    protected componentFactoryResolver: ComponentFactoryResolver,
-    protected dynamicFormInstanceService: DynamicFormInstancesService,
+    protected dynamicFormComponentService: DynamicFormComponentService,
    protected layoutService: DynamicFormLayoutService,
    protected validationService: DynamicFormValidationService,
    protected translateService: TranslateService,
+    protected relationService: DynamicFormRelationService,
    private modalService: NgbModal,
-    private relationService: RelationshipService,
+    private relationshipService: RelationshipService,
    private selectableListService: SelectableListService,
    private itemService: ItemDataService,
-    private relationshipService: RelationshipService,
    private zone: NgZone,
    private store: Store<AppState>,
    private submissionObjectService: SubmissionObjectDataService,
@@ -230,7 +228,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
    private formService: FormService,
    private submissionService: SubmissionService
  ) {
-    super(componentFactoryResolver, layoutService, validationService, dynamicFormInstanceService);
+    super(componentFactoryResolver, layoutService, validationService, dynamicFormComponentService, relationService);
  }

  /**
@@ -247,7 +245,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
          .pipe(
            getAllSucceededRemoteData(),
            getRemoteDataPayload());
-        this.relationshipValue$ = combineLatest(this.item$.pipe(take(1)), relationship$).pipe(
+        this.relationshipValue$ = observableCombineLatest(this.item$.pipe(take(1)), relationship$).pipe(
          switchMap(([item, relationship]: [Item, Relationship]) =>
            relationship.leftItem.pipe(
              getSucceededRemoteData(),
@@ -268,7 +266,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
        find((list: SelectableListState) => hasNoValue(list)),
        switchMap(() => this.item$.pipe(take(1))),
        switchMap((item) => {
-          return this.relationService.getRelatedItemsByLabel(item, this.model.relationshipConfig.relationshipType).pipe(
+          return this.relationshipService.getRelatedItemsByLabel(item, this.model.relationshipConfig.relationshipType).pipe(
            getSucceededRemoteData(),
            map((items: RemoteData<PaginatedList<Item>>) => items.payload.page.map((i) => Object.assign(new ItemSearchResult(), { indexableObject: i }))),
          )
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.spec.ts
@@ -26,7 +26,7 @@ describe('DsDatePickerInlineComponent test suite', () => {
                ReactiveFormsModule,
                NoopAnimationsModule,
                TextMaskModule,
-                NgbDatepickerModule.forRoot(),
+                NgbDatepickerModule,
                DynamicFormsCoreModule.forRoot()
            ],
            declarations: [DsDatePickerInlineComponent]
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts
@@ -24,7 +24,7 @@ export class DsDatePickerInlineComponent extends DynamicFormControlComponent {
  @Output() change: EventEmitter<any> = new EventEmitter();
  @Output() focus: EventEmitter<any> = new EventEmitter();

-  @ViewChild(NgbDatepicker) ngbDatePicker: NgbDatepicker;
+  @ViewChild(NgbDatepicker, {static: false}) ngbDatePicker: NgbDatepicker;

  constructor(protected layoutService: DynamicFormLayoutService,
              protected validationService: DynamicFormValidationService,
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
@@ -43,7 +43,7 @@ describe('DsDatePickerComponent test suite', () => {

    TestBed.configureTestingModule({
      imports: [
-        NgbModule.forRoot()
+        NgbModule
      ],
      declarations: [
        DsDatePickerComponent,
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
@@ -88,7 +88,7 @@ describe('DsDynamicListComponent test suite', () => {
        DynamicFormsNGBootstrapUIModule,
        FormsModule,
        ReactiveFormsModule,
-        NgbModule.forRoot()
+        NgbModule
      ],
      declarations: [
        DsDynamicListComponent,
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
@@ -2,7 +2,7 @@
  display:none
 }

-:host /deep/ .dropdown-menu {
+:host ::ng-deep .dropdown-menu {
  left: 0 !important;
  width: 100% !important;
  max-height: $dropdown-menu-max-height;
@@ -10,10 +10,10 @@
  overflow-x: hidden;
 }

-:host /deep/ .dropdown-item.active,
-:host /deep/ .dropdown-item:active,
-:host /deep/ .dropdown-item:focus,
-:host /deep/ .dropdown-item:hover {
+:host ::ng-deep .dropdown-item.active,
+:host ::ng-deep .dropdown-item:active,
+:host ::ng-deep .dropdown-item:focus,
+:host ::ng-deep .dropdown-item:hover {
  color: $dropdown-link-hover-color !important;
  background-color: $dropdown-link-hover-bg !important;
 }
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
@@ -160,7 +160,7 @@ describe('Dynamic Lookup component', () => {
        FormsModule,
        InfiniteScrollModule,
        ReactiveFormsModule,
-        NgbModule.forRoot(),
+        NgbModule,
        TranslateModule.forRoot()
      ],
      declarations: [
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.spec.ts
@@ -113,7 +113,7 @@ describe('DsDynamicRelationGroupComponent test suite', () => {
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
-        NgbModule.forRoot(),
+        NgbModule,
        StoreModule.forRoot({}),
        TranslateModule.forRoot()
      ],
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts
@@ -65,7 +65,7 @@ export class DsDynamicRelationGroupComponent extends DynamicFormControlComponent
  private selectedChipItem: ChipsItem;
  private subs: Subscription[] = [];

-  @ViewChild('formRef') private formRef: FormComponent;
+  @ViewChild('formRef', {static: false}) private formRef: FormComponent;

  constructor(@Inject(GLOBAL_CONFIG) protected EnvConfig: GlobalConfig,
              private authorityService: AuthorityService,
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
@@ -64,7 +64,7 @@ describe('Dynamic Dynamic Scrollable Dropdown component', () => {
        FormsModule,
        InfiniteScrollModule,
        ReactiveFormsModule,
-        NgbModule.forRoot(),
+        NgbModule,
        TranslateModule.forRoot()
      ],
      declarations: [
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
@@ -8,7 +8,7 @@
  padding-right: 100%;
 }

-:host /deep/ .dropdown-menu {
+:host ::ng-deep .dropdown-menu {
  width: 100% !important;
  max-height: $dropdown-menu-max-height;
  overflow-y: scroll;
@@ -17,10 +17,10 @@
  margin-top: $spacer !important;
 }

-:host /deep/ .dropdown-item.active,
-:host /deep/ .dropdown-item:active,
-:host /deep/ .dropdown-item:focus,
-:host /deep/ .dropdown-item:hover {
+:host ::ng-deep .dropdown-item.active,
+:host ::ng-deep .dropdown-item:active,
+:host ::ng-deep .dropdown-item:focus,
+:host ::ng-deep .dropdown-item:hover {
  color: $dropdown-link-hover-color !important;
  background-color: $dropdown-link-hover-bg !important;
 }
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
@@ -85,7 +85,7 @@ describe('DsDynamicTagComponent test suite', () => {
        DynamicFormsCoreModule,
        DynamicFormsNGBootstrapUIModule,
        FormsModule,
-        NgbModule.forRoot(),
+        NgbModule,
        ReactiveFormsModule,
      ],
      declarations: [
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts
@@ -33,7 +33,7 @@ export class DsDynamicTagComponent extends DynamicFormControlComponent implement
  @Output() change: EventEmitter<any> = new EventEmitter<any>();
  @Output() focus: EventEmitter<any> = new EventEmitter<any>();

-  @ViewChild('instance') instance: NgbTypeahead;
+  @ViewChild('instance', {static: false}) instance: NgbTypeahead;

  chips: Chips;
  hasAuthority: boolean;
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
@@ -1,18 +1,18 @@
-:host /deep/ .dropdown-menu {
+:host ::ng-deep .dropdown-menu {
  width: 100% !important;
  max-height: $dropdown-menu-max-height;
  overflow-y: auto !important;
  overflow-x: hidden;
 }

-:host /deep/ .dropdown-item {
+:host ::ng-deep .dropdown-item {
  border-bottom: $dropdown-border-width solid $dropdown-border-color;
 }

-:host /deep/ .dropdown-item.active,
-:host /deep/ .dropdown-item:active,
-:host /deep/ .dropdown-item:focus,
-:host /deep/ .dropdown-item:hover {
+:host ::ng-deep .dropdown-item.active,
+:host ::ng-deep .dropdown-item:active,
+:host ::ng-deep .dropdown-item:focus,
+:host ::ng-deep .dropdown-item:hover {
  color: $dropdown-link-hover-color !important;
  background-color: $dropdown-link-hover-bg !important;
 }
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
@@ -70,7 +70,7 @@ describe('DsDynamicTypeaheadComponent test suite', () => {
        DynamicFormsCoreModule,
        DynamicFormsNGBootstrapUIModule,
        FormsModule,
-        NgbModule.forRoot(),
+        NgbModule,
        ReactiveFormsModule,
        TranslateModule.forRoot()
      ],
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
@@ -31,7 +31,7 @@ export class DsDynamicTypeaheadComponent extends DynamicFormControlComponent imp
  @Output() change: EventEmitter<any> = new EventEmitter<any>();
  @Output() focus: EventEmitter<any> = new EventEmitter<any>();

-  @ViewChild('instance') instance: NgbTypeahead;
+  @ViewChild('instance', {static: false}) instance: NgbTypeahead;

  searching = false;
  searchOptions: IntegrationSearchOptions;
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
@@ -81,7 +81,7 @@ describe('DsDynamicLookupRelationModalComponent', () => {
    init();
    TestBed.configureTestingModule({
      declarations: [DsDynamicLookupRelationModalComponent],
-      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule.forRoot()],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule],
      providers: [
        {
          provide: SearchConfigurationService, useValue: {
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.spec.ts
@@ -95,7 +95,7 @@ describe('DsDynamicLookupRelationExternalSourceTabComponent', () => {
    init();
    TestBed.configureTestingModule({
      declarations: [DsDynamicLookupRelationExternalSourceTabComponent, VarDirective],
-      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule.forRoot(), BrowserAnimationsModule],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule, BrowserAnimationsModule],
      providers: [
        {
          provide: SearchConfigurationService, useValue: {
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.spec.ts
@@ -67,7 +67,7 @@ describe('DsDynamicLookupRelationExternalSourceTabComponent', () => {
    init();
    TestBed.configureTestingModule({
      declarations: [ExternalSourceEntryImportModalComponent],
-      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule.forRoot()],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule],
      providers: [
        { provide: LookupRelationService, useValue: lookupRelationService },
        { provide: SelectableListService, useValue: selectService },
--- a/src/app/shared/form/builder/models/form-field-previous-value-object.ts
+++ b/src/app/shared/form/builder/models/form-field-previous-value-object.ts
@@ -14,7 +14,7 @@ export class FormFieldPreviousValueObject {
    return this._path;
  }

-  set path(path: any[]) {
+  set path(path: string | string[]) {
    this._path = path;
  }

--- a/src/app/shared/form/form.component.spec.ts
+++ b/src/app/shared/form/form.component.spec.ts
@@ -141,7 +141,7 @@ describe('FormComponent test suite', () => {
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
-        NgbModule.forRoot(),
+        NgbModule,
        StoreModule.forRoot({}),
        TranslateModule.forRoot()
      ],
--- a/src/app/shared/input-suggestions/input-suggestions.component.ts
+++ b/src/app/shared/input-suggestions/input-suggestions.component.ts
@@ -92,7 +92,7 @@ export class InputSuggestionsComponent implements ControlValueAccessor, OnChange
  /**
   * Reference to the input field component
   */
-  @ViewChild('inputField') queryInput: ElementRef;
+  @ViewChild('inputField', {static: false}) queryInput: ElementRef;
  /**
   * Reference to the suggestion components
   */
--- a/src/app/shared/loading/loading.component.scss
+++ b/src/app/shared/loading/loading.component.scss
@@ -58,10 +58,10 @@ span.l-10 {-webkit-animation-delay: 0s;animation-delay: 0s;-ms-animation-delay:
 	100% {opacity: 0;}
 }

-@-keyframes loader {
-	0% {-transform: translateX(-30px); opacity: 0;}
+@keyframes loader {
+	0% {transform: translateX(-30px); opacity: 0;}
 	25% {opacity: 1;}
-	50% {-transform: translateX(30px); opacity: 0;}
+	50% {transform: translateX(30px); opacity: 0;}
 	100% {opacity: 0;}
 }

--- a/src/app/shared/menu/menu.actions.ts
+++ b/src/app/shared/menu/menu.actions.ts
@@ -223,4 +223,6 @@ export type MenuAction =
  | ActivateMenuSectionAction
  | DeactivateMenuSectionAction
  | ToggleActiveMenuSectionAction
+  | CollapseMenuPreviewAction
+  | ExpandMenuPreviewAction
 /* tslint:enable:max-classes-per-file */
--- a/src/app/shared/metadata-representation/metadata-representation-loader.component.ts
+++ b/src/app/shared/metadata-representation/metadata-representation-loader.component.ts
@@ -28,7 +28,7 @@ export class MetadataRepresentationLoaderComponent implements OnInit {
  /**
   * Directive to determine where the dynamic child component is located
   */
-  @ViewChild(MetadataRepresentationDirective) mdRepDirective: MetadataRepresentationDirective;
+  @ViewChild(MetadataRepresentationDirective, {static: true}) mdRepDirective: MetadataRepresentationDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
  }
--- a/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.spec.ts
+++ b/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.spec.ts
@@ -18,7 +18,7 @@ describe('ClaimedTaskActionsRejectComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
-        NgbModule.forRoot(),
+        NgbModule,
        ReactiveFormsModule,
        TranslateModule.forRoot({
          loader: {
@@ -75,7 +75,7 @@ describe('ClaimedTaskActionsRejectComponent', () => {
    expect(span).toBeDefined();
  });

-  it('should call openRejectModal on reject button click', fakeAsync(() => {
+  it('should call openRejectModal on reject button click', () => {
    spyOn(component.rejectForm, 'reset');
    const btn = fixture.debugElement.query(By.css('.btn-danger'));
    btn.nativeElement.click();
@@ -85,9 +85,9 @@ describe('ClaimedTaskActionsRejectComponent', () => {
    expect(component.modalRef).toBeDefined();

    component.modalRef.close()
-  }));
+  });

-  it('should call confirmReject on form submit', fakeAsync(() => {
+  it('should call confirmReject on form submit', () => {
    spyOn(component.reject, 'emit');

    const btn = fixture.debugElement.query(By.css('.btn-danger'));
@@ -104,5 +104,5 @@ describe('ClaimedTaskActionsRejectComponent', () => {
      expect(component.reject.emit).toHaveBeenCalled();
    });

-  }));
+  });
 });
--- a/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.spec.ts
+++ b/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.spec.ts
@@ -72,7 +72,7 @@ describe('WorkspaceitemActionsComponent', () => {

    TestBed.configureTestingModule({
      imports: [
-        NgbModule.forRoot(),
+        NgbModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
@@ -128,7 +128,7 @@ describe('WorkspaceitemActionsComponent', () => {
    expect(btn).toBeDefined();
  });

-  it('should call confirmDiscard on discard confirmation', fakeAsync(() => {
+  it('should call confirmDiscard on discard confirmation', () => {
    mockDataService.delete.and.returnValue(observableOf(true));
    spyOn(component, 'reload');
    const btn = fixture.debugElement.query(By.css('.btn-danger'));
@@ -144,7 +144,7 @@ describe('WorkspaceitemActionsComponent', () => {
      expect(mockDataService.delete).toHaveBeenCalledWith(mockObject);
    });

-  }));
+  });

  it('should display a success notification on delete success', async(() => {
    spyOn((component as any).modalService, 'open').and.returnValue({result: Promise.resolve('ok')});
--- a/src/app/shared/number-picker/number-picker.component.spec.ts
+++ b/src/app/shared/number-picker/number-picker.component.spec.ts
@@ -24,7 +24,7 @@ describe('NumberPickerComponent test suite', () => {
      imports: [
        FormsModule,
        ReactiveFormsModule,
-        NgbModule.forRoot()
+        NgbModule
      ],
      declarations: [
        NumberPickerComponent,
--- a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
+++ b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
@@ -1,4 +1,4 @@
-import { Component, ComponentFactoryResolver, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ComponentFactoryResolver, ContentChild, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { ListableObject } from '../listable-object.model';
 import { ViewMode } from '../../../../core/shared/view-mode.model';
 import { Context } from '../../../../core/shared/context.model';
@@ -49,7 +49,7 @@ export class ListableObjectComponentLoaderComponent implements OnInit {
  /**
   * Directive hook used to place the dynamic child component
   */
-  @ViewChild(ListableObjectDirective) listableObjectDirective: ListableObjectDirective;
+  @ViewChild(ListableObjectDirective, {static: true}) listableObjectDirective: ListableObjectDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
  }
--- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
@@ -1,5 +1,5 @@
 :host {
-    /deep/ em {
+    ::ng-deep em {
        font-weight: bold;
        font-style: normal;
    }
--- a/src/app/shared/object.util.ts
+++ b/src/app/shared/object.util.ts
@@ -5,7 +5,7 @@ import { isEqual, isObject, transform } from 'lodash';
 * Returns passed object without specified property
 */
 export function deleteProperty(object: object, key: string): object {
-  const {[key]: deletedKey, ...otherKeys} = object;
+  const { [key]: deletedKey, ...otherKeys } = object as { [key: string]: any };
  return otherKeys;
 }

@@ -47,7 +47,7 @@ export function difference(object: object, base: object) {
  const changes = (o, b) => {
    return transform(o, (result, value, key) => {
      if (!isEqual(value, b[key]) && isNotEmpty(value)) {
-        const resultValue = (isObject(value) && isObject(b[key])) ? changes(value, b[key]) : value;
+        const resultValue = (isObject(value) && isObject(b[key])) ? changes(value, b[key]) : value as object;
        if (!hasOnlyEmptyProperties(resultValue)) {
          result[key] = resultValue;
        }
--- a/src/app/shared/pagination/pagination.component.spec.ts
+++ b/src/app/shared/pagination/pagination.component.spec.ts
@@ -139,7 +139,7 @@ describe('Pagination component', () => {
          }
        }),
        NgxPaginationModule,
-        NgbModule.forRoot(),
+        NgbModule,
        RouterTestingModule.withRoutes([
          { path: 'home', component: TestComponent }
        ])],
--- a/src/app/shared/search-form/search-form.component.ts
+++ b/src/app/shared/search-form/search-form.component.ts
@@ -1,9 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { Router } from '@angular/router';
-import { hasValue, isNotEmpty } from '../empty.util';
-import { QueryParamsHandling } from '@angular/router/src/config';
-import { MYDSPACE_ROUTE } from '../../+my-dspace-page/my-dspace-page.component';
+import { isNotEmpty } from '../empty.util';
 import { SearchService } from '../../core/shared/search/search.service';
 import { currentPath } from '../utils/route.utils';

--- a/Show More
+++ b/Show More