Update origin 16.1.0 (angular#862)

* upgrade origin * sync untranslated files * migrate small changes * migrate medium changes * migrate navigation * lint fix
nana4gonta · Jun 14, 2023 · 3373abd · 3373abd
1 parent 68f77d5
commit 3373abd
Show file tree

Hide file tree

Showing 68 changed files with 580 additions and 334 deletions.
diff --git a/aio-ja/content/errors/NG0203.en.md b/aio-ja/content/errors/NG0203.en.md
@@ -54,6 +54,14 @@ Work backwards from the stack trace of the error to identify a place where the d
 
 To fix the error move the `inject()` call to an allowed place (usually a class constructor or a field initializer).
 
+**Note:** If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed.
+
+```typescript
+TestBed.runInInjectionContext(() => {
+   // ...
+});
+```
+
 <!-- links -->
 
 <!-- external links -->

diff --git a/aio-ja/content/errors/NG0203.md b/aio-ja/content/errors/NG0203.md
@@ -54,6 +54,14 @@ export class CarComponent {
 
 エラーを修正するには、`inject()`の呼び出しを許可された場所（通常はクラスのコンストラクターまたはフィールド初期化時）に移します。
 
+**Note:** If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed.
+
+```typescript
+TestBed.runInInjectionContext(() => {
+   // ...
+});
+```
+
 <!-- links -->
 
 <!-- external links -->

diff --git a/aio-ja/content/errors/NG02800.md b/aio-ja/content/errors/NG02800.md
@@ -0,0 +1,23 @@
+@name JSONP support in HttpClient configuration
+@category runtime
+@shortDescription Missing JSONP support in HttpClient configuration
+
+@description
+Angular produces this error when you attempt a `JSONP` request without providing the necessary support for it in the `HttpClient` configuration.
+To enable `JSONP` support, you can do one of the following:
+- add the `withJsonpSupport()` as an argument during the `provideHttpClient` function call (e.g. `provideHttpClient(withJsonpSupport())`) when `bootstrapApplication` is used
+- import the `HttpClientJsonpModule` in your root AppModule, when NgModule-based bootstrap is used.
+
+
+@debugging
+Make sure that the JSONP support is added into your application either by calling the `withJsonpSupport()` function (when the `provideHttpClient()` is used) or importing the `HttpClientJsonpModule` module as described above.
+
+See [Make a JSONP request](/guide/http-make-jsonp-request) for more info.
+
+<!-- links -->
+
+<!-- external links -->
+
+<!-- end links -->
+
+@reviewed 2023-05-02
diff --git a/aio-ja/content/errors/NG0500.md b/aio-ja/content/errors/NG0500.md
@@ -5,7 +5,7 @@
 @description
 This error means that during the hydration process, Angular expected a DOM structure as rendered and annotated during server side rendering. However, on the client, the DOM tree was different than the server rendered DOM tree.
 
-This error typically happens due to direct DOM manipulation using native browser APIs that alter the DOM structure outside of what Angular produced. You can resolve this by refactoring the component to use native Angular APIs instead of native APIs. If that's not possible, you can add the `ngSkipHydration` attribute to your component's host node, which will disable hydration for the component and its children. `ngSkipHydration` should only be used as a last resort and should be considered a bug that needs to be fixed.
+This error typically happens due to direct DOM manipulation using native browser APIs that alter the DOM structure outside of what Angular produced. It will also occur if you use `innerHTML` or `outerHTML` to set HTML content, which similarly alters the DOM structure outside of what Angular produced. You can resolve this by refactoring the component to use native Angular APIs instead of native APIs. If that's not possible, you can add the `ngSkipHydration` attribute to your component's host node, which will disable hydration for the component and its children. `ngSkipHydration` should only be used as a last resort and should be considered a bug that needs to be fixed.
 
 More information about hydration can be found in [this guide](guide/hydration).
 

diff --git a/aio-ja/content/errors/NG0505.md b/aio-ja/content/errors/NG0505.md
@@ -8,7 +8,7 @@ doesn't contain special serialized information about the application that hydrat
 logic relies on.
 
 This can happen when the `provideClientHydration()` function is included in the client
-part of the application configuration, but it missing in the server part of the configuration.
+part of the application configuration, but is missing in the server part of the configuration.
 
 In applications with the default project structure (generated by the `ng new`),
 the `provideClientHydration()` call is added either into the `providers` array of

diff --git a/aio-ja/content/errors/NG0506.md b/aio-ja/content/errors/NG0506.md
@@ -0,0 +1,53 @@
+@name NgZone remains unstable 
+@category runtime
+@shortDescription NgZone remains unstable after a long period of time
+
+@description
+This warning occurs when hydration is enabled on the client but the NgZone remains unstable for a long period of time.
+
+The {@link ApplicationRef#isStable} API uses NgZone to report when an application becomes `stable` and `unstable`. An application is considered stable when there are no pending microtasks or macrotasks.
+
+Angular Hydration relies on a signal from Zone.js when it becomes stable inside an application:
+
+* during the server-side rendering (SSR) to start the serialization process
+* in a browser this signal is used to start the post-hydration cleanup to remove DOM nodes that remained unclaimed
+
+This warning is displayed when the `ApplicationRef.isStable()` doesn't emit `true` within 10 seconds. If this is intentional and your application becomes stable later, you can ignore this warning. 
+
+**Macrotasks**
+
+Macrotasks include functions like `setInterval`, `setTimeout`, `requestAnimationFrame` etc. 
+If one of these functions is called in the initialization phase of the app or the bootstrapped components, the application will remain unstable. 
+
+```typescript
+@Component({
+  standalone: true,
+  selector: 'app',
+  template: ``,
+})
+class SimpleComponent {
+    constructor() {
+        setInterval(() => { ... }, 1000)
+
+        // or 
+
+        setTimeout(() => { ... }, 10_000)
+    }
+}
+```
+
+If these functions need to be called in the initialization phase, invoking them outside the angular zone solves the issue.  
+
+```typescript
+class SimpleComponent {
+    constructor() {
+      inject(NgZone).runOutsideAngular(() => {
+        setInterval(() => {}, 1000);
+      })
+    }
+}
+```
+
+@debugging
+
+Verify that you don't have any long standing microtask or macrotasks. 
diff --git a/aio-ja/content/errors/NG0912.md b/aio-ja/content/errors/NG0912.md
@@ -9,7 +9,7 @@ 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). 
 
-To avoid issues that might be caused the component id collision, it's recommended to resolve them as described below.
+To avoid issues that might be caused by the component ID collision, it's recommended to resolve them as described below.
 
 ** Example of a Component ID collision **
 

diff --git a/aio-ja/content/guide/aot-compiler.en.md b/aio-ja/content/guide/aot-compiler.en.md
@@ -74,7 +74,7 @@ There are three phases of AOT compilation.
 |:--- |:---                    |:---     |
 | 1   | code analysis          | In this phase, the TypeScript compiler and *AOT collector* create a representation of the source. The collector does not attempt to interpret the metadata it collects. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.                        |
 | 2   | code generation        | In this phase, the compiler's `StaticReflector` interprets the metadata collected in phase 1, performs additional validation of the metadata, and throws an error if it detects a metadata restriction violation.                                                                                        |
-| 3   | template type checking | In this optional phase, the Angular *template compiler* uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the `fullTemplateTypeCheck` configuration option; see [Angular compiler options](guide/angular-compiler-options). |
+| 3   | template type checking | In this optional phase, the Angular *template compiler* uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the `strictTemplates` configuration option; see [Angular compiler options](guide/angular-compiler-options). |
 
 ### Metadata restrictions
 
@@ -83,7 +83,8 @@ You write metadata in a *subset* of TypeScript that must conform to the followin
 *   Limit [expression syntax](#expression-syntax) to the supported subset of JavaScript
 *   Only reference exported symbols after [code folding](#code-folding)
 *   Only call [functions supported](#supported-functions) by the compiler
-*   Decorated and data-bound class members must be public
+*   Input/Outputs and data-bound class members must be public or protected.
+
 
 For additional guidelines and instructions on preparing an application for AOT compilation, see [Angular: Writing AOT-friendly applications](https://medium.com/sparkles-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f).
 
@@ -310,27 +311,14 @@ It's the compiler's job to interpret the `.metadata.json` in the code generation
 
 The compiler understands all syntax forms that the collector supports, but it may reject *syntactically* correct metadata if the *semantics* violate compiler rules.
 
-### Public symbols
+### Public or protected symbols
 
 The compiler can only reference *exported symbols*.
 
-*   Decorated component class members must be public.
-    You cannot make an `@Input()` property private or protected.
-
-*   Data bound properties must also be public
-
-<!--<code-example format="typescript" language="typescript">
-
-// BAD CODE - title is private
-&commat;Component({
-  selector: 'app-root',
-  template: '&lt;h1&gt;{{title}}&lt;/h1&gt;'
-})
-export class AppComponent {
-  private title = 'My App'; // Bad
-}
+*   Decorated component class members must be public or protected.
+    You cannot make an `@Input()` property private.
 
-</code-example>-->
+*   Data bound properties must also be public or protected
 
 <a id="supported-functions"></a>
 

diff --git a/aio-ja/content/guide/aot-compiler.md b/aio-ja/content/guide/aot-compiler.md
@@ -72,7 +72,7 @@ AOTコンパイルには三つのフェーズがあります。
 |:--- |:---                    |:---     |
 | 1   | code analysis          | In this phase, the TypeScript compiler and *AOT collector* create a representation of the source. The collector does not attempt to interpret the metadata it collects. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.                        |
 | 2   | code generation        | In this phase, the compiler's `StaticReflector` interprets the metadata collected in phase 1, performs additional validation of the metadata, and throws an error if it detects a metadata restriction violation.                                                                                        |
-| 3   | template type checking | In this optional phase, the Angular *template compiler* uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the `fullTemplateTypeCheck` configuration option; see [Angular compiler options](guide/angular-compiler-options). |
+| 3   | template type checking | In this optional phase, the Angular *template compiler* uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the `strictTemplates` configuration option; see [Angular compiler options](guide/angular-compiler-options). |
 
 ### メタデータ制約
 
@@ -81,7 +81,7 @@ TypeScript の _サブセット_ にメタデータを記述します。これ
 *   [式の構文](#expression-syntax) をサポートされている JavaScript のサブセットに制限します
 *   [コード折りたたみ](#code-folding)の後、エクスポートされたシンボルだけを参照します
 *   コンパイラによって[サポートされている関数](#supported-functions)だけを呼び出します
-*   修飾されデータバインドされたクラスメンバーはパブリックでなければなりません
+*   Input/Output、データバインドされたクラスメンバーはパブリックでなければなりません
 
 AOTコンパイル用のアプリケーションを準備するための追加のガイドラインと説明については、[Angular: Writing AOT-friendly applications](https://medium.com/sparkles-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f)を参照してください。
 
@@ -307,25 +307,13 @@ export class HeroComponent {
 
 コンパイラはコレクターがサポートするすべての構文形式を理解しますが、_セマンティックス_ がコンパイラの規則に違反している場合は、_構文として_ 正しいメタデータを拒否することがあります。
 
-### 公開されたシンボル
+### publicまたはprotectedなシンボル
 
 コンパイラは _エクスポートされたシンボル_ しか参照できません。
 
-*   デコレートされたコンポーネントクラスメンバは公開されている必要があります。`@Input()` プロパティを非公開にしたり、保護することはできません。
-*   データバインドプロパティも公開されている必要があります。
+*   デコレートされたコンポーネントクラスメンバはpublicまたはprotectedにされている必要があります。`@Input()` プロパティを非公開にすることはできません。
 
-<!--<code-example format="typescript" language="typescript">
-
-// BAD CODE - title is private
-&commat;Component({
-  selector: 'app-root',
-  template: '&lt;h1&gt;{{title}}&lt;/h1&gt;'
-})
-export class AppComponent {
-  private title = 'My App'; // Bad
-}
-
-</code-example>-->
+*   データバインドプロパティもpublicまたはprotectedにされている必要があります。
 
 <a id="supported-functions"></a>
 

diff --git a/aio-ja/content/guide/change-detection-skipping-subtrees.en.md b/aio-ja/content/guide/change-detection-skipping-subtrees.en.md
@@ -59,7 +59,7 @@ As an example, in the diagram below, Angular handles an event in `LoginComponent
 
 ## New inputs to component with OnPush
 
-Angular will run change detection within a child component with `OnPush` setting an input property as result of a template binding.
+Angular will run change detection within a child component with `OnPush` when setting an input property as result of a template binding.
 
 For example, in the diagram below, `AppComponent` passes a new input to `MainComponent`, which has `OnPush`. Angular will run change detection in `MainComponent` but will not run change detection in `LoginComponent`, which also has `OnPush`, unless it receives new inputs as well.