fix(ssr): fix ssr issues found in dotcom testing

Legal-and-General · Apr 22, 2024 · 3c46197 · 3c46197
1 parent 0429c15
commit 3c46197
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/projects/canopy/src/lib/heading/heading.component.ts b/projects/canopy/src/lib/heading/heading.component.ts
@@ -10,7 +10,6 @@ import type { HeadingLevel } from './heading.interface';
   encapsulation: ViewEncapsulation.None,
   host: {
     class: 'lg-heading',
-    ngSkipHydration: 'true',
   },
   standalone: true,
   imports: [ NgIf, NgTemplateOutlet ],

diff --git a/projects/canopy/src/lib/utils/dynamic-style.service.spec.ts b/projects/canopy/src/lib/utils/dynamic-style.service.spec.ts
@@ -1,12 +1,17 @@
+import { DOCUMENT } from '@angular/common';
+import { TestBed } from '@angular/core/testing';
+
 import { BreakpointValues } from '../shared/breakpoints.interface';
 
 import { DynamicStyleService } from './dynamic-style.service';
 
 describe('DynamicStyleService', () => {
   let service: DynamicStyleService;
+  let document: Document;
 
   beforeEach(() => {
-    service = new DynamicStyleService();
+    document = TestBed.inject(DOCUMENT);
+    service = new DynamicStyleService(document);
     service.styleTag = {};
     service.styleTag.innerHTML = '';
   });

diff --git a/projects/canopy/src/lib/utils/dynamic-style.service.ts b/projects/canopy/src/lib/utils/dynamic-style.service.ts
@@ -1,4 +1,5 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 import { BreakpointValues } from '../shared/breakpoints.interface';
 
@@ -24,7 +25,7 @@ export class DynamicStyleService {
   selectors = [];
   mediaQueries = {};
 
-  constructor() {
+  constructor(@Inject(DOCUMENT) private document: Document) {
     this.addStyleTag();
   }
 
@@ -138,9 +139,9 @@ export class DynamicStyleService {
   }
 
   private addStyleTag(): void {
-    this.styleTag = document.createElement('style');
+    this.styleTag = this.document.createElement('style');
     this.styleTag.type = 'text/css';
-    document.getElementsByTagName('head')[0].appendChild(this.styleTag);
+    this.document.getElementsByTagName('head')[0].appendChild(this.styleTag);
   }
 
   private createMediaQuery(breakpoint: BreakpointValues): string {