From c31ecab999c1f63c7d8cb09c598f0fdfffbe16a7 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 20 Aug 2025 22:25:26 +0900 Subject: [PATCH 01/13] fix: update origin --- origin | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/origin b/origin index d53649c8fb..9e172e0280 160000 --- a/origin +++ b/origin @@ -1 +1 @@ -Subproject commit d53649c8fb7f9c148af6a78cb8c3e6cbbdc57459 +Subproject commit 9e172e0280549caf59d5b2025b2f09b7bae3477a From 7b7ed6923c706cde8bd1a780148bc6b51203d63d Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 20 Aug 2025 22:25:52 +0900 Subject: [PATCH 02/13] fix: migrate new files --- adev-ja/src/content/ai/mcp-server-setup.md | 10 +- .../rxjs-interop/take-until-destroyed.md | 46 +++ .../guide/animations/enter-and-leave.md | 88 +++++ .../content/guide/routing/data-resolvers.md | 8 +- .../guide/routing/rendering-strategies.md | 139 +++++++ .../routing/route-transition-animations.md | 213 +++++++++++ adev-ja/src/content/guide/routing/testing.md | 341 ++++++++++++++++++ adev-ja/src/content/guide/tailwind.md | 69 ++++ .../reference/extended-diagnostics/NG8117.md | 65 ++++ 9 files changed, 969 insertions(+), 10 deletions(-) create mode 100644 adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md create mode 100644 adev-ja/src/content/guide/animations/enter-and-leave.md create mode 100644 adev-ja/src/content/guide/routing/rendering-strategies.md create mode 100644 adev-ja/src/content/guide/routing/route-transition-animations.md create mode 100644 adev-ja/src/content/guide/routing/testing.md create mode 100644 adev-ja/src/content/guide/tailwind.md create mode 100644 adev-ja/src/content/reference/extended-diagnostics/NG8117.md diff --git a/adev-ja/src/content/ai/mcp-server-setup.md b/adev-ja/src/content/ai/mcp-server-setup.md index 0b285b7453..a19a3d1093 100644 --- a/adev-ja/src/content/ai/mcp-server-setup.md +++ b/adev-ja/src/content/ai/mcp-server-setup.md @@ -1,4 +1,5 @@ # Angular CLI MCPサーバーセットアップ + Angular CLIには、開発環境のAIアシスタントがAngular CLIと対話できるようにする実験的な[Model Context Protocol (MCP) サーバー](https://modelcontextprotocol.io/)が含まれています。CLIによるコード生成、パッケージの追加などに対応しています。 開始するには、ターミナルで次のコマンドを実行します。 @@ -17,7 +18,7 @@ ng mcp "servers": { "angular-cli": { "command": "npx", - "args": ["@angular/cli", "mcp"] + "args": ["-y", "@angular/cli", "mcp"] } } } @@ -31,6 +32,7 @@ JetBrains IDEs（IntelliJ IDEAやWebStormなど）では、MCP Serverプラグ "name": "Angular CLI", "command": "npx", "args": [ + "-y", "@angular/cli", "mcp" ] @@ -44,7 +46,7 @@ JetBrains IDEs（IntelliJ IDEAやWebStormなど）では、MCP Serverプラグ "mcpServers": { "angular-cli": { "command": "npx", - "args": ["@angular/cli", "mcp"] + "args": ["-y", "@angular/cli", "mcp"] } } } @@ -60,8 +62,8 @@ JetBrains IDEs（IntelliJ IDEAやWebStormなど）では、MCP Serverプラグ "mcpServers": { "angular-cli": { "command": "npx", - "args": ["@angular/cli", "mcp"] + "args": ["-y", "@angular/cli", "mcp"] } } } -``` +``` \ No newline at end of file diff --git a/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md b/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md new file mode 100644 index 0000000000..17dc37a821 --- /dev/null +++ b/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md @@ -0,0 +1,46 @@ +# Unsubscribing with `takeUntilDestroyed` + +TIP: This guide assumes you're familiar with [component and directive lifecycle](guide/components/lifecycle). + +The `takeUntilDestroyed` operator, from `@angular/core/rxjs-interop`, provides a concise and reliable way to automatically unsubscribe from an Observable when a component or directive is destroyed. This prevents common memory leaks with RxJS subscriptions. It works similarly to the RxJS [`takeUntil`](https://rxjs.dev/api/operators/takeUntil) operator but without the need for a separate Subject. + +```typescript +import {Component, inject} from '@angular/core'; +import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; +import {NotificationDispatcher, CustomPopupShower} from './some-shared-project-code'; + +@Component(/* ... */) +export class UserProfile { + private dispatcher = inject(NotificationDispatcher); + private popup = inject(CustomPopupShower); + + constructor() { + // This subscription the 'notifications' Observable is automatically + // unsubscribed when the 'UserProfile' component is destroyed. + const messages: Observable = this.dispatcher.notifications; + messages.pipe(takeUntilDestroyed()).subscribe(message => { + this.popup.show(message); + }); + } +} +``` + +The `takeUntilDestroyed` operator accepts a single optional [`DestroyRef`](https://angular.dev/api/core/DestroyRef) argument. The operator uses `DestroyRef` to know when the component or directive has been destroyed. You can omit this argument when calling `takeUntilDestroyed` in an [injection context](https://angular.dev/guide/di/dependency-injection-context), typically the constructor of a component or directive. Always provide a `DestroyRef` if your code may call `takeUntilDestroyed` outside of an injection context. + +```typescript +@Component(/* ... */) +export class UserProfile { + private dispatcher = inject(NotificationDispatcher); + private popup = inject(CustomPopupShower); + private destroyRef = inject(DestroyRef); + + startListeningToNotifications() { + // Always pass a `DestroyRef` if you call `takeUntilDestroyed` outside + // of an injection context. + const messages: Observable = this.dispatcher.notifications; + messages.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(message => { + this.popup.show(message); + }); + } +} +``` diff --git a/adev-ja/src/content/guide/animations/enter-and-leave.md b/adev-ja/src/content/guide/animations/enter-and-leave.md new file mode 100644 index 0000000000..61ec5a158e --- /dev/null +++ b/adev-ja/src/content/guide/animations/enter-and-leave.md @@ -0,0 +1,88 @@ +# Animating your applications with `animate.enter` and `animate.leave` + +Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. +Animations can improve your application and user experience in a number of ways: + +* Without animations, web page transitions can seem abrupt and jarring +* Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions +* Good animations can smoothly direct the user's attention throughout a workflow + +Angular provides `animate.enter` and `animate.leave` to animate your application's elements. These two features apply enter and leave CSS classes at the appropriate times or call functions to apply animations from third party libraries. `animate.enter` and `animate.leave` are not directives. They are special API supported directly by the Angular compiler. They can be used on elements directly and can also be used as a host binding. + +## `animate.enter` + +You can use `animate.enter` to animate elements as they _enter_ the DOM. You can define enter animations using CSS classes with either transforms or keyframe animations. + + + + + + + +When the animation completes, Angular removes the class or classes that you specified in `animate.enter` from the DOM. Animation classes are only be present while the animation is active. + +NOTE: When using multiple keyframe animations or transition properties on an element, Angular removes all classes only _after_ the longest animation has completed. + +You can use `animate.enter` with any other Angular features, such as control flow or dynamic expressions. `animate.enter` accepts both a single class string (with multiple classes separated by spaces), or an array of class strings. + + + + + + + +## `animate.leave` + +You can use `animate.leave` to animate elements as they _leave_ the DOM. You can define leave animations using CSS classes with either transforms or keyframe animations. + + + + + + + +When the animation completes, Angular automatically removes the animated element from the DOM. + +NOTE: When using multiple keyframe animations or transition properties on a an element, Angular waits to remove the element only _after_ the longest of those animations has completed. + +`animate.leave` can also be used with signals, and other bindings. You can use `animate.leave` with a single class or multiple classes. Either specify it as a simple string with spaces or a string array. + + + + + + + +## Event Bindings, Functions, and Third-party Libraries + +Both `animate.enter` and `animate.leave` support event binding syntax that allows for function calls. You can use this syntax to call a function in your component code or utilize third-party animation libraries, like [GSAP](https://gsap.com/), [anime.js](https://animejs.com/), or any other JavaScript animation library. + + + + + + + +The `$event` object has the type `AnimationCallbackEvent`. It includes the element as the `target` and provides an `animationComplete()` function to notify the framework when the animation finishes. + +IMPORTANT: You **must** call the `animationComplete()` function when using `animate.leave` for Angular to remove the element. + +If you don't call `animationComplete()` when using `animate.leave`, Angular calls the function automatically after a four-second delay. You can configure the duration of the delay by providing the token `MAX_ANIMATION_TIMEOUT` in milliseconds. + +```typescript + { provide: MAX_ANIMATION_TIMEOUT, useValue: 6000 } +``` + +## Testing + +TestBed provides built-in support for enabling or disabling animations in your test environment. CSS animations require a browser to run, and many of the APIs are not available in a test environment. By default, TestBed disables animations for you in your test environments. + +If you want to test that the animations are animating in a browser test, for example an end-to-end test, you can configure TestBed to enable animations by specifying `animationsEnabled: true` in your test configuration. + +```typescript + TestBed.configureTestingModule({animationsEnabled: true}); +``` + +This will configure animations in your test environment to behave normally. + +NOTE: Some test environments do not emit animation events like `animationstart`, `animationend` and their transition event equivalents. diff --git a/adev-ja/src/content/guide/routing/data-resolvers.md b/adev-ja/src/content/guide/routing/data-resolvers.md index f65142c4d3..a9614a4c78 100644 --- a/adev-ja/src/content/guide/routing/data-resolvers.md +++ b/adev-ja/src/content/guide/routing/data-resolvers.md @@ -266,10 +266,8 @@ While data resolvers prevent loading states within components, they introduce a To improve user experience during resolver execution, you can listen to router events and show loading indicators: ```angular-ts -import { Component, inject } from '@angular/core'; +import { Component, inject, computed } from '@angular/core'; import { Router } from '@angular/router'; -import { toSignal } from '@angular/core/rxjs-interop'; -import { map } from 'rxjs'; @Component({ selector: 'app-root', @@ -282,9 +280,7 @@ import { map } from 'rxjs'; }) export class App { private router = inject(Router); - isNavigating = toSignal(this.router.events.pipe( - map(() => !!this.router.getCurrentNavigation()) - )); + isNavigating = computed(() => !!this.router.currentNavigation()); } ``` diff --git a/adev-ja/src/content/guide/routing/rendering-strategies.md b/adev-ja/src/content/guide/routing/rendering-strategies.md new file mode 100644 index 0000000000..621968d05a --- /dev/null +++ b/adev-ja/src/content/guide/routing/rendering-strategies.md @@ -0,0 +1,139 @@ +# Rendering strategies in Angular + +This guide helps you choose the right rendering strategy for different parts of your Angular application. + +## What are rendering strategies? + +Rendering strategies determine when and where your Angular application's HTML content is generated. Each strategy offers different trade-offs between initial page load performance, interactivity, SEO capabilities, and server resource usage. + +Angular supports three primary rendering strategies: + +- **Client-Side Rendering (CSR)** - Content is rendered entirely in the browser +- **Static Site Generation (SSG/Prerendering)** - Content is pre-rendered at build time +- **Server-Side Rendering (SSR)** - Content is rendered on the server for the initial request for a route + +## Client-Side Rendering (CSR) + +**CSR is Angular's default.** Content renders entirely in the browser after JavaScript loads. + +### When to use CSR + +✅ It can be a good fit for: + +- Interactive applications (dashboards, admin panels) +- Real-time applications +- Internal tools where SEO doesn't matter +- Single-page applications with complex client-side state + +❌ When possible, consider avoiding it for: + +- Public-facing content that needs SEO +- Pages where initial load performance is critical + +### CSR trade-offs + +| Aspect | Impact | +| :---------------- | :------------------------------------------------------- | +| **SEO** | Poor - content not visible to crawlers until JS executes | +| **Initial load** | Slower - must download and execute JavaScript first | +| **Interactivity** | Immediate once loaded | +| **Server needs** | Minimal outside of some configuration | +| **Complexity** | Simplest because it works with minimum configuration | + +## Static Site Generation (SSG/Prerendering) + +**SSG pre-renders pages at build time** into static HTML files. The server sends pre-built HTML for the initial page load. After hydration, your app runs entirely in the browser like a traditional SPA - subsequent navigation, route changes, and API calls all happen client-side without server rendering. + +### When to use SSG + +✅ It can be a good fit for: + +- Marketing pages and landing pages +- Blog posts and documentation +- Product catalogs with stable content +- Content that doesn't change per-user + +❌ When possible, consider avoiding it for: + +- User-specific content +- Frequently changing data +- Real-time information + +### SSG trade-offs + +| Aspect | Impact | +| :------------------ | :------------------------------------------ | +| **SEO** | Excellent - full HTML available immediately | +| **Initial load** | Fastest - pre-generated HTML | +| **Interactivity** | After hydration completes | +| **Server needs** | None for serving (CDN-friendly) | +| **Build time** | Longer - generates all pages upfront | +| **Content updates** | Requires rebuild and redeploy | + +📖 **Implementation:** See [Customizing build-time prerendering](guide/ssr#customizing-build-time-prerendering-ssg) in the SSR guide. + +## Server-Side Rendering (SSR) + +**SSR generates HTML on the server for the initial request for a route**, providing dynamic content with good SEO. The server renders HTML and sends it to the client. + +Once the client renders the page, Angular [hydrates](/guide/hydration#what-is-hydration) the app and it then runs entirely in the browser like a traditional SPA - subsequent navigation, route changes, and API calls all happen client-side without additional server rendering. + +### When to use SSR + +✅ It can be a good fit for: + +- E-commerce product pages (dynamic pricing/inventory) +- News sites and social media feeds +- Personalized content that changes frequently + +❌ When possible, consider avoiding it for: + +- Static content (use SSG instead) +- When server costs are a concern + +### SSR trade-offs + +| Aspect | Impact | +| :------------------ | :-------------------------------------------------- | +| **SEO** | Excellent - full HTML for crawlers | +| **Initial load** | Fast - immediate content visibility | +| **Interactivity** | Delayed until hydration | +| **Server needs** | Requires server | +| **Personalization** | Full access to user context | +| **Server costs** | Higher - renders on the initial request for a route | + +📖 **Implementation:** See [Server routing](guide/ssr#server-routing) and [Authoring server-compatible components](guide/ssr#authoring-server-compatible-components) in the SSR guide. + +## Choosing the Right Strategy + +### Decision matrix + +| If you need... | Use this strategy | Why | +| :------------------------- | :---------------- | :----------------------------------------------- | +| **SEO + Static content** | SSG | Pre-rendered HTML, fastest load | +| **SEO + Dynamic content** | SSR | Fresh content on the initial request for a route | +| **No SEO + Interactivity** | CSR | Simplest, no server needed | +| **Mixed requirements** | Hybrid | Different strategies per route | + +## Making SSR/SSG Interactive with Hydration + +When using SSR or SSG, Angular "hydrates" the server-rendered HTML to make it interactive. + +**Available strategies:** + +- **Full hydration** - Entire app becomes interactive at once (default) +- **Incremental hydration** - Parts become interactive as needed (better performance) +- **Event replay** - Captures clicks before hydration completes + +📖 **Learn more:** + +- [Hydration guide](guide/hydration) - Complete hydration setup +- [Incremental hydration](guide/incremental-hydration) - Advanced hydration with `@defer` blocks + +## Next steps + + + + + + diff --git a/adev-ja/src/content/guide/routing/route-transition-animations.md b/adev-ja/src/content/guide/routing/route-transition-animations.md new file mode 100644 index 0000000000..0df19464a9 --- /dev/null +++ b/adev-ja/src/content/guide/routing/route-transition-animations.md @@ -0,0 +1,213 @@ +# Route transition animations + +Route transition animations enhance user experience by providing smooth visual transitions when navigating between different views in your Angular application. [Angular Router](/guide/routing/overview) includes built-in support for the browser's View Transitions API, enabling seamless animations between route changes in supported browsers. + +HELPFUL: The Router's native View Transitions integration is currently in [developer preview](/reference/releases#developer-preview). Native View Transitions are a relatively new browser feature with limited support across all browsers. + +## How View Transitions work + +View transitions use the browser's native [`document.startViewTransition` API](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) to create smooth animations between different states of your application. The API works by: + +1. **Capturing the current state** - The browser takes a screenshot of the current page +2. **Executing the DOM update** - Your callback function runs to update the DOM +3. **Capturing the new state** - The browser captures the updated page state +4. **Playing the transition** - The browser animates between the old and new states + +Here's the basic structure of the `startViewTransition` API: + +```ts +document.startViewTransition(async () => { + await updateTheDOMSomehow(); +}); +``` + +For more details about the browser API, see the [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions). + +## How the Router uses view transitions + +Angular Router integrates view transitions into the navigation lifecycle to create seamless route changes. During navigation, the Router: + +1. **Completes navigation preparation** - Route matching, [lazy loading](/guide/routing/define-routes#lazily-loaded-components), [guards](/guide/routing/route-guards), and [resolvers](/guide/routing/data-resolvers) execute +2. **Initiates the view transition** - Router calls `startViewTransition` when routes are ready for activation +3. **Updates the DOM** - Router activates new routes and deactivates old ones within the transition callback +4. **Finalizes the transition** - The transition Promise resolves when Angular completes rendering + +The Router's view transition integration acts as a [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). When browsers don't support the View Transitions API, the Router performs normal DOM updates without animation, ensuring your application works across all browsers. + +## Enabling View Transitions in the Router + +Enable view transitions by adding the `withViewTransitions` feature to your [router configuration](/guide/routing/define-routes#adding-the-router-to-your-application). Angular supports both standalone and NgModule bootstrap approaches: + +### Standalone bootstrap + +```ts +import { bootstrapApplication } from '@angular/platform-browser'; +import { provideRouter, withViewTransitions } from '@angular/router'; +import { routes } from './app.routes'; + +bootstrapApplication(MyApp, { + providers: [ + provideRouter(routes, withViewTransitions()), + ] +}); +``` + +### NgModule bootstrap + +```ts +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +@NgModule({ + imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})] +}) +export class AppRouting {} +``` + +[Try the "count" example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-2dnvtm?file=src%2Fmain.ts) + +This example demonstrates how router navigation can replace direct `startViewTransition` calls for counter updates. + +## Customizing transitions with CSS + +You can customize view transitions using CSS to create unique animation effects. The browser creates separate transition elements that you can target with CSS selectors. + +To create custom transitions: + +1. **Add view-transition-name** - Assign unique names to elements you want to animate +2. **Define global animations** - Create CSS animations in your global styles +3. **Target transition pseudo-elements** - Use `::view-transition-old()` and `::view-transition-new()` selectors + +Here's an example that adds a rotation effect to a counter element: + +```css +/* Define keyframe animations */ +@keyframes rotate-out { + to { + transform: rotate(90deg); + } +} + +@keyframes rotate-in { + from { + transform: rotate(-90deg); + } +} + +/* Target view transition pseudo-elements */ +::view-transition-old(count), +::view-transition-new(count) { + animation-duration: 200ms; + animation-name: -ua-view-transition-fade-in, rotate-in; +} + +::view-transition-old(count) { + animation-name: -ua-view-transition-fade-out, rotate-out; +} +``` + +IMPORTANT: Define view transition animations in your global styles file, not in component styles. Angular's [view encapsulation](/guide/components/styling#view-encapsulation) scopes component styles, which prevents them from targeting the transition pseudo-elements correctly. + +[Try the updated “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts) + +## Advanced transition control with onViewTransitionCreated + +The `withViewTransitions` feature accepts an options object with an `onViewTransitionCreated` callback for advanced control over view transitions. This callback: + +- Runs in an [injection context](/guide/di/dependency-injection-context#run-within-an-injection-context) +- Receives a [`ViewTransitionInfo`](/api/router/ViewTransitionInfo) object containing: + - The `ViewTransition` instance from `startViewTransition` + - The [`ActivatedRouteSnapshot`](/api/router/ActivatedRouteSnapshot) for the route being navigated from + - The [`ActivatedRouteSnapshot`](/api/router/ActivatedRouteSnapshot) for the route being navigated to + +Use this callback to customize transition behavior based on navigation context. For example, you can skip transitions for specific navigation types: + +```ts +import { inject } from '@angular/core'; +import { Router, withViewTransitions } from '@angular/router'; + +withViewTransitions({ + onViewTransitionCreated: ({transition}) => { + const router = inject(Router); + const targetUrl = router.getCurrentNavigation()!.finalUrl!; + + // Skip transition if only fragment or query params change + const config = { + paths: 'exact', + matrixParams: 'exact', + fragment: 'ignored', + queryParams: 'ignored', + }; + + if (router.isActive(targetUrl, config)) { + transition.skipTransition(); + } + }, +}) +``` + +This example skips the view transition when navigation only changes the [URL fragment or query parameters](/guide/routing/read-route-state#query-parameters) (such as anchor links within the same page). The `skipTransition()` method prevents the animation while still allowing the navigation to complete. + +## Examples from the Chrome explainer adapted to Angular + +The following examples demonstrate various view transition techniques adapted from the Chrome team's documentation for use with Angular Router: + +### Transitioning elements don't need to be the same DOM element + +Elements can transition smoothly between different DOM elements as long as they share the same `view-transition-name`. + +- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning_elements_dont_need_to_be_the_same_dom_element) +- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-dh8npr?file=src%2Fmain.ts) + +### Custom entry and exit animations + +Create unique animations for elements entering and leaving the viewport during route transitions. + +- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#custom_entry_and_exit_transitions) +- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-8kly3o) + +### Async DOM updates and waiting for content + +Angular Router prioritizes immediate transitions over waiting for additional content to load. + +- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#async_dom_updates_and_waiting_for_content) + +NOTE: Angular Router does not provide a way to delay view transitions. This design choice prevents pages from becoming non-interactive while waiting for additional content. As the Chrome documentation notes: "During this time, the page is frozen, so delays here should be kept to a minimum…in some cases it's better to avoid the delay altogether, and use the content you already have." + +### Handle multiple view transition styles with view transition types + +Use view transition types to apply different animation styles based on navigation context. + +- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types) +- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-vxzcam) + +### Handle multiple view transition styles with a class name on the view transition root (deprecated) + +This approach uses CSS classes on the transition root element to control animation styles. + +- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#changing-on-navigation-type) +- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-nmnzzg?file=src%2Fmain.ts) + +### Transitioning without freezing other animations + +Maintain other page animations during view transitions to create more dynamic user experiences. + +- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning-without-freezing) +- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-76kgww) + +### Animating with JavaScript + +Control view transitions programmatically using JavaScript APIs for complex animation scenarios. + +- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#animating-with-javascript) +- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-cklnkm) + +## Alternative: Angular Animations + +If you need broader browser support or more granular control over animations, you can use the [`@angular/animations`](/guide/animations) package instead of native view transitions. Angular's animation system works with router state changes and provides: + +- **Universal browser support** - Works across all browsers that support Angular +- **Fine-grained control** - Define complex animation sequences and timing +- **Router integration** - Create animations based on route changes, URL patterns, or [`ActivatedRoute`](/api/router/ActivatedRoute) data + +Learn more about creating route-based animations with [animation triggers and transitions](/guide/animations/transition-and-triggers). diff --git a/adev-ja/src/content/guide/routing/testing.md b/adev-ja/src/content/guide/routing/testing.md new file mode 100644 index 0000000000..5a1f2fe13d --- /dev/null +++ b/adev-ja/src/content/guide/routing/testing.md @@ -0,0 +1,341 @@ +# Testing routing and navigation + +Testing routing and navigation is essential to ensure your application behaves correctly when users navigate between different routes. This guide covers various strategies for testing routing functionality in Angular applications. + +## Prerequisites + +This guide assumes you are familiar with the following tools and libraries: + +- **[Jasmine](https://jasmine.github.io/)** - JavaScript testing framework that provides the testing syntax (`describe`, `it`, `expect`) +- **[Karma](https://karma-runner.github.io/)** - Test runner that executes tests in browsers +- **[Angular Testing Utilities](guide/testing)** - Angular's built-in testing tools ([`TestBed`](api/core/testing/TestBed), [`ComponentFixture`](api/core/testing/ComponentFixture)) +- **[`RouterTestingHarness`](api/router/testing/RouterTestingHarness)** - Test harness for testing routed components with built-in navigation and component testing capabilities + +## Testing scenarios + +### Route parameters + +Components often rely on route parameters from the URL to fetch data, like a user ID for a profile page. + +The following example shows how to test a `UserProfile` component that displays a user ID from the route. + +```ts +// user-profile.component.spec.ts +import { TestBed } from '@angular/core/testing'; +import { Router } from '@angular/router'; +import { RouterTestingHarness } from '@angular/router/testing'; +import { provideRouter } from '@angular/router'; +import { UserProfile } from './user-profile'; + +describe('UserProfile', () => { + it('should display user ID from route parameters', async () => { + TestBed.configureTestingModule({ + imports: [UserProfile], + providers: [ + provideRouter([ + { path: 'user/:id', component: UserProfile } + ]) + ] + }); + + const harness = await RouterTestingHarness.create(); + await harness.navigateByUrl('/user/123', UserProfile); + + expect(harness.routeNativeElement?.textContent).toContain('User Profile: 123'); + }); +}); +``` + +```ts +// user-profile.component.ts +import { Component, inject } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + template: '

User Profile: {{userId}}

' +}) +export class UserProfile { + private route = inject(ActivatedRoute); + userId: string | null = this.route.snapshot.paramMap.get('id'); +} +``` + +### Route guards + +Route guards control access to routes based on conditions like authentication or permissions. When testing guards, focus on mocking dependencies and verifying navigation outcomes. + +The following example tests an `authGuard` that allows navigation for authenticated users and redirects unauthenticated users to a login page. + +```ts +// auth.guard.spec.ts +import { RouterTestingHarness } from '@angular/router/testing'; +import { provideRouter, Router } from '@angular/router'; +import { authGuard } from './auth.guard'; +import { AuthStore } from './auth-store'; +import { Component } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; + +@Component({ template: '

Protected Page

' }) +class ProtectedComponent {} + +@Component({ template: '

Login Page

' }) +class LoginComponent {} + +describe('authGuard', () => { + let authStore: jasmine.SpyObj; + let harness: RouterTestingHarness; + + async function setup(isAuthenticated: boolean) { + authStore = jasmine.createSpyObj('AuthStore', ['isAuthenticated']); + authStore.isAuthenticated.and.returnValue(isAuthenticated); + + TestBed.configureTestingModule({ + providers: [ + { provide: AuthStore, useValue: authStore }, + provideRouter([ + { path: 'protected', component: ProtectedComponent, canActivate: [authGuard] }, + { path: 'login', component: LoginComponent }, + ]), + ], + }); + + harness = await RouterTestingHarness.create(); + } + + it('allows navigation when user is authenticated', async () => { + await setup(true); + await harness.navigateByUrl('/protected', ProtectedComponent); + // The protected component should render when authenticated + expect(harness.routeNativeElement?.textContent).toContain('Protected Page'); + }); + + it('redirects to login when user is not authenticated', async () => { + await setup(false); + await harness.navigateByUrl('/protected', LoginComponent); + // The login component should render after redirect + expect(harness.routeNativeElement?.textContent).toContain('Login Page'); + }); +}); +``` + +```ts +// auth.guard.ts +import { inject } from '@angular/core'; +import { CanActivateFn, Router } from '@angular/router'; +import { AuthStore } from './auth-store'; + +export const authGuard: CanActivateFn = () => { + const authStore = inject(AuthStore); + const router = inject(Router); + return authStore.isAuthenticated() ? true : router.parseUrl('/login'); +}; +``` + +### Router outlets + +Router outlet tests are more of an integration test since you're essentially testing the integration between the [`Router`](api/router/Router), the outlet, and the components being displayed. + +Here's an example of how to set up a test that verifies different components are displayed for different routes: + +```ts +// app.component.spec.ts +import { TestBed } from '@angular/core/testing'; +import { RouterTestingHarness } from '@angular/router/testing'; +import { provideRouter } from '@angular/router'; +import { Component } from '@angular/core'; +import { App } from './app'; + +@Component({ + template: '

Home Page

' +}) +class MockHome {} + +@Component({ + template: '

About Page

' +}) +class MockAbout {} + +describe('App Router Outlet', () => { + let harness: RouterTestingHarness; + + beforeEach(async () => { + TestBed.configureTestingModule({ + imports: [App], + providers: [ + provideRouter([ + { path: '', component: MockHome }, + { path: 'about', component: MockAbout } + ]) + ] + }); + + harness = await RouterTestingHarness.create(); + }); + + it('should display home component for default route', async () => { + await harness.navigateByUrl(''); + + expect(harness.routeNativeElement?.textContent).toContain('Home Page'); + }); + + it('should display about component for about route', async () => { + await harness.navigateByUrl('/about'); + + expect(harness.routeNativeElement?.textContent).toContain('About Page'); + }); +}); +``` + +```ts +// app.component.ts +import { Component } from '@angular/core'; +import { RouterOutlet, RouterLink } from '@angular/router'; + +@Component({ + imports: [RouterOutlet, RouterLink], + template: ` + + + ` +}) +export class App {} +``` + +### Nested routes + +Testing nested routes ensures that both the parent and child components render correctly when navigating to nested URLs. This is important because nested routes involve multiple layers. + +You need to verify that: + +1. The parent component renders properly. +2. The child component renders within it. +3. Ensure that both components can access their respective route data. + +Here's an example of testing a parent-child route structure: + +```ts +// nested-routes.spec.ts +import { TestBed } from '@angular/core/testing'; +import { RouterTestingHarness } from '@angular/router/testing'; +import { provideRouter } from '@angular/router'; +import { Parent, Child } from './nested-components'; + +describe('Nested Routes', () => { + let harness: RouterTestingHarness; + + beforeEach(async () => { + TestBed.configureTestingModule({ + imports: [Parent, Child], + providers: [ + provideRouter([ + { + path: 'parent', + component: Parent, + children: [ + { path: 'child', component: Child } + ] + } + ]) + ] + }); + + harness = await RouterTestingHarness.create(); + }); + + it('should render parent and child components for nested route', async () => { + await harness.navigateByUrl('/parent/child'); + + expect(harness.routeNativeElement?.textContent).toContain('Parent Component'); + expect(harness.routeNativeElement?.textContent).toContain('Child Component'); + }); +}); +``` + +```ts +// nested-components.ts +import { Component } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; + +@Component({ + imports: [RouterOutlet], + template: ` +

Parent Component

+ + ` +}) +export class Parent {} + +@Component({ + template: '

Child Component

' +}) +export class Child {} +``` + +### Query parameters and fragments + +Query parameters (like `?search=angular&category=web`) and URL fragments (like `#section1`) provide additional data through the URL that doesn't affect which component loads, but does affect how the component behaves. Components that read query parameters through [`ActivatedRoute.queryParams`](api/router/ActivatedRoute#queryParams) need to be tested to ensure they handle different parameter scenarios correctly. + +Unlike route parameters that are part of the route definition, query parameters are optional and can change without triggering route navigation. This means you need to test both the initial loading and the reactive updates when query parameters change. + +Here's an example of how to test query parameters and fragments: + +```ts +// search.component.spec.ts +import { TestBed } from '@angular/core/testing'; +import { Router, provideRouter } from '@angular/router'; +import { RouterTestingHarness } from '@angular/router/testing'; +import { Search } from './search'; + +describe('Search', () => { + let component: Search; + let harness: RouterTestingHarness; + + beforeEach(async () => { + TestBed.configureTestingModule({ + imports: [Search], + providers: [ + provideRouter([ + { path: 'search', component: Search } + ]) + ] + }); + + harness = await RouterTestingHarness.create(); + }); + + it('should read search term from query parameters', async () => { + component = await harness.navigateByUrl('/search?q=angular', Search); + + expect(component.searchTerm()).toBe('angular'); + }); +}); +``` + +```ts +// search.component.ts +import { Component, inject, computed } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { toSignal } from '@angular/core/rxjs-interop'; + +@Component({ + template: '
Search term: {{searchTerm()}}
' +}) +export class Search { + private route = inject(ActivatedRoute); + private queryParams = toSignal(this.route.queryParams, { initialValue: {} }); + + searchTerm = computed(() => this.queryParams()['q'] || null); +} +``` + +## Best practices for router testing + +1. **Use RouterTestingHarness** - For testing routed components, use [`RouterTestingHarness`](api/router/testing/RouterTestingHarness) which provides a cleaner API and eliminates the need for test host components. It offers direct component access, built-in navigation, and better type safety. However, it isn't as suitable for some scenarios, such as testing named outlets, where you may need to create custom host components. +2. **Handle external dependencies thoughtfully** - Prefer real implementations when possible for more realistic tests. If real implementations aren't feasible (e.g., external APIs), use fakes that approximate the real behavior. Use mocks or stubs only as a last resort, as they can make tests brittle and less reliable. +3. **Test navigation state** - Verify both the navigation action and the resulting application state, including URL changes and component rendering. +4. **Handle asynchronous operations** - Router navigation is asynchronous. Use `async/await` or [`fakeAsync`](api/core/testing/fakeAsync) to properly handle timing in your tests. +5. **Test error scenarios** - Include tests for invalid routes, failed navigation, and guard rejections to ensure your application handles edge cases gracefully. +6. **Do not mock Angular Router** - Instead, provide real route configurations and use the harness to navigate. This makes your tests more robust and less likely to break on internal Angular updates, while also ensuring you catch real issues when the router updates since mocks can hide breaking changes. diff --git a/adev-ja/src/content/guide/tailwind.md b/adev-ja/src/content/guide/tailwind.md new file mode 100644 index 0000000000..feeea02d67 --- /dev/null +++ b/adev-ja/src/content/guide/tailwind.md @@ -0,0 +1,69 @@ +# Using Tailwind CSS with Angular + +[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that can be used to build modern websites without ever leaving your HTML. This guide will walk you through setting up Tailwind CSS in your Angular project. + +## Setting up Tailwind CSS + +### 1. Create an Angular project + +First, create a new Angular project if you don't have one set up already. + + +ng new my-project +cd my-project + + +### 2. Install Tailwind CSS + +Next, open a terminal in your Angular project's root directory and run the following command to install Tailwind CSS and its peer dependencies: + + +npm install tailwindcss @tailwindcss/postcss postcss + + +### 3. Configure PostCSS Plugins + +Next, add a `.postcssrc.json` file in the file root of the project. +Add the `@tailwindcss/postcss` plugin into your PostCSS configuration. + + +{ + "plugins": { + "@tailwindcss/postcss": {} + } +} + + +### 4. Import Tailwind CSS + +Add an `@import` to `./src/styles.css` that imports Tailwind CSS. + + +@import "tailwindcss"; + + +If you're using SCSS, add `@use` to `./src/styles.scss`. + + +@use "tailwindcss"; + + +### 5. Start using Tailwind in your project + +You can now start using Tailwind's utility classes in your component templates to style your application. + +For example, you can add the following to your `app.html` file: + + +

+ Hello world! +

+ + +### 6. Start using Tailwind in your project + +Run your build process with `ng serve` and you should see the styled heading. + +## Additional Resources + +- [Tailwind CSS Documentation](https://tailwindcss.com/docs) \ No newline at end of file diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8117.md b/adev-ja/src/content/reference/extended-diagnostics/NG8117.md new file mode 100644 index 0000000000..72a0145524 --- /dev/null +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8117.md @@ -0,0 +1,65 @@ +# Functions should be invoked in text interpolation. + +This diagnostic detects uninvoked functions in text interpolation. + + + +import {Component} from '@angular/core'; + +@Component({ + template: `{{ getValue }}`, +}) +class MyComponent { + getValue() { + return 'value'; + } +} + + + +## What's wrong with that? + +Functions in text interpolation should be invoked to return a value. +If the function is not invoked, it will not return any value and the interpolation will not work as expected. + +## What should I do instead? + +Ensure to invoke the function when you use it in text interpolation to return the value. + + + +import {Component} from '@angular/core'; + +@Component({ + template: `{{ getValue() }}`, +}) +class MyComponent { + getValue() { + return 'value'; + } +} + + + +## Configuration requirements + +[`strictTemplates`](/tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`uninvokedFunctionInTextInterpolation` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "uninvokedFunctionInTextInterpolation": "suppress" + } + } + } +} + + +See [extended diagnostic configuration](/extended-diagnostics#configuration) for more info. From 60d9e7ac5f4ac450e1af6f3bb61e38a9352c2ed8 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 20 Aug 2025 22:26:07 +0900 Subject: [PATCH 03/13] fix: migrate untranslated files --- .../ecosystem/rxjs-interop/signals-interop.md | 33 ++++++++++++++++++- .../service-workers/communications.md | 3 +- .../guide/animations/complex-sequences.md | 2 +- adev-ja/src/content/guide/animations/css.md | 8 +++-- .../src/content/guide/animations/migration.md | 12 ++++--- .../src/content/guide/animations/overview.md | 2 +- .../guide/animations/reusable-animations.md | 2 +- .../animations/transition-and-triggers.md | 2 +- .../src/content/guide/http/http-resource.md | 2 +- .../reference/extended-diagnostics/NG8114.md | 2 +- .../extended-diagnostics/overview.md | 33 ++++++++++--------- .../tools/cli/build-system-migration.md | 2 +- 12 files changed, 70 insertions(+), 33 deletions(-) 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 8e8a318866..79096063ae 100644 --- a/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md +++ b/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md @@ -69,7 +69,7 @@ Use the `toObservable` utility to create an `Observable` which tracks the value import { Component, signal } from '@angular/core'; import { toObservable } from '@angular/core/rxjs-interop'; -@Component(...) +@Component(/* ... */) export class SearchResults { query: Signal = inject(QueryService).query; query$ = toObservable(this.query); @@ -102,3 +102,34 @@ mySignal.set(3); ``` Here, only the last value (3) will be logged. + +## Using `rxResource` for async data + +IMPORTANT: `rxResource` is [experimental](reference/releases#experimental). It's ready for you to try, but it might change before it is stable. + +Angular's [`resource` function](/guide/signals/resource) gives you a way to incorporate async data into your application's signal-based code. Building on top of this pattern, `rxResource` lets you define a resource where the source of your data is defined in terms of an RxJS `Observable`. Instead of accepting a `loader` function, `rxResource` accepts a `stream` function that accepts an RxJS `Observable`. + +```typescript +import {Component, inject} from '@angular/core'; +import {rxResource} from '@angular/core/rxjs-interop'; + +@Component(/* ... */) +export class UserProfile { + // This component relies on a service that exposes data through an RxJS Observable. + private userData = inject(MyUserDataClient); + + protected userId = input(); + + private userResource = rxResource({ + params: () => this.userId(), + + // The `stream` property expects a factory function that returns + // a data stream as an RxJS Observable. + stream: ({userId}) => this.userData.load(userId), + }); +} +``` + +The `stream` property accepts a factory function for an RxJS `Observable`. This factory function is passed the resource's `params` value and returns an `Observable`. The resource calls this factory function every time the `params` computation produces a new value. See [Resource loaders](/guide/signals/resource#resource-loaders) for more details on the parameters passed to the factory function. + +In all other ways, `rxResource` behaves like and provides the same APIs as `resource` for specifying parameters, reading values, checking loading state, and examining errors. diff --git a/adev-ja/src/content/ecosystem/service-workers/communications.md b/adev-ja/src/content/ecosystem/service-workers/communications.md index ea08f24a93..59ab2db13d 100644 --- a/adev-ja/src/content/ecosystem/service-workers/communications.md +++ b/adev-ja/src/content/ecosystem/service-workers/communications.md @@ -14,7 +14,7 @@ The `SwUpdate` service supports three separate operations: ### Version updates -The `versionUpdates` is an `Observable` property of `SwUpdate` and emits four event types: +The `versionUpdates` is an `Observable` property of `SwUpdate` and emits five event types: | Event types | Details | |:--- |:--- | @@ -22,6 +22,7 @@ The `versionUpdates` is an `Observable` property of `SwUpdate` and emits four ev | `NoNewVersionDetectedEvent` | Emitted when the service worker has checked the version of the app on the server and did not find a new version. | | `VersionReadyEvent` | Emitted when a new version of the app is available to be activated by clients. It may be used to notify the user of an available update or prompt them to refresh the page. | | `VersionInstallationFailedEvent` | Emitted when the installation of a new version failed. It may be used for logging/monitoring purposes. | +| `VersionFailedEvent` | Emitted when a version encounters a critical failure (such as broken hash errors) that affects all clients using that version. Provides error details for debugging and transparency. | diff --git a/adev-ja/src/content/guide/animations/complex-sequences.md b/adev-ja/src/content/guide/animations/complex-sequences.md index de743b5a6d..05502cc9a9 100644 --- a/adev-ja/src/content/guide/animations/complex-sequences.md +++ b/adev-ja/src/content/guide/animations/complex-sequences.md @@ -140,5 +140,5 @@ You might also be interested in the following: - + diff --git a/adev-ja/src/content/guide/animations/css.md b/adev-ja/src/content/guide/animations/css.md index b94a2a6ac1..2d89ecb0e8 100644 --- a/adev-ja/src/content/guide/animations/css.md +++ b/adev-ja/src/content/guide/animations/css.md @@ -74,7 +74,7 @@ If you don't have to worry about supporting all browsers, you can also check out ### Animate entering and leaving a view -You can create animations for when an item enters a view or leaves a view. Let's start by looking at how to animate an element leaving a view. +You can create animations for when an item enters a view or leaves a view. Let's start by looking at how to animate an element entering a view. We'll do this with `animate.enter`, which will apply animation classes when an element enters the view. @@ -82,7 +82,7 @@ You can create animations for when an item enters a view or leaves a view. Let's -Leaving a view is slightly more complex. The element removal needs to be delayed until the exit animation is complete. This requires a bit of extra code in your component class to accomplish. +Animating an element when it leaves the view is similar to animating when entering a view. Use `animate.leave` to specify which CSS classes to apply when the element leaves the view. @@ -90,6 +90,8 @@ Leaving a view is slightly more complex. The element removal needs to be delayed +For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations/enter-and-leave). + ### Animating increment and decrement Animating on increment and decrement is a common pattern in applications. Here's an example of how you can accomplish that behavior. @@ -165,7 +167,7 @@ In this example, the `rotate` and `fade-in` animations fire at the same time, bu ### Animating the items of a reordering list -Items in a `@for` loop will be removed and re-added, which will fire off animations using `@starting-styles` for entry animations. Removal animations will require additional code to add the event listener, as seen in the example above. +Items in a `@for` loop will be removed and re-added, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example above. diff --git a/adev-ja/src/content/guide/animations/migration.md b/adev-ja/src/content/guide/animations/migration.md index c62ec4f17e..22862b1166 100644 --- a/adev-ja/src/content/guide/animations/migration.md +++ b/adev-ja/src/content/guide/animations/migration.md @@ -1,6 +1,6 @@ # Migrating away from Angular's Animations package -Almost all the features supported by `@angular/animations` have simpler alternatives with native CSS. Consider removing the Angular Animations package from your application, as the package can contribute around 60 kilobytes to your JavaScript bundle. Native CSS animations offer superior performance, as they can benefit from hardware acceleration. Animations defined in the animations package lack that ability. This guide walks through the process of refactoring your code from `@angular/animations` to native CSS animations. +The `@angular/animations` package is deprecated as of v20.2, which also introduced the new `animate.enter` and `animate.leave` feature to add animations to your application. Using these new features, you can replace all animations based on `@angular/animations` with plain CSS or JS animation libraries. Removing `@angular/animations` from your application can significantly reduce the size of your JavaScript bundle. Native CSS animations generally offer superior performance, as they can benefit from hardware acceleration. This guide walks through the process of refactoring your code from `@angular/animations` to native CSS animations. ## How to write animations in native CSS @@ -117,7 +117,7 @@ The animations package offered the previously mentioned pattern matching for ent -Here's how the same thing can be accomplished without the animations package. +Here's how the same thing can be accomplished without the animations package using `animate.enter`. #### With Native CSS @@ -126,7 +126,7 @@ Here's how the same thing can be accomplished without the animations package. -Leaving a view is slightly more complex. The element removal needs to be delayed until the exit animation is complete. This requires a bit of extra code in your component class to accomplish. +Use `animate.leave` to animate elements as they leave the view, which will apply the specified CSS classes to the element as it leaves the view. #### With Native CSS @@ -135,6 +135,8 @@ Leaving a view is slightly more complex. The element removal needs to be delayed +For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations/enter-and-leave). + ### Animating increment and decrement Along with the aforementioned `:enter` and `:leave`, there's also `:increment` and `:decrement`. You can animate these also by adding and removing classes. Unlike the animation package built-in aliases, there is no automatic application of classes when the values go up or down. You can apply the appropriate classes programmatically. Here's an example: @@ -236,7 +238,7 @@ In this example, the `rotate` and `fade-in` animations fire at the same time. ### Animating the items of a reordering list -Items reordering in a list works out of the box using the previously described techniques. No additional special work is required. Items in a `@for` loop will be removed and re-added properly, which will fire off animations using `@starting-styles` for entry animations. Removal animations will require additional code to add the event listener, as seen in the example above. +Items reordering in a list works out of the box using the previously described techniques. No additional special work is required. Items in a `@for` loop will be removed and re-added properly, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example above. #### With Animations Package< @@ -261,4 +263,4 @@ You can retrieve animations off an element directly using [`Element.getAnimation ## Route Transitions -You can use view transitions to animate between routes. See the [Route Transition Animations Guide](guide/animations/route-animations) to get started. \ No newline at end of file +You can use view transitions to animate between routes. See the [Route Transition Animations Guide](guide/routing/route-transition-animations) to get started. \ No newline at end of file diff --git a/adev-ja/src/content/guide/animations/overview.md b/adev-ja/src/content/guide/animations/overview.md index 1403f21d18..733f84b474 100644 --- a/adev-ja/src/content/guide/animations/overview.md +++ b/adev-ja/src/content/guide/animations/overview.md @@ -298,5 +298,5 @@ You might also be interested in the following: - + diff --git a/adev-ja/src/content/guide/animations/reusable-animations.md b/adev-ja/src/content/guide/animations/reusable-animations.md index 76f02b9512..1fc7361c98 100644 --- a/adev-ja/src/content/guide/animations/reusable-animations.md +++ b/adev-ja/src/content/guide/animations/reusable-animations.md @@ -33,5 +33,5 @@ You might also be interested in the following: - + diff --git a/adev-ja/src/content/guide/animations/transition-and-triggers.md b/adev-ja/src/content/guide/animations/transition-and-triggers.md index 3b77802328..fcb6d2c211 100644 --- a/adev-ja/src/content/guide/animations/transition-and-triggers.md +++ b/adev-ja/src/content/guide/animations/transition-and-triggers.md @@ -299,5 +299,5 @@ You might also be interested in the following: - + diff --git a/adev-ja/src/content/guide/http/http-resource.md b/adev-ja/src/content/guide/http/http-resource.md index e795d1aa60..4a0844bc90 100644 --- a/adev-ja/src/content/guide/http/http-resource.md +++ b/adev-ja/src/content/guide/http/http-resource.md @@ -19,7 +19,7 @@ userId = input.required(); user = httpResource(() => `/api/user/${userId()}`); // A reactive function as argument ``` -`httResource` is reactive, meaning that whenever one of the signal it depends on changes (like `userId`), the resource will emit a new http request. +`httpResource` is reactive, meaning that whenever one of the signal it depends on changes (like `userId`), the resource will emit a new http request. If a request is already pending, the resource cancels the outstanding request before issuing a new one. HELPFUL: `httpResource` differs from the `HttpClient` as it initiates the request _eagerly_. In contrast, the `HttpClient` only initiates requests upon subscription to the returned `Observable`. diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8114.md b/adev-ja/src/content/reference/extended-diagnostics/NG8114.md index b6a594b169..2afb78cfda 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8114.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8114.md @@ -49,4 +49,4 @@ class MyComponent { task = input(undefined); } - \ No newline at end of file + diff --git a/adev-ja/src/content/reference/extended-diagnostics/overview.md b/adev-ja/src/content/reference/extended-diagnostics/overview.md index 46391f5eef..b53c73e56c 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/overview.md +++ b/adev-ja/src/content/reference/extended-diagnostics/overview.md @@ -8,22 +8,23 @@ The Angular compiler includes "extended diagnostics" which identify many of thes Currently, Angular supports the following extended diagnostics: -| Code | Name | -| :------- | :---------------------------------------------------------------- | -| `NG8101` | [`invalidBananaInBox`](extended-diagnostics/NG8101) | -| `NG8102` | [`nullishCoalescingNotNullable`](extended-diagnostics/NG8102) | -| `NG8103` | [`missingControlFlowDirective`](extended-diagnostics/NG8103) | -| `NG8104` | [`textAttributeNotBinding`](extended-diagnostics/NG8104) | -| `NG8105` | [`missingNgForOfLet`](extended-diagnostics/NG8105) | -| `NG8106` | [`suffixNotSupported`](extended-diagnostics/NG8106) | -| `NG8107` | [`optionalChainNotNullable`](extended-diagnostics/NG8107) | -| `NG8108` | [`skipHydrationNotStatic`](extended-diagnostics/NG8108) | -| `NG8109` | [`interpolatedSignalNotInvoked`](extended-diagnostics/NG8109) | -| `NG8111` | [`uninvokedFunctionInEventBinding`](extended-diagnostics/NG8111) | -| `NG8113` | [`unusedStandaloneImports`](extended-diagnostics/NG8113) | -| `NG8114` | [`unparenthesizedNullishCoalescing`](extended-diagnostics/NG8114) | -| `NG8115` | [`uninvokedTrackFunction`](extended-diagnostics/NG8115) | -| `NG8116` | [`missingStructuralDirective`](extended-diagnostics/NG8116) | +| Code | Name | +| :------- |:----------------------------------------------------------------------| +| `NG8101` | [`invalidBananaInBox`](extended-diagnostics/NG8101) | +| `NG8102` | [`nullishCoalescingNotNullable`](extended-diagnostics/NG8102) | +| `NG8103` | [`missingControlFlowDirective`](extended-diagnostics/NG8103) | +| `NG8104` | [`textAttributeNotBinding`](extended-diagnostics/NG8104) | +| `NG8105` | [`missingNgForOfLet`](extended-diagnostics/NG8105) | +| `NG8106` | [`suffixNotSupported`](extended-diagnostics/NG8106) | +| `NG8107` | [`optionalChainNotNullable`](extended-diagnostics/NG8107) | +| `NG8108` | [`skipHydrationNotStatic`](extended-diagnostics/NG8108) | +| `NG8109` | [`interpolatedSignalNotInvoked`](extended-diagnostics/NG8109) | +| `NG8111` | [`uninvokedFunctionInEventBinding`](extended-diagnostics/NG8111) | +| `NG8113` | [`unusedStandaloneImports`](extended-diagnostics/NG8113) | +| `NG8114` | [`unparenthesizedNullishCoalescing`](extended-diagnostics/NG8114) | +| `NG8115` | [`uninvokedTrackFunction`](extended-diagnostics/NG8115) | +| `NG8116` | [`missingStructuralDirective`](extended-diagnostics/NG8116) | +| `NG8117` | [`uninvokedFunctionInTextInterpolation`](extended-diagnostics/NG8117) | ## Configuration 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 f8f53e2fef..24221c1b15 100644 --- a/adev-ja/src/content/tools/cli/build-system-migration.md +++ b/adev-ja/src/content/tools/cli/build-system-migration.md @@ -256,7 +256,7 @@ Users can opt-in to use the `application` builder by setting the `builderMode` o This option is currently in developer preview. If you notice any issues, please report them [here](https://github.com/angular/angular-cli/issues). -### Build-time value replacement (define) +### Build-time value replacement with `define` The `define` option allows identifiers present in the code to be replaced with another value at build time. This is similar to the behavior of Webpack's `DefinePlugin` which was previously used with some custom Webpack configurations that used third-party builders. From 3d9c3ab81d4acbb4043115043a382642332075d8 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 20 Aug 2025 22:55:16 +0900 Subject: [PATCH 04/13] fix: migrate translated files --- .../navigation/navigation.component.en.html | 12 +- adev-ja/src/app/sub-navigation-data.en.ts | 49 ++++- adev-ja/src/app/sub-navigation-data.ts | 59 +++++- adev-ja/src/content/ai/overview.en.md | 8 + adev-ja/src/content/ai/overview.md | 8 + .../src/content/guide/components/inputs.en.md | 8 +- .../src/content/guide/components/inputs.md | 8 +- .../content/guide/directives/overview.en.md | 19 +- .../src/content/guide/directives/overview.md | 19 +- .../src/content/guide/http/interceptors.en.md | 33 ++++ .../src/content/guide/http/interceptors.md | 33 ++++ .../content/guide/http/making-requests.en.md | 45 +++++ .../src/content/guide/http/making-requests.md | 45 +++++ .../content/guide/routing/define-routes.en.md | 16 +- .../content/guide/routing/define-routes.md | 17 +- .../src/content/guide/routing/overview.en.md | 2 +- adev-ja/src/content/guide/routing/overview.md | 2 +- .../src/content/guide/signals/resource.en.md | 2 +- .../src/content/guide/templates/binding.en.md | 65 ++++--- .../src/content/guide/templates/binding.md | 65 ++++--- .../guide/templates/expression-syntax.en.md | 82 ++++---- .../guide/templates/expression-syntax.md | 82 ++++---- .../content/guide/templates/variables.en.md | 2 +- .../src/content/guide/templates/variables.md | 2 +- .../guide/testing/components-scenarios.en.md | 177 +----------------- .../testing/experimental-unit-test.en.md | 4 +- adev-ja/src/content/guide/zoneless.en.md | 6 +- adev-ja/src/content/guide/zoneless.md | 5 +- .../content/introduction/installation.en.md | 4 +- .../src/content/introduction/installation.md | 4 +- .../src/content/reference/errors/NG0913.en.md | 4 +- .../src/content/reference/errors/NG0913.md | 4 +- .../src/content/reference/errors/NG3003.en.md | 25 ++- .../src/content/reference/errors/NG3003.md | 25 ++- adev-ja/src/content/reference/roadmap.en.md | 4 +- adev-ja/src/content/reference/roadmap.md | 4 +- adev-ja/src/content/reference/versions.en.md | 17 +- adev-ja/src/content/reference/versions.md | 17 +- .../steps/7-event-handling/README.en.md | 6 +- .../steps/7-event-handling/README.md | 6 +- 40 files changed, 597 insertions(+), 398 deletions(-) diff --git a/adev-ja/src/app/core/layout/navigation/navigation.component.en.html b/adev-ja/src/app/core/layout/navigation/navigation.component.en.html index 4b2ea426ec..6416329965 100644 --- a/adev-ja/src/app/core/layout/navigation/navigation.component.en.html +++ b/adev-ja/src/app/core/layout/navigation/navigation.component.en.html @@ -305,7 +305,7 @@