fix(platform-server): avoid duplicate TransferState info after renderApplication call (#49094)

AndrewKushnir · alxhub · commit 25e220a23ab9 · 2023-02-16T16:00:30.000-08:00
This commit updates the `renderApplication` function to avoid duplicate serialization of the data from the `TransferState` class. The `renderApplication` function imports providers from the `ServerModule`, which already include the `TransferState` serialization providers, but the same providers were also included inside the `renderApplication` as well, which led to the duplication. PR Close #49094
diff --git a/packages/platform-server/src/utils.ts b/packages/platform-server/src/utils.ts
@@ -198,7 +198,6 @@ export function renderApplication<T>(rootComponent: Type<T>, options: {
   const appProviders = [
     importProvidersFrom(BrowserModule.withServerTransition({appId})),
     importProvidersFrom(ServerModule),
-    ...TRANSFER_STATE_SERIALIZATION_PROVIDERS,
     ...(options.providers ?? []),
   ];
   return _render(platform, internalCreateApplication({rootComponent, appProviders}));
diff --git a/packages/platform-server/test/integration_spec.ts b/packages/platform-server/test/integration_spec.ts
@@ -10,9 +10,9 @@ import {animate, AnimationBuilder, state, style, transition, trigger} from '@ang
 import {DOCUMENT, isPlatformServer, PlatformLocation, ɵgetDOM as getDOM} from '@angular/common';
 import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
-import {ApplicationRef, CompilerFactory, Component, destroyPlatform, getPlatform, HostListener, Inject, Injectable, Input, NgModule, NgZone, PLATFORM_ID, PlatformRef, ViewEncapsulation} from '@angular/core';
+import {ApplicationRef, CompilerFactory, Component, destroyPlatform, getPlatform, HostListener, Inject, inject as coreInject, Injectable, Input, NgModule, NgZone, PLATFORM_ID, PlatformRef, ViewEncapsulation} from '@angular/core';
 import {inject, TestBed, waitForAsync} from '@angular/core/testing';
-import {BrowserModule, Title} from '@angular/platform-browser';
+import {BrowserModule, makeStateKey, Title, TransferState} from '@angular/platform-browser';
 import {BEFORE_APP_SERIALIZED, INITIAL_CONFIG, platformDynamicServer, PlatformState, renderModule, renderModuleFactory, ServerModule} from '@angular/platform-server';
 import {Observable} from 'rxjs';
 import {first} from 'rxjs/operators';
@@ -298,6 +298,33 @@ const MyStylesAppStandalone = createMyStylesApp(true);
 class ExampleStylesModule {
 }
 
+function createMyTransferStateApp(standalone: boolean) {
+  @Component({
+    standalone,
+    selector: 'app',
+    template: `<div>Works!</div>`,
+  })
+  class MyStylesApp {
+    state = coreInject(TransferState);
+    constructor() {
+      this.state.set(makeStateKey<string>('some-key'), 'some-value');
+    }
+  }
+  return MyStylesApp;
+}
+
+const MyTransferStateApp = createMyTransferStateApp(false);
+const MyTransferStateAppStandalone = createMyTransferStateApp(true);
+
+
+@NgModule({
+  declarations: [MyTransferStateApp],
+  imports: [BrowserModule.withServerTransition({appId: 'transfer-state-app'}), ServerModule],
+  bootstrap: [MyTransferStateApp]
+})
+class MyTransferStateModule {
+}
+
 @NgModule({
   bootstrap: [MyServerApp],
   imports: [MyServerAppModule, ServerModule, HttpClientModule, HttpClientTestingModule],
@@ -828,6 +855,23 @@ describe('platform-server integration', () => {
            });
          }));
 
+      it(`using ${isStandalone ? 'renderApplication' : 'renderModule'} ` +
+             `should serialize transfer state only once`,
+         waitForAsync(() => {
+           const options = {document: doc};
+           const bootstrap = isStandalone ?
+               renderApplication(
+                   MyTransferStateAppStandalone, {...options, appId: 'transfer-state-app'}) :
+               renderModule(MyTransferStateModule, {...options});
+           bootstrap.then(output => {
+             const expectedOutput =
+                 '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER" ng-server-context="other"><div>Works!</div></app>' +
+                 '<script id="transfer-state-app-state" type="application/json">{&q;some-key&q;:&q;some-value&q;}</script></body></html>';
+             expect(output).toEqual(expectedOutput);
+             called = true;
+           });
+         }));
+
       it('uses `other` as the `serverContext` value when all symbols are removed after sanitization',
          waitForAsync(() => {
            const options = {
