fix(common): skip transfer cache on client

transfer cache interceptor should not run again on the client as it is intended for server to client handoff

Squashed commit of the following:

commit 0dbeb44
Merge: a8d132a ee3bb81
Author: Jeffrey Smith <jsmith6690@gmail.com>
Date:   Mon Mar 25 17:51:23 2024 -0400

    Merge branch 'main' of https://github.com/angular/angular into feat/skip-transfer-cache-browser

commit ee3bb81
Author: Matthieu Riegler <kyro38@gmail.com>
Date:   Fri Mar 15 21:27:55 2024 +0100

    refactor(common): request low quality placeholder images (angular#54899)

    For every built-in load, this commit adds a parameter to load low quality placeholder images. Using 20/100 as base value.

    PR Close angular#54899

commit 13554f9
Author: Alan Agius <alanagius@google.com>
Date:   Thu Mar 21 14:17:03 2024 +0000

    fix(http): manage different body types for caching POST requests (angular#54980)

    This update enhances the encoding handling of request bodies to generate the necessary cache key for transfer cache functionality.

    Closes angular#54956

    PR Close angular#54980

commit b2ba945
Author: Matthieu Riegler <kyro38@gmail.com>
Date:   Sat Mar 23 23:30:54 2024 -0700

    docs: unescape html entities (angular#55016)

    adev supports regular characters in place of entity. Let's use them to make the ease the work for the editors.

    PR Close angular#55016

commit 9dabef0
Author: Andrea Canciani <ranma42@gmail.com>
Date:   Sun Mar 24 10:38:34 2024 +0100

    test(zone.js): fix zone.js test listener removal (angular#55017)

    The test was checking the wrong set of listeners because of a typo.

    PR Close angular#55017

commit 6f8b48a
Author: Jeffrey Smith <jsmith6690@gmail.com>
Date:   Sat Mar 23 12:29:41 2024 -0400

    feat(common): skip transfer cache on client

    transfer cache interceptor should not run again on the client as it is intended for server to client handoff

adev/src/content/best-practices/a11y.md

@@ -17,16 +17,16 @@ Use attribute binding template syntax to control the values of accessibility-rel
 When binding to ARIA attributes in Angular, you must use the `attr.` prefix. The ARIA specification depends specifically on HTML attributes rather than properties of DOM elements.
 
 <docs-code language="html">
-&lt;!-- Use attr. when binding to an ARIA attribute --&gt;
-&lt;button [attr.aria-label]="myActionLabel"&gt;&hellip;&lt;/button&gt;
+<!-- Use attr. when binding to an ARIA attribute -->
+<button [attr.aria-label]="myActionLabel">…</button>
 </docs-code>
 
 Note: This syntax is only necessary for attribute *bindings*.
 Static ARIA attributes require no extra syntax.
 
 <docs-code language="html">
-&lt;!-- Static ARIA attributes require no extra syntax --&gt;
-&lt;button aria-label="Save document"&gt;&hellip;&lt;/button&gt;
+<!-- Static ARIA attributes require no extra syntax -->
+<button aria-label="Save document">…</button>
 </docs-code>
 
 HELPFUL: By convention, HTML attributes use lowercase names \(`tabindex`\), while properties use camelCase names \(`tabIndex`\).
@@ -103,8 +103,8 @@ The following example shows how to find and focus the main content header in the
 
 <docs-code language="typescript">
 
-router.events.pipe(filter(e =&gt; e instanceof NavigationEnd)).subscribe(() =&gt; {
-  const mainHeader = document.querySelector('&num;main-content-header')
+router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
+  const mainHeader = document.querySelector('#main-content-header')
   if (mainHeader) {
     mainHeader.focus();
   }

adev/src/content/best-practices/style-guide.md

@@ -151,14 +151,14 @@ Consistent conventions make it easy to quickly identify and reference assets of
 
 | Symbol name                                                                                                                                                                          | File name |
 |:---                                                                                                                                                                                  |:---       |
-| <docs-code hideCopy language="typescript"> &commat;Component({ &hellip; }) &NewLine;export class AppComponent { } </docs-code>                             | app.component.ts |
-| <docs-code hideCopy language="typescript"> &commat;Component({ &hellip; }) &NewLine;export class HeroesComponent { } </docs-code>                          | heroes.component.ts |
-| <docs-code hideCopy language="typescript"> &commat;Component({ &hellip; }) &NewLine;export class HeroListComponent { } </docs-code>                        | hero-list.component.ts |
-| <docs-code hideCopy language="typescript"> &commat;Component({ &hellip; }) &NewLine;export class HeroDetailComponent { } </docs-code>                      | hero-detail.component.ts |
-| <docs-code hideCopy language="typescript"> &commat;Directive({ &hellip; }) &NewLine;export class ValidationDirective { } </docs-code>                      | validation.directive.ts |
-| <docs-code hideCopy language="typescript"> &commat;NgModule({ &hellip; }) &NewLine;export class AppModule </docs-code>                                     | app.module.ts |
-| <docs-code hideCopy language="typescript"> &commat;Pipe({ name: 'initCaps' }) &NewLine;export class InitCapsPipe implements PipeTransform { } </docs-code> | init-caps.pipe.ts |
-| <docs-code hideCopy language="typescript"> &commat;Injectable() &NewLine;export class UserProfileService { } </docs-code>                                  | user-profile.service.ts |
+| <docs-code hideCopy language="typescript"> @Component({ … }) <br>export class AppComponent { } </docs-code>                             | app.component.ts |
+| <docs-code hideCopy language="typescript"> @Component({ … }) <br>export class HeroesComponent { } </docs-code>                          | heroes.component.ts |
+| <docs-code hideCopy language="typescript"> @Component({ … }) <br>export class HeroListComponent { } </docs-code>                        | hero-list.component.ts |
+| <docs-code hideCopy language="typescript"> @Component({ … }) <br>export class HeroDetailComponent { } </docs-code>                      | hero-detail.component.ts |
+| <docs-code hideCopy language="typescript"> @Directive({ … }) <br>export class ValidationDirective { } </docs-code>                      | validation.directive.ts |
+| <docs-code hideCopy language="typescript"> @NgModule({ … }) <br>export class AppModule </docs-code>                                     | app.module.ts |
+| <docs-code hideCopy language="typescript"> @Pipe({ name: 'initCaps' }) <br>export class InitCapsPipe implements PipeTransform { } </docs-code> | init-caps.pipe.ts |
+| <docs-code hideCopy language="typescript"> @Injectable() <br>export class UserProfileService { } </docs-code>                                  | user-profile.service.ts |
 
 ### Service names
 
@@ -186,9 +186,9 @@ Service names such as `Credit` are nouns and require a suffix and should be name
 
 | Symbol name                                                                                                                                      | File name |
 |:---                                                                                                                                              |:---       |
-| <docs-code hideCopy language="typescript"> &commat;Injectable() &NewLine;export class HeroDataService { } </docs-code> | hero-data.service.ts |
-| <docs-code hideCopy language="typescript"> &commat;Injectable() &NewLine;export class CreditService { } </docs-code>   | credit.service.ts    |
-| <docs-code hideCopy language="typescript"> &commat;Injectable() &NewLine;export class Logger { } </docs-code>          | logger.service.ts    |
+| <docs-code hideCopy language="typescript"> @Injectable() <br>export class HeroDataService { } </docs-code> | hero-data.service.ts |
+| <docs-code hideCopy language="typescript"> @Injectable() <br>export class CreditService { } </docs-code>   | credit.service.ts    |
+| <docs-code hideCopy language="typescript"> @Injectable() <br>export class Logger { } </docs-code>          | logger.service.ts    |
 
 ### Bootstrapping
 
@@ -293,8 +293,8 @@ Provides a consistent way to quickly identify and reference pipes.
 
 | Symbol name                                                                                                                                                                          | File name |
 |:---                                                                                                                                                                                  |:---       |
-| <docs-code hideCopy language="typescript"> &commat;Pipe({ standalone: true, name: 'ellipsis' }) &NewLine;export class EllipsisPipe implements PipeTransform { } </docs-code> | ellipsis.pipe.ts  |
-| <docs-code hideCopy language="typescript"> &commat;Pipe({ standalone: true, name: 'initCaps' }) &NewLine;export class InitCapsPipe implements PipeTransform { } </docs-code> | init-caps.pipe.ts |
+| <docs-code hideCopy language="typescript"> @Pipe({ standalone: true, name: 'ellipsis' }) <br>export class EllipsisPipe implements PipeTransform { } </docs-code> | ellipsis.pipe.ts  |
+| <docs-code hideCopy language="typescript"> @Pipe({ standalone: true, name: 'initCaps' }) <br>export class InitCapsPipe implements PipeTransform { } </docs-code> | init-caps.pipe.ts |
 
 ### Unit test file names
 
@@ -354,40 +354,40 @@ project root
 ├── src
 │ ├── app
 │ │ ├── core
-│ │ │ └── exception.service.ts&verbar;spec.ts
-│ │ │ └── user-profile.service.ts&verbar;spec.ts
+│ │ │ └── exception.service.ts|spec.ts
+│ │ │ └── user-profile.service.ts|spec.ts
 │ │ ├── heroes
 │ │ │ ├── hero
-│ │ │ │ └── hero.component.ts&verbar;html&verbar;css&verbar;spec.ts
+│ │ │ │ └── hero.component.ts|html|css|spec.ts
 │ │ │ ├── hero-list
-│ │ │ │ └── hero-list.component.ts&verbar;html&verbar;css&verbar;spec.ts
+│ │ │ │ └── hero-list.component.ts|html|css|spec.ts
 │ │ │ ├── shared
-│ │ │ │ └── hero-button.component.ts&verbar;html&verbar;css&verbar;spec.ts
+│ │ │ │ └── hero-button.component.ts|html|css|spec.ts
 │ │ │ │ └── hero.model.ts
-│ │ │ │ └── hero.service.ts&verbar;spec.ts
-│ │ │ └── heroes.component.ts&verbar;html&verbar;css&verbar;spec.ts
+│ │ │ │ └── hero.service.ts|spec.ts
+│ │ │ └── heroes.component.ts|html|css|spec.ts
 │ │ │ └── heroes.routes.ts
 │ │ ├── shared
-│ │ │ └── init-caps.pipe.ts&verbar;spec.ts
-│ │ │ └── filter-text.component.ts&verbar;spec.ts
-│ │ │ └── filter-text.service.ts&verbar;spec.ts
+│ │ │ └── init-caps.pipe.ts|spec.ts
+│ │ │ └── filter-text.component.ts|spec.ts
+│ │ │ └── filter-text.service.ts|spec.ts
 │ │ ├── villains
 │ │ │ ├── villain
-│ │ │ │ └── &hellip;
+│ │ │ │ └── …
 │ │ │ ├── villain-list
-│ │ │ │ └── &hellip;
+│ │ │ │ └── …
 │ │ │ ├── shared
-│ │ │ │ └── &hellip;
-│ │ │ └── villains.component.ts&verbar;html&verbar;css&verbar;spec.ts
+│ │ │ │ └── …
+│ │ │ └── villains.component.ts|html|css|spec.ts
 │ │ │ └── villains.module.ts
 │ │ │ └── villains-routing.module.ts
-│ │ └── app.component.ts&verbar;html&verbar;css&verbar;spec.ts
+│ │ └── app.component.ts|html|css|spec.ts
 │ │ └── app.routes.ts
 │ └── main.ts
 │ └── index.html
-│ └── &hellip;
-└── node_modules/&hellip;
-└── &hellip;
+│ └── …
+└── node_modules/…
+└── …
 ```
 
 HELPFUL: While components in dedicated folders are widely preferred, another option for small applications is to keep components flat \(not in a dedicated folder\).
@@ -506,15 +506,15 @@ project root
 ├──├──app
 ├──├──├── shared
 ├──├──├──└── shared.module.ts
-├──├──├──└── init-caps.pipe.ts&verbar;spec.ts
-├──├──├──└── filter-text.component.ts&verbar;spec.ts
-├──├──├──└── filter-text.service.ts&verbar;spec.ts
-├──├──└── app.component.ts&verbar;html&verbar;css&verbar;spec.ts
+├──├──├──└── init-caps.pipe.ts|spec.ts
+├──├──├──└── filter-text.component.ts|spec.ts
+├──├──├──└── filter-text.service.ts|spec.ts
+├──├──└── app.component.ts|html|css|spec.ts
 ├──├──└── app.module.ts
 ├──├──└── app-routing.module.ts
 ├──└── main.ts
 ├──└── index.html
-└── &hellip;
+└── …
 ```
 
 <docs-code-multifile>
@@ -761,7 +761,7 @@ An element may have more than one attribute directive applied.
 **Do** be consistent in your choice.
 
 **Why**? <br />
-The property associated with `@HostBinding` or the method associated with `@HostListener` can be modified only in a single place &mdash;in the directive's class.
+The property associated with `@HostBinding` or the method associated with `@HostListener` can be modified only in a single place —in the directive's class.
 If you use the `host` metadata property, you must modify both the property/method declaration in the directive's class and the metadata in the decorator associated with the directive.
 
 <docs-code header="app/shared/validator.directive.ts" path="adev/src/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts"/>
@@ -811,7 +811,7 @@ In this scenario it would be better to provide the service at the component leve
 
 <docs-code header="src/app/treeshaking/service.ts" path="adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.ts"/>
 
-### Use the &commat;Injectable() class decorator
+### Use the @Injectable() class decorator
 
 #### Style 07-04
 

adev/src/content/best-practices/update.md

@@ -6,7 +6,7 @@ Keeping your Angular application up-to-date enables you to take advantage of lea
 
 This document contains information and resources to help you keep your Angular applications and libraries up-to-date.
 
-For information about our versioning policy and practices —including support and deprecation practices, as well as the release schedule— see [Angular versioning and releases](reference/releases "Angular versioning and releases").
+For information about our versioning policy and practices —including support and deprecation practices, as well as the release schedule— see [Angular versioning and releases](reference/releases "Angular versioning and releases").
 
 HELPFUL: If you are currently using AngularJS, see [Upgrading from AngularJS](https://angular.io/guide/upgrade "Upgrading from Angular JS").
 *AngularJS* is the name for all v1.x versions of Angular.

adev/src/content/ecosystem/service-workers/app-shell.md

@@ -33,7 +33,7 @@ After running this command you can see that the `angular.json` configuration fil
 <docs-code language="json">
 
 "server": {
-  "builder": "&commat;angular-devkit/build-angular:server",
+  "builder": "@angular-devkit/build-angular:server",
   "defaultConfiguration": "production",
   "options": {
     "outputPath": "dist/my-app/server",
@@ -58,7 +58,7 @@ After running this command you can see that the `angular.json` configuration fil
   }
 },
 "app-shell": {
-  "builder": "&commat;angular-devkit/build-angular:app-shell",
+  "builder": "@angular-devkit/build-angular:app-shell",
   "defaultConfiguration": "production",
   "options": {
     "route": "shell"

adev/src/content/ecosystem/service-workers/communications.md

@@ -28,7 +28,7 @@ The `versionUpdates` is an `Observable` property of `SwUpdate` and emits four ev
 ### Checking for updates
 
 It's possible to ask the service worker to check if any updates have been deployed to the server.
-The service worker checks for updates during initialization and on each navigation request —that is, when the user navigates from a different address to your application.
+The service worker checks for updates during initialization and on each navigation request —that is, when the user navigates from a different address to your application.
 However, you might choose to manually check for updates if you have a site that changes frequently or want updates to happen on a schedule.
 
 Do this with the `checkForUpdate()` method:

adev/src/content/ecosystem/service-workers/config.md

@@ -7,7 +7,7 @@ This topic describes the properties of the service worker configuration file.
 The `ngsw-config.json` JSON configuration file specifies which files and data URLs the Angular service worker should cache and how it should update the cached files and data.
 The [Angular CLI](tools/cli) processes this configuration file during `ng build`.
 
-All file paths must begin with `/`, which corresponds to the deployment directory &mdash; usually `dist/<project-name>` in CLI projects.
+All file paths must begin with `/`, which corresponds to the deployment directory — usually `dist/<project-name>` in CLI projects.
 
 Unless otherwise commented, patterns use a **limited*** glob format that internally will be converted into regex:
 
@@ -68,10 +68,10 @@ This field contains an array of asset groups, each of which defines a set of ass
 {
   "assetGroups": [
     {
-      &hellip;
+      …
     },
     {
-      &hellip;
+      …
     }
   ]
 }
@@ -169,10 +169,10 @@ This field contains an array of data groups, each of which defines a set of data
 {
   "dataGroups": [
     {
-      &hellip;
+      …
     },
     {
-      &hellip;
+      …
     }
   ]
 }
@@ -197,7 +197,7 @@ export interface DataGroup {
     maxSize: number;
     maxAge: string;
     timeout?: string;
-    strategy?: 'freshness' &verbar; 'performance';
+    strategy?: 'freshness' | 'performance';
   };
   cacheQueryOptions?: {
     ignoreSearch?: boolean;
@@ -226,7 +226,7 @@ Only non-mutating requests (GET and HEAD) are cached.
 Occasionally APIs change formats in a way that is not backward-compatible.
 A new version of the application might not be compatible with the old API format and thus might not be compatible with existing cached resources from that API.
 
-`version` provides a mechanism to indicate that the resources being cached have been updated in a backwards-incompatible way, and that the old cache entries &mdash;those from previous versions&mdash; should be discarded.
+`version` provides a mechanism to indicate that the resources being cached have been updated in a backwards-incompatible way, and that the old cache entries —those from previous versions— should be discarded.
 
 `version` is an integer field and defaults to `1`.
 
@@ -306,7 +306,7 @@ In case you are not familiar, an [opaque response][https://fetch.spec.whatwg.org
 One of the characteristics of an opaque response is that the service worker is not allowed to read its status, meaning it can't check if the request was successful or not.
 See [Introduction to fetch()][https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types] for more details.
 
-If you are not able to implement CORS &mdash; for example, if you don't control the origin &mdash; prefer using the `freshness` strategy for resources that result in opaque responses.
+If you are not able to implement CORS — for example, if you don't control the origin — prefer using the `freshness` strategy for resources that result in opaque responses.
 
 </docs-callout>
 

adev/src/content/ecosystem/service-workers/devops.md

@@ -155,7 +155,7 @@ Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100
 Last update tick: 1s496u
 Last update run: never
 Task queue:
- * init post-load (update, cleanup)
+ * init post-load (update, cleanup)
 
 Debug log:
 
@@ -232,7 +232,7 @@ HELPFUL: This version hash is the "latest manifest hash" listed above. Both clie
 Last update tick: 1s496u
 Last update run: never
 Task queue:
- * init post-load (update, cleanup)
+ * init post-load (update, cleanup)
 
 </docs-code>
 

adev/src/content/ecosystem/service-workers/getting-started.md

@@ -54,7 +54,7 @@ To simulate a network issue, disable network interaction for your application.
 
 In Chrome:
 
-1. Select **Tools** > **Developer Tools** (from the Chrome menu located in the top right corner).
+1. Select **Tools** > **Developer Tools** (from the Chrome menu located in the top right corner).
 1. Go to the **Network tab**.
 1. Select **Offline** in the **Throttling** dropdown menu.
 
@@ -110,7 +110,7 @@ Make a change to the application, and watch the service worker install the updat
     <docs-code language="shell">
 
     ng build
-    npx http-server -p 8080 -c-1 dist/&lt;project-name&gt;/browser
+    npx http-server -p 8080 -c-1 dist/<project-name>/browser
 
     </docs-code>
 

adev/src/content/ecosystem/service-workers/push-notifications.md

@@ -14,7 +14,7 @@ Invoke push notifications by pushing a message with a valid payload.
 See `SwPush` for guidance.
 
 HELPFUL: In Chrome, you can test push notifications without a backend.
-Open Devtools -> Application -> Service Workers and use the `Push` input to send a JSON notification payload.
+Open Devtools -> Application -> Service Workers and use the `Push` input to send a JSON notification payload.
 
 ## Notification click handling
 

adev/src/content/ecosystem/web-workers.md

@@ -11,7 +11,7 @@ To add a web worker to an existing project, use the Angular CLI `ng generate` co
 
 <docs-code language="shell">
 
-ng generate web-worker &lt;location&gt;
+ng generate web-worker <location>
 
 </docs-code>
 
@@ -31,8 +31,8 @@ The command performs the following actions.
 
     <docs-code language="typescript" header="src/app/app.worker.ts">
 
-    addEventListener('message', ({ data }) =&gt; {
-      const response = `worker response to &dollar;{data}`;
+    addEventListener('message', ({ data }) => {
+      const response = `worker response to ${data}`;
       postMessage(response);
     });
 
@@ -45,8 +45,8 @@ The command performs the following actions.
     if (typeof Worker !== 'undefined') {
       // Create a new
       const worker = new Worker(new URL('./app.worker', import.meta.url));
-      worker.onmessage = ({ data }) =&gt; {
-        console.log(`page got message: &dollar;{data}`);
+      worker.onmessage = ({ data }) => {
+        console.log(`page got message: ${data}`);
       };
       worker.postMessage('hello');
     } else {