From c934a8e72bec9f96ccf1a1de1a3384d40dfd2731 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Fri, 17 Mar 2023 15:51:43 +0000 Subject: [PATCH] fix(platform-browser): only add `ng-app-id` to style on server side (#49465) This commit fixes an issue where it causes issues in G3 when we add `ng-app-id` on browser apps. PR Close #49465 --- goldens/size-tracking/integration-payloads.json | 6 +++--- .../platform-server/e2e/helloworld-spec.ts | 2 +- .../src/dom/shared_styles_host.ts | 17 +++++++++++++---- .../test/dom/shared_styles_host_spec.ts | 8 ++++---- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/goldens/size-tracking/integration-payloads.json b/goldens/size-tracking/integration-payloads.json index 9bf9a4534b8d1..35872df4f3b42 100644 --- a/goldens/size-tracking/integration-payloads.json +++ b/goldens/size-tracking/integration-payloads.json @@ -2,7 +2,7 @@ "cli-hello-world": { "uncompressed": { "runtime": 908, - "main": 128561, + "main": 129184, "polyfills": 33792 } }, @@ -41,14 +41,14 @@ "animations": { "uncompressed": { "runtime": 898, - "main": 159415, + "main": 159979, "polyfills": 33782 } }, "standalone-bootstrap": { "uncompressed": { "runtime": 918, - "main": 86975, + "main": 87601, "polyfills": 33802 } }, diff --git a/integration/platform-server/e2e/helloworld-spec.ts b/integration/platform-server/e2e/helloworld-spec.ts index 422e5c6ea68d4..7942f0c8b498f 100644 --- a/integration/platform-server/e2e/helloworld-spec.ts +++ b/integration/platform-server/e2e/helloworld-spec.ts @@ -28,7 +28,7 @@ describe('Hello world E2E Tests', function() { expect(element(by.css('div')).getText()).toEqual('Hello world!'); // Make sure the server styles get reused by the client. - expect(element(by.css('style[ng-app-id="ng"]')).isPresent()).toBeTruthy(); + expect(element(by.css('style[ng-app-id="ng"]')).isPresent()).toBeFalsy(); expect(element(by.css('style[ng-style-reused]')).isPresent()).toBeTruthy(); expect(element(by.css('style')).getText()).toBe(''); diff --git a/packages/platform-browser/src/dom/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts index 19616b6b60373..090bc8894e045 100644 --- a/packages/platform-browser/src/dom/shared_styles_host.ts +++ b/packages/platform-browser/src/dom/shared_styles_host.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {DOCUMENT} from '@angular/common'; -import {APP_ID, CSP_NONCE, Inject, Injectable, OnDestroy, Optional} from '@angular/core'; +import {DOCUMENT, isPlatformServer} from '@angular/common'; +import {APP_ID, CSP_NONCE, Inject, Injectable, OnDestroy, Optional, PLATFORM_ID} from '@angular/core'; /** The style elements attribute name used to set value of `APP_ID` token. */ const APP_ID_ATTRIBUTE_NAME = 'ng-app-id'; @@ -22,12 +22,15 @@ export class SharedStylesHost implements OnDestroy { > (); private readonly hostNodes = new Set(); private readonly styleNodesInDOM: Map|null; + private readonly platformIsServer: boolean; constructor( @Inject(DOCUMENT) private readonly doc: Document, @Inject(APP_ID) private readonly appId: string, - @Inject(CSP_NONCE) @Optional() private nonce?: string|null) { + @Inject(CSP_NONCE) @Optional() private nonce?: string|null, + @Inject(PLATFORM_ID) readonly platformId: object = {}) { this.styleNodesInDOM = this.collectServerRenderedStyles(); + this.platformIsServer = isPlatformServer(platformId); this.resetHostNodes(); } @@ -132,6 +135,8 @@ export class SharedStylesHost implements OnDestroy { // `styleNodesInDOM` cannot be undefined due to the above `styleNodesInDOM?.get`. styleNodesInDOM!.delete(style); + styleEl.removeAttribute(APP_ID_ATTRIBUTE_NAME); + if (typeof ngDevMode === 'undefined' || ngDevMode) { // This attribute is solely used for debugging purposes. styleEl.setAttribute('ng-style-reused', ''); @@ -147,7 +152,11 @@ export class SharedStylesHost implements OnDestroy { } styleEl.textContent = style; - styleEl.setAttribute(APP_ID_ATTRIBUTE_NAME, this.appId); + + if (this.platformIsServer) { + styleEl.setAttribute(APP_ID_ATTRIBUTE_NAME, this.appId); + } + return styleEl; } } diff --git a/packages/platform-browser/test/dom/shared_styles_host_spec.ts b/packages/platform-browser/test/dom/shared_styles_host_spec.ts index 09e92751c9f24..355f663b01e50 100644 --- a/packages/platform-browser/test/dom/shared_styles_host_spec.ts +++ b/packages/platform-browser/test/dom/shared_styles_host_spec.ts @@ -25,20 +25,20 @@ import {expect} from '@angular/platform-browser/testing/src/matchers'; it('should add existing styles to new hosts', () => { ssh.addStyles(['a {};']); ssh.addHost(someHost); - expect(someHost.innerHTML).toEqual(''); + expect(someHost.innerHTML).toEqual(''); }); it('should add new styles to hosts', () => { ssh.addHost(someHost); ssh.addStyles(['a {};']); - expect(someHost.innerHTML).toEqual(''); + expect(someHost.innerHTML).toEqual(''); }); it('should add styles only once to hosts', () => { ssh.addStyles(['a {};']); ssh.addHost(someHost); ssh.addStyles(['a {};']); - expect(someHost.innerHTML).toEqual(''); + expect(someHost.innerHTML).toEqual(''); }); it('should use the document head as default host', () => { @@ -49,7 +49,7 @@ import {expect} from '@angular/platform-browser/testing/src/matchers'; it('should remove style nodes on destroy', () => { ssh.addStyles(['a {};']); ssh.addHost(someHost); - expect(someHost.innerHTML).toEqual(''); + expect(someHost.innerHTML).toEqual(''); ssh.ngOnDestroy(); expect(someHost.innerHTML).toEqual('');