Skip to content

Commit 621b225

Browse files
authored
feat: update contents to v19.2 (#1010)
* feat: update origin to 19.2.1 * chore: update untranslated files * fix: migrate tiny changes * fix: apply original changes * chore: use gemini-2.0-flash * chore: remove unused files * chore: address lint errors * fix: migrate adev app patches
1 parent c6eb47a commit 621b225

File tree

62 files changed

+530
-418
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+530
-418
lines changed

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

+16-16
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,26 @@ <h2 class="docs-title">On this page</h2>
66
<ul class="docs-faceted-list">
77
<!-- TODO: Hide li elements with class docs-toc-item-h3 for laptop, table and phone screen resolutions -->
88
@for (item of tableOfContentItems(); track item.id) {
9-
<li
10-
class="docs-faceted-list-item"
11-
[class.docs-toc-item-h2]="item.level === TableOfContentsLevel.H2"
12-
[class.docs-toc-item-h3]="item.level === TableOfContentsLevel.H3"
13-
>
14-
<a
15-
routerLink="."
16-
[fragment]="item.id"
17-
[class.docs-faceted-list-item-active]="item.id === activeItemId()"
9+
<li
10+
class="docs-faceted-list-item"
11+
[class.docs-toc-item-h2]="item.level === TableOfContentsLevel.H2"
12+
[class.docs-toc-item-h3]="item.level === TableOfContentsLevel.H3"
1813
>
19-
{{ item.title }}
20-
</a>
21-
</li>
14+
<!-- Not using routerLink + fragment because of: https://github.com/angular/angular/issues/30139 -->
15+
<a
16+
[href]="location.path() + '#' + item.id"
17+
[class.docs-faceted-list-item-active]="item.id === activeItemId()"
18+
>
19+
{{ item.title }}
20+
</a>
21+
</li>
2222
}
2323
</ul>
2424
</nav>
2525
@if (shouldDisplayScrollToTop()) {
26-
<button type="button" (click)="scrollToTop()">
27-
<docs-icon role="presentation">arrow_upward_alt</docs-icon>
28-
Back to the top
29-
</button>
26+
<button type="button" (click)="scrollToTop()">
27+
<docs-icon role="presentation">arrow_upward_alt</docs-icon>
28+
Back to the top
29+
</button>
3030
}
3131
</aside>

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

+16-16
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,26 @@ <h2 class="docs-title">目次</h2>
66
<ul class="docs-faceted-list">
77
<!-- TODO: Hide li elements with class docs-toc-item-h3 for laptop, table and phone screen resolutions -->
88
@for (item of tableOfContentItems(); track item.id) {
9-
<li
10-
class="docs-faceted-list-item"
11-
[class.docs-toc-item-h2]="item.level === TableOfContentsLevel.H2"
12-
[class.docs-toc-item-h3]="item.level === TableOfContentsLevel.H3"
13-
>
14-
<a
15-
routerLink="."
16-
[fragment]="item.id"
17-
[class.docs-faceted-list-item-active]="item.id === activeItemId()"
9+
<li
10+
class="docs-faceted-list-item"
11+
[class.docs-toc-item-h2]="item.level === TableOfContentsLevel.H2"
12+
[class.docs-toc-item-h3]="item.level === TableOfContentsLevel.H3"
1813
>
19-
{{ item.title }}
20-
</a>
21-
</li>
14+
<!-- Not using routerLink + fragment because of: https://github.com/angular/angular/issues/30139 -->
15+
<a
16+
[href]="location.path() + '#' + item.id"
17+
[class.docs-faceted-list-item-active]="item.id === activeItemId()"
18+
>
19+
{{ item.title }}
20+
</a>
21+
</li>
2222
}
2323
</ul>
2424
</nav>
2525
@if (shouldDisplayScrollToTop()) {
26-
<button type="button" (click)="scrollToTop()">
27-
<docs-icon role="presentation">arrow_upward_alt</docs-icon>
28-
トップに戻る
29-
</button>
26+
<button type="button" (click)="scrollToTop()">
27+
<docs-icon role="presentation">arrow_upward_alt</docs-icon>
28+
トップに戻る
29+
</button>
3030
}
3131
</aside>

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

+21
Original file line numberDiff line numberDiff line change
@@ -346,6 +346,27 @@
346346
</svg>
347347
</a>
348348
</li>
349+
<li>
350+
<a
351+
[href]="BLUESKY"
352+
cdkMenuItem
353+
title="Angular Bluesky profile"
354+
target="_blank"
355+
rel="noopener"
356+
>
357+
<!-- Bluesky Icon -->
358+
<svg
359+
width="16"
360+
height="16"
361+
viewBox="0 0 16 16"
362+
fill="none"
363+
xmlns="http://www.w3.org/2000/svg"
364+
>
365+
<path
366+
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>
367+
</svg>
368+
</a>
369+
</li>
349370
<li>
350371
<a
351372
[href]="MEDIUM"

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

+21
Original file line numberDiff line numberDiff line change
@@ -346,6 +346,27 @@
346346
</svg>
347347
</a>
348348
</li>
349+
<li>
350+
<a
351+
[href]="BLUESKY"
352+
cdkMenuItem
353+
title="Angular Bluesky profile"
354+
target="_blank"
355+
rel="noopener"
356+
>
357+
<!-- Bluesky Icon -->
358+
<svg
359+
width="16"
360+
height="16"
361+
viewBox="0 0 16 16"
362+
fill="none"
363+
xmlns="http://www.w3.org/2000/svg"
364+
>
365+
<path
366+
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>
367+
</svg>
368+
</a>
369+
</li>
349370
<li>
350371
<a
351372
[href]="MEDIUM"

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

+10
Original file line numberDiff line numberDiff line change
@@ -859,6 +859,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
859859
path: 'ecosystem/web-workers',
860860
contentPath: 'ecosystem/web-workers',
861861
},
862+
{
863+
label: 'Custom build pipeline',
864+
path: 'ecosystem/custom-build-pipeline',
865+
contentPath: 'ecosystem/custom-build-pipeline',
866+
},
862867
{
863868
label: 'Angular Fire',
864869
path: 'https://github.com/angular/angularfire#readme',
@@ -1233,6 +1238,11 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
12331238
path: 'reference/migrations/cleanup-unused-imports',
12341239
contentPath: 'reference/migrations/cleanup-unused-imports',
12351240
},
1241+
{
1242+
label: 'Self-closing tags',
1243+
path: 'reference/migrations/self-closing-tags',
1244+
contentPath: 'reference/migrations/self-closing-tags',
1245+
},
12361246
],
12371247
},
12381248
];

Diff for: adev-ja/src/app/sub-navigation-data.ts

+10
Original file line numberDiff line numberDiff line change
@@ -859,6 +859,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
859859
path: 'ecosystem/web-workers',
860860
contentPath: 'ecosystem/web-workers',
861861
},
862+
{
863+
label: 'カスタムビルドパイプライン',
864+
path: 'ecosystem/custom-build-pipeline',
865+
contentPath: 'ecosystem/custom-build-pipeline',
866+
},
862867
{
863868
label: 'Angular Fire',
864869
path: 'https://github.com/angular/angularfire#readme',
@@ -1241,6 +1246,11 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
12411246
path: 'reference/migrations/cleanup-unused-imports',
12421247
contentPath: 'reference/migrations/cleanup-unused-imports',
12431248
},
1249+
{
1250+
label: 'Self-closing tags',
1251+
path: 'reference/migrations/self-closing-tags',
1252+
contentPath: 'reference/migrations/self-closing-tags',
1253+
},
12441254
],
12451255
},
12461256
];

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ class AppComponent implements OnInit {
3535

3636
The preceding snippet instructs Angular to call `setInterval` outside the Angular Zone and skip running change detection after `pollForUpdates` runs.
3737

38-
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:
38+
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:
3939

4040
<docs-code header="Move the plot initialization outside of the Zone" language='ts' linenums>
4141
import { Component, NgZone, OnInit } from '@angular/core';
+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Custom build pipeline
2+
3+
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.
4+
5+
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.
6+
7+
## When should you use a custom build pipeline?
8+
9+
There are some niche use cases when you may want to maintain a custom build pipeline. For example:
10+
11+
* You have an existing app using a different toolchain and you’d like to add Angular to it
12+
* 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)
13+
* You’d like to create an short-lived experiment using your favorite build tool
14+
15+
## What are the options?
16+
17+
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.
18+
19+
### Rspack
20+
21+
Rspack is a Rust-based bundler that aims to provide compatibility with the webpack plugin ecosystem.
22+
23+
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.
24+
25+
You can find more about Angular Rspack on the project’s [documentation website](https://angular-rspack.dev/guide/migration/from-webpack).
26+
27+
### Vite
28+
29+
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.
30+
31+
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).
32+
33+
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).

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ If an Observable used in `toSignal` produces an error, that error is thrown when
6363

6464
If an Observable used in `toSignal` completes, the signal continues to return the most recently emitted value before completion.
6565

66-
## Create an RxJS Observale from a signal with `toObservable`
66+
## Create an RxJS Observable from a signal with `toObservable`
6767

6868
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.
6969

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,7 @@ If not specified, the default value depends on the data group's configured strat
318318
| 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. |
319319

320320
<docs-callout title="Comment on opaque responses">
321-
321+
322322
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.
323323
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.
324324
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:
366366

367367
[
368368
'/**', // Include all URLs.
369-
'!/**/*.*', // Exclude URLs to files.
370-
'!/**/****', // Exclude URLs containing `**` in the last segment.
371-
'!/**/****/**', // Exclude URLs containing `**` in any other segment.
369+
'!/**/*.*', // Exclude URLs to files (containing a file extension in the last segment).
370+
'!/**/*__*', // Exclude URLs containing `__` in the last segment.
371+
'!/**/*__*/**', // Exclude URLs containing `__` in any other segment.
372372
]
373373

374374
</docs-code>

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

+18-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,24 @@ The CLI project is now set up to use the Angular service worker.
3737
## Service worker in action: a tour
3838

3939
This section demonstrates a service worker in action,
40-
using an example application.
40+
using an example application. To enable service worker support during local development, use the production configuration with the following command:
41+
42+
<docs-code language="shell">
43+
44+
ng serve --prod
45+
46+
</docs-code>
47+
48+
Alternatively, you can use the [`http-server package`](https://www.npmjs.com/package/http-server) from
49+
npm, which supports service worker applications. Run it without installation using:
50+
51+
<docs-code language="shell">
52+
53+
npx http-server -p 8080 -c-1 dist/&lt;project-name&gt;/browser
54+
55+
</docs-code>
56+
57+
This will serve your application with service worker support at http://localhost:8080.
4158

4259
### Initial load
4360

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ export class MediaControls {
232232
}
233233
```
234234

235-
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.
235+
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.
236236

237237
### Implicit `change` events
238238

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ TypeScript property name as a key, rather than the alias.
132132
### ngOnDestroy
133133

134134
The `ngOnDestroy` method runs once just before a component is destroyed. Angular destroys a
135-
component when it is no longer shown on the page, such as being hidden by `NgIf` or upon navigating
135+
component when it is no longer shown on the page, such as being hidden by `@if` or upon navigating
136136
to another page.
137137

138138
#### DestroyRef

Diff for: adev-ja/src/content/guide/components/lifecycle.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ TypeScriptプロパティ名をキーとして使用します。
132132
### ngOnDestroy
133133

134134
`ngOnDestroy` メソッドは、コンポーネントが破棄される直前に1回だけ実行されます。
135-
Angularは、コンポーネントがページに表示されなくなった場合(`NgIf` によって隠された場合や、別のページに移動した場合など)、
135+
Angularは、コンポーネントがページに表示されなくなった場合(`@if` によって隠された場合や、別のページに移動した場合など)、
136136
コンポーネントを破棄します。
137137

138138
#### DestroyRef

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,11 @@ JavaScript [dynamic import](https://developer.mozilla.org/docs/Web/JavaScript/Re
117117
`
118118
})
119119
export class AdminSettings {
120-
advancedSettings: {new(): AdminSettings} | undefined;
120+
advancedSettings: {new(): AdvancedSettings} | undefined;
121121
122122
async loadAdvanced() {
123-
this.advancedSettings = await import('path/to/advanced_settings.js');
123+
const { AdvancedSettings } = await import('path/to/advanced_settings.js');
124+
this.advancedSettings = AdvancedSettings;
124125
}
125126
}
126127
```

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,11 @@ export class InnerItem {
117117
`
118118
})
119119
export class AdminSettings {
120-
advancedSettings: {new(): AdminSettings} | undefined;
120+
advancedSettings: {new(): AdvancedSettings} | undefined;
121121
122122
async loadAdvanced() {
123-
this.advancedSettings = await import('path/to/advanced_settings.js');
123+
const { AdvancedSettings } = await import('path/to/advanced_settings.js');
124+
this.advancedSettings = AdvancedSettings;
124125
}
125126
}
126127
```

0 commit comments

Comments
 (0)