fix: update origin v16.2 (angular#877)

* update origin * migrate untranslated files * migrate small changes * migrate medium changes * migrate navigation * fix lint errors * fix patches * fix link errors
nana4gonta · Aug 16, 2023 · 856809b · 856809b
1 parent 3c529b3
commit 856809b
Show file tree

Hide file tree

Showing 109 changed files with 1,857 additions and 3,706 deletions.
diff --git a/aio-ja/content/errors/NG0203.en.md b/aio-ja/content/errors/NG0203.en.md
@@ -1,10 +1,10 @@
 @name `inject()` must be called from an injection context
 @category runtime
-@shortDescription `inject()` must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`.
+@shortDescription `inject()` must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`.
 
 @description
-You see this error when you try to use the `inject()` function outside of the allowed injection context. The injection context is available during the class creation and initialization. It is also available to functions
-used with `EnvironmentInjector#runInContext`.
+You see this error when you try to use the [`inject`](api/core/inject) function outside of the allowed [injection context](guide/dependency-injection-context). The injection context is available during the class creation and initialization. It is also available to functions
+used with `runInInjectionContext`.
 
 In practice the `inject()` calls are allowed in a constructor, a constructor parameter and a field initializer:
 
@@ -23,7 +23,7 @@ export class Car {
 }
 ```
 
-It is also legal to call `inject` from a provider's factory:
+It is also legal to call [`inject`](api/core/inject) from a provider's factory:
 
 ```typescript
 providers: [
@@ -35,7 +35,7 @@ providers: [
 ]
 ```
 
-Calls to the `inject()` function outside of the class creation or `runInContext` will result in error. Most notably, calls to `inject()` are disallowed after a class instance was created, in methods (including lifecycle hooks):
+Calls to the [`inject`](api/core/inject) function outside of the class creation or `runInInjectionContext` will result in error. Most notably, calls to `inject()` are disallowed after a class instance was created, in methods (including lifecycle hooks):
 
 ```typescript
 @Component({ ... })
@@ -52,7 +52,7 @@ export class CarComponent {
 
 Work backwards from the stack trace of the error to identify a place where the disallowed call to `inject()` is located. 
 
-To fix the error move the `inject()` call to an allowed place (usually a class constructor or a field initializer).
+To fix the error move the [`inject`](api/core/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.
 
@@ -68,4 +68,4 @@ TestBed.runInInjectionContext(() => {
 
 <!-- end links -->
 
-@reviewed 2022-05-27
+@reviewed 2023-04-11
diff --git a/aio-ja/content/errors/NG0203.md b/aio-ja/content/errors/NG0203.md
@@ -1,10 +1,10 @@
 @name `inject()` must be called from an injection context
 @category runtime
-@shortDescription `inject()`は、コンストラクターやファクトリ関数、フィールド初期化、あるいは `EnvironmentInjector#runInContext` で使用される関数といった、インジェクションコンテキストから呼び出す必要があります。
+@shortDescription `inject()`は、コンストラクターやファクトリ関数、フィールド初期化、あるいは `runInInjectionContext` で使用される関数といった、インジェクションコンテキストから呼び出す必要があります。
 
 @description
-このエラーは、許可されたインジェクションコンテキストの外で `inject()` 関数を使用しようとしたときに表示されます。インジェクションコンテキストは、クラスの作成時や初期化時に有効です。また、
-`EnvironmentInjector#runInContext` と共に使用される関数でも有効です。
+このエラーは、許可されたインジェクションコンテキストの外で [`inject`](api/core/inject) 関数を使用しようとしたときに表示されます。[インジェクションコンテキスト](guide/dependency-injection-context)は、クラスの作成時や初期化時に有効です。また、
+`runInInjectionContext` と共に使用される関数でも有効です。
 
 具体的には、コンストラクターやコンストラクター引数、フィールドイニシャライザで `inject()` の呼び出しが可能です:
 
@@ -23,7 +23,7 @@ export class Car {
 }
 ```
 
-また、プロバイダーのファクトリーから `inject` を呼び出すこともできます:
+また、プロバイダーのファクトリーから [`inject`](api/core/inject) を呼び出すこともできます:
 
 ```typescript
 providers: [
@@ -35,7 +35,7 @@ providers: [
 ]
 ```
 
-クラス作成時や `runInContext` の外で `inject()` 関数を呼び出すとエラーとなります。特に、クラスインスタンスが生成された後のメソッド（ライフサイクルフックを含む）では、`inject()`の呼び出しは禁止されています:
+クラス作成時や `runInInjectionContext` の外で [`inject`](api/core/inject) 関数を呼び出すとエラーとなります。特に、クラスインスタンスが生成された後のメソッド（ライフサイクルフックを含む）では、`inject()`の呼び出しは禁止されています:
 
 ```typescript
 @Component({ ... })
@@ -52,7 +52,7 @@ export class CarComponent {
 
 エラーのスタックトレースから逆算して、禁止されている `inject()` の呼び出しがある場所を特定します。 
 
-エラーを修正するには、`inject()`の呼び出しを許可された場所（通常はクラスのコンストラクターまたはフィールド初期化時）に移します。
+エラーを修正するには、[`inject`](api/core/inject)の呼び出しを許可された場所（通常はクラスのコンストラクターまたはフィールド初期化時）に移します。
 
 **Note:** If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed.
 
@@ -68,4 +68,4 @@ TestBed.runInInjectionContext(() => {
 
 <!-- end links -->
 
-@reviewed 2022-05-27
+@reviewed 2023-04-11
diff --git a/aio-ja/content/errors/NG05104.md b/aio-ja/content/errors/NG05104.md
@@ -0,0 +1,33 @@
+@name Root element was not found.
+@category runtime
+@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. 
+
+This error happens when Angular tries to boostrap one of these components but cannot find its corresponing node in the DOM.
+
+@debugging
+
+This issue occurs when the selector mismatches the tag
+
+```typescript
+@Component({
+  selector: 'my-app',
+  ...
+})
+class AppComponent {}
+```
+
+```html
+<html>
+    <app-root></app-root> <!-- Doesn't match the selector -->
+</html>
+```
+Replace the tag with the correct one: 
+
+```html
+<html>
+    <my-app></my-app> <!-- OK -->
+</html>
+```
diff --git a/aio-ja/content/guide/angular-compiler-options.en.md b/aio-ja/content/guide/angular-compiler-options.en.md
@@ -26,13 +26,6 @@ For more information, see the [TypeScript Handbook](https://www.typescriptlang.o
 
 The following options are available for configuring the AOT template compiler.
 
-### `allowEmptyCodegenFiles`
-
-When `true`, create all possible files even if they are empty.
-Default is `false`.
-Used by the Bazel build rules to simplify how Bazel rules track file dependencies.
-Do not use this option outside of the Bazel rules.
-
 ### `annotationsAs`
 
 Modifies how Angular-specific annotations are emitted to improve tree-shaking.
@@ -128,9 +121,9 @@ Use to create flat modules that are packaged similarly to `@angular/core` and `@
 When this option is used, the `package.json` for the library should refer to the created flat module index instead of the library index file.
 
 Produces only one `.metadata.json` file, which contains all the metadata necessary for symbols exported from the library index.
-In the created `.ngfactory.js` files, the flat module index is used to import symbols. Symbols that include both the public API from the library index as well as shrouded internal symbols.
+In the created `.ngfactory.js` files, the flat module index is used to import symbols. Symbols that include both the public API from the library index and shrouded internal symbols.
 
-By default the `.ts` file supplied in the `files` field is assumed to be the library index.
+By default, the `.ts` file supplied in the `files` field is assumed to be the library index.
 If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use.
 If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced.
 

diff --git a/aio-ja/content/guide/angular-compiler-options.md b/aio-ja/content/guide/angular-compiler-options.md
@@ -26,13 +26,6 @@ TypeScript 設定は、`extends` プロパティを使用して別のファイ
 
 次のオプションは、AOT テンプレートコンパイラの構成に使用できます。
 
-### `allowEmptyCodegenFiles`
-
-`true` の場合、空であってもすべての可能なファイルを生成します。
-デフォルトは `false` です。 
-Bazel ルールがファイルの依存関係を追跡する方法を単純化するために、Bazel ビルドルールで使用されます。
-このオプションは、Bazel ルール以外では使用しないでください。
-
 ### `annotationsAs`
 
 ツリーシェーキングを改善するために、Angular 固有のアノテーションの出力方法を変更します。

diff --git a/aio-ja/content/guide/aot-metadata-errors.en.md b/aio-ja/content/guide/aot-metadata-errors.en.md
@@ -58,7 +58,7 @@ and be wary of new or unusual TypeScript features.
 
 </div>
 
-The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized.
+The compiler encountered a reference to a locally defined symbol that either wasn't exported or wasn't initialized.
 
 Here's a `provider` example of the problem.
 

diff --git a/aio-ja/content/guide/architecture-next-steps.en.md b/aio-ja/content/guide/architecture-next-steps.en.md
@@ -33,7 +33,7 @@ Angular provides a framework for single-page applications, where most of the log
 Most applications still need to access a server using the `HttpClient` to access and save data.
 For some platforms and applications, you might also want to use the PWA \(Progressive Web App\) model to improve the user experience.
 
-*   [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
+*   [HTTP](guide/understanding-communicating-with-http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
 *   [Server-side rendering](guide/universal): Angular Universal generates static application pages on the server through server-side rendering \(SSR\). This allows you to run your Angular application on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers.
 *   [Service workers and PWA](guide/service-worker-intro): Use a service worker to reduce dependency on the network and significantly improve the user experience.
 *   [Web workers](guide/web-worker): Learn how to run CPU-intensive computations in a background thread.

diff --git a/aio-ja/content/guide/architecture-next-steps.md b/aio-ja/content/guide/architecture-next-steps.md
@@ -33,7 +33,7 @@ Angular は、ほとんどのロジックやデータがクライアント側に
 ほとんどのアプリケーションはデータを取得、保存するために `HttpClient` を使ってサーバーにアクセスする必要があります。
 いくつかのプラットフォームやアプリケーションでは、PWA (Progressive Web App) モデルによってユーザー体験を改善させたいかもしれません。
 
-*   [HTTP](guide/http): HTTP クライアントを使用してサーバーと通信してデータを取得、保存し、サーバー側のアクションを呼び出します。
+*   [HTTP](guide/understanding-communicating-with-http): HTTP クライアントを使用してサーバーと通信してデータを取得、保存し、サーバー側のアクションを呼び出します。
 *   [サーバーサイドレンダリング](guide/universal): Angular Universal は、サーバーサイドレンダリング(SSR)によってサーバー上に静的アプリケーションページを生成します。これにより、パフォーマンスを向上させ、モバイルデバイスや低パワーのデバイスで最初のページをすばやく表示し、Webクローラを手助けするために、Angular アプリケーションをサーバー上で実行できます。
 *   [Service WorkersとPWA](guide/service-worker-intro): service worker を使用してネットワークへの依存を減らしユーザー体験を大幅に改善します。
 *   [Web workers](guide/web-worker): CPU を使う処理をバックグラウンドスレッドで走らせる方法について学びます。

diff --git a/aio-ja/content/guide/component-overview.en.md b/aio-ja/content/guide/component-overview.en.md
@@ -1,6 +1,6 @@
 # Angular components overview
 
-Components are the main building block for Angular applications.
+Components are the main building blocks for Angular applications.
 Each component consists of:
 
 *   An HTML template that declares what renders on the page
@@ -98,7 +98,7 @@ Every component requires a CSS *selector*. A selector instructs Angular to insta
 For example, consider a component `hello-world.component.ts` that defines its selector as `app-hello-world`.
 This selector instructs Angular to instantiate this component any time the tag `<app-hello-world>` appears in a template.
 
-Specify a component's selector by adding a `selector` statement to the `@Component` decorator.
+Specify a component's selector by adding a `selector` property to the `@Component` decorator.
 
 <code-example path="component-overview/src/app/component-overview/component-overview.component.ts" region="selector"></code-example>
 
@@ -123,7 +123,7 @@ For example:
 <div class="alert is-helpful">
 
 An Angular component requires a template defined using `template` or `templateUrl`.
-You cannot have both statements in a component.
+You cannot have both properties in a component.
 
 </div>
 
@@ -155,4 +155,4 @@ The `styles` property takes an array of strings that contain the CSS rule declar
 
 <!-- end links -->
 
-@reviewed 2022-02-28
+@reviewed 2023-07-29
diff --git a/aio-ja/content/guide/component-overview.md b/aio-ja/content/guide/component-overview.md
@@ -1,6 +1,7 @@
 # Angular コンポーネントの概要 {@a angular-components-overview}
 
-コンポーネントは Angular アプリケーションの主な構成要素です。各コンポーネントは次のように構成されています。
+コンポーネントは Angular アプリケーションの主な構成要素です。
+各コンポーネントは次のように構成されています。
 
 * ページに表示するものを宣言する HTML テンプレート
 * 振る舞いを定義する Typescript クラス
@@ -25,7 +26,8 @@
 
 ## コンポーネントの作成 {@a creating-a-component}
 
-コンポーネントを作成するもっとも簡単な方法は Angular CLI です。手動でコンポーネントを作成することもできます。
+コンポーネントを作成するもっとも簡単な方法は Angular CLI です。
+手動でコンポーネントを作成することもできます。
 
 ### Angular CLI を使ったコンポーネントの作成 {@a creating-a-component-using-the-angular-cli}
 
@@ -112,7 +114,7 @@ Angular CLI は Angular コンポーネントを作成するもっとも簡単
 
 すべてのコンポーネントには CSS _セレクタ_ が必要です。セレクターは HTML テンプレートの中で対応するタグを見つけたらどこでも、そのコンポーネントをインスタンス化するように Angular に指示します。たとえば、`hello-world.component.ts` が `app-hello-world` というセレクターを定義しているコンポーネントを考えてみましょう。このセレクターは、テンプレートに `<app-hello-world>` タグが現れるたびに、このコンポーネントのインスタンスを作成するように Angular に指示します。
 
-コンポーネントのセレクターを指定するには、`@Component` デコレーターに `selector` 文を追加します。
+コンポーネントのセレクターを指定するには、`@Component` デコレーターに `selector` プロパティを追加します。
 
 <code-example
     path="component-overview/src/app/component-overview/component-overview.component.ts"
@@ -148,7 +150,7 @@ Angular CLI は Angular コンポーネントを作成するもっとも簡単
 
 <div class="alert is-helpful">
 
-Angular コンポーネントは、`template` または `templateUrl` で定義されたテンプレートを必要とします。コンポーネントの中で両方の記述をもつことはできません。
+Angular コンポーネントは、`template` または `templateUrl` で定義されたテンプレートを必要とします。コンポーネントの中で両方のプロパティをもつことはできません。
 
 </div>
 
@@ -180,4 +182,4 @@ Angular コンポーネントは、`template` または `templateUrl` で定義
 * コンポーネントのスタイルについては、[コンポーネントスタイル](guide/component-styles)を参照してください
 * テンプレートの詳細については、[テンプレート構文](guide/template-syntax)を参照してください
 
-@reviewed 2021-03-18
+@reviewed 2023-07-29
diff --git a/aio-ja/content/guide/dependency-injection-context.md b/aio-ja/content/guide/dependency-injection-context.md
@@ -0,0 +1,63 @@
+# Injection context
+
+The dependency injection (DI) system relies internaly on a runtime context where the current injector is available. 
+This means that injectors can only work when code is executed in this context. 
+
+The injection context is available in these situations: 
+
+* Construction (via the `constructor`) of a class being instantiated by the DI system, such as an `@Injectable` or `@Component`.
+* In the initializer for fields of such classes.
+* In the factory function specified for `useFactory` of a `Provider` or an `@Injectable`.
+* In the `factory` function specified for an `InjectionToken`.
+* Within a stack frame that is run in a injection context.
+
+Knowing when your are in an injection context, will allow you to use the [`inject`](api/core/inject) function to inject instances.
+
+## Class constructors
+
+Everytime the DI system instantiates a class, this is done in an injection context. This is being handled by the framework itself. The constructor of the class is executed in that runtime context thus allowing to inject a token using the [`inject`](api/core/inject) function. 
+
+<code-example language="typescript">
+class MyComponent  {
+  private service1: Service1;
+  private service2: Service2 = inject(Service2); // In context
+
+  constructor() {
+    this.service1 = inject(HeroService) // In context
+  }
+}
+</code-example>
+
+## Stack frame in context
+
+Some APIs are designed to be run in an injection context. This is the case, for example, of the router guards. It allows the use of [`inject`](api/core/inject) to access a service within the guard function. 
+
+Here is an example for `CanActivateFn`
+<code-example format="typescript" language="typescript">
+const canActivateTeam: CanActivateFn =
+    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+      return inject(PermissionsService).canActivate(inject(UserToken), route.params.id);
+    };
+</code-example>
+
+## Run within an injection context
+
+When you want to run a given function in an injection context without being in one, you can do it with `runInInjectionContext`. 
+This requires to have access to a given injector like the `EnvironmentInjector` for example.  
+
+<code-example path="dependency-injection/src/app/heroes/hero.service.5.ts" region="run-in-context" header="src/app/heroes/hero.service.ts">
+</code-example>
+
+Note that `inject` will return an instance only if the injector can resolve the required token. 
+
+## Asserts the context 
+
+Angular provides `assertInInjectionContext` helper function to assert that the current context is an injection context.
+
+## Using DI outside of a context
+
+Calling [`inject`](api/core/inject) or calling `assertInInjectionContext` outside of an injection context will throw [error NG0203](/errors/NG0203).
+
+
+
+@reviewed 2023-04-11
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,7 +58,7 @@ and be wary of new or unusual TypeScript features. @@
     </div>
-    The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized.
+    The compiler encountered a reference to a locally defined symbol that either wasn't exported or wasn't initialized.
     Here's a `provider` example of the problem.
@@ Expand Down @@