add check to ensure document.styleSheets is defined

src/app/core/core.module.ts

@@ -23,7 +23,6 @@ import { NotificationsService } from '../shared/notifications/notifications.serv
 import { SelectableListService } from '../shared/object-list/selectable-list/selectable-list.service';
 import { ObjectSelectService } from '../shared/object-select/object-select.service';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
-import { CSSVariableService } from '../shared/sass-helper/css-variable.service';
 import { SidebarService } from '../shared/sidebar/sidebar.service';
 import { UploaderService } from '../shared/uploader/uploader.service';
 import { SectionFormOperationsService } from '../submission/sections/form/section-form-operations.service';
@@ -257,7 +256,6 @@ const PROVIDERS = [
   DefaultChangeAnalyzer,
   ArrayMoveChangeAnalyzer,
   ObjectSelectService,
-  CSSVariableService,
   MenuService,
   ObjectUpdatesService,
   SearchService,

src/app/shared/sass-helper/css-variable.service.ts

@@ -5,7 +5,7 @@ import { AddAllCSSVariablesAction, AddCSSVariableAction, ClearCSSVariablesAction
 import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
 import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
 import { Observable } from 'rxjs';
-import { hasValue } from '../empty.util';
+import { hasValue, isNotEmpty } from '../empty.util';
 import { KeyValuePair } from '../key-value-pair.model';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { CSSVariablesState } from './css-variable.reducer';
@@ -13,7 +13,9 @@ import { CSSVariablesState } from './css-variable.reducer';
 /**
  * This service deals with adding and retrieving CSS variables to and from the store
  */
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class CSSVariableService {
   isSameDomain = (styleSheet) => {
     // Internal style blocks won't have an href value
@@ -88,31 +90,35 @@ export class CSSVariableService {
    * ex; [{key: "--color-accent", value: "#b9f500"}, {key: "--color-text", value: "#252525"}, ...]
    */
   getCSSVariablesFromStylesheets(document: Document): KeyValuePair<string, string>[] {
-    // styleSheets is array-like, so we convert it to an array.
+    if (isNotEmpty(document.styleSheets)) {
-    // Filter out any stylesheets not on this domain
+      // styleSheets is array-like, so we convert it to an array.
-    return [...document.styleSheets]
+      // Filter out any stylesheets not on this domain
-      .filter(this.isSameDomain)
+      return [...document.styleSheets]
-      .reduce(
+        .filter(this.isSameDomain)
-        (finalArr, sheet) =>
+        .reduce(
-          finalArr.concat(
+          (finalArr, sheet) =>
-            // cssRules is array-like, so we convert it to an array
+            finalArr.concat(
-            [...sheet.cssRules].filter(this.isStyleRule).reduce((propValArr, rule: any) => {
+              // cssRules is array-like, so we convert it to an array
-              const props = [...rule.style]
+              [...sheet.cssRules].filter(this.isStyleRule).reduce((propValArr, rule: any) => {
-                .map((propName) => {
+                const props = [...rule.style]
-                    return {
+                  .map((propName) => {
-                      key: propName.trim(),
+                      return {
-                      value: rule.style.getPropertyValue(propName).trim()
+                        key: propName.trim(),
-                    } as KeyValuePair<string, string>;
+                        value: rule.style.getPropertyValue(propName).trim()
-                  }
+                      } as KeyValuePair<string, string>;
-                )
+                    }
-                // Discard any props that don't start with "--". Custom props are required to.
+                  )
-                .filter(({ key }: KeyValuePair<string, string>) => key.indexOf('--') === 0);
+                  // Discard any props that don't start with "--". Custom props are required to.
+                  .filter(({ key }: KeyValuePair<string, string>) => key.indexOf('--') === 0);
 
-              return [...propValArr, ...props];
+                return [...propValArr, ...props];
-            }, [])
+              }, [])
-          ),
+            ),
-        []
+          []
-      );
+        );
+    } else {
+      return [];
+    }
   }
 }
 

src/modules/app/server-init.service.ts

@@ -18,7 +18,6 @@ import { LocaleService } from '../../app/core/locale/locale.service';
 import { Angulartics2DSpace } from '../../app/statistics/angulartics/dspace-provider';
 import { MetadataService } from '../../app/core/metadata/metadata.service';
 import { BreadcrumbsService } from '../../app/breadcrumbs/breadcrumbs.service';
-import { CSSVariableService } from '../../sass-helper/css-variable.service';
 import { ThemeService } from '../../app/shared/theme-support/theme.service';
 import { take } from 'rxjs/operators';
 
@@ -37,7 +36,6 @@ export class ServerInitService extends InitService {
     protected angulartics2DSpace: Angulartics2DSpace,
     protected metadata: MetadataService,
     protected breadcrumbsService: BreadcrumbsService,
-    protected cssService: CSSVariableService,
     protected themeService: ThemeService,
   ) {
     super(