fix: update origin v17.0 (#901)

* feat: update origin

* chore: update untranslated files

* chore: migrate small changes

* chore: migrate changes

* chore: fix patches

* chore: fix broken links

* chore: fix broken link

* chore: remove universal.md

* chore: fix broken links

aio-ja/content/errors/NG0302.en.md

@@ -7,19 +7,19 @@
 @description
 Angular can't find a pipe with this name.
 
-The pipe referenced in the template has not been named or declared properly.
+The [pipe](guide/pipes-overview) referenced in the template has not been named or declared properly.
 
-In order for a [pipe](guide/pipes) to be used:
- - it must be declared as a part of an `NgModule` (added to the `declarations` array) or marked as standalone (by adding the `standalone: true` flag to the Pipe decorator).
- - it must be imported in an `NgModule` or a standalone component where it is used.
- - the name used in a template must match the name defined in the Pipe decorator.
+To use the pipe:
+ - Ensure the name used in a template matches the name defined in the pipe decorator.
+ - Either mark it as standalone by adding the `standalone: true` flag to the pipe's decorator or declare it as a part of an `NgModule` by adding to that module's declarations array.
+ - Import it in the standalone components and/or the `NgModules` where it is needed.
 
 @debugging
 Use the pipe name to trace where the pipe is declared and used.
 
-To resolve this error, ensure that:
- - If the pipe is local to the `NgModule`, it is uniquely named in the pipe's decorator and declared in the `NgModule`.
- - If the pipe is standalone or from another `NgModule`, it is added to the `imports` field of the current `NgModule` or standalone component.
+To resolve this error:
+ - If the pipe is local to the `NgModule`, give it a unique name in the pipe's decorator and declared it in the `NgModule`.
+ - If the pipe is standalone or is declared in another `NgModule`, add it to the `imports` field of the standalone component or the current `NgModule`.
 
 If you recently added an import or declaration, you may need to restart your server to see these changes.
 

aio-ja/content/errors/NG0302.md

@@ -7,20 +7,19 @@
 @description
 Angularはこの名前のパイプを見つけられません。
 
-テンプレートで参照されているパイプは名前が付けられていないか、適切に宣言されていません。
+テンプレートで参照されている[パイプ](guide/pipes-overview)は名前が付けられていないか、適切に宣言されていません。
 
-[パイプ](guide/pipes)を使用するためには、 `NgModule` の一部として宣言されているか（`declarations` 配列に追加されます）、スタンドアロンとしてマークされている必要があります。
-  - `NgModule` の一部として宣言されているか (`declarations` 配列に追加されている)、スタンドアロンとしてマークされている (Pipe デコレーターに `standalone: true` フラグを追加する) 必要があります。
-  - パイプを使用する場合は、 `NgModule` やスタンドアロンコンポーネントの中でインポートされている必要があります。
-  - テンプレートで使用される名前は、Pipe デコレーターで定義された名前と一致しなければなりません。
+パイプを使うには
+ - テンプレートで使用する名前がパイプのデコレーターで定義した名前と一致するようにします。
+ - パイプのデコレーターに `standalone: true` フラグを追加してスタンドアロンとしてマークするか、モジュールの宣言配列に追加して `NgModule` の一部として宣言します。
+ - スタンドアロンコンポーネントや `NgModules` の必要な部分にインポートします。
 
 @debugging
-Use the pipe name to trace where the pipe is declared and used.
+パイプ名を使用して、パイプがどこで宣言され、使用されているかをトレースします。
 
-このエラーを解決するには、次のことを確認してください。
-
-  - パイプが `NgModule` のローカルにある場合は、パイプのデコレーターでユニークな名前を付けて `NgModule` 内で宣言します。
-  - パイプがスタンドアロンまたは別の `NgModule` のものである場合は、現在の `NgModule` またはスタンドアロンコンポーネントの `imports` フィールドに追加される。
+このエラーを解決するには
+ - パイプが `NgModule` にローカルに存在する場合は、パイプのデコレーターで一意な名前を付けて `NgModule` で宣言します。
+ - パイプがスタンドアロンであるか、別の `NgModule` で宣言されている場合は、スタンドアロンコンポーネントまたは現在の `NgModule` の `imports` フィールドに追加します。
 
 最近インポートや宣言を追加した場合は、これらの変更を確認するためにサーバーを再起動する必要があるかもしれません。
 

aio-ja/content/errors/NG0507.md

@@ -0,0 +1,12 @@
+@name HTML content was altered after server-side rendering
+@category runtime
+@shortDescription HTML content was altered after server-side rendering
+
+@description
+Angular throws this error when it detects that the content generated by server-side rendering (SSR) was altered after the rendering. The process of hydration relies on the content to be untouched after SSR, which also includes whitespaces and comment nodes. Those whitespaces and comment nodes must be retained in the HTML generated by the SSR process. Learn more in the [Hydration guide](guide/hydration#constraints).
+
+@debugging
+
+Typically this happens in the following cases:
+* Some CDN providers have a built-in feature to remove whitespaces and comment nodes from HTML as an optimization. Please verify if there is such an option in CDN configuration and turn it off.
+* If you use custom post-processing of HTML generated by SSR (as a build step), make sure that this process doesn't remove whitespaces and comment nodes.

aio-ja/content/errors/NG05104.md

@@ -3,9 +3,9 @@
 @shortDescription Root element was not found during bootstrap.
 
 @description
-Boostraped components are defined in the `bootstrap` property of an `@NgModule` decorator or as the first parameter of `boopstrapApplication` for standalone components. 
+Bootstrapped components are defined in the `bootstrap` property of an `@NgModule` decorator or as the first parameter of `bootstrapApplication` for standalone components. 
 
-This error happens when Angular tries to boostrap one of these components but cannot find its corresponing node in the DOM.
+This error happens when Angular tries to bootstrap one of these components but cannot find its corresponding node in the DOM.
 
 @debugging
 

aio-ja/content/errors/NG0912.md

@@ -7,7 +7,7 @@ When creating components, Angular generates a unique component ID for each compo
 
 Component IDs are used in Angular internally:
 - for extra annotations of DOM nodes for style encapsulation
-- during [hydration](guide/hydration) to restore an application state after [server-side rendering](guide/universal). 
+- during [hydration](guide/hydration) to restore an application state after [server-side rendering](guide/ssr).
 
 To avoid issues that might be caused by the component ID collision, it's recommended to resolve them as described below.
 
@@ -32,9 +32,9 @@ Having these two components defined will trigger an ID generation collision and
 
 The warning message includes the class name of the two components whose IDs are colliding.
 
-The problem can be resolved using one of the solutions below: 
+The problem can be resolved using one of the solutions below:
 
-1. Change the selector of one of the two components. For example by using a pseudo-selector with no effect like `:not()` and a different tag name.  
+1. Change the selector of one of the two components. For example by using a pseudo-selector with no effect like `:not()` and a different tag name.
 
 ```typescript
 @Component({

aio-ja/content/errors/NG0913.md

@@ -0,0 +1,39 @@
+@name Runtime Performance Warnings
+@category runtime
+@shortDescription Performance-harming image elements detected at runtime
+
+@description
+After an application is loaded, Angular checks included `<img>` elements for performance-harming misconfiguration. This warning can be triggered two ways:
+
+### Oversized images
+When images are loaded, the **intrinsic size** of the downloaded file is checked against the actual size of the image on the page. The actual size is calculated using the **rendered size** of the image with CSS applied, multiplied by the [pixel device ratio](https://web.dev/codelab-density-descriptors/#pixel-density). If the downloaded image is much larger (more than 1200px too large in either dimension), this warning is triggered. Downloading oversized images can slow down page loading and have a negative effect on [Core Web Vitals](https://web.dev/vitals/).
+
+### Lazy-loaded LCP element
+The largest contentful element on a page during load is considered the "LCP Element", which relates to [Largest Contentful Paint](https://web.dev/lcp/), one of the Core Web Vitals. Lazy loading an LCP element will have a strong negative effect on page performance. With this strategy, the browser has to complete layout calculations to determine whether the element is in the viewport before starting the image download. As a result, a warning is triggered when Angular detects that the LCP element has been given the `loading="lazy"` attribute.
+
+@debugging
+Use the image URL provided in the console warning to find the `<img>` element in question. 
+### Ways to fix oversized images
+* Use a smaller source image
+* Add a [`srcset`](https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset) if multiple sizes are needed for different layouts. 
+* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which generates [srcsets automatically](https://angular.io/guide/image-directive#request-images-at-the-correct-size-with-automatic-srcset).
+### Ways to fix lazy-loaded LCP element
+
+* Change the `loading` attribute to a different value such as `"eager"`.
+* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](https://angular.io/guide/image-directive#step-4-mark-images-as-priority).
+
+### Disabling Image Performance Warnings
+Both warnings can be disabled individually, site-wide, using a provider at the root of your application:
+
+<code-example format="typescript" language="typescript">
+providers: [
+  {
+    provide: IMAGE_CONFIG,
+    useValue: {
+      disableImageSizeWarning: true, 
+      disableImageLazyLoadWarning: true
+    }
+  },
+],
+</code-example>
+

aio-ja/content/errors/NG3003.md

@@ -30,7 +30,8 @@ parent.component.ts -> child.component.ts -> parent.component.ts
 
 ### Remote Scoping
 
-To avoid adding imports that create cycles, additional code is added to the `NgModule` class where the component that wires up the dependencies is declared.
+If you are using NgModules, to avoid adding imports that create cycles, additional code is added to the `NgModule` class where the component that wires up the dependencies is declared.
+
 This is known as "remote scoping".
 
 ### Libraries
@@ -53,10 +54,9 @@ The component ChildComponent is used in the template but importing it would crea
 Use this to identify how the referenced component, pipe, or directive has a dependency back to the component being compiled.
 Here are some ideas for fixing the problem:
 
-*   Try to rearrange your dependencies to avoid the cycle.
-    For example, using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle.
-
-*   Move the classes that reference each other into the same file, to avoid any imports between them.
-*   Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles.
+* Try to rearrange your dependencies to avoid the cycle.
+  For example, using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle.
+* Move the classes that reference each other into the same file, to avoid any imports between them.
+* Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles.
 
-@reviewed 2022-02-28
+@reviewed 2023-08-30

aio-ja/content/errors/NG602.md

@@ -0,0 +1,62 @@
+@name Disallowed function call inside reactive context
+@category runtime
+@shortDescription A disallowed function is called inside a reactive context
+
+@description
+A function that is not allowed to run inside a reactive context was called from within a reactive context.
+
+For example, an `effect` cannot be scheduled from within a `computed` or an actively executing effect.
+Avoid calling functions like `effect` as part of template expressions, as those execute in their own reactive context.
+
+Computed expressions are expected to be pure.
+Pure means that expression do not trigger any side effects.
+Side effects are operations like scheduling `afterRender`, creating a new `effect`, or subscribing to observables.
+
+Some operations are explicitly banned inside reactive contexts in order to avoid common pitfalls.
+As an example, using `afterRender` inside a `computed` will schedule new render hooks every time the computed expression evaluates.
+This is likely not intended and could degrade application performance.
+
+### Fixing the error
+
+This error guide is non-exhaustive.
+It captures a few common scenarios and how to address the error.
+
+#### `afterRender`
+Move the call for `afterRender` outside of the reactive context.
+
+A good place to schedule the after render hook is in the component's class constructor.
+Alternatively, use `untracked` to leave the reactive context and explicitly opt-out of this error.
+
+#### `effect`
+Move the call for `effect` outside of the reactive context.
+
+A good place to schedule an effect is in a `@Component`'s class constructor.
+
+#### `toSignal`
+Move the call for `toSignal` outside of the reactive context.
+
+```typescript
+result = computed(() => {
+  const dataSignal = toSignal(dataObservable$);
+  return doSomething(dataSignal());
+});
+```
+
+can be refactored into:
+
+```typescript
+dataSignal = toSignal(dataObservable$);
+result = computed(() => doSomething(dataSignal()));
+```
+
+Alternatively, if this is not possible, consider manually subscribing to the observable.
+
+As a last resort, use `untracked` to leave the reactive context.
+Be careful as leaving the reactive context can result in signal reads to be ignored inside `untracked`.
+
+@debugging
+
+The error message mentions the function that was unexpectedly called.
+Look for this function call in your application code.
+
+Alternatively, the stack trace in your browser will show where the function was invoked and where it's located.

aio-ja/content/guide/add-an-animation.md

@@ -1,22 +1,24 @@
 # Add an animation
 
 The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`.
-When you create a new project using the Angular framework, these dependencies are automatically added to your project.
 
 To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular capability.
 
 ## Step 1: Enabling the animations module
 
-Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
+Import `provideAnimations` from `@angular/platform-browser/animations` and add it to the providers list in the `bootstrapApplication` function call.
 
-<code-example header="src/app/app.module.ts" path="animations/src/app/app.module.1.ts"></code-example>
-
-<div class="alert is-helpful">
+```ts
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAnimations(),
+  ]
+});
+```
 
-**NOTE**: <br />
-When you use the Angular framework to create your application, the root application module `app.module.ts` is placed in the `src/app` directory.  If you are using standalone components, look at main.ts or look at your root application component.
+For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
 
-</div>
+<code-example header="src/app/app.module.ts" path="animations/src/app/app.module.1.ts"></code-example>
 
 ## Step 2: Importing animation functions into component files
 
@@ -31,4 +33,4 @@ You put the trigger that defines an animation within the `animations` metadata p
 
 <code-example header="src/app/app.component.ts" path="animations/src/app/app.component.ts" region="decorator"></code-example>
 
-@reviewed 2022-12-19
+@reviewed 2023-08-15