feat: update contents to v19.2

adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.en.html

@@ -6,26 +6,26 @@ <h2 class="docs-title">On this page</h2>
     <ul class="docs-faceted-list">
       <!-- TODO: Hide li elements with class docs-toc-item-h3 for laptop, table and phone screen resolutions  -->
       @for (item of tableOfContentItems(); track item.id) {
-      <li
-        class="docs-faceted-list-item"
-        [class.docs-toc-item-h2]="item.level === TableOfContentsLevel.H2"
-        [class.docs-toc-item-h3]="item.level === TableOfContentsLevel.H3"
-      >
-        <a
-          routerLink="."
-          [fragment]="item.id"
-          [class.docs-faceted-list-item-active]="item.id === activeItemId()"
+        <li
+          class="docs-faceted-list-item"
+          [class.docs-toc-item-h2]="item.level === TableOfContentsLevel.H2"
+          [class.docs-toc-item-h3]="item.level === TableOfContentsLevel.H3"
         >
-          {{ item.title }}
-        </a>
-      </li>
+          <!-- Not using routerLink + fragment because of: https://github.com/angular/angular/issues/30139 -->
+          <a
+            [href]="location.path() + '#' + item.id"
+            [class.docs-faceted-list-item-active]="item.id === activeItemId()"
+          >
+            {{ item.title }}
+          </a>
+        </li>
       }
     </ul>
   </nav>
   @if (shouldDisplayScrollToTop()) {
-  <button type="button" (click)="scrollToTop()">
-    <docs-icon role="presentation">arrow_upward_alt</docs-icon>
-    Back to the top
-  </button>
+    <button type="button" (click)="scrollToTop()">
+      <docs-icon role="presentation">arrow_upward_alt</docs-icon>
+      Back to the top
+    </button>
   }
 </aside>

adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.html

@@ -6,26 +6,26 @@ <h2 class="docs-title">目次</h2>
     <ul class="docs-faceted-list">
       <!-- TODO: Hide li elements with class docs-toc-item-h3 for laptop, table and phone screen resolutions  -->
       @for (item of tableOfContentItems(); track item.id) {
-      <li
-        class="docs-faceted-list-item"
-        [class.docs-toc-item-h2]="item.level === TableOfContentsLevel.H2"
-        [class.docs-toc-item-h3]="item.level === TableOfContentsLevel.H3"
-      >
-        <a
-          routerLink="."
-          [fragment]="item.id"
-          [class.docs-faceted-list-item-active]="item.id === activeItemId()"
+        <li
+          class="docs-faceted-list-item"
+          [class.docs-toc-item-h2]="item.level === TableOfContentsLevel.H2"
+          [class.docs-toc-item-h3]="item.level === TableOfContentsLevel.H3"
         >
-          {{ item.title }}
-        </a>
-      </li>
+          <!-- Not using routerLink + fragment because of: https://github.com/angular/angular/issues/30139 -->
+          <a
+            [href]="location.path() + '#' + item.id"
+            [class.docs-faceted-list-item-active]="item.id === activeItemId()"
+          >
+            {{ item.title }}
+          </a>
+        </li>
       }
     </ul>
   </nav>
   @if (shouldDisplayScrollToTop()) {
-  <button type="button" (click)="scrollToTop()">
-    <docs-icon role="presentation">arrow_upward_alt</docs-icon>
-    トップに戻る
-  </button>
+    <button type="button" (click)="scrollToTop()">
+      <docs-icon role="presentation">arrow_upward_alt</docs-icon>
+      トップに戻る
+    </button>
   }
 </aside>

adev-ja/src/app/core/layout/navigation/navigation.component.en.html

@@ -346,6 +346,27 @@
                 </svg>
               </a>
             </li>
+            <li>
+              <a
+                [href]="BLUESKY"
+                cdkMenuItem
+                title="Angular Bluesky profile"
+                target="_blank"
+                rel="noopener"
+              >
+                <!-- Bluesky Icon -->
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+			<path
+				d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path>
+                </svg>
+              </a>
+            </li>
             <li>
               <a
                 [href]="MEDIUM"

adev-ja/src/app/core/layout/navigation/navigation.component.html

@@ -346,6 +346,27 @@
                 </svg>
               </a>
             </li>
+            <li>
+              <a
+                [href]="BLUESKY"
+                cdkMenuItem
+                title="Angular Bluesky profile"
+                target="_blank"
+                rel="noopener"
+              >
+                <!-- Bluesky Icon -->
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+			<path
+				d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path>
+                </svg>
+              </a>
+            </li>
             <li>
               <a
                 [href]="MEDIUM"

adev-ja/src/app/sub-navigation-data.en.ts

@@ -859,6 +859,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'ecosystem/web-workers',
         contentPath: 'ecosystem/web-workers',
       },
+      {
+        label: 'Custom build pipeline',
+        path: 'ecosystem/custom-build-pipeline',
+        contentPath: 'ecosystem/custom-build-pipeline',
+      },
       {
         label: 'Angular Fire',
         path: 'https://github.com/angular/angularfire#readme',
@@ -1233,6 +1238,11 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'reference/migrations/cleanup-unused-imports',
         contentPath: 'reference/migrations/cleanup-unused-imports',
       },
+      {
+        label: 'Self-closing tags',
+        path: 'reference/migrations/self-closing-tags',
+        contentPath: 'reference/migrations/self-closing-tags',
+      },
     ],
   },
 ];

adev-ja/src/app/sub-navigation-data.ts

@@ -859,6 +859,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'ecosystem/web-workers',
         contentPath: 'ecosystem/web-workers',
       },
+      {
+        label: 'カスタムビルドパイプライン',
+        path: 'ecosystem/custom-build-pipeline',
+        contentPath: 'ecosystem/custom-build-pipeline',
+      },
       {
         label: 'Angular Fire',
         path: 'https://github.com/angular/angularfire#readme',
@@ -1241,6 +1246,11 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'reference/migrations/cleanup-unused-imports',
         contentPath: 'reference/migrations/cleanup-unused-imports',
       },
+      {
+        label: 'Self-closing tags',
+        path: 'reference/migrations/self-closing-tags',
+        contentPath: 'reference/migrations/self-closing-tags',
+      },
     ],
   },
 ];

adev-ja/src/content/best-practices/runtime-performance/zone-pollution.md

@@ -35,7 +35,7 @@ class AppComponent implements OnInit {
 
 The preceding snippet instructs Angular to call `setInterval` outside the Angular Zone and skip running change detection after `pollForUpdates` runs.
 
-Third-party libraries commonly trigger unnecessary change detection cycles when their APIs are invoked within the Angular zone. This phenomenon particularly affects libraries that setup event listeners or initiate other tasks (such as timers, XHR requests, etc.). Avoid these extra cycles by calling library APIs outside the Angular zone:
+Third-party libraries commonly trigger unnecessary change detection cycles when their APIs are invoked within the Angular zone. This phenomenon particularly affects libraries that set up event listeners or initiate other tasks (such as timers, XHR requests, etc.). Avoid these extra cycles by calling library APIs outside the Angular zone:
 
 <docs-code header="Move the plot initialization outside of the Zone" language='ts' linenums>
 import { Component, NgZone, OnInit } from '@angular/core';

adev-ja/src/content/ecosystem/custom-build-pipeline.md

@@ -0,0 +1,33 @@
+# Custom build pipeline
+
+When building an Angular app we strongly recommend you to use the Angular CLI to leverage its structure-dependent update functionality and build system abstraction. This way your projects benefit from the latest security, performance, and API improvements and transparent build improvements.
+
+This page explores the **rare use cases** when you need a custom build pipeline that does not use the Angular CLI. All listed tools below are open source build plugins that are maintained by members of the Angular community. To learn more about their support model and maintenance status look at their documentation and GitHub repository URLs.
+
+## When should you use a custom build pipeline?
+
+There are some niche use cases when you may want to maintain a custom build pipeline. For example:
+
+* You have an existing app using a different toolchain and you’d like to add Angular to it
+* You’re strongly coupled to [module federation](https://module-federation.io/) and unable to adopt bundler-agnostic [native federation](https://www.npmjs.com/package/@angular-architects/native-federation)
+* You’d like to create an short-lived experiment using your favorite build tool
+
+## What are the options?
+
+Currently, there are two well supported community tools that enable you to create a custom build pipeline with a [Vite plugin](https://www.npmjs.com/package/@analogjs/vite-plugin-angular) and [Rspack plugin](https://www.npmjs.com/package/@ng-rspack/build). Both of them use underlying abstractions that power the Angular CLI. They allow you to create a flexible build pipeline and require manual maintenance and no automated update experience.
+
+### Rspack
+
+Rspack is a Rust-based bundler that aims to provide compatibility with the webpack plugin ecosystem.
+
+If your project is tightly coupled to the webpack ecosystem, heavily relying on a custom webpack configuration you can leverage Rspack to improve your build times.
+
+You can find more about Angular Rspack on the project’s [documentation website](https://angular-rspack.dev/guide/migration/from-webpack).
+
+### Vite
+
+Vite is a frontend build tool that aims to provide a faster and leaner development experience for modern web projects. Vite is also extensible through its plugin system that allows ecosystems to build integrations with Vite, such as Vitest for unit and browser testing, Storybook for authoring components in isolation, and more. The Angular CLI also uses Vite as its development server.
+
+The [AnalogJS Vite plugin for Angular](https://www.npmjs.com/package/@analogjs/vite-plugin-angular) enables the adoption of Angular with a project or framework that uses or is built on top of Vite. This can consist of developing and building an Angular project with Vite directly, or adding Angular to an existing project or pipeline. One example is integrating Angular UI components into a documentation website using [Astro and Starlight](https://analogjs.org/docs/packages/astro-angular/overview).
+
+You can learn more about AnalogJS and how to use the plugin through its [documentation page](https://analogjs.org/docs/packages/vite-plugin-angular/overview).

adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md

@@ -63,7 +63,7 @@ If an Observable used in `toSignal` produces an error, that error is thrown when
 
 If an Observable used in `toSignal` completes, the signal continues to return the most recently emitted value before completion.
 
-## Create an RxJS Observale from a signal with `toObservable`
+## Create an RxJS Observable from a signal with `toObservable`
 
 Use the `toObservable` utility to create an `Observable` which tracks the value of a signal. The signal's value is monitored with an `effect` which emits the value to the Observable when it changes.
 

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

@@ -318,7 +318,7 @@ If not specified, the default value depends on the data group's configured strat
 | Groups with the `performance` strategy | The default value is `false` and the service worker doesn't cache opaque responses. These groups would continue to return a cached response until `maxAge` expires, even if the error was due to a temporary network or server issue. Therefore, it would be problematic for the service worker to cache an error response. |
 
 <docs-callout title="Comment on opaque responses">
-  
+
 In case you are not familiar, an [opaque response](https://fetch.spec.whatwg.org#concept-filtered-response-opaque) is a special type of response returned when requesting a resource that is on a different origin which doesn't return CORS headers.
 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.
@@ -366,9 +366,9 @@ If the field is omitted, it defaults to:
 
 [
   '/**',           // Include all URLs.
-  '!/**/*.*',      // Exclude URLs to files.
-  '!/**/****',     // Exclude URLs containing `**` in the last segment.
-  '!/**/****/**',  // Exclude URLs containing `**` in any other segment.
+  '!/**/*.*',      // Exclude URLs to files (containing a file extension in the last segment).
+  '!/**/*__*',     // Exclude URLs containing `__` in the last segment.
+  '!/**/*__*/**',  // Exclude URLs containing `__` in any other segment.
 ]
 
 </docs-code>

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

@@ -37,7 +37,24 @@ The CLI project is now set up to use the Angular service worker.
 ## Service worker in action: a tour
 
 This section demonstrates a service worker in action,
-using an example application.
+using an example application. To enable service worker support during local development, use the production configuration with the following command:
+
+<docs-code language="shell">
+
+ng serve --prod
+
+</docs-code>
+
+Alternatively, you can use the [`http-server package`](https://www.npmjs.com/package/http-server) from
+npm, which supports service worker applications. Run it without installation using:
+
+<docs-code language="shell">
+
+npx http-server -p 8080 -c-1 dist/&lt;project-name&gt;/browser
+
+</docs-code>
+
+This will serve your application with service worker support at http://localhost:8080.
 
 ### Initial load
 

adev-ja/src/content/guide/components/inputs.en.md

@@ -232,7 +232,7 @@ export class MediaControls {
 }
 ```
 
-In the example above, the `CustomSlider` can write values into its `value` model input, which then propagates those values back to the `volume` property in `MediaControls`. This binding keeps that values of `value` and `volume` in sync.
+In the example above, the `CustomSlider` can write values into its `value` model input, which then propagates those values back to the `volume` property in `MediaControls`. This binding keeps the values of `value` and `volume` in sync.
 
 ### Implicit `change` events
 

adev-ja/src/content/guide/components/lifecycle.en.md

@@ -132,7 +132,7 @@ TypeScript property name as a key, rather than the alias.
 ### ngOnDestroy
 
 The `ngOnDestroy` method runs once just before a component is destroyed. Angular destroys a
-component when it is no longer shown on the page, such as being hidden by `NgIf` or upon navigating
+component when it is no longer shown on the page, such as being hidden by `@if` or upon navigating
 to another page.
 
 #### DestroyRef

adev-ja/src/content/guide/components/lifecycle.md

@@ -132,7 +132,7 @@ TypeScriptプロパティ名をキーとして使用します。
 ### ngOnDestroy
 
 `ngOnDestroy` メソッドは、コンポーネントが破棄される直前に1回だけ実行されます。
-Angularは、コンポーネントがページに表示されなくなった場合（`NgIf` によって隠された場合や、別のページに移動した場合など）、
+Angularは、コンポーネントがページに表示されなくなった場合（`@if` によって隠された場合や、別のページに移動した場合など）、
 コンポーネントを破棄します。
 
 #### DestroyRef

adev-ja/src/content/guide/components/programmatic-rendering.en.md

@@ -117,10 +117,11 @@ JavaScript [dynamic import](https://developer.mozilla.org/docs/Web/JavaScript/Re
   `
 })
 export class AdminSettings {
-  advancedSettings: {new(): AdminSettings} | undefined;
+  advancedSettings: {new(): AdvancedSettings} | undefined;
 
   async loadAdvanced() {
-    this.advancedSettings = await import('path/to/advanced_settings.js');
+    const { AdvancedSettings } = await import('path/to/advanced_settings.js');
+    this.advancedSettings = AdvancedSettings;
   }
 }
 ```

adev-ja/src/content/guide/components/programmatic-rendering.md

@@ -117,10 +117,11 @@ export class InnerItem {
   `
 })
 export class AdminSettings {
-  advancedSettings: {new(): AdminSettings} | undefined;
+  advancedSettings: {new(): AdvancedSettings} | undefined;
 
   async loadAdvanced() {
-    this.advancedSettings = await import('path/to/advanced_settings.js');
+    const { AdvancedSettings } = await import('path/to/advanced_settings.js');
+    this.advancedSettings = AdvancedSettings;
   }
 }
 ```