chore: update origin (#925)

Author: lacolaco

.github/workflows/build-and-test.yml

@@ -17,7 +17,7 @@ jobs:
           submodules: true
       - uses: actions/setup-node@v4
         with:
-          node-version-file: 'package.json'
+          node-version-file: '.node-version'
           cache: yarn
       - run: yarn install
       - run: yarn test
@@ -29,7 +29,7 @@ jobs:
           submodules: true
       - uses: actions/setup-node@v4
         with:
-          node-version-file: 'package.json'
+          node-version-file: '.node-version'
           cache: yarn
       - run: yarn install
       - run: yarn build
@@ -54,7 +54,7 @@ jobs:
           submodules: true
       - uses: actions/setup-node@v4
         with:
-          node-version-file: 'package.json'
+          node-version-file: '.node-version'
           cache: yarn
       - run: yarn install
       - run: yarn build

.node-version

@@ -0,0 +1 @@
+v20.13.1

aio-ja/content/errors/NG0602.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/errors/NG0950.md

@@ -0,0 +1,18 @@
+@name Input is required but no value is available yet.
+@category runtime
+@shortDescription A required input is accessed before a value is set.
+
+@description
+A required input was accessed but no value was bound.
+
+This can happen when a required input is accessed too early in your directive or component.
+This is commonly happening when the input is read as part of class construction.
+
+Inputs are guaranteed to be available in the `ngOnInit` lifecycle hook and afterwards.
+
+## Fixing the error
+
+Access the required input in reactive contexts.
+For example, in the template itself, inside a `computed`, or inside an effect.
+
+Alternatively, access the input inside the `ngOnInit` lifecycle hook, or later.

aio-ja/content/errors/NG0951.md

@@ -0,0 +1,23 @@
+@name Child query result is required but no value is available.
+@category runtime
+@shortDescription Required child query result was accessed before query results were calculated or query has no matches.
+
+@description
+Required child query (`contentChild.required` or `viewChild.required`) result was accessed before query results were calculated or query has no matches.
+
+This can happen in two distinct situations:
+* query results were accessed before a given query could collect results;
+* a query was executed but didn't match any nodes and has no results as a consequence.
+
+Content queries and view queries each calculate their results at different points in time:
+* `contentChild` results are available after a _host_ view (template where a directive declaring a query is used) is created;
+* `viewChild` results are available after a template of a component declaring a query is created.
+
+Accessing query results before they're available results in the error described on this page. Most notably, query results are _never_ available in a constructor of the component or directive declaring a query.
+
+## Fixing the error
+
+`contentChild` query results can be accessed in the `AfterContentChecked` lifecycle hook, or later.
+`viewChild` query results can be accessed in the `AfterViewChecked` lifecycle hook, or later.
+
+Make sure that a required query matches at least one node and has results at all. You can verify this by accessing query results in the lifecycle hooks listed above.

aio-ja/content/guide/angular-package-format.en.md

@@ -347,8 +347,8 @@ This is because the tslib version is tied to the TypeScript version used to comp
 
 ## Examples
 
-*   [@angular/core package](https://unpkg.com/browse/@angular/core@13.0.0-rc.0)
-*   [@angular/material package](https://unpkg.com/browse/@angular/material@13.0.0-rc.0)
+*   [@angular/core package](https://unpkg.com/browse/@angular/core@17.0.0/)
+*   [@angular/material package](https://unpkg.com/browse/@angular/material@17.0.0/)
 
 ## Definition of terms
 

aio-ja/content/guide/angular-package-format.md

@@ -347,8 +347,8 @@ APF v10 では、プライマリエントリポイントの直接の依存関係
 
 ## 例
 
-*   [@angular/core パッケージ](https://unpkg.com/browse/@angular/core@13.0.0-rc.0)
-*   [@angular/material パッケージ](https://unpkg.com/browse/@angular/material@13.0.0-rc.0)
+*   [@angular/core パッケージ](https://unpkg.com/browse/@angular/core@17.0.0/)
+*   [@angular/material パッケージ](https://unpkg.com/browse/@angular/material@17.0.0/)
 
 ## 用語の定義
 

aio-ja/content/guide/change-detection-zone-pollution.en.md

@@ -21,7 +21,7 @@ In the image above, there is a series of change detection calls triggered by eve
 
 ## Run tasks outside `NgZone`
 
-In such cases, you can instruct Angular to avoid calling change detection for tasks scheduled by a given piece of code using [NgZone](/guide/zone).
+In such cases, you can instruct Angular to avoid calling change detection for tasks scheduled by a given piece of code using [NgZone](/api/core/NgZone).
 
 ```ts
 import { Component, NgZone, OnInit } from '@angular/core';

aio-ja/content/guide/change-detection-zone-pollution.md

@@ -21,7 +21,7 @@ Angular DevTools を使用すると、不要な変更検知の呼び出しを見
 
 ## NgZone の外でタスクを実行
 
-このような場合、[NgZone](/guide/zone) を使って、特定のコードによってスケジュールされたタスクの変更検知を呼び出さないよう Angular に指示することができます。
+このような場合、[NgZone](/api/core/NgZone) を使って、特定のコードによってスケジュールされたタスクの変更検知を呼び出さないよう Angular に指示することができます。
 
 ```ts
 import { Component, NgZone, OnInit } from '@angular/core';

aio-ja/content/guide/component-overview.en.md

@@ -142,6 +142,20 @@ To declare the styles within the component, add a `styles` property to the `@Com
 
 The `styles` property takes an array of strings that contain the CSS rule declarations.
 
+### Creating a component manually
+
+Our recommendation is to make components standalone using the `standalone: true` flag in the `@Component` decorator. 
+
+<code-example path="component-overview/src/app/component-overview/component-overview.component.4.ts" region="standalonedeclaration"></code-example>
+
+However, in the case of working with a `NgModule` based application, the component needs to be added to the proper `@NgModule`.
+To embed a component in a module, embed it in the array of declarations found in the `@NgModule` decorator.
+
+<code-example path="component-overview/src/app/component-overview/component-overview.module.ts" region="componentmoduledeclaration"></code-example>
+
+With these steps completed, your Angular component is ready for integration and use within your application. 
+
+
 ## Next steps
 
 *   For an architectural overview of components, see [Introduction to components and templates](guide/architecture-components)

aio-ja/content/guide/component-overview.md

@@ -174,6 +174,19 @@ Angular コンポーネントは、`template` または `templateUrl` で定義
 
 `styles` プロパティは、CSS ルールの宣言を含む文字列の配列を取ります。
 
+### 手動でコンポーネントを作成する
+
+お勧めは、`@Component` デコレーターの `standalone: true` フラグを使ってコンポーネントをスタンドアロンにすることです。
+
+<code-example path="component-overview/src/app/component-overview/component-overview.component.4.ts" region="standalonedeclaration"></code-example>
+
+しかし、`NgModule` ベースのアプリケーションを扱う場合は、コンポーネントを適切な `@NgModule` に追加する必要があります。
+コンポーネントをモジュールに組み込むには、`@NgModule` デコレーターの宣言配列にコンポーネントを追加します。
+
+<code-example path="component-overview/src/app/component-overview/component-overview.module.ts" region="componentmoduledeclaration"></code-example>
+
+これらの手順が完了すれば、Angularコンポーネントをアプリケーションに統合して使用する準備が整います。
+
 
 ## 次のステップ {@a next-steps}
 

aio-ja/content/guide/defer.md

@@ -100,7 +100,7 @@ Note: Multiple `on` triggers are always OR conditions. Similarly, `on` mixed wit
 ```
 
 <a id="when"></a>
-`when` specifies an imperative condition as an expression that returns a boolean. When this expression becomes truthy, the placeholder is swapped with the lazily loaded content (which may be an asynchronous operation if the dependencies need to be fetched).
+`when` specifies a condition as an expression that returns a boolean. When this expression becomes truthy, the placeholder is swapped with the lazily loaded content (which may be an asynchronous operation if the dependencies need to be fetched).
 
 Note: if the `when` condition switches back to `false`, the defer block is not reverted back to the placeholder. The swap is a one-time operation. If the content within the block should be conditionally rendered, an `if` condition can be used within the block itself.
 
@@ -240,15 +240,20 @@ In the example below, the prefetching starts when a browser becomes idle and the
 
 ## Testing
 
-Angular provides TestBed APIs to simplify the process of testing `@defer` blocks and triggering different states during testing. By default, `@defer` blocks in tests are "paused", so that you can manually transition between states.
+Angular provides TestBed APIs to simplify the process of testing `@defer` blocks and triggering different states during testing. By default, `@defer` blocks in tests will play through like a defer block would behave in a real application. If you want to manually step through states, you can switch the defer block behavior to `Manual` in the TestBed configuration.
 
 ```typescript
 it('should render a defer block in different states', async () => {
+  // configures the defer block behavior to start in "paused" state for manual control.
+  TestBed.configureTestingModule({deferBlockBehavior: DeferBlockBehavior.Manual});
+
   @Component({
     // ...
     template: `
       @defer {
         <large-component />
+      } @placeholder {
+        Placeholder
       } @loading {
         Loading...
       }
@@ -260,15 +265,18 @@ it('should render a defer block in different states', async () => {
   const componentFixture = TestBed.createComponent(ComponentA);
 
   // Retrieve the list of all defer block fixtures and get the first block.
-  const deferBlockFixture = componentFixture.getDeferBlocks()[0];
+  const deferBlockFixture = (await componentFixture.getDeferBlocks())[0];
+
+  // Renders placeholder state by default.
+  expect(componentFixture.nativeElement.innerHTML).toContain('Placeholder');
 
   // Render loading state and verify rendered output.
   await deferBlockFixture.render(DeferBlockState.Loading);
   expect(componentFixture.nativeElement.innerHTML).toContain('Loading');
 
   // Render final state and verify the output.
-  await deferBlockFixture.render(DeferBlockState.Completed);
-  expect(componentFixture.nativeElement.innerHTML).toContain('<large-component>');
+  await deferBlockFixture.render(DeferBlockState.Complete);
+  expect(componentFixture.nativeElement.innerHTML).toContain('large works!');
 });
 ```
 

aio-ja/content/guide/deployment.md

@@ -87,7 +87,6 @@ You can read more by following the links associated with the package names below
 | [Vercel](https://vercel.com/solutions/angular)                    | [`vercel init angular`](https://github.com/vercel/vercel/tree/main/examples/angular) |
 | [Netlify](https://www.netlify.com)                                | [`@netlify-builder/deploy`](https://npmjs.org/package/@netlify-builder/deploy)       |
 | [GitHub pages](https://pages.github.com)                          | [`angular-cli-ghpages`](https://npmjs.org/package/angular-cli-ghpages)               |
-| [NPM](https://npmjs.com)                                          | [`ngx-deploy-npm`](https://npmjs.org/package/ngx-deploy-npm)                         |
 | [Amazon Cloud S3](https://aws.amazon.com/s3/?nc2=h_ql_prod_st_s3) | [`@jefiozie/ngx-aws-deploy`](https://www.npmjs.com/package/@jefiozie/ngx-aws-deploy) |
 
 If you're deploying to a self-managed server or there's no builder for your favorite cloud platform, you can either create a builder that allows you to use the `ng deploy` command, or read through this guide to learn how to manually deploy your application.

aio-ja/content/guide/deprecations.md

@@ -13,7 +13,7 @@ comprehensive details on deprecations and breaking changes.
 <div class="alert is-helpful">
 
 Features and APIs that were deprecated in v6 or earlier are candidates for removal in version 9 or any later major version.
-For information about Angular's deprecation and removal practices, see [Angular Release Practices](guide/releases#deprecation-practices "Angular Release Practices: Deprecation practices").
+For information about Angular's deprecation and removal practices, see [Angular Release Practices](guide/releases#deprecation-policy "Angular Release Practices: Deprecation policy").
 
 For step-by-step instructions on how to update to the latest Angular release, use the interactive update guide at [update.angular.io](https://update.angular.io).
 
@@ -372,7 +372,12 @@ be converted to functions by instead using `inject` to get dependencies.
 
 For testing a function `canActivate` guard, using `TestBed` and `TestBed.runInInjectionContext` is recommended.
 Test mocks and stubs can be provided through DI with `{provide: X, useValue: StubX}`.
-Functional guards can also be written in a way that's either testable with
+
+You can also continue to use your class-based guards and pass in the mock dependencies.
+When used in the route definition, you can map these guards to functions using the helper
+functions in the router package `mapToCanMatch`, `mapToCanActivate`, etc.
+
+Finally, functional guards can be written in a way that's either testable with
 `runInInjectionContext` or by passing mock implementations of dependencies.
 For example:
 
@@ -385,7 +390,7 @@ export function myGuardWithMockableDeps(
 
 const route = {
   path: 'admin',
-  canActivate: [myGuardWithMockableDeps]
+  canActivate: [() => myGuardWithMockableDeps()]
 }
 ```
 

aio-ja/content/guide/devtools.en.md

@@ -105,6 +105,17 @@ After you select a particular component, click the icon at the top-right of the
 
 </div>
 
+### View injected services of components
+Starting in Angular 17, services that are injected in a component or directive context are viewable in the property viewer. After you select a particular component, if that component has dependencies, you'll be able to see them listed under the *"Injected Services"* bar.
+
+By clicking on a service, an expansion panel will appear that visualizes the resolution path that Angular used to resolve that service.
+
+<div class="lightbox">
+
+<img alt="A screenshot of Angular DevTools components tab showing injected services for a selected component." src="generated/images/guide/devtools/di-component-deps.png">
+
+</div>
+
 ### Update property value
 
 Like browsers' DevTools, the properties view lets you edit the value of an input, output, or another property.
@@ -242,10 +253,43 @@ Then, import the file in the initial view of the profiler by clicking the **Choo
 
 </div>
 
+## Inspect your injectors
+
+*Note: The Injector Tree is available for Angular Applications built with version 17 or higher.*
+
+### View the injector hierarchy of your application
+
+The **Injector Tree** tab lets you explore the structure of the Injectors configured in your application. Here you will see two trees representing the [injector hiearchy](guide/hierarchical-dependency-injection) of your application. One tree is your environment hierarchy, the other is your element hierachy.
+
+<div class="lightbox">
+
+<img alt="A screenshot showing the injector tree tab in Angular Devtools visualizing the injector graph for an example application." src="generated/images/guide/devtools/di-injector-tree.png">
+
+</div>
+
+### Visualize resolution paths
+
+When a specific injector is selected, the path that Angular's depenedency injection algorithm traverses from that injector to the root is highlighted. For element injectors, this includes highlighting the environment injectors that the dependency injection algorithm jumps to when a dependency cannot be resolved in the element hierarchy. See [resolution rules](guide/hierarchical-dependency-injection#resolution-rules) for more details about how Angular resolves resolution paths.
+
+<div class="lightbox">
+
+<img alt="A screenshot showing how the injector tree visualize highlights resolution paths when an injector is selected." src="generated/images/guide/devtools/di-injector-tree-selected.png">
+
+</div>
+
+### View injector providers
+
+Clicking an injector that has configured providers will display those providers in a list on the right of the injector tree view. Here you can view the provided token and it's type.
+
+<div class="lightbox">
+
+<img alt="A screenshot showing how providers are made visible when an injector is selected." src="generated/images/guide/devtools/di-injector-tree-providers.png">
+
+</div>
 <!-- links -->
 
 <!-- external links -->
 
 <!-- end links -->
 
-@reviewed 2022-02-28
+@reviewed 2023-11-08