Skip to content

fix: Update origin 20.0.6 #1043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jul 6, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions adev-ja/src/app/features/update/recommendations.en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2592,6 +2592,28 @@ export const RECOMMENDATIONS: Step[] = [
action:
'Adjust code that directly calls functions returning `RedirectFn`. These functions can now also return an `Observable` or `Promise`; ensure your logic correctly handles these asynchronous return types.',
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
level: ApplicationComplexity.Basic,
step: '20.0.0_rename_resource_request_to_param',
action: 'Rename the `request` property passed in resources to `params`.',
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
level: ApplicationComplexity.Medium,
step: '20.0.0_rename_rxResource_loader_to_stream',
action: 'Rename the `loader` property passed in rxResources to `stream`.',
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
level: ApplicationComplexity.Basic,
step: '20.0.0_replace_ResourceStatus_by_corresponding_strings',
action:
'`ResourceStatus` is no longer an enum. Use the corresponding constant string values instead.',
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
Expand Down Expand Up @@ -2712,4 +2734,12 @@ export const RECOMMENDATIONS: Step[] = [
action:
'Review `DatePipe` usages. Using the `Y` (week-numbering year) formatter without also including `w` (week number) is now detected as suspicious. Use `y` (year) if that was the intent, or include `w` alongside `Y`.',
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
level: ApplicationComplexity.Medium,
step: '20.0.0_handle_uncaught_listener_errors_in_tests',
action:
'In templates parentheses are now always respected. This can lead to runtime breakages when nullish coalescing were nested in parathesis. eg `(foo?.bar).baz` will throw if `foo` is nullish as it would in native JavaScript.',
},
];
30 changes: 30 additions & 0 deletions adev-ja/src/app/features/update/recommendations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2592,6 +2592,28 @@ export const RECOMMENDATIONS: Step[] = [
action:
'`RedirectFn`を返す関数を直接呼び出すコードを調整してください。これらの関数は`Observable`または`Promise`も返すことができるようになりました。ロジックがこれらの非同期戻り値を正しく処理することを確認してください。',
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
level: ApplicationComplexity.Basic,
step: '20.0.0_rename_resource_request_to_param',
action: 'リソースで渡される`request`プロパティを`params`にリネームしてください。',
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
level: ApplicationComplexity.Medium,
step: '20.0.0_rename_rxResource_loader_to_stream',
action: 'rxResourcesで渡される`loader`プロパティを`stream`にリネームしてください。',
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
level: ApplicationComplexity.Basic,
step: '20.0.0_replace_ResourceStatus_by_corresponding_strings',
action:
'`ResourceStatus`はもはやenumではありません。代わりに対応する定数文字列値を使用してください。',
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
Expand Down Expand Up @@ -2712,4 +2734,12 @@ export const RECOMMENDATIONS: Step[] = [
action:
'`DatePipe`の使用を見直してください。`Y`(週番号付け年)フォーマッターを`w`(週番号)を含めずに使用すると、疑わしいと検出されるようになりました。意図がそうであった場合は`y`(年)を使用するか、`Y`と一緒に`w`を含めてください。',
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
level: ApplicationComplexity.Medium,
step: '20.0.0_handle_uncaught_listener_errors_in_tests',
action:
'テンプレートでは括弧が常に尊重されるようになりました。これは、null合体演算子が括弧内にネストされている場合にランタイムエラーを引き起こす可能性があります。例:`(foo?.bar).baz`は、`foo`がnullishの場合、ネイティブJavaScriptと同様にエラーを投げます。',
},
];
30 changes: 30 additions & 0 deletions adev-ja/src/app/sub-navigation-data.en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -351,6 +351,16 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'guide/routing/read-route-state',
contentPath: 'guide/routing/read-route-state',
},
{
label: 'Redirecting routes',
path: 'guide/routing/redirecting-routes',
contentPath: 'guide/routing/redirecting-routes',
},
{
label: 'Control route access with guards',
path: 'guide/routing/route-guards',
contentPath: 'guide/routing/route-guards',
},
{
label: 'Other routing tasks',
path: 'guide/routing/common-router-tasks',
Expand Down Expand Up @@ -421,6 +431,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'guide/http/making-requests',
contentPath: 'guide/http/making-requests',
},
{
label: 'Reactive data fetching with httpResource',
path: 'guide/http/http-resource',
contentPath: 'guide/http/http-resource',
},
{
label: 'Intercepting requests and responses',
path: 'guide/http/interceptors',
Expand Down Expand Up @@ -623,6 +638,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'ai',
contentPath: 'ai/overview',
},
{
label: 'LLM prompts and AI IDE setup',
path: 'ai/develop-with-ai',
contentPath: 'ai/develop-with-ai',
},
],
},
{
Expand Down Expand Up @@ -763,6 +783,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'best-practices/a11y',
contentPath: 'best-practices/a11y',
},
{
label: 'Unhandled errors in Angular',
path: 'best-practices/error-handling',
contentPath: 'best-practices/error-handling',
},
{
label: 'Performance',
children: [
Expand All @@ -786,6 +811,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'best-practices/skipping-subtrees',
contentPath: 'best-practices/runtime-performance/skipping-subtrees',
},
{
label: 'Profiling with the Chrome DevTools',
path: 'best-practices/profiling-with-chrome-devtools',
contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools',
},
{label: 'Zoneless', path: 'guide/zoneless', contentPath: 'guide/zoneless'},
],
},
Expand Down
30 changes: 30 additions & 0 deletions adev-ja/src/app/sub-navigation-data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -351,6 +351,16 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'guide/routing/read-route-state',
contentPath: 'guide/routing/read-route-state',
},
{
label: 'ルートのリダイレクト',
path: 'guide/routing/redirecting-routes',
contentPath: 'guide/routing/redirecting-routes',
},
{
label: 'ガードによるルートアクセスの制御',
path: 'guide/routing/route-guards',
contentPath: 'guide/routing/route-guards',
},
{
label: 'その他のルーティングタスク',
path: 'guide/routing/common-router-tasks',
Expand Down Expand Up @@ -421,6 +431,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'guide/http/making-requests',
contentPath: 'guide/http/making-requests',
},
{
label: 'httpResourceを使ったリアクティブなデータ取得',
path: 'guide/http/http-resource',
contentPath: 'guide/http/http-resource',
},
{
label: 'リクエストとレスポンスへの介入',
path: 'guide/http/interceptors',
Expand Down Expand Up @@ -623,6 +638,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'ai',
contentPath: 'ai/overview',
},
{
label: 'LLMプロンプトとAI IDEセットアップ',
path: 'ai/develop-with-ai',
contentPath: 'ai/develop-with-ai',
},
],
},
{
Expand Down Expand Up @@ -763,6 +783,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'best-practices/a11y',
contentPath: 'best-practices/a11y',
},
{
label: 'Angularでの未処理のエラー',
path: 'best-practices/error-handling',
contentPath: 'best-practices/error-handling',
},
{
label: 'パフォーマンス',
children: [
Expand All @@ -786,6 +811,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'best-practices/skipping-subtrees',
contentPath: 'best-practices/runtime-performance/skipping-subtrees',
},
{
label: 'Chrome DevToolsでのプロファイリング',
path: 'best-practices/profiling-with-chrome-devtools',
contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools',
},
{label: 'Zoneless', path: 'guide/zoneless', contentPath: 'guide/zoneless'},
],
},
Expand Down
36 changes: 36 additions & 0 deletions adev-ja/src/content/ai/develop-with-ai.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# LLM prompts and AI IDE setup
Generating code with large language models (LLMs) is a rapidly growing area of interest for developers. While LLMs are often capable of generating working code it can be a challenge to generate code for consistently evolving frameworks like Angular.

Advanced instructions and prompting are an emerging standard for supporting modern code generation with domain specific details. This section contains curated content and resources to support more accurate code generation for Angular and LLMs.

## Custom Prompts and System Instructions
Improve your experience generating code with LLMs by using one of the following custom, domain specific files.

NOTE: These files will be updated on a regular basis staying up to date with Angular's conventions.

Here is a set of instructions to help LLMs generate correct code that follows Angular best practices. This file can be included as system instructions to your AI tooling or included along with your prompt as context.

<docs-code language="md" path="adev/src/context/best-practices.md" class="compact"/>

<a download href="/assets/context/best-practices.md" target="_blank">Click here to download the best-practices.md file.</a>

## Rules Files
Several editors, such as <a href="https://studio.firebase.google.com?utm_source=adev&utm_medium=website&utm_campaign=BUILD_WITH_AI_ANGULAR&utm_term=angular_devrel&utm_content=build_with_ai_angular_firebase_studio">Firebase Studio</a> have rules files useful for providing critical context to LLMs.

| Environment/IDE | Rules File | Installation Instructions |
|:----------------|:----------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------|
| Firebase Studio | <a download href="/assets/context/airules.md" target="_blank">airules.md</a> | <a href="https://firebase.google.com/docs/studio/set-up-gemini#custom-instructions">Configure `airules.md`</a> |
| Copilot powered IDEs | <a download="copilot-instructions.md" href="/assets/context/guidelines.md" target="_blank">copilot-instructions.md</a> | <a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions" target="_blank">Configure `.github/copilot-instructions.md`</a> |
| Cursor | <a download href="/assets/context/angular-20.mdc" target="_blank">cursor.md</a> | <a href="https://docs.cursor.com/context/rules" target="_blank">Configure `cursorrules.md`</a> |
| JetBrains IDEs | <a download href="/assets/context/guidelines.md" target="_blank">guidelines.md</a> | <a href="https://www.jetbrains.com/help/junie/customize-guidelines.html" target="_blank">Configure `guidelines.md`</a> |
| VS Code | <a download=".instructions.md" href="/assets/context/guidelines.md" target="_blank">.instructions.md</a> | <a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions" target="_blank">Configure `.instructions.md`</a> |
| Windsurf | <a download href="/assets/context/guidelines.md" target="_blank">guidelines.md</a> | <a href="https://docs.windsurf.com/windsurf/cascade/memories#rules" target="_blank">Configure `guidelines.md`</a> |

## Providing Context with `llms.txt`
`llms.txt` is a proposed standard for websites designed to help LLMs better understand and process their content. The Angular team has developed two versions of this file to help LLMs and tools that use LLMs for code generation to create better modern Angular code.


* <a href="/llms.txt" target="_blank">llms.txt</a> - an index file providing links to key files and resources.
* <a href="/llms-full.txt" target="_blank">llms-full.txt</a> - 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.
10 changes: 6 additions & 4 deletions adev-ja/src/content/ai/overview.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
Build AI-powered apps. Develop faster with AI.
</docs-decorative-header>

HELPFUL: Looking to get started with building in your favorite AI powered IDE? <br>Check out our [prompt rules and best practices](/ai/develop-with-ai).

Generative AI (GenAI) with large language models (LLMs) enables the creation of sophisticated and engaging application experiences, including personalized content, intelligent recommendations, media generation and comprehension, information summarization, and dynamic functionality.

Developing features like these would have previously required deep domain expertise and significant engineering effort. However, new products and SDKs are lowering the barrier to entry. Angular is well-suited for integrating AI into your web application as a result of:
Expand All @@ -11,7 +13,7 @@ Developing features like these would have previously required deep domain expert
* Strong, signal-based architecture designed to dynamically manage data and state
* Angular integrates seamlessly with AI SDKs and APIs

This guide demonstrates how you can use [Genkit](/ai#build-ai-powered-applications-with-genkit-and-angular), [Firebase AI Logic](https://firebase.google.com/products/firebase-ai-logic), and the [Gemini API](https://ai.google.dev/) to infuse your Angular apps with AI today. This guide will jumpstart your AI-powered web app development journey by explaining how to begin integrating AI into Angular apps. This guide also shares resources, such as starter kits, example code, and recipes for common workflows, you can use to get up to speed quickly.
This guide demonstrates how you can use [Genkit](/ai#build-ai-powered-applications-with-genkit-and-angular), [Firebase AI Logic](/ai#build-ai-powered-applications-with-firebase-ai-logic-and-angular), and the [Gemini API](/ai#build-ai-powered-applications-with-gemini-api-and-angular) to infuse your Angular apps with AI today. This guide will jumpstart your AI-powered web app development journey by explaining how to begin integrating AI into Angular apps. This guide also shares resources, such as starter kits, example code, and recipes for common workflows, you can use to get up to speed quickly.

To get started, you should have a basic understanding of Angular. New to Angular? Try our [essentials guide](/essentials) or our [getting started tutorials](/tutorials).

Expand All @@ -20,20 +22,20 @@ NOTE: While this page features integrations and examples with Google AI products
## Getting Started
Building AI-powered applications is a new and rapidly developing field. It can be challenging to decide where to start and which technologies to choose. The following section provides three options to choose from:

1. *Genkit* gives you the choice of [supported model and interface with a unified API](https://firebase.google.com/docs/genkit) for building full-stack applications. Ideal for applications requiring sophisticated back-end AI logic, such as personalized recommendations.
1. *Genkit* gives you the choice of [supported model and interface with a unified API](https://genkit.dev) for building full-stack applications. Ideal for applications requiring sophisticated back-end AI logic, such as personalized recommendations.

1. *Firebase AI Logic* provides a secure client-side API for Google's models to build client-side only applications or mobile apps. Best for interactive AI features directly in the browser, such as real-time text analysis or basic chatbots.

1. *Gemini API* enables you to build an application that uses the methods and functionality exposed through the API surface directly, best for full-stack applications. Suitable for applications needing direct control over AI models, like custom image generation or deep data processing.

### Build AI-powered applications with Genkit and Angular
[Genkit](https://firebase.google.com/docs/genkit) is an open-source toolkit designed to help you build AI-powered features in web and mobile apps. It offers a unified interface for integrating AI models from Google, OpenAI, Anthropic, Ollama, and more, so you can explore and choose the best models for your needs. As a server-side solution, your web apps need a supported server environment, such as a node-based server in order to integrate with Genkit. Building a full-stack app using Angular SSR gives you the starting server-side code, for example.
[Genkit](https://genkit.dev) is an open-source toolkit designed to help you build AI-powered features in web and mobile apps. It offers a unified interface for integrating AI models from Google, OpenAI, Anthropic, Ollama, and more, so you can explore and choose the best models for your needs. As a server-side solution, your web apps need a supported server environment, such as a node-based server in order to integrate with Genkit. Building a full-stack app using Angular SSR gives you the starting server-side code, for example.

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://firebase.google.com/docs/genkit/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.0 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.

Expand Down
Loading