From fa8584792daadff5106e7cd9addcd3f57cdc488c Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 26 Sep 2025 14:00:56 +0900 Subject: [PATCH 1/7] fix: update origin to 20.3.2 --- origin | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/origin b/origin index 0d028e0f7..31f203032 160000 --- a/origin +++ b/origin @@ -1 +1 @@ -Subproject commit 0d028e0f770ef3bec0c23bb19d2ca5263e61bc26 +Subproject commit 31f2030320c868e46db98786959cf421e6f758ca From 5e93ffae583fca03089d1a5a6e0bd127fa6bf047 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 26 Sep 2025 14:02:34 +0900 Subject: [PATCH 2/7] fix: migrate new files --- adev-ja/src/content/reference/errors/NG0401.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 adev-ja/src/content/reference/errors/NG0401.md diff --git a/adev-ja/src/content/reference/errors/NG0401.md b/adev-ja/src/content/reference/errors/NG0401.md new file mode 100644 index 000000000..af7037a4f --- /dev/null +++ b/adev-ja/src/content/reference/errors/NG0401.md @@ -0,0 +1,18 @@ +# Missing Platform + +Angular requires a platform to be initialized. This error is thrown when `bootstrapApplication` is used on the server without providing a `BootstrapContext`. + +When using server-side rendering, `bootstrapApplication` requires a `BootstrapContext` to be passed as an argument. + +## Debugging the error + +To resolve this error, ensure that your `main.server.ts` file correctly passes a `BootstrapContext` to the `bootstrapApplication` function. + +```typescript +import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser'; +import { App } from './app/app'; +import { config } from './app/app.config.server'; + +const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context); +export default bootstrap; +``` From d4aeda2e15aaba4ee86edd55d0e43615eb1bde22 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 26 Sep 2025 14:02:49 +0900 Subject: [PATCH 3/7] fix: migrate untranslated files --- adev-ja/src/content/cli/index.md | 2 +- .../ecosystem/service-workers/getting-started.md | 2 +- .../src/content/guide/animations/complex-sequences.md | 6 +++--- adev-ja/src/content/kitchen-sink.md | 11 ----------- adev-ja/src/content/reference/migrations/overview.md | 8 +------- .../reference/migrations/route-lazy-loading.md | 2 +- adev-ja/src/content/tools/cli/aot-compiler.md | 2 +- .../src/content/tools/cli/build-system-migration.md | 5 +++++ adev-ja/src/content/tools/cli/schematics.md | 2 +- 9 files changed, 14 insertions(+), 26 deletions(-) diff --git a/adev-ja/src/content/cli/index.md b/adev-ja/src/content/cli/index.md index 27613c69c..76cc1778f 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/service-workers/getting-started.md b/adev-ja/src/content/ecosystem/service-workers/getting-started.md index 594f3d199..aedaeb7f6 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//browser +npx http-server -p 8080 -c-1 dist/<project-name>/browser diff --git a/adev-ja/src/content/guide/animations/complex-sequences.md b/adev-ja/src/content/guide/animations/complex-sequences.md index fc790eb05..4eb1da686 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` and `ViewEncapsulation.IsolatedShadowDom` behave 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` behaves 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` 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. +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. ## 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/kitchen-sink.md b/adev-ja/src/content/kitchen-sink.md index 6346b7f27..fb2f194eb 100644 --- a/adev-ja/src/content/kitchen-sink.md +++ b/adev-ja/src/content/kitchen-sink.md @@ -212,17 +212,6 @@ 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/migrations/overview.md b/adev-ja/src/content/reference/migrations/overview.md index 879f1350b..847cc99d6 100644 --- a/adev-ja/src/content/reference/migrations/overview.md +++ b/adev-ja/src/content/reference/migrations/overview.md @@ -30,10 +30,4 @@ 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/route-lazy-loading.md b/adev-ja/src/content/reference/migrations/route-lazy-loading.md index 7c084df3f..0aecc0fab 100644 --- a/adev-ja/src/content/reference/migrations/route-lazy-loading.md +++ b/adev-ja/src/content/reference/migrations/route-lazy-loading.md @@ -72,4 +72,4 @@ export class AppModule {} export class AppModule {} -This migration will also collect information about all the components declared in NgModules and output the list of routes that use them (including corresponding location of the file). Consider making those components standalone and run this migration again. You can use an existing migration (see https://angular.dev/reference/migrations/standalone) to convert those components to standalone. +This migration will also collect information about all the components declared in NgModules and output the list of routes that use them (including corresponding location of the file). Consider making those components standalone and run this migration again. You can use an existing migration ([see](reference/migrations/standalone)) to convert those components to standalone. diff --git a/adev-ja/src/content/tools/cli/aot-compiler.md b/adev-ja/src/content/tools/cli/aot-compiler.md index 900e7d70f..c331bd19d 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/build-system-migration.md b/adev-ja/src/content/tools/cli/build-system-migration.md index 24221c1b1..0d9a64c36 100644 --- a/adev-ja/src/content/tools/cli/build-system-migration.md +++ b/adev-ja/src/content/tools/cli/build-system-migration.md @@ -529,6 +529,11 @@ This is caused by a [defect](https://github.com/evanw/esbuild/issues/399) in the IMPORTANT: Avoiding the use of modules with non-local side effects (outside of polyfills) is recommended whenever possible regardless of the build system being used and avoids this particular issue. Modules with non-local side effects can have a negative effect on both application size and runtime performance as well. +### Output location changes + +By default, after a successful build by the application builder the bundle is located in a `dist//browser` directory (instead of `dist/` for the browser builder). +This might break some of the toolchains that rely the previous location. In this case, you can [configure the output path](reference/configs/workspace-config#output-path-configuration) to suit your needs. + ## Bug reports Report issues and feature requests on [GitHub](https://github.com/angular/angular-cli/issues). diff --git a/adev-ja/src/content/tools/cli/schematics.md b/adev-ja/src/content/tools/cli/schematics.md index 84cb0dc0b..7b0800d09 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 From 9e4f170932e7a839a42b113d02ea1263ad1e2837 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Sat, 27 Sep 2025 09:09:28 +0900 Subject: [PATCH 4/7] fix: migrate markdown translation changes --- adev-ja/src/content/ai/develop-with-ai.en.md | 4 + adev-ja/src/content/ai/develop-with-ai.md | 3 + adev-ja/src/content/ai/overview.en.md | 6 +- adev-ja/src/content/ai/overview.md | 2 +- .../content/guide/components/styling.en.md | 14 +- .../src/content/guide/components/styling.md | 11 +- .../hierarchical-dependency-injection.en.md | 142 +++++++-------- .../di/hierarchical-dependency-injection.md | 166 +++++++++--------- .../src/content/guide/http/interceptors.en.md | 37 ---- .../src/content/guide/http/interceptors.md | 37 ---- .../src/content/guide/templates/binding.en.md | 2 +- .../src/content/guide/templates/binding.md | 2 +- .../src/content/guide/templates/defer.en.md | 4 + adev-ja/src/content/guide/templates/defer.md | 6 +- .../guide/templates/expression-syntax.en.md | 6 + .../guide/templates/expression-syntax.md | 6 + .../guide/testing/components-scenarios.en.md | 2 +- .../guide/testing/components-scenarios.md | 2 +- .../introduction/essentials/templates.en.md | 2 +- .../content/reference/errors/overview.en.md | 3 +- .../src/content/reference/errors/overview.md | 3 +- adev-ja/src/content/reference/versions.en.md | 8 +- adev-ja/src/content/reference/versions.md | 8 +- 23 files changed, 212 insertions(+), 264 deletions(-) diff --git a/adev-ja/src/content/ai/develop-with-ai.en.md b/adev-ja/src/content/ai/develop-with-ai.en.md index 1b3d476f3..fa7e25216 100644 --- a/adev-ja/src/content/ai/develop-with-ai.en.md +++ b/adev-ja/src/content/ai/develop-with-ai.en.md @@ -39,3 +39,7 @@ The Angular CLI includes an experimental [Model Context Protocol (MCP) server](h * llms-full.txt - a more robust compiled set of resources describing how Angular works and how to build Angular applications. Be sure [to check out the overview page](/ai) for more information on how to integrate AI into your Angular applications. + +## Web Codegen Scorer +The Angular team developed and open-sourced the [Web Codegen Scorer](https://github.com/angular/web-codegen-scorer), a tool to evaluate and score the quality of AI generated web code. You can use this tool to make evidence-based decisions relating to AI-generated code, such as fine-tuning prompts to improve the accuracy of LLM-generated code for Angular. These prompts can be included as system instructions for your AI tooling or as context with your prompt. You can also use this tool to compare the quality of code produced by different models and monitor quality over time as models and agents evolve. + diff --git a/adev-ja/src/content/ai/develop-with-ai.md b/adev-ja/src/content/ai/develop-with-ai.md index 3989623cb..2e04a02e8 100644 --- a/adev-ja/src/content/ai/develop-with-ai.md +++ b/adev-ja/src/content/ai/develop-with-ai.md @@ -39,3 +39,6 @@ Angular CLIには、開発環境のAIアシスタントがAngular CLIと連携 * llms-full.txt - Angularの動作方法とAngularアプリケーションの構築方法を記述した、より堅牢なコンパイル済みリソースセット。 AngularアプリケーションにAIを統合する方法に関する詳細情報については、[概要ページ](/ai)もご確認ください。 + +## Web Codegen Scorer +Angularチームは[Web Codegen Scorer](https://github.com/angular/web-codegen-scorer)を開発し、オープンソース化しました。これは、AI生成ウェブコードの品質を評価・スコア化するためのツールです。このツールを使用して、Angular向けにLLM生成コードの精度を向上させるプロンプトの微調整など、AI生成コードに関するエビデンスベースの意思決定を行うことができます。これらのプロンプトは、AIツールのシステム指示として含めることも、プロンプトとともにコンテキストとして含めることもできます。また、このツールを使用して、異なるモデルが生成するコードの品質を比較したり、モデルやエージェントの進化に伴う品質の経時変化を監視したりすることもできます。 diff --git a/adev-ja/src/content/ai/overview.en.md b/adev-ja/src/content/ai/overview.en.md index ca9109860..33314b886 100644 --- a/adev-ja/src/content/ai/overview.en.md +++ b/adev-ja/src/content/ai/overview.en.md @@ -54,7 +54,7 @@ Here is an example of how to build with Firebase AI Logic and Angular: This example includes an [in-depth video walkthrough explaining the functionality and demonstrates how to add new features](https://youtube.com/live/4vfDz2al_BI). ### Build AI-powered applications with Gemini API and Angular -The [Gemini API](https://ai.google.dev/gemini-api/docs) provides access to state-of-the-art models from Google that supports audio, images, video, and text input. The models that are optimized for specific use cases, [learn more on the Gemini API documentation site](https://ai.google.dev/gemini-api/docs/models). +The [Gemini API](https://ai.google.dev/gemini-api/docs) provides access to state-of-the-art models from Google that support audio, images, video, and text input. These models that are optimized for specific use cases, [learn more on the Gemini API documentation site](https://ai.google.dev/gemini-api/docs/models). * [AI Text Editor Angular app template](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-text-editor) - Use this template to start with a fully functioning text editor with AI-powered features like refining text, expanding text and formalizing text. This is a good starting point to gain experience with calling the Gemini API via HTTP. @@ -64,7 +64,7 @@ The [Gemini API](https://ai.google.dev/gemini-api/docs) provides access to state ### Connecting to model providers and keeping your API Credentials Secure When connecting to model providers, it is important to keep your API secrets safe. *Never put your API key in a file that ships to the client, such as `environments.ts`*. -Your application's architecture determines which AI APIs and tools to choose. Specifically, choose based on whether or not your application is client-side or server-side. Tools such as Firebase AI Logic provide a secure connection to the model APIs for client-side code. If you want to use a different API than Firerbase AI Logic or prefer to use a different model provider, consider creating a proxy-server or even [Cloud Functions for Firebase](https://firebase.google.com/docs/functions) to serve as a proxy and not expose your API keys. +Your application's architecture determines which AI APIs and tools to choose. Specifically, choose based on whether or not your application is client-side or server-side. Tools such as Firebase AI Logic provide a secure connection to the model APIs for client-side code. If you want to use a different API than Firebase AI Logic or prefer to use a different model provider, consider creating a proxy-server or even [Cloud Functions for Firebase](https://firebase.google.com/docs/functions) to serve as a proxy and not expose your API keys. For an example of connecting using a client-side app, see the code: [Firebase AI Logic Angular example repository](https://github.com/angular/examples/tree/main/vertex-ai-firebase-angular-example). @@ -88,7 +88,7 @@ Because models can return non-deterministic results, your applications should be Even considering these strategies and techniques, sensible fallbacks should be incorporated in your application design. Follow existing standards of application resiliency. For example, it is not acceptable for an application to crash if a resource or API is not available. In that scenario, an error message is displayed to the user and, if applicable, options for next steps are also displayed. Building AI-powered applications requires the same consideration. Confirm that the response is aligned with the expected output and provide a "safe landing" in case it is not aligned by way of [graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation). This also applies to API outages for LLM providers. Consider this example: The LLM provider is not responding. A potential strategy to handle the outage is: -* Save the response from the user to used in a retry scenario (now or at a later time) +* Save the response from the user to use in a retry scenario (now or at a later time) * Alert the user to the outage with an appropriate message that doesn't reveal sensitive information * Resume the conversation at a later time once the services are available again. diff --git a/adev-ja/src/content/ai/overview.md b/adev-ja/src/content/ai/overview.md index af8a373da..253a70f75 100644 --- a/adev-ja/src/content/ai/overview.md +++ b/adev-ja/src/content/ai/overview.md @@ -54,7 +54,7 @@ Firebase AI LogicとAngularで構築する方法の例を次に示します。 この例には、[機能の説明と新機能の追加方法を示す詳細なビデオウォークスルー](https://youtube.com/live/4vfDz2al_BI)が含まれています。 ### Gemini APIとAngularでAI搭載アプリケーションを構築する {#build-ai-powered-applications-with-gemini-api-and-angular} -[Gemini API](https://ai.google.dev/gemini-api/docs)は、音声、画像、動画、テキスト入力をサポートするGoogleの最先端モデルへのアクセスを提供します。特定のユースケースに最適化されたモデルについては、[Gemini APIドキュメントサイトで詳細を確認してください](https://ai.google.dev/gemini-api/docs/models)。 +[Gemini API](https://ai.google.dev/gemini-api/docs)は、音声、画像、動画、テキスト入力をサポートするGoogleの最先端モデルへのアクセスを提供します。特定のユースケースに最適化されたこれらのモデルについては、[Gemini APIドキュメントサイトで詳細を確認してください](https://ai.google.dev/gemini-api/docs/models)。 * [AIテキストエディターAngularアプリテンプレート](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-text-editor) - このテンプレートを使用して、テキストの洗練、テキストの拡張、テキストの形式化などのAI搭載機能を備えた完全に機能するテキストエディターから始めましょう。これは、HTTP経由でのGemini API呼び出しの経験を積むのに良い出発点です。 diff --git a/adev-ja/src/content/guide/components/styling.en.md b/adev-ja/src/content/guide/components/styling.en.md index 25ea1bf87..d2bdd219f 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 four view encapsulation modes: `Emulated`, `ShadowDom`, `IsolatedShadowDom`, and `None`. +component's styles. There are three view encapsulation modes: `Emulated`, `ShadowDom`, and `None`. You can specify the mode in the `@Component` decorator: @@ -82,7 +82,9 @@ 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. -Styles inside the shadow tree cannot affect elements outside of that 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. Enabling `ShadowDom` encapsulation, however, impacts more than style scoping. Rendering the component in a shadow tree affects event propagation, interaction @@ -90,12 +92,6 @@ 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 @@ -118,4 +114,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. \ No newline at end of file +emulated view encapsulation. diff --git a/adev-ja/src/content/guide/components/styling.md b/adev-ja/src/content/guide/components/styling.md index a5161ed51..2fec5b07a 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`、`IsolatedShadowDom`、`None`の4つのモードがあります。 +ビューカプセル化モードには、`Emulated`、`ShadowDom`、`None`の3つのモードがあります。 モードは、`@Component`デコレーターで指定できます。 @@ -82,7 +82,7 @@ Angularのエミュレートされたカプセル化モードは、カスタム を使用して、コンポーネント内のスタイルをスコープします。 このモードを有効にすると、Angularはコンポーネントのホスト要素にシャドウルートを添付し、コンポーネントのテンプレートとスタイルを対応するシャドウツリーにレンダリングします。 -シャドウツリー内のスタイルはシャドウツリー外の要素に影響を与えることができません。 +このモードでは、*そのコンポーネントのスタイルのみ*がコンポーネントのテンプレート内の要素に適用されることが厳密に保証されます。グローバルスタイルはシャドウツリー内の要素に影響を与えることができず、シャドウツリー内のスタイルはシャドウツリー外の要素に影響を与えることができません。 ただし、`ShadowDom`カプセル化を有効にすると、スタイルのスコープ以外にも影響があります。 シャドウツリーにコンポーネントをレンダリングすると、イベントの伝播、 @@ -90,10 +90,6 @@ Angularのエミュレートされたカプセル化モードは、カスタム とのやり取り、ブラウザの開発者ツールによる要素の表示方法に影響を与えます。 このオプションを有効にする前に、アプリケーションでShadow DOMを使用することのすべての影響を理解してください。 -### ViewEncapsulation.IsolatedShadowDom - -上記と同様に動作しますが、このモードでは、_コンポーネントのスタイルのみ_がコンポーネントのテンプレート内の要素に適用されることが厳密に保証されます。グローバルスタイルはシャドウツリー内の要素に影響を与えることができず、シャドウツリー内のスタイルはシャドウツリー外の要素に影響を与えることができません。 - ### ViewEncapsulation.None このモードは、コンポーネントのすべてのスタイルカプセル化を無効にします。 @@ -116,4 +112,5 @@ Angularは、スタイル要素内のバインディングをサポートして を使用してCSSファイルを参照できます。さらに、CSSは [ `@import` at-rule](https://developer.mozilla.org/docs/Web/CSS/@import) を使用してCSSファイルを参照できます。 -Angularはこれらの参照を_外部_スタイルとして扱います。外部スタイルは、エミュレートされたビューカプセル化の影響を受けません。 +Angularはこれらの参照を*外部*スタイルとして扱います。外部スタイルは、エミュレートされたビューカプセル化の影響を受けません。 + 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 9068e4051..5cceb0196 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 🦔, to 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 a3b7841f4..2ff53ee49 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,17 +240,17 @@ 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` の次の値を想定します。これは、このサービスと同じです。 export class LeafService { - emoji = '🌿'; + emoji = '🌿'; } -子コンポーネントに、異なる値、カエデの葉 🍁 が含まれていると想像してください。ただし、親の値を使用したいとします。 +子コンポーネントに、異なる値、カエデの葉 🍁 が含まれていると想像してください。ただし、親の値を使用したいとします。 This is when you'd use `skipSelf`: -この場合、 `emoji` に対して取得する値は、カエデの葉 🍁 ではなく、シダ 🌿 になります。 +この場合、 `emoji` に対して取得する値は、カエデの葉 🍁 ではなく、シダ 🌿 になります。 #### `skipSelf` option with `optional` @@ -299,7 +299,7 @@ Use `host` as follows: templateUrl: './host.component.html', styleUrls: ['./host.component.css'], // provide the service - providers: [{ provide: FlowerService, useValue: { emoji: '🌷' } }] + providers: [{ provide: FlowerService, useValue: { emoji: '🌷' } }] }) export class HostComponent { // use host when injecting the service @@ -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 🌷. +`HostComponent`に`host`オプションがあるため、`HostComponent`の親が`flower.emoji`にどのような値を持っていても、`HostComponent`はチューリップ🌷を使用します。 ### Modifiers with constructor injection @@ -383,14 +383,14 @@ The following sections demonstrate `providers` and `viewProviders` along with wa ### アプリケーション構造の例 -この例では、 `emoji` の値が赤いハイビスカス 🌺 である、 `root` に提供される `FlowerService` があります。 +この例では、 `emoji` の値が赤いハイビスカス 🌺 である、 `root` に提供される `FlowerService` があります。 @Injectable({ providedIn: 'root' }) export class FlowerService { - emoji = '🌺'; + emoji = '🌺'; } @@ -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> @@ -491,7 +491,7 @@ Emoji from FlowerService: 🌺 templateUrl: './child.component.html', styleUrls: ['./child.component.css'], // プロバイダー配列を使用してサービスを提供します - providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }] + providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }] }) export class ChildComponent { // サービスを注入します @@ -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'; @@ -560,7 +560,7 @@ import { Injectable } from '@angular/core'; providedIn: 'root' }) export class AnimalService { - emoji = '🐳'; + emoji = '🐳'; } @@ -576,7 +576,7 @@ export class AppComponent { HELPFUL: `FlowerService` に関連するコードはすべてそのままにしておくことができます。これにより、 `AnimalService` との比較が可能になります。 `viewProviders` 配列を追加し、 `` クラスにも `AnimalService` を注入しますが、 `emoji` に異なる値を与えます。 -ここでは、犬 🐶 の値があります。 +ここでは、犬 🐶 の値があります。 @@ -585,8 +585,8 @@ HELPFUL: `FlowerService` に関連するコードはすべてそのままにし templateUrl: './child.component.html', styleUrls: ['./child.component.css'], // サービスを提供します - providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }], - viewProviders: [{ provide: AnimalService, useValue: { emoji: '🐶' } }] + providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }], + viewProviders: [{ provide: AnimalService, useValue: { emoji: '🐶' } }] }) export class ChildComponent { // サービスを注入します @@ -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,18 +799,18 @@ 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. +``がひまわり🌻を提供しているにもかかわらず、アプリケーションは赤いハイビスカス🌺をレンダリングします。これは、`skipSelf`が現在のインジェクター（`app-child`）に自身をスキップして親を探すよう指示するためです。 -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>`. +今度、（`skipSelf`に加えて）`host`を追加すると、結果は`null`になります。 +これは、`host`が検索の上限を`app-child`の`<#VIEW>`に制限するためです。 論理ツリーでの考え方は次のとおりです。 "🌺"> + @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,20 +857,20 @@ 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 🐳. +``で`skipSelf`を使用すると、インジェクターは``の`ElementInjector`で`AnimalService`の検索を開始し、クジラ🐳を見つけます。 ### `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. -The `ChildComponent` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value. -You can also see `host` the `inject()`: +`AnimalService`のインジェクションに`host`だけを使用する場合、インジェクターは``の`<#VIEW>`自体で`AnimalService`を見つけるため、結果は犬🐶になります。 +`ChildComponent`は`viewProviders`を設定し、犬の絵文字が`AnimalService`の値として提供されます。 +`inject()`で`host`を使用することもできます： @Component({ 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 d4d78494e..86ef23c7a 100644 --- a/adev-ja/src/content/guide/http/interceptors.en.md +++ b/adev-ja/src/content/guide/http/interceptors.en.md @@ -197,43 +197,6 @@ 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 29fad441e..06d793c77 100644 --- a/adev-ja/src/content/guide/http/interceptors.md +++ b/adev-ja/src/content/guide/http/interceptors.md @@ -197,43 +197,6 @@ 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/templates/binding.en.md b/adev-ja/src/content/guide/templates/binding.en.md index d438b1aab..cd7eb304b 100644 --- a/adev-ja/src/content/guide/templates/binding.en.md +++ b/adev-ja/src/content/guide/templates/binding.en.md @@ -151,7 +151,7 @@ You can also bind directly to the `class` property. Angular accepts three types export class UserProfile { listClasses = 'full-width outlined'; sectionClasses = signal(['expandable', 'elevated']); - buttonClasses = ({ + buttonClasses = signal({ highlighted: true, embiggened: false, }); diff --git a/adev-ja/src/content/guide/templates/binding.md b/adev-ja/src/content/guide/templates/binding.md index 6e375d8a8..510dc6d2c 100644 --- a/adev-ja/src/content/guide/templates/binding.md +++ b/adev-ja/src/content/guide/templates/binding.md @@ -151,7 +151,7 @@ CSSクラスバインディングを作成して、バインドされた値が[ export class UserProfile { listClasses = 'full-width outlined'; sectionClasses = signal(['expandable', 'elevated']); - buttonClasses = ({ + buttonClasses = signal({ highlighted: true, embiggened: false, }); diff --git a/adev-ja/src/content/guide/templates/defer.en.md b/adev-ja/src/content/guide/templates/defer.en.md index 994ea32da..badcf7670 100644 --- a/adev-ja/src/content/guide/templates/defer.en.md +++ b/adev-ja/src/content/guide/templates/defer.en.md @@ -321,6 +321,10 @@ it('should render a defer block in different states', async () => { `@defer` blocks are compatible with both standalone and NgModule-based components, directives and pipes. However, **only standalone components, directives and pipes can be deferred**. NgModule-based dependencies are not deferred and are included in the eagerly loaded bundle. +## Compatibility between `@defer` blocks and Hot Module Reload (HMR) + +When Hot Module Replacement (HMR) is active, all `@defer` block chunks are fetched eagerly, overriding any configured triggers. To restore the standard trigger behavior, you must disable HMR by serving your application with the `--no-hmr` flag. + ## How does `@defer` work with server-side rendering (SSR) and static-site generation (SSG)? By default, when rendering an application on the server (either using SSR or SSG), defer blocks always render their `@placeholder` (or nothing if a placeholder is not specified) and triggers are not invoked. On the client, the content of the `@placeholder` is hydrated and triggers are activated. diff --git a/adev-ja/src/content/guide/templates/defer.md b/adev-ja/src/content/guide/templates/defer.md index 3320bfd4e..d458baa64 100644 --- a/adev-ja/src/content/guide/templates/defer.md +++ b/adev-ja/src/content/guide/templates/defer.md @@ -319,7 +319,11 @@ it('さまざまな状態で`@defer`ブロックをレンダリングする', as ## `@defer`は`NgModule`と連携しますか？ -`@defer`ブロックは、スタンドアロンコンポーネントと`NgModule`ベースのコンポーネント、ディレクティブ、パイプの両方と互換性があります。ただし、**スタンドアロンコンポーネント、ディレクティブ、パイプのみを遅延させることができます。**`NgModule`ベースの依存関係は遅延されず、先に読み込まれたバンドルに含まれます。 +`@defer`ブロックは、スタンドアロンコンポーネントと`NgModule`ベースのコンポーネント、ディレクティブ、パイプの両方と互換性があります。ただし、**スタンドアロンコンポーネント、ディレクティブ、パイプのみを遅延させることができます。**`NgModule`ベースの依存関係は遅延されず、即座に読み込まれたバンドルに含まれます。 + +## `@defer`ブロックとホットモジュールリロード(HMR)との互換性 + +ホットモジュール置換(HMR)がアクティブな場合、すべての`@defer`ブロックチャンクが即座にフェッチされ、設定されたトリガーを上書きします。標準的なトリガー動作を復元するには、`--no-hmr`フラグを使用してアプリケーションを提供し、HMRを無効にする必要があります。 ## `@defer`は、サーバーサイドレンダリング(SSR)と静的サイト生成(SSG)とどのように連携しますか？ diff --git a/adev-ja/src/content/guide/templates/expression-syntax.en.md b/adev-ja/src/content/guide/templates/expression-syntax.en.md index 15f008449..edf9154b3 100644 --- a/adev-ja/src/content/guide/templates/expression-syntax.en.md +++ b/adev-ja/src/content/guide/templates/expression-syntax.en.md @@ -24,6 +24,12 @@ Angular supports a subset of [literal values](https://developer.mozilla.org/en-U | ------------ | ------------- | | RegExp | `/\d+/` | +### Unsupported value literals + +| Literal type | Example values | +|--------------|----------------| +| BigInt | `1n` | + ## Globals Angular expressions support the following [globals](https://developer.mozilla.org/en-US/docs/Glossary/Global_object): diff --git a/adev-ja/src/content/guide/templates/expression-syntax.md b/adev-ja/src/content/guide/templates/expression-syntax.md index b6ac9167a..a7c1266e0 100644 --- a/adev-ja/src/content/guide/templates/expression-syntax.md +++ b/adev-ja/src/content/guide/templates/expression-syntax.md @@ -24,6 +24,12 @@ Angularは、[リテラル値](https://developer.mozilla.org/en-US/docs/Glossary | ------------ | ------------- | | RegExp | `/\d+/` | +### サポートされていない値リテラル + +| Literal type | Example values | +|--------------|----------------| +| BigInt | `1n` | + ## グローバル Angular式は、次の[グローバル](https://developer.mozilla.org/en-US/docs/Glossary/Global_object)をサポートしています。 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 4750a0bb4..7efc281b4 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 9eba7748b..89abc33c5 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/templates.en.md b/adev-ja/src/content/introduction/essentials/templates.en.md index 238d0f37c..2fba37611 100644 --- a/adev-ja/src/content/introduction/essentials/templates.en.md +++ b/adev-ja/src/content/introduction/essentials/templates.en.md @@ -61,7 +61,7 @@ You can also bind to HTML _attributes_ by prefixing the attribute name with `att