Merge pull request #234 from angular/main

Create a new pull request by comparing changes across two branches
angular-indonesia · Aug 28, 2024 · 02c2db2 · 02c2db2
2 parents c9d99c2 + 226a67d
commit 02c2db2
Show file tree

Hide file tree

Showing 101 changed files with 2,225 additions and 593 deletions.
diff --git a/.github/workflows/scorecard.yml b/.github/workflows/scorecard.yml
@@ -47,6 +47,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: 'Upload to code-scanning'
-        uses: github/codeql-action/upload-sarif@883d8588e56d1753a8a58c1c86e88976f0c23449 # v3.26.3
+        uses: github/codeql-action/upload-sarif@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
         with:
           sarif_file: results.sarif
diff --git a/.pullapprove.yml b/.pullapprove.yml
@@ -372,7 +372,7 @@ groups:
     <<: *defaults
     conditions:
       - >
-        contains_any_globs(files.exclude('packages/compiler-cli/*').exclude('packages/language-service/*').exclude('packages/service-worker/*'), [
+        contains_any_globs(files.exclude('packages/compiler-cli/*').exclude('packages/language-service/*').exclude('packages/service-worker/*').exclude('packages/core/schematics/*'), [
           'packages/**/testing/**/{*,.*}',
           ])
     reviewers:

diff --git a/adev/BUILD.bazel b/adev/BUILD.bazel
@@ -161,6 +161,7 @@ http_server(
         "angular/adev/build/browser",
     ],
     enable_dev_ui = True,
+    relax_cors = True,
     deps = [":build"],
 )
 

diff --git a/adev/shared-docs/package.json b/adev/shared-docs/package.json
@@ -19,7 +19,7 @@
     "fast-glob": "~3.3.2",
     "fflate": "^0.8.2",
     "html-entities": "~2.5.2",
-    "jsdom": "~24.1.0",
+    "jsdom": "~25.0.0",
     "marked": "~14.0.0",
     "mermaid": "^11.0.0",
     "shiki": "^1.10.3"

diff --git a/adev/src/app/app-scroller.ts b/adev/src/app/app-scroller.ts
@@ -41,6 +41,13 @@ export class AppScroller {
           this._lastScrollEvent = e;
         }),
         filter(() => !this.disableScrolling),
+        filter(() => {
+          const info = this.router.lastSuccessfulNavigation?.extras.info as Record<
+            'disableScrolling',
+            boolean
+          >;
+          return !info?.['disableScrolling'];
+        }),
         switchMap((e) => {
           return firstValueFrom(
             this.appRef.isStable.pipe(
@@ -64,7 +71,7 @@ export class AppScroller {
     const {anchor, position} = this._lastScrollEvent;
 
     // Don't scroll during rendering
-    this.cancelScroll = afterNextRender(
+    const ref = afterNextRender(
       {
         write: () => {
           if (position) {
@@ -77,6 +84,9 @@ export class AppScroller {
         },
       },
       {injector: this.injector},
-    ).destroy;
+    );
+    this.cancelScroll = () => {
+      ref.destroy();
+    };
   }
 }
diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.html b/adev/src/app/features/references/api-items-section/api-items-section.component.html
@@ -3,7 +3,7 @@ <h3 [attr.id]="group.id">
     @if (group.isFeatured) {
       <docs-icon aria-hidden>star</docs-icon>
     }
-    <a routerLink="/api" [fragment]="group.id" class="adev-api-anchor" tabindex="-1">{{ group.title }}</a>
+    <a routerLink="/api" [fragment]="group.id" queryParamsHandling="preserve" class="adev-api-anchor" tabindex="-1">{{ group.title }}</a>
   </h3>
 </header>
 

diff --git a/adev/src/app/features/references/api-reference-list/api-reference-list.component.spec.ts b/adev/src/app/features/references/api-reference-list/api-reference-list.component.spec.ts
@@ -14,6 +14,7 @@ import {signal} from '@angular/core';
 import {ApiItemType} from '../interfaces/api-item-type';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {provideRouter} from '@angular/router';
+import {Location} from '@angular/common';
 
 describe('ApiReferenceList', () => {
   let component: ApiReferenceList;
@@ -117,4 +118,30 @@ describe('ApiReferenceList', () => {
     harness.navigateByUrl(`/api`);
     expect(component.type()).toBe(ALL_STATUSES_KEY);
   });
+
+  it('should set the value of the queryParam equal to the query value', async () => {
+    const location = TestBed.inject(Location);
+    component.query.set('item1');
+    await fixture.whenStable();
+    expect(location.path()).toBe(`?query=item1&type=All`);
+  });
+
+  it('should keep the values of existing queryParams and set new queryParam equal to the type', async () => {
+    const location = TestBed.inject(Location);
+
+    component.query.set('item1');
+    await fixture.whenStable();
+    expect(location.path()).toBe(`?query=item1&type=All`);
+
+    component.filterByItemType(ApiItemType.BLOCK);
+    await fixture.whenStable();
+    expect(location.path()).toBe(`?query=item1&type=${ApiItemType.BLOCK}`);
+  });
+
+  it('should display all items when query and type are undefined', async () => {
+    component.query.set(undefined);
+    component.type.set(undefined);
+    await fixture.whenStable();
+    expect(component.filteredGroups()![0].items).toEqual([fakeItem1, fakeItem2]);
+  });
 });
diff --git a/adev/src/app/features/references/api-reference-list/api-reference-list.component.ts b/adev/src/app/features/references/api-reference-list/api-reference-list.component.ts
@@ -23,6 +23,7 @@ import ApiItemsSection from '../api-items-section/api-items-section.component';
 import {FormsModule} from '@angular/forms';
 import {SlideToggle, TextField} from '@angular/docs';
 import {NgFor, NgIf} from '@angular/common';
+import {Params, Router} from '@angular/router';
 import {ApiItemType} from '../interfaces/api-item-type';
 import {ApiReferenceManager} from './api-reference-manager.service';
 import ApiItemLabel from '../api-item-label/api-item-label.component';
@@ -50,6 +51,7 @@ export const ALL_STATUSES_KEY = 'All';
 })
 export default class ApiReferenceList {
   private readonly apiReferenceManager = inject(ApiReferenceManager);
+  private readonly router = inject(Router);
   filterInput = viewChild.required(TextField, {read: ElementRef});
   private readonly injector = inject(EnvironmentInjector);
 
@@ -71,9 +73,28 @@ export default class ApiReferenceList {
         {injector: this.injector},
       );
     });
+
+    effect(
+      () => {
+        const params: Params = {
+          'query': this.query() ? this.query() : null,
+          'type': this.type() ? this.type() : null,
+        };
+
+        this.router.navigate([], {
+          queryParams: params,
+          replaceUrl: true,
+          preserveFragment: true,
+          info: {
+            disableScrolling: true,
+          },
+        });
+      },
+      {allowSignalWrites: true},
+    );
   }
 
-  query = signal('');
+  query = model<string | undefined>('');
   includeDeprecated = signal(false);
 
   type = model<string | undefined>(ALL_STATUSES_KEY);
@@ -87,8 +108,10 @@ export default class ApiReferenceList {
         id: group.id,
         items: group.items.filter((apiItem) => {
           return (
-            (this.query()
-              ? apiItem.title.toLocaleLowerCase().includes(this.query().toLocaleLowerCase())
+            (this.query() !== undefined
+              ? apiItem.title
+                  .toLocaleLowerCase()
+                  .includes((this.query() as string).toLocaleLowerCase())
               : true) &&
             (this.includeDeprecated() ? true : apiItem.isDeprecated === this.includeDeprecated()) &&
             (this.type() === undefined ||

diff --git a/adev/src/app/features/update/recommendations.ts b/adev/src/app/features/update/recommendations.ts
@@ -2094,7 +2094,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'v17 zone.js support',
     action:
-      'Make sure that you are using a supported version of Zone.js before you upgrade your application. Angular v16 supports Zone.js version 0.14.x or later.',
+      'Make sure that you are using a supported version of Zone.js before you upgrade your application. Angular v17 supports Zone.js version 0.14.x or later.',
   },
   {
     possibleIn: 1700,

diff --git a/adev/src/content/cli/help/build-info.json b/adev/src/content/cli/help/build-info.json
@@ -1,4 +1,4 @@
 {
   "branchName": "refs/heads/main",
-  "sha": "b08d472c072301d166137a1bc3634607682de2ad"
+  "sha": "3513cd179d428e6c8d6529f1010dac65282a8a44"
 }
diff --git a/adev/src/content/cli/help/completion.json b/adev/src/content/cli/help/completion.json
@@ -3,7 +3,7 @@
   "command": "ng completion",
   "shortDescription": "Set up Angular CLI autocompletion for your terminal.",
   "longDescriptionRelativePath": "@angular/cli/src/commands/completion/long-description.md",
-  "longDescription": "Setting up autocompletion configures your terminal, so pressing the `<TAB>` key while in the middle\nof typing will display various commands and options available to you. This makes it very easy to\ndiscover and use CLI commands without lots of memorization.\n\n![A demo of Angular CLI autocompletion in a terminal. The user types several partial `ng` commands,\nusing autocompletion to finish several arguments and list contextual options.\n](assets/images/guide/cli/completion.gif)\n\n## Automated setup\n\nThe CLI should prompt and ask to set up autocompletion for you the first time you use it (v14+).\nSimply answer \"Yes\" and the CLI will take care of the rest.\n\n```\n$ ng serve\n? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show possible options and autocomplete arguments. (Enabling autocompletion will modify configuration files in your home directory.) Yes\nAppended `source <(ng completion script)` to `/home/my-username/.bashrc`. Restart your terminal or run:\n\nsource <(ng completion script)\n\nto autocomplete `ng` commands.\n\n# Serve output...\n```\n\nIf you already refused the prompt, it won't ask again. But you can run `ng completion` to\ndo the same thing automatically.\n\nThis modifies your terminal environment to load Angular CLI autocompletion, but can't update your\ncurrent terminal session. Either restart it or run `source <(ng completion script)` directly to\nenable autocompletion in your current session.\n\nTest it out by typing `ng ser<TAB>` and it should autocomplete to `ng serve`. Ambiguous arguments\nwill show all possible options and their documentation, such as `ng generate <TAB>`.\n\n## Manual setup\n\nSome users may have highly customized terminal setups, possibly with configuration files checked\ninto source control with an opinionated structure. `ng completion` only ever appends Angular's setup\nto an existing configuration file for your current shell, or creates one if none exists. If you want\nmore control over exactly where this configuration lives, you can manually set it up by having your\nshell run at startup:\n\n```bash\nsource <(ng completion script)\n```\n\nThis is equivalent to what `ng completion` will automatically set up, and gives power users more\nflexibility in their environments when desired.\n\n## Platform support\n\nAngular CLI supports autocompletion for the Bash and Zsh shells on MacOS and Linux operating\nsystems. On Windows, Git Bash and [Windows Subsystem for Linux](https://docs.microsoft.com/windows/wsl/)\nusing Bash or Zsh are supported.\n\n## Global install\n\nAutocompletion works by configuring your terminal to invoke the Angular CLI on startup to load the\nsetup script. This means the terminal must be able to find and execute the Angular CLI, typically\nthrough a global install that places the binary on the user's `$PATH`. If you get\n`command not found: ng`, make sure the CLI is installed globally which you can do with the `-g`\nflag:\n\n```bash\nnpm install -g @angular/cli\n```\n",
+  "longDescription": "Setting up autocompletion configures your terminal, so pressing the `<TAB>` key while in the middle\nof typing will display various commands and options available to you. This makes it very easy to\ndiscover and use CLI commands without lots of memorization.\n\n![A demo of Angular CLI autocompletion in a terminal. The user types several partial `ng` commands,\nusing autocompletion to finish several arguments and list contextual options.\n](assets/images/guide/cli/completion.gif)\n\n## Automated setup\n\nThe CLI should prompt and ask to set up autocompletion for you the first time you use it (v14+).\nSimply answer \"Yes\" and the CLI will take care of the rest.\n\n```\n$ ng serve\n? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show possible options and autocomplete arguments. (Enabling autocompletion will modify configuration files in your home directory.) Yes\nAppended `source <(ng completion script)` to `/home/my-username/.bashrc`. Restart your terminal or run:\n\nsource <(ng completion script)\n\nto autocomplete `ng` commands.\n\n# Serve output...\n```\n\nIf you already refused the prompt, it won't ask again. But you can run `ng completion` to\ndo the same thing automatically.\n\nThis modifies your terminal environment to load Angular CLI autocompletion, but can't update your\ncurrent terminal session. Either restart it or run `source <(ng completion script)` directly to\nenable autocompletion in your current session.\n\nTest it out by typing `ng ser<TAB>` and it should autocomplete to `ng serve`. Ambiguous arguments\nwill show all possible options and their documentation, such as `ng generate <TAB>`.\n\n## Manual setup\n\nSome users may have highly customized terminal setups, possibly with configuration files checked\ninto source control with an opinionated structure. `ng completion` only ever appends Angular's setup\nto an existing configuration file for your current shell, or creates one if none exists. If you want\nmore control over exactly where this configuration lives, you can manually set it up by having your\nshell run at startup:\n\n```bash\nsource <(ng completion script)\n```\n\nThis is equivalent to what `ng completion` will automatically set up, and gives power users more\nflexibility in their environments when desired.\n\n## Platform support\n\nAngular CLI supports autocompletion for the Bash and Zsh shells on MacOS and Linux operating\nsystems. On Windows, Git Bash and [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/)\nusing Bash or Zsh are supported.\n\n## Global install\n\nAutocompletion works by configuring your terminal to invoke the Angular CLI on startup to load the\nsetup script. This means the terminal must be able to find and execute the Angular CLI, typically\nthrough a global install that places the binary on the user's `$PATH`. If you get\n`command not found: ng`, make sure the CLI is installed globally which you can do with the `-g`\nflag:\n\n```bash\nnpm install -g @angular/cli\n```\n",
   "aliases": [],
   "deprecated": false,
   "options": [

diff --git a/adev/src/content/cli/help/extract-i18n.json b/adev/src/content/cli/help/extract-i18n.json
@@ -5,12 +5,6 @@
   "aliases": [],
   "deprecated": false,
   "options": [
-    {
-      "name": "browser-target",
-      "type": "string",
-      "deprecated": "Use 'buildTarget' instead.",
-      "description": "A browser builder target to extract i18n messages in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`."
-    },
     {
       "name": "build-target",
       "type": "string",

diff --git a/adev/src/content/cli/help/generate.json b/adev/src/content/cli/help/generate.json
@@ -247,6 +247,12 @@
           "default": false,
           "description": "The declaring NgModule exports this component."
         },
+        {
+          "name": "export-default",
+          "type": "boolean",
+          "default": false,
+          "description": "Use default export for the component instead of a named export."
+        },
         {
           "name": "flat",
           "type": "boolean",

diff --git a/adev/src/content/cli/help/serve.json b/adev/src/content/cli/help/serve.json
@@ -13,12 +13,6 @@
       "type": "array",
       "description": "List of hosts that are allowed to access the dev server. This option has no effect when using the 'application' or other esbuild-based builders."
     },
-    {
-      "name": "browser-target",
-      "type": "string",
-      "deprecated": "Use 'buildTarget' instead.",
-      "description": "A browser builder target to serve in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`."
-    },
     {
       "name": "build-target",
       "type": "string",

diff --git a/adev/src/content/guide/image-optimization.md b/adev/src/content/guide/image-optimization.md
@@ -248,6 +248,8 @@ If you haven't used `sizes` before, a good place to start is to set it based on
 
 If you find that the above does not cover your desired image behavior, see the documentation on [advanced sizes values](#advanced-sizes-values).
 
+Note that `NgOptimizedImage` automatically prepends `"auto"` to the provided `sizes` value. This is an optimization that increases the accuracy of srcset selection on browsers which support `sizes="auto"`, and is ignored by browsers which do not.
+
 By default, the responsive breakpoints are:
 
 `[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]`

diff --git a/adev/src/content/guide/security.md b/adev/src/content/guide/security.md
@@ -201,12 +201,13 @@ See [caniuse.com/trusted-types](https://caniuse.com/trusted-types) for the curre
 
 To enforce Trusted Types for your application, you must configure your application's web server to emit HTTP headers with one of the following Angular policies:
 
-| Policies                | Detail                                                                                                                                                                                                                                                                                     |
-| :---------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `angular`               | This policy is used in security-reviewed code that is internal to Angular, and is required for Angular to function when Trusted Types are enforced. Any inline template values or content sanitized by Angular is treated as safe by this policy.                                          |
-| `angular#unsafe-bypass` | This policy is used for applications that use any of the methods in Angular's [DomSanitizer](api/platform-browser/DomSanitizer) that bypass security, such as `bypassSecurityTrustHtml`. Any application that uses these methods must enable this policy.                                  |
-| `angular#unsafe-jit`    | This policy is used by the [Just-In-Time (JIT) compiler](api/core/Compiler). You must enable this policy if your application interacts directly with the JIT compiler or is running in JIT mode using the [platform browser dynamic](api/platform-browser-dynamic/platformBrowserDynamic). |
-| `angular#bundler`       | This policy is used by the Angular CLI bundler when creating lazy chunk files.                                                                                                                                                                                                             |
+| Policies                 | Detail                                                                                                                                                                                                                                                                                     |
+| :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `angular`                | This policy is used in security-reviewed code that is internal to Angular, and is required for Angular to function when Trusted Types are enforced. Any inline template values or content sanitized by Angular is treated as safe by this policy.                                          |
+| `angular#bundler`        | This policy is used by the Angular CLI bundler when creating lazy chunk files.                                                                                                                                                                                                             |
+| `angular#unsafe-bypass`  | This policy is used for applications that use any of the methods in Angular's [DomSanitizer](api/platform-browser/DomSanitizer) that bypass security, such as `bypassSecurityTrustHtml`. Any application that uses these methods must enable this policy.                                  |
+| `angular#unsafe-jit`     | This policy is used by the [Just-In-Time (JIT) compiler](api/core/Compiler). You must enable this policy if your application interacts directly with the JIT compiler or is running in JIT mode using the [platform browser dynamic](api/platform-browser-dynamic/platformBrowserDynamic). |
+| `angular#unsafe-upgrade` | This policy is used by the [@angular/upgrade](api/upgrade/static/UpgradeModule) package. You must enable this policy if your application is an AngularJS hybrid. |
 
 You should configure the HTTP headers for Trusted Types in the following locations: