diff --git a/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.en.html b/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.en.html index 808d146175..becf5b6b42 100644 --- a/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.en.html +++ b/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.en.html @@ -4,7 +4,7 @@
- diff --git a/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.html b/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.html index 0990353144..57fd7b4fc2 100644 --- a/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.html +++ b/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.html @@ -4,7 +4,7 @@
- diff --git a/adev-ja/src/app/features/home/home.component.en.html b/adev-ja/src/app/features/home/home.component.en.html new file mode 100644 index 0000000000..3ac5daf7e9 --- /dev/null +++ b/adev-ja/src/app/features/home/home.component.en.html @@ -0,0 +1,477 @@ +
+ @if (!isUwu) { + +
+ + + + + + + + + + + + + + + +

The framework for building scalable web apps with confidence

+
+ } @else { + +
+ Angular logo +
+ } + +
+ + + +
+
+
+ +
+

Productivity meets scalability

+
+
+ + + + + + + + + + +

AI-forward

+

Resources and integrations to supercharge your development with AI

+
+
+ + + +

Opinionated & versatile

+

Organized yet modular thanks to Angular components and dependency injection

+
+
+ + + +

Reactive

+

Fast state updates with fine-gained reactivity based on Angular Signals

+
+
+ + + +

Fully featured

+

+ Everything works together with Angular's first-party modules for forms, routing, and more +

+
+
+
+ + + +
+
+
+

When performance matters

+

+ Trusted by millions to build fast, relaible applications that scale with the size of your + team +

+
+ + + + +
+

Reactivity with signals makes it a breeze to manage your state

+
+ Explore signals + + + + + +
+

+ Meet your performance targets with SSR, SSG, hydration, and next generation deferred + loading +

+
+ Learn about rendering strategies + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + +
+
+

Want to learn more?

+
+ + + + +
+

New to Angular?

+

+ Try our completely in browser tutorial lessons designed to give you hands on experience + with Angular. +

+

+ Recommended for developers new to Angular looking to dive right into the code +

+ Start coding +
+ + + + + +
+

More of a reader?

+

+ Our essentials guides are designed to help you understand Angular fundamentals in the + time it would take to finish a cup of coffee (or tea). +

+

+ Recommended for developers with framework experience but want quick overview of concepts +

+ Angular concepts +
+ + + +
+

Why Angular?

+

Learn about Angular, its benefits, and if it's right for you.

+

+ Recommended for developers seeking to learn more about the Angular framework +

+ About Angular +
+ + + + + + + + + +
+

Are you an LLM or curious about AI in Angular?

+

+ Head over to our AI section to find prompts, strategies, best practices, examples, and + more. +

+

+ Recommended for robots... and developers who want to get the most out of Angular and AI +

+ Angular + AI +
+ +
+
+
diff --git a/adev-ja/src/app/features/home/home.component.html b/adev-ja/src/app/features/home/home.component.html new file mode 100644 index 0000000000..e504b9cde7 --- /dev/null +++ b/adev-ja/src/app/features/home/home.component.html @@ -0,0 +1,477 @@ +
+ @if (!isUwu) { + +
+ + + + + + + + + + + + + + + +

スケーラブルなWebアプリを自信を持って構築するフレームワーク

+
+ } @else { + +
+ Angular logo +
+ } + +
+ + + +
+
+
+ +
+

開発効率とスケーラビリティを両立

+
+
+ + + + + + + + + + +

AI重視

+

AIで開発を加速させるリソースと統合機能が充実

+
+
+ + + +

堅牢かつ柔軟

+

Angularコンポーネントと依存性注入で、構造化と柔軟性を実現

+
+
+ + + +

リアクティブ

+

Angular Signalsで実現する高速で細やかな状態管理

+
+
+ + + +

オールインワン

+

+ フォーム、ルーティングなど、Angularの公式モジュールがシームレスに連携 +

+
+
+
+ + + +
+
+
+

パフォーマンスが決め手のプロジェクトに

+

+ チーム規模に応じてスケールする高速で信頼性の高いアプリケーション構築で世界中の何百万もの開発者に選ばれています。 + +

+
+ + + + +
+

シグナルのリアクティビティで状態管理がとても簡単に

+
+ シグナルを詳しく見る + + + + + +
+

+ SSR、SSG、ハイドレーション、次世代の遅延ロードでパフォーマンス目標を確実に達成 + +

+
+ レンダリング戦略を学ぶ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + +
+
+

さあ、Angularを始めよう

+
+ + + + +
+

Angular初心者の方へ

+

+ ブラウザ上で完結するインタラクティブなチュートリアルで、Angularの実践的なスキルを身につけましょう。 + +

+

+ Angularが初めてで、まずはコードを書いて学びたい開発者におすすめ +

+ コーディングを始める +
+ + + + + +
+

じっくり読んで学びたい方へ

+

+ コーヒー一杯分の時間で、Angularの基本概念を効率よく理解できるガイドをご用意しています。 + +

+

+ 他のフレームワーク経験があり、Angularの概要を素早く把握したい開発者におすすめ +

+ 基本概念を学ぶ +
+ + + +
+

なぜAngularを選ぶのか？

+

Angularの特徴や利点を知り、あなたのプロジェクトに最適かどうか確認してみましょう。

+

+ Angularフレームワークについて詳しく知りたい開発者におすすめ +

+ Angularについて学ぶ +
+ + + + + + + + + +
+

AIとAngularの組み合わせに興味がありますか？

+

+ 効果的なプロンプト、開発戦略、ベストプラクティス、実践例など、AIとAngularを組み合わせた開発に役立つ情報が満載です。 + +

+

+ ロボット用...そしてAngularとAIを最大限活用したい開発者におすすめ +

+ Angular + AI +
+ +
+
+
diff --git a/adev-ja/src/app/features/update/update.component.en.html b/adev-ja/src/app/features/update/update.component.en.html index 331255b1ec..776ae55de6 100644 --- a/adev-ja/src/app/features/update/update.component.en.html +++ b/adev-ja/src/app/features/update/update.component.en.html @@ -10,7 +10,7 @@

Angular versions

From v. - @@ -31,7 +31,7 @@

Angular versions

To v. - diff --git a/adev-ja/src/app/features/update/update.component.en.ts b/adev-ja/src/app/features/update/update.component.en.ts index 859823f946..3ece43fd12 100644 --- a/adev-ja/src/app/features/update/update.component.en.ts +++ b/adev-ja/src/app/features/update/update.component.en.ts @@ -128,8 +128,10 @@ export default class UpdateComponent { } } - @HostListener('click', ['$event.target']) - copyCode({tagName, textContent}: Element) { + @HostListener('click', ['$event']) + copyCode(event: Event) { + const {tagName, textContent} = event.target as Element; + if (tagName === 'CODE') { this.clipboard.copy(textContent!); this.snackBar.open('Copied to clipboard', '', {duration: 2000}); diff --git a/adev-ja/src/app/features/update/update.component.html b/adev-ja/src/app/features/update/update.component.html index 3d6e6d95b6..d66c0070b0 100644 --- a/adev-ja/src/app/features/update/update.component.html +++ b/adev-ja/src/app/features/update/update.component.html @@ -10,7 +10,7 @@

Angularバージョン

v. - @@ -31,7 +31,7 @@

Angularバージョン

から v. - diff --git a/adev-ja/src/app/features/update/update.component.ts b/adev-ja/src/app/features/update/update.component.ts index 257aa8e9c7..68df5df6bc 100644 --- a/adev-ja/src/app/features/update/update.component.ts +++ b/adev-ja/src/app/features/update/update.component.ts @@ -128,8 +128,10 @@ export default class UpdateComponent { } } - @HostListener('click', ['$event.target']) - copyCode({tagName, textContent}: Element) { + @HostListener('click', ['$event']) + copyCode(event: Event) { + const {tagName, textContent} = event.target as Element; + if (tagName === 'CODE') { this.clipboard.copy(textContent!); this.snackBar.open('Copied to clipboard', '', {duration: 2000}); diff --git a/adev-ja/src/content/ai/design-patterns.en.md b/adev-ja/src/content/ai/design-patterns.en.md index 6dfe51aba4..75ae54a811 100644 --- a/adev-ja/src/content/ai/design-patterns.en.md +++ b/adev-ja/src/content/ai/design-patterns.en.md @@ -10,7 +10,7 @@ A common pattern when working with user-provided prompts is to separate the user 2. When the user submits (e.g., by clicking a button), update a second signal with contents of the first signal. 3. Use the second signal in the **`params`** field of your `resource`. -This setup ensures the resource's **`loader`** function only runs when the user explicitly submits their prompt, not on every keystroke. You can use additional signal parameters, like a `sessionId` or `userId` (which can be useful for creating persistent LLM sessions), in the `loader` field. This way, the request always uses these parameters' current values without re-triggering the asyncronous function defined in the `loader` field. +This setup ensures the resource's **`loader`** function only runs when the user explicitly submits their prompt, not on every keystroke. You can use additional signal parameters, like a `sessionId` or `userId` (which can be useful for creating persistent LLM sessions), in the `loader` field. This way, the request always uses these parameters' current values without re-triggering the asynchronous function defined in the `loader` field. Many AI SDKs provide helper methods for making API calls. For example, the Genkit client library exposes a `runFlow` method for calling Genkit flows, which you can call from a resource's `loader`. For other APIs, you can use the [`httpResource`](guide/signals/resource#reactive-data-fetching-with-httpresource). @@ -90,14 +90,14 @@ The following example demonstrates how to create a responsive UI to dynamically ## AI patterns in action: streaming chat responses -Interfaces often display partial results from LLM-based APIs incrementally as response data arrives. Angular's resource API provides the ability to stream responses to support this type of pattern. The `stream` property of `resource` accepts an asyncronous function you can use to apply updates to a signal value over time. The signal being updated represents the data being streamed. +Interfaces often display partial results from LLM-based APIs incrementally as response data arrives. Angular's resource API provides the ability to stream responses to support this type of pattern. The `stream` property of `resource` accepts an asynchronous function you can use to apply updates to a signal value over time. The signal being updated represents the data being streamed. ```ts characters = resource({ stream: async () => { const data = signal>({value: ''}); // Calls a Genkit streaming flow using the streamFlow method - // expose by the Genkit client SDK + // exposed by the Genkit client SDK const response = streamFlow({ url: '/streamCharacters', input: 10 diff --git a/adev-ja/src/content/ai/design-patterns.md b/adev-ja/src/content/ai/design-patterns.md index c424c7702f..eafb2df572 100644 --- a/adev-ja/src/content/ai/design-patterns.md +++ b/adev-ja/src/content/ai/design-patterns.md @@ -97,7 +97,7 @@ characters = resource({ stream: async () => { const data = signal>({value: ''}); // Calls a Genkit streaming flow using the streamFlow method - // expose by the Genkit client SDK + // exposed by the Genkit client SDK const response = streamFlow({ url: '/streamCharacters', input: 10 diff --git a/adev-ja/src/content/ai/mcp-server-setup.en.md b/adev-ja/src/content/ai/mcp-server-setup.en.md index 504a28f7f2..d51831b29d 100644 --- a/adev-ja/src/content/ai/mcp-server-setup.en.md +++ b/adev-ja/src/content/ai/mcp-server-setup.en.md @@ -2,6 +2,18 @@ The Angular CLI includes an experimental [Model Context Protocol (MCP) server](https://modelcontextprotocol.io/) enabling AI assistants in your development environment to interact with the Angular CLI. We've included support for CLI powered code generation, adding packages, and more. +## Available Tools + +The Angular CLI MCP server provides several tools to assist you in your development workflow. By default, the following tools are enabled: + +| Name | Description | `local-only` | `read-only` | +| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: | +| `get_best_practices` | Retrieves the Angular Best Practices Guide. This guide is essential for ensuring that all code adheres to modern standards, including standalone components, typed forms, and modern control flow. | ✅ | ✅ | +| `list_projects` | Lists the names of all applications and libraries defined within an Angular workspace. It reads the `angular.json` configuration file to identify the projects. | ✅ | ✅ | +| `search_documentation` | Searches the official Angular documentation at https://angular.dev. This tool should be used to answer any questions about Angular, such as for APIs, tutorials, and best practices. | ❌ | ✅ | + +## Get Started + To get started, run the following command in your terminal: ```bash @@ -124,16 +136,6 @@ For example, to run the server in read-only mode in VS Code, you would update yo } ``` -## Available Tools - -The Angular CLI MCP server provides several tools to assist you in your development workflow. By default, the following tools are enabled: - -| Name | Description | `local-only` | `read-only` | -| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: | -| `get_best_practices` | Retrieves the Angular Best Practices Guide. This guide is essential for ensuring that all code adheres to modern standards, including standalone components, typed forms, and modern control flow. | ✅ | ✅ | -| `list_projects` | Lists the names of all applications and libraries defined within an Angular workspace. It reads the `angular.json` configuration file to identify the projects. | ✅ | ✅ | -| `search_documentation` | Searches the official Angular documentation at https://angular.dev. This tool should be used to answer any questions about Angular, such as for APIs, tutorials, and best practices. | ❌ | ✅ | - ## Feedback and New Ideas The Angular team welcomes your feedback on the existing MCP capabilities and any ideas you have for new tools or features. Please share your thoughts by opening an issue on the [angular/angular GitHub repository](https://github.com/angular/angular/issues). \ No newline at end of file diff --git a/adev-ja/src/content/ai/mcp-server-setup.md b/adev-ja/src/content/ai/mcp-server-setup.md index 824662ed0c..58fee6634a 100644 --- a/adev-ja/src/content/ai/mcp-server-setup.md +++ b/adev-ja/src/content/ai/mcp-server-setup.md @@ -2,6 +2,18 @@ Angular CLIには、開発環境のAIアシスタントがAngular CLIと対話できるようにする実験的な[Model Context Protocol (MCP) サーバー](https://modelcontextprotocol.io/)が含まれています。CLIによるコード生成、パッケージの追加などに対応しています。 +## 利用可能なツール + +Angular CLI MCPサーバーは、開発ワークフローを支援するいくつかのツールを提供します。デフォルトで、以下のツールが有効になっています： + +| 名前 | 説明 | `local-only` | `read-only` | +| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: | +| `get_best_practices` | Angularベストプラクティスガイドを取得します。このガイドは、スタンドアロンコンポーネント、型付きフォーム、モダンな制御フローなど、すべてのコードが現代的な標準に準拠することを保証するために不可欠です。 | ✅ | ✅ | +| `list_projects` | Angularワークスペース内で定義されたすべてのアプリケーションとライブラリの名前を一覧表示します。`angular.json`設定ファイルを読み取ってプロジェクトを識別します。 | ✅ | ✅ | +| `search_documentation` | https://angular.dev の公式Angularドキュメントを検索します。このツールは、API、チュートリアル、ベストプラクティスなど、Angularに関する質問に答えるために使用する必要があります。 | ❌ | ✅ | + +## 開始方法 + 開始するには、ターミナルで次のコマンドを実行します。 ```bash @@ -124,16 +136,6 @@ JetBrains IDEs（IntelliJ IDEAやWebStormなど）では、JetBrains AI Assistan } ``` -## 利用可能なツール - -Angular CLI MCPサーバーは、開発ワークフローを支援するいくつかのツールを提供します。デフォルトで、以下のツールが有効になっています： - -| 名前 | 説明 | `local-only` | `read-only` | -| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: | -| `get_best_practices` | Angularベストプラクティスガイドを取得します。このガイドは、スタンドアロンコンポーネント、型付きフォーム、モダンな制御フローなど、すべてのコードが現代的な標準に準拠することを保証するために不可欠です。 | ✅ | ✅ | -| `list_projects` | Angularワークスペース内で定義されたすべてのアプリケーションとライブラリの名前を一覧表示します。`angular.json`設定ファイルを読み取ってプロジェクトを識別します。 | ✅ | ✅ | -| `search_documentation` | https://angular.dev の公式Angularドキュメントを検索します。このツールは、API、チュートリアル、ベストプラクティスなど、Angularに関する質問に答えるために使用する必要があります。 | ❌ | ✅ | - ## フィードバックと新しいアイデア Angularチームは、既存のMCP機能に対するフィードバックや新しいツールまたは機能のアイデアを歓迎します。[angular/angular GitHubリポジトリ](https://github.com/angular/angular/issues)でissueを作成して、ご意見をお聞かせください。 \ No newline at end of file diff --git a/adev-ja/src/content/ai/overview.en.md b/adev-ja/src/content/ai/overview.en.md index 39db0a91bb..ca9109860f 100644 --- a/adev-ja/src/content/ai/overview.en.md +++ b/adev-ja/src/content/ai/overview.en.md @@ -35,7 +35,7 @@ Here are examples of how to build with Genkit and Angular: * [Agentic Apps with Genkit and Angular starter-kit](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit)— New to building with AI? Start here with a basic app that features an agentic workflow. Perfect place to start for your first AI building experience. -* [Use Genkit in an Angular app](https://genkit.dev/docs/angular/)— Build a basic application that uses Genkit Flows, Angular and Gemini 2.0 Flash. This step-by-step walkthrough guides you through creating a full-stack Angular application with AI features. +* [Use Genkit in an Angular app](https://genkit.dev/docs/angular/)— Build a basic application that uses Genkit Flows, Angular and Gemini 2.5 Flash. This step-by-step walkthrough guides you through creating a full-stack Angular application with AI features. * [Dynamic Story Generator app](https://github.com/angular/examples/tree/main/genkit-angular-story-generator)— Learn to build an agentic Angular app powered by Genkit, Gemini and Imagen 3 to dynamically generate a story based on user interaction featuring beautiful image panels to accompany the events that take place. Start here if you'd like to experiment with a more advanced use-case. diff --git a/adev-ja/src/content/ai/overview.md b/adev-ja/src/content/ai/overview.md index 8ac6fbbdc6..057da077b2 100644 --- a/adev-ja/src/content/ai/overview.md +++ b/adev-ja/src/content/ai/overview.md @@ -35,7 +35,7 @@ GenkitとAngularで構築する方法の例を次に示します。 * [GenkitとAngularのスターターキットを使用したエージェントアプリ](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit)— AIでの構築は初めてですか？エージェントワークフローを備えた基本的なアプリケーションから始めましょう。初めてのAI構築体験に最適な場所です。 -* [AngularアプリでGenkitを使用する](https://genkit.dev/docs/angular/)— Genkit Flows、Angular、Gemini 2.0 Flashを使用する基本的なアプリケーションを構築します。このステップバイステップのウォークスルーは、AI機能を備えたフルスタックAngularアプリケーションの作成をガイドします。 +* [AngularアプリでGenkitを使用する](https://genkit.dev/docs/angular/)— Genkit Flows、Angular、Gemini 2.5 Flashを使用する基本的なアプリケーションを構築します。このステップバイステップのウォークスルーは、AI機能を備えたフルスタックAngularアプリケーションの作成をガイドします。 * [動的ストーリー生成アプリ](https://github.com/angular/examples/tree/main/genkit-angular-story-generator)— Genkit、Gemini、Imagen 3を搭載したエージェントAngularアプリケーションを構築し、ユーザーインタラクションに基づいてストーリーを動的に生成し、発生するイベントに付随する美しい画像パネルを特徴とする方法を学びます。より高度なユースケースを試したい場合は、ここから始めましょう。 diff --git a/adev-ja/src/content/cli/index.md b/adev-ja/src/content/cli/index.md index 76cc1778f2..27613c69c1 100644 --- a/adev-ja/src/content/cli/index.md +++ b/adev-ja/src/content/cli/index.md @@ -10,7 +10,7 @@ Install the CLI using the `npm` package manager: -npm install -g @angular/cli +npm install -g @angular/cli diff --git a/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md b/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md index ae8762e733..210311cc30 100644 --- a/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md +++ b/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md @@ -1,6 +1,6 @@ # RxJS interop with Angular signals -The `@angular/rxjs-interop` package offers APIs that help you integrate RxJS and Angular signals. +The `@angular/core/rxjs-interop` package offers APIs that help you integrate RxJS and Angular signals. ## Create a signal from an RxJs Observable with `toSignal` diff --git a/adev-ja/src/content/ecosystem/service-workers/custom-service-worker-scripts.md b/adev-ja/src/content/ecosystem/service-workers/custom-service-worker-scripts.md new file mode 100644 index 0000000000..8bafac8159 --- /dev/null +++ b/adev-ja/src/content/ecosystem/service-workers/custom-service-worker-scripts.md @@ -0,0 +1,111 @@ +# Custom service worker scripts + +While the Angular service worker provides excellent capabilities, you may need to add custom functionality such as handling push notifications, background sync, or other service worker events. You can create a custom service worker script that imports and extends the Angular service worker. + +## Creating a custom service worker + +To create a custom service worker that extends Angular's functionality: + +1. Create a custom service worker file (e.g., `custom-sw.js`) in your `src` directory: + + + +// Import the Angular service worker +importScripts('./ngsw-worker.js'); + +(function () { + 'use strict'; + + // Add custom notification click handler + self.addEventListener('notificationclick', (event) => { + console.log('Custom notification click handler'); + console.log('Notification details:', event.notification); + + // Handle notification click - open URL if provided + if (clients.openWindow && event.notification.data.url) { + event.waitUntil(clients.openWindow(event.notification.data.url)); + console.log('Opening URL:', event.notification.data.url); + } + }); + + // Add custom background sync handler + self.addEventListener('sync', (event) => { + console.log('Custom background sync handler'); + + if (event.tag === 'background-sync') { + event.waitUntil(doBackgroundSync()); + } + }); + + function doBackgroundSync() { + // Implement your background sync logic here + return fetch('https://example.com/api/sync') + .then(response => response.json()) + .then(data => console.log('Background sync completed:', data)) + .catch(error => console.error('Background sync failed:', error)); + } +})(); + + + +2. Update your `angular.json` file to use the custom service worker: + + + +{ + "projects": { + "your-app": { + "architect": { + "build": { + "options": { + "assets": [ + { + "glob": "**/*", + "input": "public" + }, + "app/src/custom-sw.js" + ] + }, + } + } + } + } +} + + + +3. Configure the service worker registration to use your custom script: + + + +import { ApplicationConfig, isDevMode } from '@angular/core'; +import { provideServiceWorker } from '@angular/service-worker'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideServiceWorker('custom-sw.js', { + enabled: !isDevMode(), + registrationStrategy: 'registerWhenStable:30000' + }), + ], +}; + + + +### Best practices for custom service workers + +When extending the Angular service worker: + +- **Always import the Angular service worker first** using `importScripts('./ngsw-worker.js')` to ensure you get all the caching and update functionality +- **Wrap your custom code in an IIFE** (Immediately Invoked Function Expression) to avoid polluting the global scope +- **Use `event.waitUntil()`** for asynchronous operations to ensure they complete before the service worker is terminated +- **Test thoroughly** in both development and production environments +- **Handle errors gracefully** to prevent your custom code from breaking the Angular service worker functionality + +### Common use cases + +Custom service workers are commonly used for: + +- **Push notifications**: Handle incoming push messages and display notifications +- **Background sync**: Sync data when the network connection is restored +- **Custom navigation**: Handle special routing or offline page scenarios diff --git a/adev-ja/src/content/ecosystem/service-workers/getting-started.md b/adev-ja/src/content/ecosystem/service-workers/getting-started.md index aedaeb7f6e..594f3d199a 100644 --- a/adev-ja/src/content/ecosystem/service-workers/getting-started.md +++ b/adev-ja/src/content/ecosystem/service-workers/getting-started.md @@ -50,7 +50,7 @@ npm, which supports service worker applications. Run it without installation usi -npx http-server -p 8080 -c-1 dist/<project-name>/browser +npx http-server -p 8080 -c-1 dist//browser diff --git a/adev-ja/src/content/guide/animations/complex-sequences.md b/adev-ja/src/content/guide/animations/complex-sequences.md index 4eb1da6869..fc790eb058 100644 --- a/adev-ja/src/content/guide/animations/complex-sequences.md +++ b/adev-ja/src/content/guide/animations/complex-sequences.md @@ -121,11 +121,11 @@ IMPORTANT: If you need to animate the items of an `*ngFor` list and there is a p ## Animations and Component View Encapsulation -Angular animations are based on the components DOM structure and do not directly take [View Encapsulation](guide/components/styling#style-scoping) into account, this means that components using `ViewEncapsulation.Emulated` behave exactly as if they were using `ViewEncapsulation.None` (`ViewEncapsulation.ShadowDom` behaves differently as we'll discuss shortly). +Angular animations are based on the components DOM structure and do not directly take [View Encapsulation](guide/components/styling#style-scoping) into account, this means that components using `ViewEncapsulation.Emulated` behave exactly as if they were using `ViewEncapsulation.None` (`ViewEncapsulation.ShadowDom` and `ViewEncapsulation.IsolatedShadowDom` behave differently as we'll discuss shortly). For example if the `query()` function (which you'll see more of in the rest of the Animations guide) were to be applied at the top of a tree of components using the emulated view encapsulation, such query would be able to identify (and thus animate) DOM elements on any depth of the tree. -On the other hand the `ViewEncapsulation.ShadowDom` changes the component's DOM structure by "hiding" DOM elements inside [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) elements. Such DOM manipulations do prevent some of the animations implementation to work properly since it relies on simple DOM structures and doesn't take `ShadowRoot` elements into account. Therefore it is advised to avoid applying animations to views incorporating components using the ShadowDom view encapsulation. +On the other hand the `ViewEncapsulation.ShadowDom` and `ViewEncapsulation.IsolatedShadowDom` changes the component's DOM structure by "hiding" DOM elements inside [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) elements. Such DOM manipulations do prevent some of the animations implementation to work properly since it relies on simple DOM structures and doesn't take `ShadowRoot` elements into account. Therefore it is advised to avoid applying animations to views incorporating components using the ShadowDom view encapsulation. ## Animation sequence summary @@ -142,4 +142,4 @@ You might also be interested in the following: - + \ No newline at end of file diff --git a/adev-ja/src/content/guide/aria/accordion.md b/adev-ja/src/content/guide/aria/accordion.md new file mode 100644 index 0000000000..dbe528b255 --- /dev/null +++ b/adev-ja/src/content/guide/aria/accordion.md @@ -0,0 +1,23 @@ + + + + + + + + + + + + +### Example with TailwindCSS + + diff --git a/adev-ja/src/content/guide/aria/combobox.md b/adev-ja/src/content/guide/aria/combobox.md new file mode 100644 index 0000000000..0a55387723 --- /dev/null +++ b/adev-ja/src/content/guide/aria/combobox.md @@ -0,0 +1,23 @@ + + + + + + + + + + + + +### Example with TailwindCSS + + diff --git a/adev-ja/src/content/guide/aria/grid.md b/adev-ja/src/content/guide/aria/grid.md new file mode 100644 index 0000000000..41d1f215c2 --- /dev/null +++ b/adev-ja/src/content/guide/aria/grid.md @@ -0,0 +1,23 @@ + + + + + + + + + + + + +### Example with TailwindCSS + + diff --git a/adev-ja/src/content/guide/aria/listbox.md b/adev-ja/src/content/guide/aria/listbox.md new file mode 100644 index 0000000000..1249852fb7 --- /dev/null +++ b/adev-ja/src/content/guide/aria/listbox.md @@ -0,0 +1,23 @@ + + + + + + + + + + + + +### Example with TailwindCSS + + diff --git a/adev-ja/src/content/guide/aria/menu.md b/adev-ja/src/content/guide/aria/menu.md new file mode 100644 index 0000000000..a73ecf0d45 --- /dev/null +++ b/adev-ja/src/content/guide/aria/menu.md @@ -0,0 +1,23 @@ + + + + + + + + + + + + +### Example with TailwindCSS + + diff --git a/adev-ja/src/content/guide/aria/overview.md b/adev-ja/src/content/guide/aria/overview.md new file mode 100644 index 0000000000..4b8755feb4 --- /dev/null +++ b/adev-ja/src/content/guide/aria/overview.md @@ -0,0 +1,41 @@ + + + + +## Installation + + + ng add @angular/cdk + + +## Catalog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/adev-ja/src/content/guide/aria/radio.md b/adev-ja/src/content/guide/aria/radio.md new file mode 100644 index 0000000000..e205adb76b --- /dev/null +++ b/adev-ja/src/content/guide/aria/radio.md @@ -0,0 +1,23 @@ + + + + + + + + + + + + +### Example with TailwindCSS + + diff --git a/adev-ja/src/content/guide/aria/tabs.md b/adev-ja/src/content/guide/aria/tabs.md new file mode 100644 index 0000000000..d9f676714f --- /dev/null +++ b/adev-ja/src/content/guide/aria/tabs.md @@ -0,0 +1,23 @@ + + + + + + + + + + + + +### Example with TailwindCSS + + diff --git a/adev-ja/src/content/guide/aria/toolbar.md b/adev-ja/src/content/guide/aria/toolbar.md new file mode 100644 index 0000000000..9fd328563a --- /dev/null +++ b/adev-ja/src/content/guide/aria/toolbar.md @@ -0,0 +1,23 @@ + + + + + + + + + + + + +### Example with TailwindCSS + + diff --git a/adev-ja/src/content/guide/aria/tree.md b/adev-ja/src/content/guide/aria/tree.md new file mode 100644 index 0000000000..f3c1fc81d1 --- /dev/null +++ b/adev-ja/src/content/guide/aria/tree.md @@ -0,0 +1,23 @@ + + + + + + + + + + + + +### Example with TailwindCSS + + diff --git a/adev-ja/src/content/guide/components/host-elements.en.md b/adev-ja/src/content/guide/components/host-elements.en.md index 8401ed41f1..b9566e0bdc 100644 --- a/adev-ja/src/content/guide/components/host-elements.en.md +++ b/adev-ja/src/content/guide/components/host-elements.en.md @@ -67,7 +67,7 @@ export class CustomSlider { You can alternatively bind to the host element by applying the `@HostBinding` and `@HostListener` decorator to class members. -`@HostBinding` lets you bind host properties and attributes to properties and methods: +`@HostBinding` lets you bind host properties and attributes to properties and getters: ```angular-ts @Component({ @@ -78,7 +78,7 @@ export class CustomSlider { value: number = 0; @HostBinding('tabIndex') - getTabIndex() { + get tabIndex() { return this.disabled ? -1 : 0; } diff --git a/adev-ja/src/content/guide/components/host-elements.md b/adev-ja/src/content/guide/components/host-elements.md index 31351f6530..f9bfc65d93 100644 --- a/adev-ja/src/content/guide/components/host-elements.md +++ b/adev-ja/src/content/guide/components/host-elements.md @@ -67,7 +67,7 @@ export class CustomSlider { クラスメンバーに`@HostBinding`および`@HostListener`デコレーターを適用することにより、 ホスト要素にバインドできます。 -`@HostBinding`を使用すると、ホストのプロパティと属性を、プロパティとメソッドにバインドできます。 +`@HostBinding`を使用すると、ホストのプロパティと属性を、プロパティとゲッターにバインドできます。 ```angular-ts @Component({ @@ -78,7 +78,7 @@ export class CustomSlider { value: number = 0; @HostBinding('tabIndex') - getTabIndex() { + get tabIndex() { return this.disabled ? -1 : 0; } diff --git a/adev-ja/src/content/guide/components/outputs.en.md b/adev-ja/src/content/guide/components/outputs.en.md index ad8bbcacc7..16593b447f 100644 --- a/adev-ja/src/content/guide/components/outputs.en.md +++ b/adev-ja/src/content/guide/components/outputs.en.md @@ -52,6 +52,20 @@ When defining an event listener in a template, you can access the event data fro ``` +Receive the event data in the parent component: + + +@Component({ + /*...*/ +}) +export class App { + logValue(value: number) { + ... + } +} + + + ## Customizing output names The `output` function accepts a parameter that lets you specify a different name for the event in a template: diff --git a/adev-ja/src/content/guide/components/outputs.md b/adev-ja/src/content/guide/components/outputs.md index 87d82c487c..45abffcf0d 100644 --- a/adev-ja/src/content/guide/components/outputs.md +++ b/adev-ja/src/content/guide/components/outputs.md @@ -52,6 +52,20 @@ this.thumbDropped.emit({ ``` +親コンポーネントでイベントデータを受け取ります: + + +@Component({ + /*...*/ +}) +export class App { + logValue(value: number) { + ... + } +} + + + ## 出力名のカスタマイズ `output`関数は、テンプレートでイベントに異なる名前を指定できるパラメーターを受け入れます。 diff --git a/adev-ja/src/content/guide/components/styling.en.md b/adev-ja/src/content/guide/components/styling.en.md index d2bdd219fe..25ea1bf87d 100644 --- a/adev-ja/src/content/guide/components/styling.en.md +++ b/adev-ja/src/content/guide/components/styling.en.md @@ -36,7 +36,7 @@ and [stylus](https://stylus-lang.com). ## Style scoping Every component has a **view encapsulation** setting that determines how the framework scopes a -component's styles. There are three view encapsulation modes: `Emulated`, `ShadowDom`, and `None`. +component's styles. There are four view encapsulation modes: `Emulated`, `ShadowDom`, `IsolatedShadowDom`, and `None`. You can specify the mode in the `@Component` decorator: @@ -82,9 +82,7 @@ using [the web standard Shadow DOM API](https://developer.mozilla.org/docs/Web/W When enabling this mode, Angular attaches a shadow root to the component's host element and renders the component's template and styles into the corresponding shadow tree. -This mode strictly guarantees that _only_ that component's styles apply to elements in the -component's template. Global styles cannot affect elements in a shadow tree and styles inside the -shadow tree cannot affect elements outside of that shadow tree. +Styles inside the shadow tree cannot affect elements outside of that shadow tree. Enabling `ShadowDom` encapsulation, however, impacts more than style scoping. Rendering the component in a shadow tree affects event propagation, interaction @@ -92,6 +90,12 @@ with [the `` API](https://developer.mozilla.org/docs/Web/Web_Components/Us and how browser developer tools show elements. Always understand the full implications of using Shadow DOM in your application before enabling this option. +### ViewEncapsulation.IsolatedShadowDom + +Behaves as above, except this mode strictly guarantees that _only_ that component's styles apply to elements in the +component's template. Global styles cannot affect elements in a shadow tree and styles inside the +shadow tree cannot affect elements outside of that shadow tree. + ### ViewEncapsulation.None This mode disables all style encapsulation for the component. Any styles associated with the @@ -114,4 +118,4 @@ use [the `` element](https://developer.mozilla.org/docs/Web/HTML/Element/l reference CSS files. Additionally, your CSS may use [the `@import`at-rule](https://developer.mozilla.org/docs/Web/CSS/@import) to reference CSS files. Angular treats these references as _external_ styles. External styles are not affected by -emulated view encapsulation. +emulated view encapsulation. \ No newline at end of file diff --git a/adev-ja/src/content/guide/components/styling.md b/adev-ja/src/content/guide/components/styling.md index 94f549c610..a5161ed519 100644 --- a/adev-ja/src/content/guide/components/styling.md +++ b/adev-ja/src/content/guide/components/styling.md @@ -36,7 +36,7 @@ CSSを出力するすべてのツールと連携します。 ## スタイルのスコープ 各コンポーネントには、**ビューカプセル化**設定があり、フレームワークがコンポーネントのスタイルをどのようにスコープするかを決定します。 -ビューカプセル化モードには、`Emulated`、`ShadowDom`、`None`の3つのモードがあります。 +ビューカプセル化モードには、`Emulated`、`ShadowDom`、`IsolatedShadowDom`、`None`の4つのモードがあります。 モードは、`@Component`デコレーターで指定できます。 @@ -82,8 +82,6 @@ Angularのエミュレートされたカプセル化モードは、カスタム を使用して、コンポーネント内のスタイルをスコープします。 このモードを有効にすると、Angularはコンポーネントのホスト要素にシャドウルートを添付し、コンポーネントのテンプレートとスタイルを対応するシャドウツリーにレンダリングします。 -このモードでは、_コンポーネントのスタイルのみ_がコンポーネントのテンプレート内の要素に適用されることが厳密に保証されます。 -グローバルスタイルはシャドウツリー内の要素に影響を与えることができず、 シャドウツリー内のスタイルはシャドウツリー外の要素に影響を与えることができません。 ただし、`ShadowDom`カプセル化を有効にすると、スタイルのスコープ以外にも影響があります。 @@ -92,6 +90,10 @@ Angularのエミュレートされたカプセル化モードは、カスタム とのやり取り、ブラウザの開発者ツールによる要素の表示方法に影響を与えます。 このオプションを有効にする前に、アプリケーションでShadow DOMを使用することのすべての影響を理解してください。 +### ViewEncapsulation.IsolatedShadowDom + +上記と同様に動作しますが、このモードでは、_コンポーネントのスタイルのみ_がコンポーネントのテンプレート内の要素に適用されることが厳密に保証されます。グローバルスタイルはシャドウツリー内の要素に影響を与えることができず、シャドウツリー内のスタイルはシャドウツリー外の要素に影響を与えることができません。 + ### ViewEncapsulation.None このモードは、コンポーネントのすべてのスタイルカプセル化を無効にします。 diff --git a/adev-ja/src/content/guide/di/creating-injectable-service.en.md b/adev-ja/src/content/guide/di/creating-injectable-service.en.md index ebe5b6a592..ca3a9bd49e 100644 --- a/adev-ja/src/content/guide/di/creating-injectable-service.en.md +++ b/adev-ja/src/content/guide/di/creating-injectable-service.en.md @@ -53,7 +53,7 @@ export class HeroService { } -## Creating an injectable service +## Creating an injectable service with the CLI The Angular CLI provides a command to create a new service. In the following example, you add a new service to an existing application. diff --git a/adev-ja/src/content/guide/di/creating-injectable-service.md b/adev-ja/src/content/guide/di/creating-injectable-service.md index 9e673f9b8d..78379c75f8 100644 --- a/adev-ja/src/content/guide/di/creating-injectable-service.md +++ b/adev-ja/src/content/guide/di/creating-injectable-service.md @@ -53,7 +53,7 @@ export class HeroService { } -## 注入可能なサービスの作成 +## CLIでの注入可能なサービスの作成 Angular CLIは、新しいサービスを作成するためのコマンドを提供します。 次の例では、既存のアプリケーションに新しいサービスを追加します。 diff --git a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md index 5cceb0196e..9068e40510 100644 --- a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md +++ b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md @@ -232,7 +232,7 @@ export class SelfNoDataComponent { In this example, there is a parent provider and injecting the service will return the value, however, injecting the service with `self` and `optional` will return `null` because `self` tells the injector to stop searching in the current host element. Another example shows the component class with a provider for `FlowerService`. -In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip 🌷. +In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip 🌷. @@ -240,7 +240,7 @@ In this case, the injector looks no further than the current `ElementInjector` b `skipSelf` is the opposite of `self`. With `skipSelf`, Angular starts its search for a service in the parent `ElementInjector`, rather than in the current one. -So if the parent `ElementInjector` were using the fern 🌿 value for `emoji`, but you had maple leaf 🍁 in the component's `providers` array, Angular would ignore maple leaf 🍁 and use fern 🌿. +So if the parent `ElementInjector` were using the fern 🌿 value for `emoji`, but you had maple leaf 🍁 in the component's `providers` array, Angular would ignore maple leaf 🍁 and use fern 🌿. To see this in code, assume that the following value for `emoji` is what the parent component were using, as in this service: @@ -250,7 +250,7 @@ export class LeafService { } -Imagine that in the child component, you had a different value, maple leaf 🍁 but you wanted to use the parent's value instead. +Imagine that in the child component, you had a different value, maple leaf 🍁 but you wanted to use the parent's value instead. This is when you'd use `skipSelf`: -In this case, the value you'd get for `emoji` would be fern 🌿, not maple leaf 🍁. +In this case, the value you'd get for `emoji` would be fern 🌿, not maple leaf 🍁. #### `skipSelf` option with `optional` @@ -307,7 +307,7 @@ export class HostComponent { } -Since `HostComponent` has the `host` option , no matter what the parent of `HostComponent` might have as a `flower.emoji` value, the `HostComponent` will use tulip 🌷. +Since `HostComponent` has the `host` option , no matter what the parent of `HostComponent` might have as a `flower.emoji` value, the `HostComponent` will use tulip 🌷. ### Modifiers with constructor injection @@ -383,7 +383,7 @@ These aren't real attributes but are here to demonstrate what is going on under ### Example app structure -The example application has a `FlowerService` provided in `root` with an `emoji` value of red hibiscus 🌺. +The example application has a `FlowerService` provided in `root` with an `emoji` value of red hibiscus 🌺. @Injectable({ @@ -441,16 +441,16 @@ Add a binding to the `` template to visualize the result: The output in the view would be: -Emoji from FlowerService: 🌺 +Emoji from FlowerService: 🌺 In the logical tree, this would be represented as follows: "🌺"> + @Inject(FlowerService) flower=>"🌺"> <#VIEW> -

Emoji from FlowerService: {{flower.emoji}} (🌺)

+

Emoji from FlowerService: {{flower.emoji}} (🌺)

<#VIEW> @@ -512,7 +512,7 @@ To render the new values, add `` to the bottom of the `AppComponent` Child Component -Emoji from FlowerService: 🌻 +Emoji from FlowerService: 🌻 In the logical tree, this is represented as follows: @@ -520,14 +520,14 @@ In the logical tree, this is represented as follows: "🌺"> + @Inject(FlowerService) flower=>"🌺"> <#VIEW> -

Emoji from FlowerService: {{flower.emoji}} (🌺)

- "🌻"> +

Emoji from FlowerService: {{flower.emoji}} (🌺)

+ "🌻"> <#VIEW>

Child Component

-

Emoji from FlowerService: {{flower.emoji}} (🌻)

+

Emoji from FlowerService: {{flower.emoji}} (🌻)

 @@ -536,9 +536,9 @@ In the logical tree, this is represented as follows: When `` requests the `FlowerService`, the injector begins its search at the `<#VIEW>` belonging to `` \(`<#VIEW>` is included because it is injected from `@Component()`\) and ends with ``. -In this case, the `FlowerService` is resolved in the `providers` array with sunflower 🌻 of the ``. +In this case, the `FlowerService` is resolved in the `providers` array with sunflower 🌻 of the ``. The injector doesn't have to look any further in the injector tree. -It stops as soon as it finds the `FlowerService` and never sees the red hibiscus 🌺. +It stops as soon as it finds the `FlowerService` and never sees the red hibiscus 🌺. ### Using the `viewProviders` array @@ -551,7 +551,7 @@ For step-by-step instructions, continue with this section. If you can set it up on your own, skip ahead to [Modifying service availability](#visibility-of-provided-tokens). For demonstration, we are building an `AnimalService` to demonstrate `viewProviders`. -First, create an `AnimalService` with an `emoji` property of whale 🐳: +First, create an `AnimalService` with an `emoji` property of whale 🐳: import { Injectable } from '@angular/core'; @@ -576,7 +576,7 @@ export class AppComponent { HELPFUL: You can leave all the `FlowerService` related code in place as it will allow a comparison with the `AnimalService`. Add a `viewProviders` array and inject the `AnimalService` in the `` class, too, but give `emoji` a different value. -Here, it has a value of dog 🐶. +Here, it has a value of dog 🐶. @@ -614,10 +614,10 @@ Now you should see both values in the browser: AppComponent -Emoji from AnimalService: 🐳 +Emoji from AnimalService: 🐳 Child Component -Emoji from AnimalService: 🐶 +Emoji from AnimalService: 🐶 @@ -626,13 +626,13 @@ The logic tree for this example of `viewProviders` is as follows: "🐳"> + @Inject(AnimalService) animal=>"🐳"> <#VIEW> - <#VIEW @Provide(AnimalService="🐶") - @Inject(AnimalService=>"🐶")> + <#VIEW @Provide(AnimalService="🐶") + @Inject(AnimalService=>"🐶")> -

Emoji from AnimalService: {{animal.emoji}} (🐶)

+

Emoji from AnimalService: {{animal.emoji}} (🐶)

 @@ -641,7 +641,7 @@ The logic tree for this example of `viewProviders` is as follows: Just as with the `FlowerService` example, the `AnimalService` is provided in the `` `@Component()` decorator. -This means that since the injector first looks in the `ElementInjector` of the component, it finds the `AnimalService` value of dog 🐶. +This means that since the injector first looks in the `ElementInjector` of the component, it finds the `AnimalService` value of dog 🐶. It doesn't need to continue searching the `ElementInjector` tree, nor does it need to search the `ModuleInjector`. ### `providers` vs. `viewProviders` @@ -710,43 +710,43 @@ The browser now renders the following, omitting the previous examples for brevit ... Content projection -Emoji from FlowerService: 🌻 -Emoji from AnimalService: 🐳 +Emoji from FlowerService: 🌻 +Emoji from AnimalService: 🐳 -Emoji from FlowerService: 🌻 -Emoji from AnimalService: 🐶 +Emoji from FlowerService: 🌻 +Emoji from AnimalService: 🐶 These four bindings demonstrate the difference between `providers` and `viewProviders`. -Remember that the dog emoji 🐶 is declared inside the `<#VIEW>` of `ChildComponent` and isn't visible to the projected content. -Instead, the projected content sees the whale 🐳. +Remember that the dog emoji 🐶 is declared inside the `<#VIEW>` of `ChildComponent` and isn't visible to the projected content. +Instead, the projected content sees the whale 🐳. -However, in the next output section though, the `InspectorComponent` is an actual child component of `ChildComponent`, `InspectorComponent` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog 🐶. +However, in the next output section though, the `InspectorComponent` is an actual child component of `ChildComponent`, `InspectorComponent` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog 🐶. The `AnimalService` in the logical tree would look like this: "🐳"> + @Inject(AnimalService) animal=>"🐳"> <#VIEW> - <#VIEW @Provide(AnimalService="🐶") - @Inject(AnimalService=>"🐶")> + <#VIEW @Provide(AnimalService="🐶") + @Inject(AnimalService=>"🐶")> -

Emoji from AnimalService: {{animal.emoji}} (🐶)

+

Emoji from AnimalService: {{animal.emoji}} (🐶)

Content projection

- "🐳"> -

Emoji from AnimalService: {{animal.emoji}} (🐳)

+ "🐳"> +

Emoji from AnimalService: {{animal.emoji}} (🐳)
- <#VIEW @Inject(AnimalService) animal=>"🐶"> -

Emoji from AnimalService: {{animal.emoji}} (🐶)

+ <#VIEW @Inject(AnimalService) animal=>"🐶"> +

Emoji from AnimalService: {{animal.emoji}} (🐶)

 @@ -756,8 +756,8 @@ The `AnimalService` in the logical tree would look like this: -The projected content of `` sees the whale 🐳, not the dog 🐶, because the dog 🐶 is inside the `` `<#VIEW>`. -The `` can only see the dog 🐶 if it is also within the `<#VIEW>`. +The projected content of `` sees the whale 🐳, not the dog 🐶, because the dog 🐶 is inside the `` `<#VIEW>`. +The `` can only see the dog 🐶 if it is also within the `<#VIEW>`. ### Visibility of provided tokens @@ -773,12 +773,12 @@ flower = inject(FlowerService, { skipSelf: true }) With `skipSelf`, the `` injector doesn't look to itself for the `FlowerService`. Instead, the injector starts looking for the `FlowerService` at the `ElementInjector` of the ``, where it finds nothing. -Then, it goes back to the `` `ModuleInjector` and finds the red hibiscus 🌺 value, which is available because `` and `` share the same `ModuleInjector`. +Then, it goes back to the `` `ModuleInjector` and finds the red hibiscus 🌺 value, which is available because `` and `` share the same `ModuleInjector`. The UI renders the following: -Emoji from FlowerService: 🌺 +Emoji from FlowerService: 🌺 @@ -787,10 +787,10 @@ In a logical tree, this same idea might look like this: "🌺"> + @Inject(FlowerService) flower=>"🌺"> <#VIEW> - - <#VIEW @Inject(FlowerService, SkipSelf)=>"🌺"> + + <#VIEW @Inject(FlowerService, SkipSelf)=>"🌺"> @@ -799,7 +799,7 @@ In a logical tree, this same idea might look like this: -Though `` provides the sunflower 🌻, the application renders the red hibiscus 🌺 because `skipSelf` causes the current injector (`app-child`) to skip itself and look to its parent. +Though `` provides the sunflower 🌻, the application renders the red hibiscus 🌺 because `skipSelf` causes the current injector (`app-child`) to skip itself and look to its parent. If you now add `host` (in addition to the `skipSelf`), the result will be `null`. This is because `host` limits the upper bound of the search to the `app-child` `<#VIEW>`. @@ -808,9 +808,9 @@ Here's the idea in the logical tree: "🌺"> + @Inject(FlowerService) flower=>"🌺"> <#VIEW> - + <#VIEW inject(FlowerService, {skipSelf: true, host: true, optional:true})=>null> @@ -823,8 +823,8 @@ Here, the services and their values are the same, but `host` stops the injector ### `skipSelf` and `viewProviders` -Remember, `` provides the `AnimalService` in the `viewProviders` array with the value of dog 🐶. -Because the injector has only to look at the `ElementInjector` of the `` for the `AnimalService`, it never sees the whale 🐳. +Remember, `` provides the `AnimalService` in the `viewProviders` array with the value of dog 🐶. +Because the injector has only to look at the `ElementInjector` of the `` for the `AnimalService`, it never sees the whale 🐳. As in the `FlowerService` example, if you add `skipSelf` to the `inject()` of `AnimalService`, the injector won't look in the `ElementInjector` of the current `` for the `AnimalService`. Instead, the injector will begin at the `` `ElementInjector`. @@ -834,7 +834,7 @@ Instead, the injector will begin at the `` `ElementInjector`. selector: 'app-child', … viewProviders: [ - { provide: AnimalService, useValue: { emoji: '🐶' } }, + { provide: AnimalService, useValue: { emoji: '🐶' } }, ], }) @@ -844,11 +844,11 @@ The logical tree looks like this with `skipSelf` in ``: "🐳")> + @Inject(AnimalService=>"🐳")> <#VIEW> - <#VIEW @Provide(AnimalService="🐶") - @Inject(AnimalService, SkipSelf=>"🐳")> + <#VIEW @Provide(AnimalService="🐶") + @Inject(AnimalService, SkipSelf=>"🐳")> @@ -857,11 +857,11 @@ The logical tree looks like this with `skipSelf` in ``: -With `skipSelf` in the ``, the injector begins its search for the `AnimalService` in the `` `ElementInjector` and finds whale 🐳. +With `skipSelf` in the ``, the injector begins its search for the `AnimalService` in the `` `ElementInjector` and finds whale 🐳. ### `host` and `viewProviders` -If you just use `host` for the injection of `AnimalService`, the result is dog 🐶 because the injector finds the `AnimalService` in the `` `<#VIEW>` itself. +If you just use `host` for the injection of `AnimalService`, the result is dog 🐶 because the injector finds the `AnimalService` in the `` `<#VIEW>` itself. The `ChildComponent` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value. You can also see `host` the `inject()`: @@ -870,7 +870,7 @@ You can also see `host` the `inject()`: selector: 'app-child', … viewProviders: [ - { provide: AnimalService, useValue: { emoji: '🐶' } }, + { provide: AnimalService, useValue: { emoji: '🐶' } }, ] }) export class ChildComponent { @@ -883,11 +883,11 @@ export class ChildComponent { "🐳")> + @Inject(AnimalService=>"🐳")> <#VIEW> - <#VIEW @Provide(AnimalService="🐶") - inject(AnimalService, {host: true}=>"🐶")> + <#VIEW @Provide(AnimalService="🐶") + inject(AnimalService, {host: true}=>"🐶")> @@ -895,7 +895,7 @@ export class ChildComponent { -Add a `viewProviders` array with a third animal, hedgehog 🦔, to the `app.component.ts` `@Component()` metadata: +Add a `viewProviders` array with a third animal, hedgehog 🦔, to the `app.component.ts` `@Component()` metadata: @Component({ @@ -903,7 +903,7 @@ Add a `viewProviders` array with a third animal, hedgehog 🦔 templateUrl: './app.component.html', styleUrls: [ './app.component.css' ], viewProviders: [ - { provide: AnimalService, useValue: { emoji: '🦔' } }, + { provide: AnimalService, useValue: { emoji: '🦔' } }, ], }) @@ -933,13 +933,13 @@ The logical tree representation shows why this is: "🐳")> - <#VIEW @Provide(AnimalService="🦔") - @Inject(AnimalService, @Optional)=>"🦔"> + @Inject(AnimalService=>"🐳")> + <#VIEW @Provide(AnimalService="🦔") + @Inject(AnimalService, @Optional)=>"🦔"> - <#VIEW @Provide(AnimalService="🐶") - inject(AnimalService, {skipSelf:true, host: true, optional: true})=>"🦔"> + <#VIEW @Provide(AnimalService="🐶") + inject(AnimalService, {skipSelf:true, host: true, optional: true})=>"🦔"> @@ -949,7 +949,7 @@ The logical tree representation shows why this is: `skipSelf`, causes the injector to start its search for the `AnimalService` at the ``, not the ``, where the request originates, and `host` stops the search at the `` `<#VIEW>`. -Since `AnimalService` is provided by way of the `viewProviders` array, the injector finds hedgehog 🦔 in the `<#VIEW>`. +Since `AnimalService` is provided by way of the `viewProviders` array, the injector finds hedgehog 🦔 in the `<#VIEW>`. ## Example: `ElementInjector` use cases diff --git a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md index cc2dc48173..a3b7841f41 100644 --- a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md +++ b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md @@ -232,7 +232,7 @@ export class SelfNoDataComponent { In this example, there is a parent provider and injecting the service will return the value, however, injecting the service with `self` and `optional` will return `null` because `self` tells the injector to stop searching in the current host element. 別の例では、 `FlowerService` のプロバイダーを備えたコンポーネントクラスを示しています。 -この場合、インジェクターは現在の `ElementInjector` より先を見ずに、 `FlowerService` を見つけて、チューリップ 🌷 を返します。 +この場合、インジェクターは現在の `ElementInjector` より先を見ずに、 `FlowerService` を見つけて、チューリップ 🌷 を返します。 @@ -240,7 +240,7 @@ In this example, there is a parent provider and injecting the service will retur `skipSelf` is the opposite of `self`. With `skipSelf`, Angular starts its search for a service in the parent `ElementInjector`, rather than in the current one. -そのため、親 `ElementInjector` が `emoji` にシダ 🌿 値を使用していたが、コンポーネントの `providers` 配列にカエデの葉 🍁 が含まれている場合、Angular はカエデの葉 🍁 を無視して、シダ 🌿 を使用します。 +そのため、親 `ElementInjector` が `emoji` にシダ 🌿 値を使用していたが、コンポーネントの `providers` 配列にカエデの葉 🍁 が含まれている場合、Angular はカエデの葉 🍁 を無視して、シダ 🌿 を使用します。 これをコードで確認するために、親コンポーネントが使用する `emoji` の次の値を想定します。これは、このサービスと同じです。 @@ -250,7 +250,7 @@ export class LeafService { } -子コンポーネントに、異なる値、カエデの葉 🍁 が含まれていると想像してください。ただし、親の値を使用したいとします。 +子コンポーネントに、異なる値、カエデの葉 🍁 が含まれていると想像してください。ただし、親の値を使用したいとします。 This is when you'd use `skipSelf`: -この場合、 `emoji` に対して取得する値は、カエデの葉 🍁 ではなく、シダ 🌿 になります。 +この場合、 `emoji` に対して取得する値は、カエデの葉 🍁 ではなく、シダ 🌿 になります。 #### `skipSelf` option with `optional` @@ -307,7 +307,7 @@ export class HostComponent { } -Since `HostComponent` has the `host` option , no matter what the parent of `HostComponent` might have as a `flower.emoji` value, the `HostComponent` will use tulip 🌷. +Since `HostComponent` has the `host` option , no matter what the parent of `HostComponent` might have as a `flower.emoji` value, the `HostComponent` will use tulip 🌷. ### Modifiers with constructor injection @@ -383,7 +383,7 @@ The following sections demonstrate `providers` and `viewProviders` along with wa ### アプリケーション構造の例 -この例では、 `emoji` の値が赤いハイビスカス 🌺 である、 `root` に提供される `FlowerService` があります。 +この例では、 `emoji` の値が赤いハイビスカス 🌺 である、 `root` に提供される `FlowerService` があります。 @Injectable({ @@ -441,16 +441,16 @@ export class AppComponent { ビューに出力されるのは次のとおりです。 -Emoji from FlowerService: 🌺 +Emoji from FlowerService: 🌺 論理ツリーでは、これは次のように表されます。 "🌺"> + @Inject(FlowerService) flower=>"🌺"> <#VIEW> -

Emoji from FlowerService: {{flower.emoji}} (🌺)

+

Emoji from FlowerService: {{flower.emoji}} (🌺)

<#VIEW> @@ -512,7 +512,7 @@ export class ChildComponent { Child Component -Emoji from FlowerService: 🌻 +Emoji from FlowerService: 🌻 論理ツリーでは、これは次のように表されます。 @@ -520,14 +520,14 @@ Emoji from FlowerService: 🌻 "🌺"> + @Inject(FlowerService) flower=>"🌺"> <#VIEW> -

Emoji from FlowerService: {{flower.emoji}} (🌺)

- "🌻"> +

Emoji from FlowerService: {{flower.emoji}} (🌺)

+ "🌻"> <#VIEW>

Child Component

-

Emoji from FlowerService: {{flower.emoji}} (🌻)

+

Emoji from FlowerService: {{flower.emoji}} (🌻)

 @@ -536,9 +536,9 @@ Emoji from FlowerService: 🌻 `` が `FlowerService` を要求すると、インジェクターは `` に属する `<#VIEW>`（`@Component()` から注入されるため `<#VIEW>` が含まれています）から始めて、 `` で終了します。 -この場合、 `FlowerService` は、 `` の `providers` 配列で、ひまわり 🌻 を使用して解決されます。 +この場合、 `FlowerService` は、 `` の `providers` 配列で、ひまわり 🌻 を使用して解決されます。 インジェクターは、インジェクターツリーをさらに検索する必要はありません。 -`FlowerService` を見つけるとすぐに停止し、赤いハイビスカス 🌺 は見えません。 +`FlowerService` を見つけるとすぐに停止し、赤いハイビスカス 🌺 は見えません。 ### `viewProviders` 配列を使用する @@ -551,7 +551,7 @@ HELPFUL: ステップは `providers` 配列を使用する場合と同じです 自分で設定できる場合は、[サービスの可用性を変更する](#visibility-of-provided-tokens) に進んでください。 デモのために、 `AnimalService` を作成して、 `viewProviders` を示します。 -最初に、 `emoji` プロパティがクジラ 🐳 である `AnimalService` を作成します。 +最初に、 `emoji` プロパティがクジラ 🐳 である `AnimalService` を作成します。 import { Injectable } from '@angular/core'; @@ -576,7 +576,7 @@ export class AppComponent { HELPFUL: `FlowerService` に関連するコードはすべてそのままにしておくことができます。これにより、 `AnimalService` との比較が可能になります。 `viewProviders` 配列を追加し、 `` クラスにも `AnimalService` を注入しますが、 `emoji` に異なる値を与えます。 -ここでは、犬 🐶 の値があります。 +ここでは、犬 🐶 の値があります。 @@ -614,10 +614,10 @@ export class ChildComponent { AppComponent -Emoji from AnimalService: 🐳 +Emoji from AnimalService: 🐳 Child Component -Emoji from AnimalService: 🐶 +Emoji from AnimalService: 🐶 @@ -626,13 +626,13 @@ Emoji from AnimalService: 🐶 "🐳"> + @Inject(AnimalService) animal=>"🐳"> <#VIEW> - <#VIEW @Provide(AnimalService="🐶") - @Inject(AnimalService=>"🐶")> + <#VIEW @Provide(AnimalService="🐶") + @Inject(AnimalService=>"🐶")> -

Emoji from AnimalService: {{animal.emoji}} (🐶)

+

Emoji from AnimalService: {{animal.emoji}} (🐶)

 @@ -641,7 +641,7 @@ Emoji from AnimalService: 🐶 `FlowerService` の例と同様に、 `AnimalService` は `` の `@Component()` デコレーターで提供されています。 -つまり、インジェクターは最初にコンポーネントの `ElementInjector` を調べるため、犬 🐶 の `AnimalService` 値が見つかります。 +つまり、インジェクターは最初にコンポーネントの `ElementInjector` を調べるため、犬 🐶 の `AnimalService` 値が見つかります。 インジェクターは、 `ElementInjector` ツリーをさらに検索する必要も、 `ModuleInjector` を検索する必要もありません。 ### `providers` と `viewProviders` の違い @@ -710,43 +710,43 @@ export class InspectorComponent { ... Content projection -Emoji from FlowerService: 🌻 -Emoji from AnimalService: 🐳 +Emoji from FlowerService: 🌻 +Emoji from AnimalService: 🐳 -Emoji from FlowerService: 🌻 -Emoji from AnimalService: 🐶 +Emoji from FlowerService: 🌻 +Emoji from AnimalService: 🐶 これらの4つのバインディングは、 `providers` と `viewProviders` の違いを示しています。 -犬の絵文字 🐶 は、 `ChildComponent` の `<#VIEW>` 内に宣言され、投影されたコンテンツには可視ではないことを覚えておいてください。 -代わりに、投影されたコンテンツには、クジラ 🐳 が表示されます。 +犬の絵文字 🐶 は、 `ChildComponent` の `<#VIEW>` 内に宣言され、投影されたコンテンツには可視ではないことを覚えておいてください。 +代わりに、投影されたコンテンツには、クジラ 🐳 が表示されます。 -ただし、次の出力セクションでは `InspectorComponent` は `ChildComponent` の実際の子コンポーネントです。そして `InspectorComponent` は `<#VIEW>` の内側にあるため、 `AnimalService` を要求すると、犬 🐶 が表示されます。 +ただし、次の出力セクションでは `InspectorComponent` は `ChildComponent` の実際の子コンポーネントです。そして `InspectorComponent` は `<#VIEW>` の内側にあるため、 `AnimalService` を要求すると、犬 🐶 が表示されます。 論理ツリー内の `AnimalService` は、次のようになります。 "🐳"> + @Inject(AnimalService) animal=>"🐳"> <#VIEW> - <#VIEW @Provide(AnimalService="🐶") - @Inject(AnimalService=>"🐶")> + <#VIEW @Provide(AnimalService="🐶") + @Inject(AnimalService=>"🐶")> -

Emoji from AnimalService: {{animal.emoji}} (🐶)

+

Emoji from AnimalService: {{animal.emoji}} (🐶)

Content projection

- "🐳"> -

Emoji from AnimalService: {{animal.emoji}} (🐳)

+ "🐳"> +

Emoji from AnimalService: {{animal.emoji}} (🐳)
- <#VIEW @Inject(AnimalService) animal=>"🐶"> -

Emoji from AnimalService: {{animal.emoji}} (🐶)

+ <#VIEW @Inject(AnimalService) animal=>"🐶"> +

Emoji from AnimalService: {{animal.emoji}} (🐶)

 @@ -756,8 +756,8 @@ Emoji from AnimalService: 🐶 -`` の投影されたコンテンツには、クジラ 🐳 が表示され、犬 🐶 は表示されません。これは、犬 🐶 が `` の `<#VIEW>` の内側にあるためです。 -`` は、 `<#VIEW>` の内側にある場合にのみ、犬 🐶 を表示できます。 +`` の投影されたコンテンツには、クジラ 🐳 が表示され、犬 🐶 は表示されません。これは、犬 🐶 が `` の `<#VIEW>` の内側にあるためです。 +`` は、 `<#VIEW>` の内側にある場合にのみ、犬 🐶 を表示できます。 ### 提供されたトークンの可視性 @@ -773,12 +773,12 @@ flower = inject(FlowerService, { skipSelf: true }) With `skipSelf`, the `` injector doesn't look to itself for the `FlowerService`. 代わりに、インジェクターは `` の `ElementInjector` で `FlowerService` の検索を開始し、何も見つかりません。 -次に、 `` の `ModuleInjector` に戻り、 `` と `` が同じ `ModuleInjector` を共有しているため、赤いハイビスカス 🌺 値が見つかります。 +次に、 `` の `ModuleInjector` に戻り、 `` と `` が同じ `ModuleInjector` を共有しているため、赤いハイビスカス 🌺 値が見つかります。 UIには次のように表示されます。 -Emoji from FlowerService: 🌺 +Emoji from FlowerService: 🌺 @@ -787,10 +787,10 @@ Emoji from FlowerService: 🌺 "🌺"> + @Inject(FlowerService) flower=>"🌺"> <#VIEW> - - <#VIEW @Inject(FlowerService, SkipSelf)=>"🌺"> + + <#VIEW @Inject(FlowerService, SkipSelf)=>"🌺"> @@ -799,7 +799,7 @@ Emoji from FlowerService: 🌺 -Though `` provides the sunflower 🌻, the application renders the red hibiscus 🌺 because `skipSelf` causes the current injector (`app-child`) to skip itself and look to its parent. +Though `` provides the sunflower 🌻, the application renders the red hibiscus 🌺 because `skipSelf` causes the current injector (`app-child`) to skip itself and look to its parent. If you now add `host` (in addition to the `skipSelf`), the result will be `null`. This is because `host` limits the upper bound of the search to the `app-child` `<#VIEW>`. @@ -808,9 +808,9 @@ This is because `host` limits the upper bound of the search to the `app-child` ` "🌺"> + @Inject(FlowerService) flower=>"🌺"> <#VIEW> - + <#VIEW inject(FlowerService, {skipSelf: true, host: true, optional:true})=>null> @@ -823,8 +823,8 @@ Here, the services and their values are the same, but `host` stops the injector ### `skipSelf` and `viewProviders` -覚えておいてください。 `` は、 `viewProviders` 配列で `AnimalService` を提供し、その値は犬 🐶 です。 -インジェクターは、 `` の `ElementInjector` を `AnimalService` について調べるだけなので、クジラ 🐳 は見えません。 +覚えておいてください。 `` は、 `viewProviders` 配列で `AnimalService` を提供し、その値は犬 🐶 です。 +インジェクターは、 `` の `ElementInjector` を `AnimalService` について調べるだけなので、クジラ 🐳 は見えません。 As in the `FlowerService` example, if you add `skipSelf` to the `inject()` of `AnimalService`, the injector won't look in the `ElementInjector` of the current `` for the `AnimalService`. 代わりに、インジェクターは `` の `ElementInjector` で検索を開始します。 @@ -834,7 +834,7 @@ As in the `FlowerService` example, if you add `skipSelf` to the `inject()` of `A selector: 'app-child', … viewProviders: [ - { provide: AnimalService, useValue: { emoji: '🐶' } }, + { provide: AnimalService, useValue: { emoji: '🐶' } }, ], }) @@ -844,11 +844,11 @@ The logical tree looks like this with `skipSelf` in ``: "🐳")> + @Inject(AnimalService=>"🐳")> <#VIEW> - <#VIEW @Provide(AnimalService="🐶") - @Inject(AnimalService, SkipSelf=>"🐳")> + <#VIEW @Provide(AnimalService="🐶") + @Inject(AnimalService, SkipSelf=>"🐳")> @@ -857,11 +857,11 @@ The logical tree looks like this with `skipSelf` in ``: -With `skipSelf` in the ``, the injector begins its search for the `AnimalService` in the `` `ElementInjector` and finds whale 🐳. +With `skipSelf` in the ``, the injector begins its search for the `AnimalService` in the `` `ElementInjector` and finds whale 🐳. ### `host` and `viewProviders` -If you just use `host` for the injection of `AnimalService`, the result is dog 🐶 because the injector finds the `AnimalService` in the `` `<#VIEW>` itself. +If you just use `host` for the injection of `AnimalService`, the result is dog 🐶 because the injector finds the `AnimalService` in the `` `<#VIEW>` itself. The `ChildComponent` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value. You can also see `host` the `inject()`: @@ -870,7 +870,7 @@ You can also see `host` the `inject()`: selector: 'app-child', … viewProviders: [ - { provide: AnimalService, useValue: { emoji: '🐶' } }, + { provide: AnimalService, useValue: { emoji: '🐶' } }, ] }) export class ChildComponent { @@ -883,11 +883,11 @@ export class ChildComponent { "🐳")> + @Inject(AnimalService=>"🐳")> <#VIEW> - <#VIEW @Provide(AnimalService="🐶") - inject(AnimalService, {host: true}=>"🐶")> + <#VIEW @Provide(AnimalService="🐶") + inject(AnimalService, {host: true}=>"🐶")> @@ -895,7 +895,7 @@ export class ChildComponent { -3番目の動物、ハリネズミ 🦔 を含む `viewProviders` 配列を、 `app.component.ts` の `@Component()` メタデータに追加します。 +3番目の動物、ハリネズミ 🦔 を含む `viewProviders` 配列を、 `app.component.ts` の `@Component()` メタデータに追加します。 @Component({ @@ -903,7 +903,7 @@ export class ChildComponent { templateUrl: './app.component.html', styleUrls: [ './app.component.css' ], viewProviders: [ - { provide: AnimalService, useValue: { emoji: '🦔' } }, + { provide: AnimalService, useValue: { emoji: '🦔' } }, ], }) @@ -933,13 +933,13 @@ When `host` and `skipSelf` were applied to the `FlowerService`, which is in the "🐳")> - <#VIEW @Provide(AnimalService="🦔") - @Inject(AnimalService, @Optional)=>"🦔"> + @Inject(AnimalService=>"🐳")> + <#VIEW @Provide(AnimalService="🦔") + @Inject(AnimalService, @Optional)=>"🦔"> - <#VIEW @Provide(AnimalService="🐶") - inject(AnimalService, {skipSelf:true, host: true, optional: true})=>"🦔"> + <#VIEW @Provide(AnimalService="🐶") + inject(AnimalService, {skipSelf:true, host: true, optional: true})=>"🦔"> @@ -949,7 +949,7 @@ When `host` and `skipSelf` were applied to the `FlowerService`, which is in the `skipSelf`, causes the injector to start its search for the `AnimalService` at the ``, not the ``, where the request originates, and `host` stops the search at the `` `<#VIEW>`. -`AnimalService` は `viewProviders` 配列を介して提供されるため、インジェクターは `<#VIEW>` でハリネズミ 🦔 を見つけます。 +`AnimalService` は `viewProviders` 配列を介して提供されるため、インジェクターは `<#VIEW>` でハリネズミ 🦔 を見つけます。 ## 例： `ElementInjector` のユースケース diff --git a/adev-ja/src/content/guide/http/interceptors.en.md b/adev-ja/src/content/guide/http/interceptors.en.md index 86ef23c7ac..d4d78494e2 100644 --- a/adev-ja/src/content/guide/http/interceptors.en.md +++ b/adev-ja/src/content/guide/http/interceptors.en.md @@ -197,6 +197,43 @@ export function authRedirectInterceptor(req: HttpRequest, next: HttpHan } +## Working with response types + +When using `HttpClient` with the `withFetch` provider, responses include a `type` property that indicates how the browser handled the response based on CORS policies and request mode. This property aligns with the native Fetch API specification and provides valuable insights for debugging CORS issues and understanding response accessibility. + +The response `type` property can have the following values: +- `'basic'` - Same-origin response with all headers accessible +- `'cors'` - Cross-origin response with CORS headers properly configured +- `'opaque'` - Cross-origin response without CORS, headers and body may be limited +- `'opaqueredirect'` - Response from a redirected request in no-cors mode +- `'error'` - Network error occurred + +An interceptor can use response type information for CORS debugging and error handling: + + +export function responseTypeInterceptor(req: HttpRequest, next: HttpHandlerFn): Observable> { + return next(req).pipe(map(event => { + if (event.type === HttpEventType.Response) { + // Handle different response types appropriately + switch (event.responseType) { + case 'opaque': + // Limited access to response data + console.warn('Limited response data due to CORS policy'); + break; + case 'cors': + case 'basic': + // Full access to response data + break; + case 'error': + // Handle network errors + console.error('Network error in response'); + break; + } + } + })); +} + + ## DI-based interceptors `HttpClient` also supports interceptors which are defined as injectable classes and configured through the DI system. The capabilities of DI-based interceptors are identical to those of functional interceptors, but the configuration mechanism is different. diff --git a/adev-ja/src/content/guide/http/interceptors.md b/adev-ja/src/content/guide/http/interceptors.md index 06d793c771..29fad441e3 100644 --- a/adev-ja/src/content/guide/http/interceptors.md +++ b/adev-ja/src/content/guide/http/interceptors.md @@ -197,6 +197,43 @@ export function authRedirectInterceptor(req: HttpRequest, next: HttpHan } +## レスポンスタイプの操作 + +`withFetch` プロバイダーで `HttpClient` を使用する場合、レスポンスには、CORSポリシーとリクエストモードに基づいてブラウザがレスポンスを処理した方法を示す `type` プロパティが含まれます。このプロパティはネイティブFetch API仕様に準拠しており、CORSの問題をデバッグし、レスポンスのアクセス可能性を理解するための貴重な洞察を提供します。 + +レスポンスの `type` プロパティは次の値を持つことができます： +- `'basic'` - すべてのヘッダーにアクセス可能な同一オリジンレスポンス +- `'cors'` - CORSヘッダーが適切に構成されたクロスオリジンレスポンス +- `'opaque'` - CORSなしのクロスオリジンレスポンス、ヘッダーとボディが制限される場合があります +- `'opaqueredirect'` - no-corsモードでリダイレクトされたリクエストからのレスポンス +- `'error'` - ネットワークエラーが発生しました + +インターセプターは、CORSデバッグとエラー処理にレスポンスタイプ情報を使用できます： + + +export function responseTypeInterceptor(req: HttpRequest, next: HttpHandlerFn): Observable> { + return next(req).pipe(map(event => { + if (event.type === HttpEventType.Response) { + // 異なるレスポンスタイプを適切に処理します + switch (event.responseType) { + case 'opaque': + // レスポンスデータへのアクセスが制限されています + console.warn('CORSポリシーによりレスポンスデータが制限されています'); + break; + case 'cors': + case 'basic': + // レスポンスデータへの完全なアクセス + break; + case 'error': + // ネットワークエラーを処理します + console.error('レスポンスでネットワークエラーが発生しました'); + break; + } + } + })); +} + + ## DI ベースのインターセプター {#di-based-interceptors} `HttpClient` は、注入可能なクラスとして定義され、DIシステムによって構成されるインターセプターもサポートしています。DIベースのインターセプターの機能は、関数型インターセプターと同じですが、構成方法が異なります。 diff --git a/adev-ja/src/content/guide/http/testing.en.md b/adev-ja/src/content/guide/http/testing.en.md index 20fc8cfac0..1942ebdfa9 100644 --- a/adev-ja/src/content/guide/http/testing.en.md +++ b/adev-ja/src/content/guide/http/testing.en.md @@ -43,7 +43,7 @@ const httpTesting = TestBed.inject(HttpTestingController); // Load `ConfigService` and request the current configuration. const service = TestBed.inject(ConfigService); -const config$ = this.configService.getConfig(); +const config$ = service.getConfig(); // `firstValueFrom` subscribes to the `Observable`, which makes the HTTP request, // and creates a `Promise` of the response. diff --git a/adev-ja/src/content/guide/http/testing.md b/adev-ja/src/content/guide/http/testing.md index 4dff197fa9..8afd2f007d 100644 --- a/adev-ja/src/content/guide/http/testing.md +++ b/adev-ja/src/content/guide/http/testing.md @@ -43,7 +43,7 @@ const httpTesting = TestBed.inject(HttpTestingController); // `ConfigService` をロードして現在の構成を要求します。 const service = TestBed.inject(ConfigService); -const config$ = this.configService.getConfig(); +const config$ = service.getConfig(); // `firstValueFrom` は `Observable` を購読し、HTTP リクエストを行い、 // レスポンスの `Promise` を作成します。 diff --git a/adev-ja/src/content/guide/signals/linked-signal.en.md b/adev-ja/src/content/guide/signals/linked-signal.en.md index 1b758f605f..ac13187c2a 100644 --- a/adev-ja/src/content/guide/signals/linked-signal.en.md +++ b/adev-ja/src/content/guide/signals/linked-signal.en.md @@ -106,7 +106,7 @@ When you create a `linkedSignal`, you can pass an object with separate `source` The `source` can be any signal, such as a `computed` or component `input`. When the value of `source` changes, `linkedSignal` updates its value to the result of the provided `computation`. -The `computation` is a function that receives the new value of `source` and a `previous` object. The `previous` object has two properties— `previous.source` is the previous value of `source`, and `previous.value` is the previous result of the `computation`. You can use these previous values to decide the new result of the computation. +The `computation` is a function that receives the new value of `source` and a `previous` object. The `previous` object has two properties— `previous.source` is the previous value of `source`, and `previous.value` is the previous value of the `linkedSignal`. You can use these previous values to decide the new result of the computation. HELPFUL: When using the `previous` parameter, it is necessary to provide the generic type arguments of `linkedSignal` explicitly. The first generic type corresponds with the type of `source` and the second generic type determines the output type of `computation`. diff --git a/adev-ja/src/content/guide/signals/linked-signal.md b/adev-ja/src/content/guide/signals/linked-signal.md index 2fa0e9d417..cb0728322e 100644 --- a/adev-ja/src/content/guide/signals/linked-signal.md +++ b/adev-ja/src/content/guide/signals/linked-signal.md @@ -106,7 +106,7 @@ export class ShippingMethodPicker { `source`は、`computed`やコンポーネントの`input`などの任意のシグナルにできます。`source`の値が変更されると、`linkedSignal`は提供された`computation`の結果にその値を更新します。 -`computation`は、`source`の新しい値と`previous`オブジェクトを受け取る関数です。`previous`オブジェクトには、`previous.source`（`source`の以前の値）、`previous.value`（`computation`の以前の結果）の2つのプロパティがあります。これらの以前の値を使用して、計算の新しい結果を決定できます。 +`computation`は、`source`の新しい値と`previous`オブジェクトを受け取る関数です。`previous`オブジェクトには、`previous.source`（`source`の以前の値）、`previous.value`（`linkedSignal`の以前の値）の2つのプロパティがあります。これらの以前の値を使用して、計算の新しい結果を決定できます。 HELPFUL: When using the `previous` parameter, it is necessary to provide the generic type arguments of `linkedSignal` explicitly. The first generic type corresponds with the type of `source` and the second generic type determines the output type of `computation`. diff --git a/adev-ja/src/content/guide/testing/components-scenarios.en.md b/adev-ja/src/content/guide/testing/components-scenarios.en.md index 7efc281b41..4750a0bb41 100644 --- a/adev-ja/src/content/guide/testing/components-scenarios.en.md +++ b/adev-ja/src/content/guide/testing/components-scenarios.en.md @@ -307,7 +307,7 @@ If you use the Angular CLI, configure this flag in `src/test.ts`. -[window as any]('__zone_symbol__fakeAsyncPatchLock') = true; +[window as any]('__zone_symbol__fakeAsyncPatchLock') = true; import 'zone.js/testing'; diff --git a/adev-ja/src/content/guide/testing/components-scenarios.md b/adev-ja/src/content/guide/testing/components-scenarios.md index 89abc33c5a..9eba7748bd 100644 --- a/adev-ja/src/content/guide/testing/components-scenarios.md +++ b/adev-ja/src/content/guide/testing/components-scenarios.md @@ -307,7 +307,7 @@ Angular CLIを使用している場合は、`src/test.ts`でこのフラグを -[window as any]('__zone_symbol__fakeAsyncPatchLock') = true; +[window as any]('__zone_symbol__fakeAsyncPatchLock') = true; import 'zone.js/testing'; diff --git a/adev-ja/src/content/introduction/essentials/next-steps.en.md b/adev-ja/src/content/introduction/essentials/next-steps.en.md index b6ab96a14c..2c5c92149e 100644 --- a/adev-ja/src/content/introduction/essentials/next-steps.en.md +++ b/adev-ja/src/content/introduction/essentials/next-steps.en.md @@ -1,7 +1,7 @@ -Now that you have been introduced to main concepts of Angular - you're ready to put what you learned into practices with our interactive tutorials and learn more with our in-depth guides. +Now that you have been introduced to the main concepts of Angular - you're ready to put what you learned into practice with our interactive tutorials and learn more with our in-depth guides. ## Playground diff --git a/adev-ja/src/content/introduction/what-is-angular.en.md b/adev-ja/src/content/introduction/what-is-angular.en.md index bfb75fcf63..42b0540719 100644 --- a/adev-ja/src/content/introduction/what-is-angular.en.md +++ b/adev-ja/src/content/introduction/what-is-angular.en.md @@ -1,9 +1,9 @@ - +

Angular is a web framework that empowers developers to build fast, reliable applications. - +

Maintained by a dedicated team at Google, Angular provides a broad suite of tools, APIs, and libraries to simplify and streamline your development workflow. Angular gives you diff --git a/adev-ja/src/content/introduction/what-is-angular.md b/adev-ja/src/content/introduction/what-is-angular.md index db8e208e10..b23bbd0d91 100644 --- a/adev-ja/src/content/introduction/what-is-angular.md +++ b/adev-ja/src/content/introduction/what-is-angular.md @@ -1,9 +1,9 @@ - +

Angularは、開発者が高速で信頼性の高いアプリケーションを構築できるようにするWebフレームワークです。 - +

Googleの専門チームによって管理されているAngularは、 開発ワークフローを簡素化し効率化するためのツール、API、ライブラリの幅広いスイートを提供します。 diff --git a/adev-ja/src/content/kitchen-sink.md b/adev-ja/src/content/kitchen-sink.md index fb2f194eb9..6346b7f270 100644 --- a/adev-ja/src/content/kitchen-sink.md +++ b/adev-ja/src/content/kitchen-sink.md @@ -212,6 +212,17 @@ Adding the `preview` flag builds a running example of the code below the code sn NOTE: `preview` only works with standalone. +### Styling example previews with Tailwind CSS + +Tailwind utility classes can be used within code examples. + + + + + + ## Workflow Style numbered steps using ``. Numbering is created using CSS (handy!). diff --git a/adev-ja/src/content/reference/errors/NG02802.md b/adev-ja/src/content/reference/errors/NG02802.md new file mode 100644 index 0000000000..c679620a7e --- /dev/null +++ b/adev-ja/src/content/reference/errors/NG02802.md @@ -0,0 +1,41 @@ +# Headers not transferred by HttpTransferCache + +Angular produces this warning when code attempts to access an HTTP header that was not transferred from the server to the client by the `HttpTransferCache`. + +By default, `HttpTransferCache` does not transfer any headers to avoid potential security issues or unnecessary data transfer. When a header is accessed on the client that wasn't included, Angular logs this warning to help you identify missing headers. + +## Fixing the error + +To include specific headers in the transfer cache, use the `includeHeaders` option. + +### At the request level + +Add the `transferCache` parameter to your HTTP request: + +```typescript +this.http.get('/api/data', { + transferCache: { + includeHeaders: ['cache-control', 'etag'] + } +}); +``` + +### At the application level + +Configure `includeHeaders` when providing the transfer cache: + +```typescript +provideClientHydration( + withHttpTransferCache({ + includeHeaders: ['cache-control', 'etag'] + }) +); +``` + +Only include headers that are necessary for your application logic. Be cautious with sensitive headers. + +## Debugging the error + +The warning message includes the header name and the request URL. Check your code for where this header is being accessed and determine if it needs to be included in the transfer cache. + +If the header is not needed on the client, consider refactoring your code to avoid accessing it. \ No newline at end of file diff --git a/adev-ja/src/content/reference/errors/overview.en.md b/adev-ja/src/content/reference/errors/overview.en.md index 05c41bbaf1..604e8a5236 100644 --- a/adev-ja/src/content/reference/errors/overview.en.md +++ b/adev-ja/src/content/reference/errors/overview.en.md @@ -30,6 +30,7 @@ | `NG01203` | [Missing value accessor](errors/NG01203) | | `NG02200` | [Missing Iterable Differ](errors/NG02200) | | `NG02800` | [JSONP support in HttpClient configuration](errors/NG02800) | +| `NG02802` | [Headers not transferred by HttpTransferCache](errors/NG02802) | | `NG05000` | [Hydration with unsupported Zone.js instance.](errors/NG05000) | | `NG05104` | [Root element was not found.](errors/NG05104) | diff --git a/adev-ja/src/content/reference/errors/overview.md b/adev-ja/src/content/reference/errors/overview.md index 0742785d88..c0a04a169d 100644 --- a/adev-ja/src/content/reference/errors/overview.md +++ b/adev-ja/src/content/reference/errors/overview.md @@ -30,6 +30,7 @@ | `NG01203` | [Missing value accessor](errors/NG01203) | | `NG02200` | [Missing Iterable Differ](errors/NG02200) | | `NG02800` | [JSONP support in HttpClient configuration](errors/NG02800) | +| `NG02802` | [Headers not transferred by HttpTransferCache](errors/NG02802) | | `NG05000` | [Hydration with unsupported Zone.js instance.](errors/NG05000) | | `NG05104` | [Root element was not found.](errors/NG05104) | diff --git a/adev-ja/src/content/reference/migrations/ngclass-to-class.md b/adev-ja/src/content/reference/migrations/ngclass-to-class.md new file mode 100644 index 0000000000..38db079a3a --- /dev/null +++ b/adev-ja/src/content/reference/migrations/ngclass-to-class.md @@ -0,0 +1,44 @@ +# Migration from NgClass to class bindings + +This schematic migrates NgClass directive usages to class bindings in your application. +It will only migrate usages that are considered safe to migrate. + +Run the schematic using the following command: + +```bash +ng generate @angular/core:ngclass-to-class +``` + + +#### Before + +```html +
+``` + + +#### After + +```html +
+``` + +## Configuration options + +The migration supports a few options for fine tuning the migration to your specific needs. + +### `--migrate-space-separated-key` + +By default, the migration avoids migrating usages of `NgClass` in which object literal keys contain space-separated class names. +When the --migrate-space-separated-key flag is enabled, a binding is created for each individual key. + + +```html +
+``` + +to + +```html +
+``` \ No newline at end of file diff --git a/adev-ja/src/content/reference/migrations/ngstyle-to-style.md b/adev-ja/src/content/reference/migrations/ngstyle-to-style.md new file mode 100644 index 0000000000..5c12c73617 --- /dev/null +++ b/adev-ja/src/content/reference/migrations/ngstyle-to-style.md @@ -0,0 +1,45 @@ +# Migration from NgStyle to style bindings + +This schematic migrates NgStyle directive usages to style bindings in your application. +It will only migrate usages that are considered safe to migrate. + +Run the schematic using the following command: + +```bash +ng generate @angular/core:ngstyle-to-style +``` + + +#### Before + +```html +
+``` + + +#### After + +```html +
+``` + +## Configuration options + +The migration supports a few options for fine tuning the migration to your specific needs. + +### `--best-effort-mode` + +By default, the migration avoids migrating object references usages of `NgStyle` +When the `--best-effort-mode` flag is enabled, `ngStyle` instances binded to object references are also migrated. +This can be unsafe to migrate, for example if the binded object is mutated. + + +```html +
+``` + +to + +```html +
+``` \ No newline at end of file diff --git a/adev-ja/src/content/reference/migrations/overview.md b/adev-ja/src/content/reference/migrations/overview.md index 847cc99d6b..879f1350bd 100644 --- a/adev-ja/src/content/reference/migrations/overview.md +++ b/adev-ja/src/content/reference/migrations/overview.md @@ -30,4 +30,10 @@ Learn about how you can migrate your existing angular project to the latest feat Convert component templates to use self-closing tags where possible. - + + Convert component templates to prefer class bindings over the `NgClass` directives when possible. + + + Convert component templates to prefer style bindings over the `NgStyle` directives when possible. + + \ No newline at end of file diff --git a/adev-ja/src/content/reference/migrations/signal-queries.md b/adev-ja/src/content/reference/migrations/signal-queries.md index 8b9484c2d5..d6e3d9be32 100644 --- a/adev-ja/src/content/reference/migrations/signal-queries.md +++ b/adev-ja/src/content/reference/migrations/signal-queries.md @@ -35,7 +35,7 @@ import {Component, ContentChild} from '@angular/core'; export class MyComponent { @ContentChild('someRef') ref: ElementRef|undefined = undefined; - someMethod() { + someMethod(): void { if (this.ref) { this.ref.nativeElement; } @@ -54,7 +54,7 @@ import {Component, contentChild} from '@angular/core'; export class MyComponent { readonly ref = contentChild('someRef'); - someMethod() { + someMethod(): void { const ref = this.ref(); if (ref) { ref.nativeElement; diff --git a/adev-ja/src/content/reference/versions.en.md b/adev-ja/src/content/reference/versions.en.md index ac3d2dddb5..89cd10b710 100644 --- a/adev-ja/src/content/reference/versions.en.md +++ b/adev-ja/src/content/reference/versions.en.md @@ -9,7 +9,7 @@ This table covers [Angular versions under active support](reference/releases#act | Angular | Node.js | TypeScript | RxJS | | ------------------ | ----------------------------------- | -------------- | ------------------ | -| 20.2.x | ^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0 | >=5.9.0 <6.0.0 | ^6.5.3 \|\| ^7.4.0 | +| 20.2.x \|\| 20.3.x | ^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0 | >=5.9.0 <6.0.0 | ^6.5.3 \|\| ^7.4.0 | | 20.0.x \|\| 20.1.x | ^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0 | >=5.8.0 <5.9.0 | ^6.5.3 \|\| ^7.4.0 | | 19.2.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.9.0 | ^6.5.3 \|\| ^7.4.0 | | 19.1.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.8.0 | ^6.5.3 \|\| ^7.4.0 | @@ -146,14 +146,14 @@ For example: * asynchronous activities to improve startup performance - use these options only * if you know what you are doing as it could result in hard to trace down bugs. */ - // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - // __Zone_disable_on_property = true; // disable patch onProperty such as onclick - // __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // __Zone_disable_on_property = true; // disable patch onProperty such as onclick + // __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames /* * in Edge developer tools, the addEventListener will also be wrapped by zone.js * with the following flag, it will bypass `zone.js` patch for Edge. */ - // __Zone_enable_cross_context_check = true; + // __Zone_enable_cross_context_check = true; diff --git a/adev-ja/src/content/reference/versions.md b/adev-ja/src/content/reference/versions.md index b0ab0ab9b7..012e58901b 100644 --- a/adev-ja/src/content/reference/versions.md +++ b/adev-ja/src/content/reference/versions.md @@ -9,7 +9,7 @@ Node.js、TypeScript、RxJSのバージョンを示しています。 | Angular | Node.js | TypeScript | RxJS | | ------------------ | ----------------------------------- | -------------- | ------------------ | -| 20.2.x | ^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0 | >=5.9.0 <6.0.0 | ^6.5.3 \|\| ^7.4.0 | +| 20.2.x \|\| 20.3.x | ^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0 | >=5.9.0 <6.0.0 | ^6.5.3 \|\| ^7.4.0 | | 20.0.x \|\| 20.1.x | ^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0 | >=5.8.0 <5.9.0 | ^6.5.3 \|\| ^7.4.0 | | 19.2.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.9.0 | ^6.5.3 \|\| ^7.4.0 | | 19.1.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.8.0 | ^6.5.3 \|\| ^7.4.0 | @@ -146,14 +146,14 @@ CLIを使用していない場合は、ホストWebページ（`index.html`） * これらのオプションは、開始パフォーマンスを向上させるためだけに使用してください。 * 追跡が難しいバグが発生する可能性があるため、どのような操作を行っているのかを理解している場合にのみ使用してください。 */ - // __Zone_disable_requestAnimationFrame = true; // requestAnimationFrame のパッチを無効にする - // __Zone_disable_on_property = true; // onclick などの onProperty のパッチを無効にする - // __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // 指定したイベント名のパッチを無効にする + // __Zone_disable_requestAnimationFrame = true; // requestAnimationFrame のパッチを無効にする + // __Zone_disable_on_property = true; // onclick などの onProperty のパッチを無効にする + // __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // 指定したイベント名のパッチを無効にする /* * Edge 開発者ツールでは、addEventListener も zone.js によってラップされます。 * 次のフラグを使用すると、Edge に対する zone.js のパッチをバイパスできます。 */ - // __Zone_enable_cross_context_check = true; + // __Zone_enable_cross_context_check = true; diff --git a/adev-ja/src/content/tools/cli/aot-compiler.md b/adev-ja/src/content/tools/cli/aot-compiler.md index c331bd19dc..900e7d70f2 100644 --- a/adev-ja/src/content/tools/cli/aot-compiler.md +++ b/adev-ja/src/content/tools/cli/aot-compiler.md @@ -498,7 +498,7 @@ In this example it is recommended to include the checking of `address` in the `* @Component({ selector: 'my-component', - template: ' {{person.name}} lives on {{address.street}} ' + template: ' {{person.name}} lives on {{address.street}} ' }) class MyComponent { person?: Person; diff --git a/adev-ja/src/content/tools/cli/schematics.md b/adev-ja/src/content/tools/cli/schematics.md index 7b0800d091..84cb0dc0b9 100644 --- a/adev-ja/src/content/tools/cli/schematics.md +++ b/adev-ja/src/content/tools/cli/schematics.md @@ -96,7 +96,7 @@ ng update We analyzed your package.json, there are some packages to update: Name Version Command to update - ‐------------------------------------------------------------------------------- + -------------------------------------------------------------------------------- @angular/cdk 7.2.2 -> 7.3.1 ng update @angular/cdk @angular/cli 7.2.3 -> 7.3.0 ng update @angular/cli @angular/core 7.2.2 -> 7.2.3 ng update @angular/core diff --git a/adev-ja/src/content/tutorials/signals/intro/config.en.json b/adev-ja/src/content/tutorials/signals/intro/config.en.json index 6b50b1f91a..96f13323e6 100644 --- a/adev-ja/src/content/tutorials/signals/intro/config.en.json +++ b/adev-ja/src/content/tutorials/signals/intro/config.en.json @@ -3,4 +3,4 @@ "type": "editor", "nextTutorial": "first-app", "openFiles": ["src/app/app.ts", "src/app/app.html", "src/app/app.css"] -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/1-creating-your-first-signal/config.en.json b/adev-ja/src/content/tutorials/signals/steps/1-creating-your-first-signal/config.en.json index 7fbd4be7ba..638a23f2a5 100644 --- a/adev-ja/src/content/tutorials/signals/steps/1-creating-your-first-signal/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/1-creating-your-first-signal/config.en.json @@ -2,4 +2,4 @@ "openFiles": ["src/app/app.ts", "src/app/app.css"], "type": "editor", "title": "Creating and updating your first signal" -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/config.en.json b/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/config.en.json index dd6f7d6da7..3cc4f403f8 100644 --- a/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/config.en.json @@ -2,4 +2,4 @@ "openFiles": ["src/app/app.ts", "src/app/app.css"], "type": "editor", "title": "Reacting to signal changes with effects" -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/11-next-steps/config.en.json b/adev-ja/src/content/tutorials/signals/steps/11-next-steps/config.en.json index 2fd39a9e31..e579515e03 100644 --- a/adev-ja/src/content/tutorials/signals/steps/11-next-steps/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/11-next-steps/config.en.json @@ -1,3 +1,3 @@ { "title": "Next steps" -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/config.en.json b/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/config.en.json index 08faf4efb9..79e1243300 100644 --- a/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/config.en.json @@ -2,4 +2,4 @@ "openFiles": ["src/app/app.ts", "src/app/app.css"], "type": "editor", "title": "Deriving state with computed signals" -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/config.en.json b/adev-ja/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/config.en.json index 5aae6e53e2..a8332116ec 100644 --- a/adev-ja/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/config.en.json @@ -2,4 +2,4 @@ "openFiles": ["src/app/app.ts", "src/app/app.css"], "type": "editor", "title": "Deriving state with linked signals" -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/config.en.json b/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/config.en.json index 66a3049ebe..48bac02bb9 100644 --- a/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/config.en.json @@ -2,4 +2,4 @@ "openFiles": ["src/app/app.ts", "src/app/user-api.ts", "src/app/app.css"], "type": "editor", "title": "Managing async data with signals using the Resources API" -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/config.en.json b/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/config.en.json index 4e68e02a24..dffea145ef 100644 --- a/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/config.en.json @@ -7,4 +7,4 @@ ], "type": "editor", "title": "Passing data to components with input signals" -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/config.en.json b/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/config.en.json index 7761b01829..37e7c462da 100644 --- a/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/config.en.json @@ -2,4 +2,4 @@ "openFiles": ["src/app/app.ts", "src/app/custom-checkbox.ts", "src/app/app.css"], "type": "editor", "title": "Two-way binding with model signals" -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/config.en.json b/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/config.en.json index 60bcf15683..845081b9c4 100644 --- a/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/config.en.json @@ -8,4 +8,4 @@ ], "type": "editor", "title": "Using signals with services" -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/config.en.json b/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/config.en.json index 9b72341f6c..5df1706f90 100644 --- a/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/config.en.json @@ -2,4 +2,4 @@ "openFiles": ["src/app/app.ts", "src/app/highlight-directive.ts", "src/app/app.css"], "type": "editor", "title": "Using signals with directives" -} \ No newline at end of file +} diff --git a/adev-ja/src/content/tutorials/signals/steps/9-query-child-elements-with-signal-queries/config.en.json b/adev-ja/src/content/tutorials/signals/steps/9-query-child-elements-with-signal-queries/config.en.json index 2c215a2b4d..148894a291 100644 --- a/adev-ja/src/content/tutorials/signals/steps/9-query-child-elements-with-signal-queries/config.en.json +++ b/adev-ja/src/content/tutorials/signals/steps/9-query-child-elements-with-signal-queries/config.en.json @@ -7,4 +7,4 @@ ], "type": "editor", "title": "Query child elements with signal queries" -} \ No newline at end of file +} diff --git a/origin b/origin index 739b0914dd..0d028e0f77 160000 --- a/origin +++ b/origin @@ -1 +1 @@ -Subproject commit 739b0914dd07bb41aac8b4b5cddc3725c9446df7 +Subproject commit 0d028e0f770ef3bec0c23bb19d2ca5263e61bc26 diff --git a/tools/adev-patches/add-global-styles.patch b/tools/adev-patches/add-global-styles.patch index 6cbcec6f1c..49aa16046e 100644 --- a/tools/adev-patches/add-global-styles.patch +++ b/tools/adev-patches/add-global-styles.patch @@ -1,14 +1,15 @@ diff --git a/adev/src/local-styles.scss b/adev/src/local-styles.scss -index 2c83a2ad4a..9d9b28112a 100644 +index f3c266a1e2..bac1fb9f9b 100644 --- a/adev/src/local-styles.scss +++ b/adev/src/local-styles.scss -@@ -1,3 +1,17 @@ - @use './styles/xterm'; - - @include xterm.xterm(); +@@ -5,3 +5,21 @@ + @tailwind base; + @tailwind components; + @tailwind utilities; ++ +// adev-ja overrides + -+.docs-viewer { ++.docs-viewer, adev-home { + // `balance` is not good for Japanese headings. + h1, + h2, @@ -18,9 +19,12 @@ index 2c83a2ad4a..9d9b28112a 100644 + h6 { + word-break: auto-phrase; + } ++ ++ p { ++ word-break: auto-phrase; ++ } +} -+ -\ No newline at end of file + diff --git a/adev/shared-docs/styles/_typography.scss b/adev/shared-docs/styles/_typography.scss index 1c4e2ce0e7..8e897e21f9 100644 --- a/adev/shared-docs/styles/_typography.scss diff --git a/tools/adev-patches/localize-home.patch b/tools/adev-patches/localize-home.patch deleted file mode 100644 index 04b36ee763..0000000000 --- a/tools/adev-patches/localize-home.patch +++ /dev/null @@ -1,71 +0,0 @@ -diff --git a/adev/src/app/features/home/components/home-animation/home-animation.component.html b/adev/src/app/features/home/components/home-animation/home-animation.component.html -index be86249f55..d7be55fdd8 100644 ---- a/adev/src/app/features/home/components/home-animation/home-animation.component.html -+++ b/adev/src/app/features/home/components/home-animation/home-animation.component.html -@@ -7,22 +7,22 @@ - class="adev-banner" - target="_blank" - > --

Angular v20 is here!

--

Read about our newest release

-+

Angular v20 がリリースされました！

-+

最新リリースについて読む

- - --

Available now:

--

Prompts and best practices for AI and Angular

-+

公開中:

-+

AIとAngularのためのプロンプトとベストプラクティス

- -
-
- -- - -
-@@ -99,9 +99,9 @@ - - -
--

Works at any scale

-+

あらゆる規模で機能する

-

-- Angular lets you start small on a well-lit path and supports you as your team and apps grow. -+ Angularなら見通しのいい道から小さくスタート。チームやアプリの成長に合わせてサポートします。 -

-
- -@@ -124,19 +124,19 @@ - - -
--

Loved by millions

-+

数百万人に愛される

-

-- Join the millions of developers all over the world building with Angular in a thriving and -- friendly community. -+ 世界中の数百万人のAngular開発者たちと活発で -+ フレンドリーなコミュニティに参加しよう。 -

-
- - -
--

Build for everyone

-+

すべての人のために

-

-- Rely on Angular's built-in hydration, internationalization, security, and accessibility -- support to build for everyone around the world. -+ Angularに組み込まれたハイドレーション、国際化、セキュリティ、 -+ アクセシビリティのサポートを利用して、世界中すべての人のための開発を。 -

-
-
diff --git a/tools/lib/adev.ts b/tools/lib/adev.ts index efd3e2717c..831e4624a4 100644 --- a/tools/lib/adev.ts +++ b/tools/lib/adev.ts @@ -12,12 +12,12 @@ const $$ = $({ export async function buildAdev() { const sh = $$({ cwd: buildDir }); await sh`pnpm install --frozen-lockfile`; - await sh`pnpm bazel build //adev:build --full_build_adev --config=release`; + await sh`pnpm bazel build //adev:build.production`; } export function serveAdev() { const sh = $$({ cwd: buildDir, reject: false }); - const p = sh`pnpm ibazel run //adev:serve`; + const p = sh`pnpm ibazel run //adev:build.serve`; const pid = p.pid!; consola.log(`adev process started: ${pid}`); const abort = () => process.kill(pid!); diff --git a/tools/update-origin.ts b/tools/update-origin.ts index 91d837f083..bad01406f8 100644 --- a/tools/update-origin.ts +++ b/tools/update-origin.ts @@ -12,6 +12,8 @@ const localizedFilePatterns = [ '!src/content/**/license.md', // Tutorial config files 'src/content/tutorials/**/config.json', + // Update home files + 'src/app/features/home/home.component.html', // Update guide files 'src/app/features/update/recommendations.ts', 'src/app/features/update/update.component.ts',