diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac78458a35..561d00aee5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -61,7 +61,7 @@ Our versioning strategy is as follows:
- `scRichTextEmptyFieldEditingTemplate` for _scRichText_
- `scRouterLinkEmptyFieldEditingTemplate` for _scRouterLink_
- `scTextEmptyFieldEditingTemplate` for _scText_
-* `[sitecore-jss-angular]` `[templates/angular-xmcloud]` Render clientScripts / clientData. The new `sc-editing-scripts` component is exposed from `sitecore-jss-angular` package and required to be rendered on the page to enable Metadata Edit mode. ([#1924](https://github.com/Sitecore/jss/pull/1924))
+* `[sitecore-jss-angular]` `[templates/angular-xmcloud]` Render clientScripts / clientData. The new `sc-editing-scripts` component is exposed from `sitecore-jss-angular` package and required to be rendered on the page to enable Metadata Edit mode. ([#1924](https://github.com/Sitecore/jss/pull/1924))([#1948](https://github.com/Sitecore/jss/pull/1948))
* `[sitecore-jss]` GenericFieldValue model is updated to accept Date type ([#1916](https://github.com/Sitecore/jss/pull/1916))
* `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/healthz endpoint ([#1928](https://github.com/Sitecore/jss/pull/1928))
* `[sitecore-jss]` `[sitecore-jss-angular]` Render field metdata chromes in editMode metadata - in edit mode metadata in Pages, angular package field directives will render wrapping `code` elements with field metadata required for editing; ([#1926](https://github.com/Sitecore/jss/pull/1926))
diff --git a/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts b/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts
index 2f002d0304..7c3c6e8e2e 100644
--- a/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts
+++ b/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts
@@ -6,6 +6,7 @@ import { PAGES_EDITING_MARKER } from '@sitecore-jss/sitecore-jss/editing';
import { inject } from '@angular/core/testing';
import { JssStateService } from '../services/jss-state.service';
import { EditingScriptsComponent } from './editing-scripts.component';
+import * as utils from '@sitecore-jss/sitecore-jss/utils';
@Component({
selector: 'test-component',
@@ -35,6 +36,14 @@ describe('', () => {
},
};
+ beforeAll(() => {
+ jasmine.getEnv().allowRespy(true);
+ });
+
+ afterAll(() => {
+ jasmine.getEnv().allowRespy(false);
+ });
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestComponent, EditingScriptsComponent],
@@ -44,6 +53,7 @@ describe('', () => {
{ provide: DOCUMENT, useValue: document.implementation.createHTMLDocument() },
],
}).compileComponents();
+ spyOnProperty(utils, 'isServer').and.returnValue(() => true);
fixture = TestBed.createComponent(TestComponent);
});
@@ -111,6 +121,42 @@ describe('', () => {
}
));
+ it('should not add editing scripts and client data when edit mode is Metadata and rendering is not server side', inject(
+ [JssStateService, DOCUMENT],
+ (stateService: JssStateService, _document: Document) => {
+ stateService.setState({
+ sitecore: {
+ context: {
+ editMode: EditMode.Metadata,
+ pageState: LayoutServicePageState.Edit,
+ ...sharedData,
+ },
+ route: null,
+ },
+ });
+
+ spyOnProperty(utils, 'isServer').and.returnValue(() => false);
+
+ fixture.detectChanges();
+ // reset spy state
+ spyOnProperty(utils, 'isServer').and.returnValue(() => true);
+
+ expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeNull();
+ expect(_document.body.querySelector('#hrz-canvas-state')).toBeNull();
+ expect(_document.body.querySelector('#hrz-canvas-verification-token')).toBeNull();
+ expect(
+ _document.body.querySelector(
+ 'script[src="https://test.com/packages/page-extension/latest/page.js"]'
+ )
+ ).toBeNull();
+ expect(
+ _document.body.querySelector(
+ 'script[src="https://test.com/horizon/canvas/horizon.canvas.js"]'
+ )
+ ).toBeNull();
+ }
+ ));
+
it('should add editing scripts and client data when edit mode is Metadata', inject(
[JssStateService, DOCUMENT],
(stateService: JssStateService, _document: Document) => {
diff --git a/packages/sitecore-jss-angular/src/components/editing-scripts.component.ts b/packages/sitecore-jss-angular/src/components/editing-scripts.component.ts
index 9113ae3a1c..51408b50ff 100644
--- a/packages/sitecore-jss-angular/src/components/editing-scripts.component.ts
+++ b/packages/sitecore-jss-angular/src/components/editing-scripts.component.ts
@@ -3,6 +3,7 @@ import { getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
import { JssStateService } from '../services/jss-state.service';
import { DOCUMENT } from '@angular/common';
import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+import { isServer } from '@sitecore-jss/sitecore-jss/utils';
/**
* Component that renders editing scripts and client data for the current page in Sitecore Editor.
@@ -23,10 +24,11 @@ export class EditingScriptsComponent implements OnInit {
const state = this.stateService.stateValue;
const { pageState, editMode, clientData, clientScripts } = state.sitecore?.context || {};
- // Don't render anything if not in editing mode
+ // Don't render anything if not in editing mode or not server side
if (
pageState === LayoutServicePageState.Normal ||
- pageState === LayoutServicePageState.Preview
+ pageState === LayoutServicePageState.Preview ||
+ !isServer()
) {
return;
}