diff --git a/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.en.html b/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.en.html index f5b514649..e791dd207 100644 --- a/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.en.html +++ b/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.en.html @@ -6,26 +6,26 @@

On this page

@if (shouldDisplayScrollToTop()) { - + } diff --git a/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.html b/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.html index fb66abbd5..d2919022c 100644 --- a/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.html +++ b/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.html @@ -6,26 +6,26 @@

目次

@if (shouldDisplayScrollToTop()) { - + } 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 2680ae833..080b38299 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 @@ -346,6 +346,27 @@ +
  • + + + + + + +
    • +
  • + + + + + + +
  • import { Component, NgZone, OnInit } from '@angular/core'; diff --git a/adev-ja/src/content/ecosystem/custom-build-pipeline.md b/adev-ja/src/content/ecosystem/custom-build-pipeline.md new file mode 100644 index 000000000..71fdaa24a --- /dev/null +++ b/adev-ja/src/content/ecosystem/custom-build-pipeline.md @@ -0,0 +1,33 @@ +# Custom build pipeline + +When building an Angular app we strongly recommend you to use the Angular CLI to leverage its structure-dependent update functionality and build system abstraction. This way your projects benefit from the latest security, performance, and API improvements and transparent build improvements. + +This page explores the **rare use cases** when you need a custom build pipeline that does not use the Angular CLI. All listed tools below are open source build plugins that are maintained by members of the Angular community. To learn more about their support model and maintenance status look at their documentation and GitHub repository URLs. + +## When should you use a custom build pipeline? + +There are some niche use cases when you may want to maintain a custom build pipeline. For example: + +* You have an existing app using a different toolchain and you’d like to add Angular to it +* You’re strongly coupled to [module federation](https://module-federation.io/) and unable to adopt bundler-agnostic [native federation](https://www.npmjs.com/package/@angular-architects/native-federation) +* You’d like to create an short-lived experiment using your favorite build tool + +## What are the options? + +Currently, there are two well supported community tools that enable you to create a custom build pipeline with a [Vite plugin](https://www.npmjs.com/package/@analogjs/vite-plugin-angular) and [Rspack plugin](https://www.npmjs.com/package/@ng-rspack/build). Both of them use underlying abstractions that power the Angular CLI. They allow you to create a flexible build pipeline and require manual maintenance and no automated update experience. + +### Rspack + +Rspack is a Rust-based bundler that aims to provide compatibility with the webpack plugin ecosystem. + +If your project is tightly coupled to the webpack ecosystem, heavily relying on a custom webpack configuration you can leverage Rspack to improve your build times. + +You can find more about Angular Rspack on the project’s [documentation website](https://angular-rspack.dev/guide/migration/from-webpack). + +### Vite + +Vite is a frontend build tool that aims to provide a faster and leaner development experience for modern web projects. Vite is also extensible through its plugin system that allows ecosystems to build integrations with Vite, such as Vitest for unit and browser testing, Storybook for authoring components in isolation, and more. The Angular CLI also uses Vite as its development server. + +The [AnalogJS Vite plugin for Angular](https://www.npmjs.com/package/@analogjs/vite-plugin-angular) enables the adoption of Angular with a project or framework that uses or is built on top of Vite. This can consist of developing and building an Angular project with Vite directly, or adding Angular to an existing project or pipeline. One example is integrating Angular UI components into a documentation website using [Astro and Starlight](https://analogjs.org/docs/packages/astro-angular/overview). + +You can learn more about AnalogJS and how to use the plugin through its [documentation page](https://analogjs.org/docs/packages/vite-plugin-angular/overview). 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 69c3533ba..1eccfccc2 100644 --- a/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md +++ b/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md @@ -63,7 +63,7 @@ If an Observable used in `toSignal` produces an error, that error is thrown when If an Observable used in `toSignal` completes, the signal continues to return the most recently emitted value before completion. -## Create an RxJS Observale from a signal with `toObservable` +## Create an RxJS Observable from a signal with `toObservable` Use the `toObservable` utility to create an `Observable` which tracks the value of a signal. The signal's value is monitored with an `effect` which emits the value to the Observable when it changes. diff --git a/adev-ja/src/content/ecosystem/service-workers/config.md b/adev-ja/src/content/ecosystem/service-workers/config.md index a4d16eea2..1cdf056d3 100644 --- a/adev-ja/src/content/ecosystem/service-workers/config.md +++ b/adev-ja/src/content/ecosystem/service-workers/config.md @@ -318,7 +318,7 @@ If not specified, the default value depends on the data group's configured strat | Groups with the `performance` strategy | The default value is `false` and the service worker doesn't cache opaque responses. These groups would continue to return a cached response until `maxAge` expires, even if the error was due to a temporary network or server issue. Therefore, it would be problematic for the service worker to cache an error response. | - + In case you are not familiar, an [opaque response](https://fetch.spec.whatwg.org#concept-filtered-response-opaque) is a special type of response returned when requesting a resource that is on a different origin which doesn't return CORS headers. One of the characteristics of an opaque response is that the service worker is not allowed to read its status, meaning it can't check if the request was successful or not. See [Introduction to `fetch()`](https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types) for more details. @@ -366,9 +366,9 @@ If the field is omitted, it defaults to: [ '/**', // Include all URLs. - '!/**/*.*', // Exclude URLs to files. - '!/**/****', // Exclude URLs containing `**` in the last segment. - '!/**/****/**', // Exclude URLs containing `**` in any other segment. + '!/**/*.*', // Exclude URLs to files (containing a file extension in the last segment). + '!/**/*__*', // Exclude URLs containing `__` in the last segment. + '!/**/*__*/**', // Exclude URLs containing `__` in any other segment. ] 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 bd8394928..ec89a81aa 100644 --- a/adev-ja/src/content/ecosystem/service-workers/getting-started.md +++ b/adev-ja/src/content/ecosystem/service-workers/getting-started.md @@ -37,7 +37,24 @@ The CLI project is now set up to use the Angular service worker. ## Service worker in action: a tour This section demonstrates a service worker in action, -using an example application. +using an example application. To enable service worker support during local development, use the production configuration with the following command: + + + +ng serve --prod + + + +Alternatively, you can use the [`http-server package`](https://www.npmjs.com/package/http-server) from +npm, which supports service worker applications. Run it without installation using: + + + +npx http-server -p 8080 -c-1 dist/<project-name>/browser + + + +This will serve your application with service worker support at http://localhost:8080. ### Initial load diff --git a/adev-ja/src/content/guide/components/inputs.en.md b/adev-ja/src/content/guide/components/inputs.en.md index 2716253cd..9c4425fce 100644 --- a/adev-ja/src/content/guide/components/inputs.en.md +++ b/adev-ja/src/content/guide/components/inputs.en.md @@ -232,7 +232,7 @@ export class MediaControls { } ``` -In the example above, the `CustomSlider` can write values into its `value` model input, which then propagates those values back to the `volume` property in `MediaControls`. This binding keeps that values of `value` and `volume` in sync. +In the example above, the `CustomSlider` can write values into its `value` model input, which then propagates those values back to the `volume` property in `MediaControls`. This binding keeps the values of `value` and `volume` in sync. ### Implicit `change` events diff --git a/adev-ja/src/content/guide/components/lifecycle.en.md b/adev-ja/src/content/guide/components/lifecycle.en.md index c2285a425..0b604df94 100644 --- a/adev-ja/src/content/guide/components/lifecycle.en.md +++ b/adev-ja/src/content/guide/components/lifecycle.en.md @@ -132,7 +132,7 @@ TypeScript property name as a key, rather than the alias. ### ngOnDestroy The `ngOnDestroy` method runs once just before a component is destroyed. Angular destroys a -component when it is no longer shown on the page, such as being hidden by `NgIf` or upon navigating +component when it is no longer shown on the page, such as being hidden by `@if` or upon navigating to another page. #### DestroyRef diff --git a/adev-ja/src/content/guide/components/lifecycle.md b/adev-ja/src/content/guide/components/lifecycle.md index d51e5da5c..2ae852015 100644 --- a/adev-ja/src/content/guide/components/lifecycle.md +++ b/adev-ja/src/content/guide/components/lifecycle.md @@ -132,7 +132,7 @@ TypeScriptプロパティ名をキーとして使用します。 ### ngOnDestroy `ngOnDestroy` メソッドは、コンポーネントが破棄される直前に1回だけ実行されます。 -Angularは、コンポーネントがページに表示されなくなった場合（`NgIf` によって隠された場合や、別のページに移動した場合など）、 +Angularは、コンポーネントがページに表示されなくなった場合（`@if` によって隠された場合や、別のページに移動した場合など）、 コンポーネントを破棄します。 #### DestroyRef diff --git a/adev-ja/src/content/guide/components/programmatic-rendering.en.md b/adev-ja/src/content/guide/components/programmatic-rendering.en.md index 52eb65267..9975fae62 100644 --- a/adev-ja/src/content/guide/components/programmatic-rendering.en.md +++ b/adev-ja/src/content/guide/components/programmatic-rendering.en.md @@ -117,10 +117,11 @@ JavaScript [dynamic import](https://developer.mozilla.org/docs/Web/JavaScript/Re ` }) export class AdminSettings { - advancedSettings: {new(): AdminSettings} | undefined; + advancedSettings: {new(): AdvancedSettings} | undefined; async loadAdvanced() { - this.advancedSettings = await import('path/to/advanced_settings.js'); + const { AdvancedSettings } = await import('path/to/advanced_settings.js'); + this.advancedSettings = AdvancedSettings; } } ``` diff --git a/adev-ja/src/content/guide/components/programmatic-rendering.md b/adev-ja/src/content/guide/components/programmatic-rendering.md index 57753f3f6..a32b1c189 100644 --- a/adev-ja/src/content/guide/components/programmatic-rendering.md +++ b/adev-ja/src/content/guide/components/programmatic-rendering.md @@ -117,10 +117,11 @@ export class InnerItem { ` }) export class AdminSettings { - advancedSettings: {new(): AdminSettings} | undefined; + advancedSettings: {new(): AdvancedSettings} | undefined; async loadAdvanced() { - this.advancedSettings = await import('path/to/advanced_settings.js'); + const { AdvancedSettings } = await import('path/to/advanced_settings.js'); + this.advancedSettings = AdvancedSettings; } } ``` diff --git a/adev-ja/src/content/guide/di/creating-injectable-service.en.md b/adev-ja/src/content/guide/di/creating-injectable-service.en.md index eaea5fc21..0fbb6711d 100644 --- a/adev-ja/src/content/guide/di/creating-injectable-service.en.md +++ b/adev-ja/src/content/guide/di/creating-injectable-service.en.md @@ -33,14 +33,15 @@ Services can depend on other services. For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes. That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server: - + +import { inject } from "@angular/core"; + export class HeroService { private heroes: Hero[] = []; - constructor( - private backend: BackendService, - private logger: Logger) {} + private backend = inject(BackendService); + private logger = inject(Logger); async getHeroes() { // Fetch @@ -100,16 +101,28 @@ For clarity and maintainability, it is recommended that you define components an ## Injecting services -To inject a service as a dependency into a component, you can use the component's `constructor()` and supply a constructor argument with the dependency type. +To inject a service as a dependency into a component, you can declare a class field representing the dependency and use Angular's `inject` function to initialize it. -The following example specifies the `HeroService` in the `HeroListComponent` constructor. +The following example specifies the `HeroService` in the `HeroListComponent`. The type of `heroService` is `HeroService`. Angular recognizes the `HeroService` type as a dependency, since that class was previously annotated with the `@Injectable` decorator: - - constructor(heroService: HeroService) + +import { inject } from "@angular/core"; + +export class HeroListComponent { + private heroService = inject(HeroService); +} + + +It is also possible to inject a service into a component using the component's constructor: + + + constructor(private heroService: HeroService) +The `inject` method can be used in both classes and functions, while the constructor method can naturally only be used in a class constructor. However, in either case a dependency may only be injected in a valid [injection context](guide/di/dependency-injection-context), usually in the construction or initialization of a component. + ## Injecting services in other services When a service depends on another service, follow the same pattern as injecting into a component. @@ -117,7 +130,7 @@ In the following example, `HeroService` depends on a `Logger` service to report -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; import { Logger } from '../logger.service'; @@ -125,7 +138,7 @@ import { Logger } from '../logger.service'; providedIn: 'root', }) export class HeroService { - constructor(private logger: Logger) {} + private logger = inject(Logger); getHeroes() { this.logger.log('Getting heroes.'); diff --git a/adev-ja/src/content/guide/di/creating-injectable-service.md b/adev-ja/src/content/guide/di/creating-injectable-service.md index 4e114577d..07d8f1267 100644 --- a/adev-ja/src/content/guide/di/creating-injectable-service.md +++ b/adev-ja/src/content/guide/di/creating-injectable-service.md @@ -33,14 +33,15 @@ export class Logger { たとえば、次の`HeroService`は`Logger`サービスに依存し、`BackendService`を使用してヒーローを取得します。 そのサービスは、さらに`HttpClient`サービスに依存して、サーバーからヒーローを非同期に取得する場合があります。 - + +import { inject } from "@angular/core"; + export class HeroService { private heroes: Hero[] = []; - constructor( - private backend: BackendService, - private logger: Logger) {} + private backend = inject(BackendService); + private logger = inject(Logger); async getHeroes() { // Fetch @@ -100,16 +101,28 @@ export class HeroService { ## サービスの注入 -コンポーネントにサービスを依存性として注入するには、コンポーネントの`constructor()`を使用し、依存性の型を持つコンストラクター引数を指定します。 +コンポーネントに依存性としてサービスを注入するには、依存性を表すクラスフィールドを宣言し、Angularの`inject`関数を使用して初期化できます。 -次の例では、`HeroListComponent`コンストラクターに`HeroService`を指定しています。 +次の例では、`HeroListComponent`内で`HeroService`を指定しています。 `heroService`の型は`HeroService`です。 `HeroService`クラスはすでに`@Injectable`デコレーターで修飾されているため、Angularは`HeroService`型を依存性として認識します。 - - constructor(heroService: HeroService) + +import { inject } from "@angular/core"; + +export class HeroListComponent { + private heroService = inject(HeroService); +} + + +コンポーネントのコンストラクターを使用しても同様に、サービスをコンポーネントに注入できます: + + + constructor(private heroService: HeroService) +`inject`メソッドはクラスと関数の両方で使用できますが、コンストラクターメソッドは当然ながらクラスコンストラクターでのみ使用できます。ただし、いずれの場合も、依存性は通常コンポーネントの構築または初期化において、有効な[注入コンテキスト](guide/di/dependency-injection-context)でのみ注入できます。 + ## 他のサービスでのサービスの注入 サービスが別のサービスに依存する場合、コンポーネントへの注入と同じパターンに従います。 @@ -117,7 +130,7 @@ export class HeroService { -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; import { Logger } from '../logger.service'; @@ -125,7 +138,7 @@ import { Logger } from '../logger.service'; providedIn: 'root', }) export class HeroService { - constructor(private logger: Logger) {} + private logger = inject(Logger); getHeroes() { this.logger.log('Getting heroes.'); diff --git a/adev-ja/src/content/guide/hybrid-rendering.en.md b/adev-ja/src/content/guide/hybrid-rendering.en.md index 38ce6643a..8db63ebf9 100644 --- a/adev-ja/src/content/guide/hybrid-rendering.en.md +++ b/adev-ja/src/content/guide/hybrid-rendering.en.md @@ -65,28 +65,31 @@ export const serverRoutes: ServerRoute[] = [ ]; ``` -You can add this config to your application using the [`provideServerRoutesConfig`](api/ssr/provideServerRoutesConfig 'API reference') function. +You can add this config to your application using the [`provideServerRouting`](api/ssr/provideServerRouting 'API reference') function. ```typescript -import { provideServerRoutesConfig } from '@angular/ssr'; +import { provideServerRouting } from '@angular/ssr'; import { serverRoutes } from './app.routes.server'; // app.config.server.ts const serverConfig: ApplicationConfig = { providers: [ provideServerRendering(), - provideServerRoutesConfig(serverRoutes), + provideServerRouting(serverRoutes), // ... other providers ... ] }; ``` -When using the [App shell pattern](ecosystem/service-workers/app-shell), you must specify the route to be used as the app shell for client-side rendered routes. To do this, provide an options object with the `appShellRoute` property to [`provideServerRoutesConfig`](api/ssr/provideServerRoutesConfig 'API reference'): +When using the [App shell pattern](ecosystem/service-workers/app-shell), you must specify the route to be used as the app shell for client-side rendered routes. To do this, provide an options object with the `appShellRoute` property to [`provideServerRouting`](api/ssr/provideServerRouting 'API reference'): ```typescript +import { provideServerRouting, withAppShell } from '@angular/ssr'; +import { AppShellComponent } from './app-shell/app-shell.component'; + const serverConfig: ApplicationConfig = { providers: [ - provideServerRoutesConfig(serverRoutes, { appShellRoute: 'shell' }), + provideServerRouting(serverRoutes, withAppShell(AppShellComponent)), // ... other providers ... ] }; diff --git a/adev-ja/src/content/guide/hybrid-rendering.md b/adev-ja/src/content/guide/hybrid-rendering.md index 2aa150dc3..b1596f244 100644 --- a/adev-ja/src/content/guide/hybrid-rendering.md +++ b/adev-ja/src/content/guide/hybrid-rendering.md @@ -65,28 +65,31 @@ export const serverRoutes: ServerRoute[] = [ ]; ``` -[`provideServerRoutesConfig`](api/ssr/provideServerRoutesConfig 'API reference')関数を使用して、この設定をアプリケーションに追加できます。 +[`provideServerRouting`](api/ssr/provideServerRouting 'API reference')関数を使用して、この設定をアプリケーションに追加できます。 ```typescript -import { provideServerRoutesConfig } from '@angular/ssr'; +import { provideServerRouting } from '@angular/ssr'; import { serverRoutes } from './app.routes.server'; // app.config.server.ts const serverConfig: ApplicationConfig = { providers: [ provideServerRendering(), - provideServerRoutesConfig(serverRoutes), + provideServerRouting(serverRoutes), // ... other providers ... ] }; ``` -[App Shellパターン](ecosystem/service-workers/app-shell)を使用する場合は、クライアントサイドでレンダリングされたルートのアプリケーションシェルとして使用するルートを指定する必要があります。これを行うには、`appShellRoute`プロパティを持つオプションオブジェクトを`provideServerRoutesConfig`に提供します。 +[App Shellパターン](ecosystem/service-workers/app-shell)を使用する場合は、クライアントサイドでレンダリングされたルートのアプリケーションシェルとして使用するルートを指定する必要があります。これを行うには、`appShellRoute`プロパティを持つオプションオブジェクトを[`provideServerRouting`](api/ssr/provideServerRouting 'API reference')に提供します。 ```typescript +import { provideServerRouting, withAppShell } from '@angular/ssr'; +import { AppShellComponent } from './app-shell/app-shell.component'; + const serverConfig: ApplicationConfig = { providers: [ - provideServerRoutesConfig(serverRoutes, { appShellRoute: 'shell' }), + provideServerRouting(serverRoutes, withAppShell(AppShellComponent)), // ... other providers ... ] }; diff --git a/adev-ja/src/content/guide/i18n/add-package.md b/adev-ja/src/content/guide/i18n/add-package.md index f26fffd69..325c565b4 100644 --- a/adev-ja/src/content/guide/i18n/add-package.md +++ b/adev-ja/src/content/guide/i18n/add-package.md @@ -6,9 +6,10 @@ To add the `@angular/localize` package, use the following command to update the -It adds `types: ["@angular/localize"]` in the TypeScript configuration files as well as the reference to the type definition of `@angular/localize` at the top of the `main.ts` file. +It adds `types: ["@angular/localize"]` in the TypeScript configuration files. +It also adds line `/// ` at the top of the `main.ts` file which is the reference to the type definition. -HELPFUL: For more information about `package.json` and `tsconfig.json` files, see [Workspace npm dependencies][GuideNpmPackages] and [TypeScript Configuration][GuideTsConfig]. +HELPFUL: For more information about `package.json` and `tsconfig.json` files, see [Workspace npm dependencies][GuideNpmPackages] and [TypeScript Configuration][GuideTsConfig]. To learn about Triple-slash Directives visit [Typescript Handbook](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-). If `@angular/localize` is not installed and you try to build a localized version of your project (for example, while using the `i18n` attributes in templates), the [Angular CLI][CliMain] will generate an error, which would contain the steps that you can take to enable i18n for your project. diff --git a/adev-ja/src/content/guide/i18n/locale-id.md b/adev-ja/src/content/guide/i18n/locale-id.md index e298075a1..949dd9745 100644 --- a/adev-ja/src/content/guide/i18n/locale-id.md +++ b/adev-ja/src/content/guide/i18n/locale-id.md @@ -47,7 +47,18 @@ By default, Angular uses `en-US` as the source locale of your project. To change the source locale of your project for the build, complete the following actions. 1. Open the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file. -1. Change the source locale in the `sourceLocale` field. +2. Add or modify the `sourceLocale` field inside the `i18n` section: +```json +{ + "projects": { + "your-project": { + "i18n": { + "sourceLocale": "ca" // Use your desired locale code + } + } + } +} +``` ## What's next diff --git a/adev-ja/src/content/guide/incremental-hydration.en.md b/adev-ja/src/content/guide/incremental-hydration.en.md index 6ba5a5534..a11a7e638 100644 --- a/adev-ja/src/content/guide/incremental-hydration.en.md +++ b/adev-ja/src/content/guide/incremental-hydration.en.md @@ -6,7 +6,7 @@ Tip: Incremental hydration is currently in [developer preview](/reference/releas ## Why use incremental hydration? -Incremental hydration is a performance improvement that builds on top of full application hydration. It can produce smaller initial bundles while still providing an end-user experience that is comparable to a full application hydration experience. Smaller bundles improve initial load times, reducing [First Input Delay (FID)](<(https://web.dev/fid)>) and [Cumulative Layout Shift (CLS)](https://web.dev/cls). +Incremental hydration is a performance improvement that builds on top of full application hydration. It can produce smaller initial bundles while still providing an end-user experience that is comparable to a full application hydration experience. Smaller bundles improve initial load times, reducing [First Input Delay (FID)](https://web.dev/fid) and [Cumulative Layout Shift (CLS)](https://web.dev/cls). Incremental hydration also lets you use deferrable views (`@defer`) for content that may not have been deferrable before. Specifically, you can now use deferrable views for content that is above the fold. Prior to incremental hydration, putting a `@defer` block above the fold would result in placeholder content rendering and then being replaced by the `@defer` block's main template content. This would result in a layout shift. Incremental hydration means the main template of the `@defer` block will render with no layout shift on hydration. diff --git a/adev-ja/src/content/guide/performance/overview.en.md b/adev-ja/src/content/guide/performance/overview.en.md index 1c9488da3..1f9fec2d3 100644 --- a/adev-ja/src/content/guide/performance/overview.en.md +++ b/adev-ja/src/content/guide/performance/overview.en.md @@ -7,5 +7,5 @@ One of the top priorities of any developer is ensuring that their application is | Guides Types | Description | | :---------------------------------------- | :--------------------------------------------------------------------------------------------------------- | | [Server-side rendering](/guide/ssr) | Learn how to leverage rendering pages on the server to improve load times. | -| [Build-time prerendering](/guide/prerendering) | Also known as static-side generation (SSG), is an alternate rendering method to improve load times. | +| [Build-time prerendering](/guide/prerendering) | Also known as static-site generation (SSG), is an alternate rendering method to improve load times. | | [Hydration](/guide/hydration) | A process to improve application performance by restoring its state after server-side rendering and reusing existing DOM structure as much as possible. | diff --git a/adev-ja/src/content/guide/security.en.md b/adev-ja/src/content/guide/security.en.md index e49f904e1..6ad5dffac 100644 --- a/adev-ja/src/content/guide/security.en.md +++ b/adev-ja/src/content/guide/security.en.md @@ -1,6 +1,6 @@ # Security -This topic describes Angular's built-in protections against common web-application vulnerabilities and attacks such as cross-site scripting attacks. +This topic describes Angular's built-in protections against common web application vulnerabilities and attacks such as cross-site scripting attacks. It doesn't cover application-level security, such as authentication and authorization. For more information about the attacks and mitigations described below, see the [Open Web Application Security Project (OWASP) Guide](https://www.owasp.org/index.php/Category:OWASP_Guide_Project). @@ -9,7 +9,7 @@ For more information about the attacks and mitigations described below, see the -Angular is part of Google [Open Source Software Vulnerability Reward Program](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules). [For vulnerabilities in Angular, please submit your report at https://bughunters.google.com](https://bughunters.google.com/report). +Angular is part of Google [Open Source Software Vulnerability Reward Program](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules). For vulnerabilities in Angular, please submit your report at [https://bughunters.google.com](https://bughunters.google.com/report). For more information about how Google handles security issues, see [Google's security philosophy](https://www.google.com/about/appsecurity). @@ -53,8 +53,8 @@ For this reason, it is strongly encouraged to take advantage of these features. *Sanitization* is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM. In many cases, sanitization doesn't change a value at all. -Sanitization depends on context: -A value that's harmless in CSS is potentially dangerous in a URL. +Sanitization depends on a context. +For example, a value that's harmless in CSS is potentially dangerous in a URL. Angular defines the following security contexts: @@ -95,7 +95,7 @@ Avoid directly interacting with the DOM and instead use Angular templates where For cases where this is unavoidable, use the built-in Angular sanitization functions. Sanitize untrusted values with the [DomSanitizer.sanitize](api/platform-browser/DomSanitizer#sanitize) method and the appropriate `SecurityContext`. -That function also accepts values that were marked as trusted using the `bypassSecurityTrust` … functions, and does not sanitize them, as [described below](#trusting-safe-values). +That function also accepts values that were marked as trusted using the `bypassSecurityTrust` functions, and does not sanitize them, as [described below](#trusting-safe-values). ### Trusting safe values diff --git a/adev-ja/src/content/guide/security.md b/adev-ja/src/content/guide/security.md index 2a99601b4..7b4a00a5b 100644 --- a/adev-ja/src/content/guide/security.md +++ b/adev-ja/src/content/guide/security.md @@ -9,7 +9,7 @@ -Angularは、Google [オープンソースソフトウェア脆弱性報酬プログラム](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules)の一部です。[Angularの脆弱性については、https://bughunters.google.comで報告してください](https://bughunters.google.com/report)。 +Angularは、Google [オープンソースソフトウェア脆弱性報酬プログラム](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules)の一部です。Angularの脆弱性については、[https://bughunters.google.com で報告してください](https://bughunters.google.com/report)。 Googleがセキュリティ上の問題をどのように処理するかについては、[Googleのセキュリティポリシー](https://www.google.com/about/appsecurity)を参照してください。 @@ -54,7 +54,7 @@ Angularは、XSSのバグを体系的に阻止するために、すべての値 *サニタイズ*とは、信頼されていない値を検査して、DOMに挿入しても安全な値に変換することです。 多くの場合、サニタイズは値をまったく変更しません。 サニタイズはコンテキストに依存します。 -CSSでは無害な値も、URLでは危険な可能性があります。 +例えば、CSSでは無害な値も、URLでは危険な可能性があります。 Angularは、次のセキュリティコンテキストを定義しています。 @@ -95,7 +95,7 @@ Angularは、値を安全ではないと認識し、自動的にサニタイズ 避けられない場合、組み込みのAngularサニタイズ関数を使用してください。 [DomSanitizer.sanitize](api/platform-browser/DomSanitizer#sanitize)メソッドと適切な`SecurityContext`を使用して、信頼されていない値をサニタイズします。 -その関数は、[以下で説明するように](#trusting-safe-values)、`bypassSecurityTrust`…関数を使用して信頼済みとしてマークされた値も受け取り、サニタイズしません。 +その関数は、[以下で説明するように](#trusting-safe-values)、`bypassSecurityTrust` 関数を使用して信頼済みとしてマークされた値も受け取り、サニタイズしません。 ### 安全な値を信頼する {#trusting-safe-values} diff --git a/adev-ja/src/content/guide/signals/linked-signal.en.md b/adev-ja/src/content/guide/signals/linked-signal.en.md index 595d07d04..8a3c00e83 100644 --- a/adev-ja/src/content/guide/signals/linked-signal.en.md +++ b/adev-ja/src/content/guide/signals/linked-signal.en.md @@ -92,7 +92,7 @@ The `computation` is a function that receives the new value of `source` and a `p ```typescript const activeUser = signal({id: 123, name: 'Morgan', isAdmin: true}); -const activeUserEditCopy = linkedSignal(() => activeUser()), { +const activeUserEditCopy = linkedSignal(() => activeUser(), { // Consider the user as the same if it's the same `id`. equal: (a, b) => a.id === b.id, }); diff --git a/adev-ja/src/content/guide/templates/defer.en.md b/adev-ja/src/content/guide/templates/defer.en.md index 41dd28e95..6355beda7 100644 --- a/adev-ja/src/content/guide/templates/defer.en.md +++ b/adev-ja/src/content/guide/templates/defer.en.md @@ -35,7 +35,7 @@ Angular's compiler produces a [dynamic import](https://developer.mozilla.org/en- This is the primary block that defines the section of content that is lazily loaded. It is not rendered initially– deferred content loads and renders once the specified [trigger](/guide/defer#triggers) occurs or the `when` condition is met. -By default, a @defer block is triggered when the browser state becomes [idle](/guide/defer#on-idle). +By default, a @defer block is triggered when the browser state becomes [idle](/guide/defer#idle). ```angular-html @defer { diff --git a/adev-ja/src/content/guide/templates/defer.md b/adev-ja/src/content/guide/templates/defer.md index a50660c08..ebda5b0a1 100644 --- a/adev-ja/src/content/guide/templates/defer.md +++ b/adev-ja/src/content/guide/templates/defer.md @@ -35,7 +35,7 @@ Angularのコンパイラは、`@defer`ブロックで使用される各コン これは、遅延読み込みされるコンテンツのセクションを定義するプライマリブロックです。これは最初はレンダリングされません。遅延コンテンツは、指定された[トリガー](/guide/defer#triggers)が発生するか、`when`条件が満たされたときに読み込まれてレンダリングされます。 -デフォルトでは、`@defer`ブロックはブラウザの状態が[アイドル](/guide/defer#on-idle)になるとトリガーされます。 +デフォルトでは、`@defer`ブロックはブラウザの状態が[アイドル](/guide/defer#idle)になるとトリガーされます。 ```angular-html @defer { 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 0091a4ca7..03ae18b5d 100644 --- a/adev-ja/src/content/guide/templates/expression-syntax.en.md +++ b/adev-ja/src/content/guide/templates/expression-syntax.en.md @@ -8,21 +8,22 @@ Angular supports a subset of [literal values](https://developer.mozilla.org/en-U ### Supported value literals -| Literal type | Example values | -| ------------ | ------------------------------- | -| String | `'Hello'`, `"World"` | -| Boolean | `true`, `false` | -| Number | `123`, `3.14` | -| Object | `{name: 'Alice'}` | -| Array | `['Onion', 'Cheese', 'Garlic']` | -| null | `null` | +| Literal type | Example values | +| ---------------- | ------------------------------- | +| String | `'Hello'`, `"World"` | +| Boolean | `true`, `false` | +| Number | `123`, `3.14` | +| Object | `{name: 'Alice'}` | +| Array | `['Onion', 'Cheese', 'Garlic']` | +| null | `null` | +| Template string | `` `Hello ${name}` `` | ### Unsupported literals -| Literal type | Example value | -| --------------- | --------------------- | -| Template string | `` `Hello ${name}` `` | -| RegExp | `/\d+/` | +| Literal type | Example value | +| ------------------------ | ------------------------- | +| RegExp | `/\d+/` | +| Tagged template string | `` tag`Hello ${name}` `` | ## Globals diff --git a/adev-ja/src/content/guide/templates/expression-syntax.md b/adev-ja/src/content/guide/templates/expression-syntax.md index 1d052f82f..0e2414c03 100644 --- a/adev-ja/src/content/guide/templates/expression-syntax.md +++ b/adev-ja/src/content/guide/templates/expression-syntax.md @@ -16,13 +16,14 @@ Angularは、[リテラル値](https://developer.mozilla.org/en-US/docs/Glossary | オブジェクト | `{name: 'Alice'}` | | 配列 | `['Onion', 'Cheese', 'Garlic']` | | null | `null` | +| テンプレートリテラル | `` `Hello ${name}` `` | ### サポートされていないリテラル | リテラルタイプ | 例 | | --------------- | ------------------- | -| テンプレート文字列 | `` `Hello ${name}` `` | | 正規表現 | `/\d+/` | +| タグ付きテンプレートリテラル | `` tag`Hello ${name}` `` | ## グローバル diff --git a/adev-ja/src/content/guide/templates/two-way-binding.en.md b/adev-ja/src/content/guide/templates/two-way-binding.en.md index 610b09117..bfc141a4e 100644 --- a/adev-ja/src/content/guide/templates/two-way-binding.en.md +++ b/adev-ja/src/content/guide/templates/two-way-binding.en.md @@ -36,7 +36,7 @@ To use two-way binding with native form controls, you need to: 1. Use the `ngModel` directive with the two-way binding syntax (e.g., `[(ngModel)]`) 1. Assign it the state that you want it to update (e.g., `firstName`) -Once that is setup, Angular will ensure that any updates in the text input will reflect correctly inside of the component state! +Once that is set up, Angular will ensure that any updates in the text input will reflect correctly inside of the component state! Learn more about [`NgModel`](guide/directives#displaying-and-updating-properties-with-ngmodel) in the official docs. @@ -68,59 +68,51 @@ export class AppComponent { ```angular-ts // './counter/counter.component.ts'; -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, model } from '@angular/core'; @Component({ selector: 'app-counter', template: ` - {{ count }} + {{ count() }} `, }) export class CounterComponent { - @Input() count: number; - @Output() countChange = new EventEmitter(); + count = model(0); updateCount(amount: number): void { - this.count += amount; - this.countChange.emit(this.count); + this.count.update(currentCount => currentCount + amount); } } ``` ### Enabling two-way binding between components -If we break down the example above to its core , each two-way binding for components requires the following: +If we break down the example above to its core, each two-way binding for components requires the following: -The child component must contain: - -1. An `@Input()` property -1. A corresponding `@Output()` event emitter that has the exact same name as the input property plus "Change" at the end. The emitter must also emit the same type as the input property. -1. A method that emits to the event emitter with the updated value of the `@Input()`. +The child component must contain a `model` property. Here is a simplified example: ```angular-ts // './counter/counter.component.ts'; -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, model } from '@angular/core'; @Component({ // Omitted for brevity }) export class CounterComponent { - @Input() count: number; - @Output() countChange = new EventEmitter(); + count = model(0); updateCount(amount: number): void { - this.count += amount; - this.countChange.emit(this.count); + this.count.update(currentCount => currentCount + amount); } } ``` The parent component must: -1. Wrap the `@Input()` property name in the two-way binding syntax. -1. Specify the corresponding property to which the updated value is assigned +1. Wrap the `model` property name in the two-way binding syntax. +1. Assign a property or a signal to the `model` property. Here is a simplified example: diff --git a/adev-ja/src/content/guide/templates/two-way-binding.md b/adev-ja/src/content/guide/templates/two-way-binding.md index 08f63645e..31a73cca6 100644 --- a/adev-ja/src/content/guide/templates/two-way-binding.md +++ b/adev-ja/src/content/guide/templates/two-way-binding.md @@ -4,13 +4,13 @@ ## 構文 -双方向バインディングの構文は、角括弧 `[]` と丸括弧 `()` を組み合わせた `[()]` です。これはプロパティバインディングの構文 `[]` とイベントバインディングの構文 `()` を組み合わせたものです。Angularコミュニティでは、この構文を非公式に「バナナインボックス」と呼んでいます。 +双方向バインディングの構文は、角括弧`[]`と丸括弧`()`を組み合わせた`[()]`です。これはプロパティバインディングの構文`[]`とイベントバインディングの構文`()`を組み合わせたものです。Angularコミュニティでは、この構文を非公式に「バナナインボックス」と呼んでいます。 ## フォームコントロールでの双方向バインディング -開発者は、ユーザーがコントロールを操作したときに、コンポーネントデータとフォームコントロールを同期させるために、双方向バインディングを頻繁に使用します。たとえば、ユーザーがテキスト入力に入力すると、コンポーネントの状態が更新されます。 +開発者は、ユーザーがコントロールを操作したときに、コンポーネントデータとフォームコントロールを同期させるため、双方向バインディングを頻繁に使用します。例えば、ユーザーがテキスト入力に入力すると、コンポーネントの状態が更新されます。 -次の例では、ページの `firstName` 属性が動的に更新されます。 +次の例では、ページの`firstName`属性が動的に更新されます。 ```angular-ts import { Component } from '@angular/core'; @@ -32,9 +32,9 @@ export class AppComponent { ネイティブフォームコントロールで双方向バインディングを使用するには、次の手順を実行する必要があります。 -1. `@angular/forms` から `FormsModule` をインポートする -1. 双方向バインディング構文（例：`[(ngModel)]`）で `ngModel` ディレクティブを使用する -1. 更新する状態（例：`firstName`）を割り当てる +1. `@angular/forms`から`FormsModule`をインポートする +2. 双方向バインディング構文（例：`[(ngModel)]`）で`ngModel`ディレクティブを使用する +3. 更新する状態（例：`firstName`）を割り当てる これらが設定されると、Angularはテキスト入力の更新がコンポーネントの状態に正しく反映されるようにします。 @@ -42,9 +42,9 @@ export class AppComponent { ## コンポーネント間の双方向バインディング -親コンポーネントと子コンポーネント間の双方向バインディングを活用するには、フォーム要素と比較して、より多くの構成が必要です。 +親コンポーネントと子コンポーネント間の双方向バインディングを活用するには、フォーム要素と比較して、より多くの設定が必要です。 -ここでは、`AppComponent` が初期カウント状態を設定しますが、カウンターのUIを更新およびレンダリングするためのロジックは、主にその子である `CounterComponent` にある例を示します。 +ここでは、`AppComponent`が初期カウント状態を設定しますが、カウンターのUIを更新およびレンダリングするためのロジックは、主にその子である`CounterComponent`にある例を示します。 ```angular-ts // ./app.component.ts @@ -68,23 +68,21 @@ export class AppComponent { ```angular-ts // './counter/counter.component.ts'; -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, model } from '@angular/core'; @Component({ selector: 'app-counter', template: ` - {{ count }} + {{ count() }} `, }) export class CounterComponent { - @Input() count: number; - @Output() countChange = new EventEmitter(); + count = model(0); updateCount(amount: number): void { - this.count += amount; - this.countChange.emit(this.count); + this.count.update(currentCount => currentCount + amount); } } ``` @@ -93,34 +91,28 @@ export class CounterComponent { 上記の例をコアに分解すると、コンポーネントの双方向バインディングごとに、次のものが必要です。 -子コンポーネントには、次のものが必要です。 - -1. `@Input()` プロパティ -1. `@Input()` プロパティと同じ名前で、最後に「Change」が追加された対応する `@Output()` イベントエミッター。エミッターは、`@Input()` プロパティと同じ型をエミットする必要があります。 -1. `@Input()` の更新された値をイベントエミッターにエミットするメソッド +子コンポーネントは`model`プロパティを含んでいる必要があります。 これは簡略化された例です。 ```angular-ts // './counter/counter.component.ts'; -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, model } from '@angular/core'; -@Component({ // 省略 }) +@Component({ // Omitted for brevity }) export class CounterComponent { - @Input() count: number; - @Output() countChange = new EventEmitter(); + count = model(0); updateCount(amount: number): void { - this.count += amount; - this.countChange.emit(this.count); + this.count.update(currentCount => currentCount + amount); } } ``` 親コンポーネントには、次のものが必要です。 -1. `@Input()` プロパティ名を双方向バインディング構文で囲む。 -1. 更新された値が割り当てられる対応するプロパティを指定する +1. `model`プロパティ名を双方向バインディング構文で囲む。 +2. プロパティまたはシグナルを`model`プロパティに割り当てる。 これは簡略化された例です。 diff --git a/adev-ja/src/content/guide/testing/component-harnesses-overview.md b/adev-ja/src/content/guide/testing/component-harnesses-overview.md index a6ebb4ab7..0887ef536 100644 --- a/adev-ja/src/content/guide/testing/component-harnesses-overview.md +++ b/adev-ja/src/content/guide/testing/component-harnesses-overview.md @@ -27,4 +27,4 @@ Many developers can be categorized by one of the following developer type catego | Component harness authors | Developers who maintain some reusable Angular components and want to create a test harness for its users to use in their tests. For example, an author of a third party Angular component library or a developer who maintains a set of common components for a large Angular application. | [Creating component harnesses for your components](guide/testing/creating-component-harnesses ) | | Harness environment authors | Developers who want to add support for using component harnesses in additional testing environments. For information on supported testing environments out-of-the-box, see the [test harness environments and loaders](guide/testing/using-component-harnesses#test-harness-environments-and-loaders). | [Adding support for additional testing environments](guide/testing/component-harnesses-testing-environments) | -For the full API reference, please see the [Angular CDK's component harness API reference page](https://material.angular.io/cdk/test-harnesses/api). +For the full API reference, please see the [Angular CDK's component harness API reference page](https://material.angular.io/cdk/testing/api). diff --git a/adev-ja/src/content/guide/testing/component-harnesses-testing-environments.md b/adev-ja/src/content/guide/testing/component-harnesses-testing-environments.md index 157ce6ba6..9ada0c8ea 100644 --- a/adev-ja/src/content/guide/testing/component-harnesses-testing-environments.md +++ b/adev-ja/src/content/guide/testing/component-harnesses-testing-environments.md @@ -26,7 +26,7 @@ The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a s Every test environment must define a `TestElement` implementation. The `TestElement` interface serves as an environment-agnostic representation of a DOM element. It enables harnesses to interact with DOM elements regardless of the underlying environment. Because some environments don't support interacting with DOM elements synchronously (e.g. WebDriver), all `TestElement` methods are asynchronous, returning a `Promise` with the result of the operation. -`TestElement` offers a number of methods to interact with the underlying DOM such as `blur()`, `click()`, `getAttribute()`, and more. See the [TestElement API reference page](https://material.angular.io/cdk/test-harnesses/api#TestElement) for the full list of methods. +`TestElement` offers a number of methods to interact with the underlying DOM such as `blur()`, `click()`, `getAttribute()`, and more. See the [TestElement API reference page](https://material.angular.io/cdk/testing/api#TestElement) for the full list of methods. The `TestElement` interface consists largely of methods that resemble methods available on `HTMLElement`. Similar methods exist in most test environments, which makes implementing the methods fairly straightforward. However, one important difference to note when implementing the `sendKeys` method, is that the key codes in the `TestKey` enum likely differ from the key codes used in the test environment. Environment authors should maintain a mapping from `TestKey` codes to the codes used in the particular testing environment. @@ -55,5 +55,5 @@ The [`TestbedHarnessEnvironment`](https://github.com/angular/components/blob/mai ## Handling auto change detection In order to support the `manualChangeDetection` and parallel APIs, your environment should install a handler for the auto change detection status. -When your environment wants to start handling the auto change detection status it can call `handleAutoChangeDetectionStatus(handler)`. The handler function will receive a `AutoChangeDetectionStatus` which has two properties `isDisabled` and `onDetectChangesNow()`. See the [AutoChangeDetectionStatus API reference page](https://material.angular.io/cdk/test-harnesses/api#AutoChangeDetectionStatus) for more information. +When your environment wants to start handling the auto change detection status it can call `handleAutoChangeDetectionStatus(handler)`. The handler function will receive a `AutoChangeDetectionStatus` which has two properties `isDisabled` and `onDetectChangesNow()`. See the [AutoChangeDetectionStatus API reference page](https://material.angular.io/cdk/testing/api#AutoChangeDetectionStatus) for more information. If your environment wants to stop handling auto change detection status it can call `stopHandlingAutoChangeDetectionStatus()`. 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 ff10991b4..abdcd6d8d 100644 --- a/adev-ja/src/content/guide/testing/components-scenarios.en.md +++ b/adev-ja/src/content/guide/testing/components-scenarios.en.md @@ -83,7 +83,7 @@ The first test shows the benefit of automatic change detection. The second and third test reveal an important limitation. The Angular testing environment does not run change detection synchronously when updates happen inside the test case that changed the component's `title`. -The test must call `await fixture.whenStable` to wait for another of change detection. +The test must call `await fixture.whenStable` to wait for another round of change detection. HELPFUL: Angular does not know about direct updates to values that are not signals. The easiest way to ensure that change detection will be scheduled is to use signals for values read in the template. @@ -554,7 +554,7 @@ It confirms that the selected `DashboardHeroComponent` hero really does find its A *routing component* is a component that tells the `Router` to navigate to another component. The `DashboardComponent` is a *routing component* because the user can navigate to the `HeroDetailComponent` by clicking on one of the *hero buttons* on the dashboard. -Angular provides test helpers to reduce boilerplate and more effectively test code which depends `HttpClient`. The `provideRouter` function can be used directly in the test module as well. +Angular provides test helpers to reduce boilerplate and more effectively test code which depends on `HttpClient`. The `provideRouter` function can be used directly in the test module as well. diff --git a/adev-ja/src/content/guide/testing/creating-component-harnesses.md b/adev-ja/src/content/guide/testing/creating-component-harnesses.md index c412dd9f0..692b8d8cd 100644 --- a/adev-ja/src/content/guide/testing/creating-component-harnesses.md +++ b/adev-ja/src/content/guide/testing/creating-component-harnesses.md @@ -61,7 +61,7 @@ Each instance of a `ComponentHarness` subclass represents a particular instance `ComponentHarness` also offers several methods for locating elements within the component's DOM. These methods are `locatorFor()`, `locatorForOptional()`, and `locatorForAll()`. These methods create functions that find elements, they do not directly find elements. This approach safeguards against caching references to out-of-date elements. For example, when an `ngIf` hides and then shows an element, the result is a new DOM element; using functions ensures that tests always reference the current state of the DOM. -See the [ComponentHarness API reference page](https://material.angular.io/cdk/test-harnesses/api#ComponentHarness) for the full list details of the different `locatorFor` methods. +See the [ComponentHarness API reference page](https://material.angular.io/cdk/testing/api#ComponentHarness) for the full list details of the different `locatorFor` methods. For example, the `MyPopupHarness` example discussed above could provide methods to get the trigger and content elements as follows: @@ -81,7 +81,7 @@ class MyPopupHarness extends ComponentHarness { `TestElement` is an abstraction designed to work across different test environments (Unit tests, WebDriver, etc). When using harnesses, you should perform all DOM interaction via this interface. Other means of accessing DOM elements, such as `document.querySelector()`, do not work in all test environments. -`TestElement` has a number of methods to interact with the underlying DOM, such as `blur()`, `click()`, `getAttribute()`, and more. See the [TestElement API reference page](https://material.angular.io/cdk/test-harnesses/api#TestElement) for the full list of methods. +`TestElement` has a number of methods to interact with the underlying DOM, such as `blur()`, `click()`, `getAttribute()`, and more. See the [TestElement API reference page](https://material.angular.io/cdk/testing/api#TestElement) for the full list of methods. Do not expose `TestElement` instances to harness users unless it's an element the component consumer defines directly, such as the component's host element. Exposing `TestElement` instances for internal elements leads users to depend on a component's internal DOM structure. @@ -112,7 +112,7 @@ class MyPopupHarness extends ComponentHarness { Larger components often compose sub-components. You can reflect this structure in a component's harness as well. Each of the `locatorFor` methods on `ComponentHarness` has an alternate signature that can be used for locating sub-harnesses rather than elements. -See the [ComponentHarness API reference page](https://material.angular.io/cdk/test-harnesses/api#ComponentHarness) for the full list of the different locatorFor methods. +See the [ComponentHarness API reference page](https://material.angular.io/cdk/testing/api#ComponentHarness) for the full list of the different locatorFor methods. For example, consider a menu build using the popup from above: @@ -165,7 +165,7 @@ When a page contains multiple instances of a particular component, you may want You should create a static `with()` method on each `ComponentHarness` subclass that returns a `HarnessPredicate` for that class. This allows test authors to write easily understandable code, e.g. `loader.getHarness(MyMenuHarness.with({selector: '#menu1'}))`. In addition to the standard selector and ancestor options, the `with` method should add any other options that make sense for the particular subclass. -Harnesses that need to add additional options should extend the `BaseHarnessFilters` interface and additional optional properties as needed. `HarnessPredicate` provides several convenience methods for adding options: `stringMatches()`, `addOption()`, and `add()`. See the [HarnessPredicate API page](https://material.angular.io/cdk/test-harnesses/api#HarnessPredicate) for the full description. +Harnesses that need to add additional options should extend the `BaseHarnessFilters` interface and additional optional properties as needed. `HarnessPredicate` provides several convenience methods for adding options: `stringMatches()`, `addOption()`, and `add()`. See the [HarnessPredicate API page](https://material.angular.io/cdk/testing/api#HarnessPredicate) for the full description. For example, when working with a menu it is useful to filter based on trigger text and to filter menu items based on their text: @@ -237,7 +237,7 @@ class MyMenuHarness extends ComponentHarness { Some components project additional content into the component's template. See the [content projection guide](guide/components/content-projection) for more information. -Add a `HarnessLoader` instance scoped to the element containing the `` when you create a harness for a component that uses content projection. This allows the user of the harness to load additional harnesses for whatever components were passed in as content. `ComponentHarness` has several methods that can be used to create HarnessLoader instances for cases like this: `harnessLoaderFor()`, `harnessLoaderForOptional()`, `harnessLoaderForAll()`. See the [HarnessLoader interface API reference page](https://material.angular.io/cdk/test-harnesses/api#HarnessLoader) for more details. +Add a `HarnessLoader` instance scoped to the element containing the `` when you create a harness for a component that uses content projection. This allows the user of the harness to load additional harnesses for whatever components were passed in as content. `ComponentHarness` has several methods that can be used to create HarnessLoader instances for cases like this: `harnessLoaderFor()`, `harnessLoaderForOptional()`, `harnessLoaderForAll()`. See the [HarnessLoader interface API reference page](https://material.angular.io/cdk/testing/api#HarnessLoader) for more details. For example, the `MyPopupHarness` example from above can extend `ContentContainerComponentHarness` to add support to load harnesses within the `` of the component. diff --git a/adev-ja/src/content/guide/testing/using-component-harnesses.md b/adev-ja/src/content/guide/testing/using-component-harnesses.md index 3eaae5847..884b33a33 100644 --- a/adev-ja/src/content/guide/testing/using-component-harnesses.md +++ b/adev-ja/src/content/guide/testing/using-component-harnesses.md @@ -25,7 +25,7 @@ Additional testing environments require custom bindings. See the [adding harness ### Using the loader from `TestbedHarnessEnvironment` for unit tests -For unit tests you can create a harness loader from [TestbedHarnessEnvironment](https://material.angular.io/cdk/test-harnesses/api#TestbedHarnessEnvironment). This environment uses a [component fixture](api/core/testing/ComponentFixture) created by Angular's `TestBed`. +For unit tests you can create a harness loader from [TestbedHarnessEnvironment](https://material.angular.io/cdk/testing/api#TestbedHarnessEnvironment). This environment uses a [component fixture](api/core/testing/ComponentFixture) created by Angular's `TestBed`. To create a harness loader rooted at the fixture's root element, use the `loader()` method: @@ -61,7 +61,7 @@ const myComponentHarness = await loader.getHarness(MyComponent); Harness loader instances correspond to a specific DOM element and are used to create component harness instances for elements under that specific element. -To get `ComponentHarness` for the first instance of the element, use the `getHarness()` method. You get all `ComponentHarness` instances, use the `getAllHarnesses()` method. +To get `ComponentHarness` for the first instance of the element, use the `getHarness()` method. To get all `ComponentHarness` instances, use the `getAllHarnesses()` method. // Get harness for first instance of the element @@ -149,7 +149,7 @@ For more details refer to the specific harness documentation since additional fi ## Using test harness APIs -While every harness defines an API specific to its corresponding component, they all share a common base class, [ComponentHarness](https://material.angular.io/cdk/test-harnesses/api#ComponentHarness). This base class defines a static property, `hostSelector`, that matches the harness class to instances of the component in the DOM. +While every harness defines an API specific to its corresponding component, they all share a common base class, [ComponentHarness](https://material.angular.io/cdk/testing/api#ComponentHarness). This base class defines a static property, `hostSelector`, that matches the harness class to instances of the component in the DOM. Beyond that, the API of any given harness is specific to its corresponding component; refer to the component's documentation to learn how to use a specific harness. diff --git a/adev-ja/src/content/introduction/installation.en.md b/adev-ja/src/content/introduction/installation.en.md index a53f697a5..f2aed2955 100644 --- a/adev-ja/src/content/introduction/installation.en.md +++ b/adev-ja/src/content/introduction/installation.en.md @@ -13,7 +13,7 @@ If you just want to play around with Angular in your browser without setting up -## Setup a new project locally +## Set up a new project locally If you're starting a new project, you'll most likely want to create a local project so that you can use tooling such as Git. @@ -22,6 +22,7 @@ If you're starting a new project, you'll most likely want to create a local proj - **Node.js** - v[^18.19.1 or newer](/reference/versions) - **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/) - **Terminal** - Required for running Angular CLI commands +- **Development Tool** - To improve your development workflow, we recommend the [Angular Language Service](/tools/language-service) ### Instructions @@ -31,11 +32,29 @@ The following guide will walk you through setting up a local Angular project. Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.com/), you can open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)) and run the following command: - - -npm install -g @angular/cli - - + + + npm install -g @angular/cli + + + pnpm install -g @angular/cli + + + yarn global add @angular/cli + + + bun install -g @angular/cli + + + If you are having issues running this command in Windows or Unix, check out the [CLI docs](/tools/cli/setup-local#install-the-angular-cli) for more info. diff --git a/adev-ja/src/content/introduction/installation.md b/adev-ja/src/content/introduction/installation.md index 89f9dc84c..b7c5464a5 100644 --- a/adev-ja/src/content/introduction/installation.md +++ b/adev-ja/src/content/introduction/installation.md @@ -22,6 +22,7 @@ - **Node.js** - v[^18.19.1以降](/reference/versions) - **テキストエディタ** - [Visual Studio Code](https://code.visualstudio.com/)を推奨 - **ターミナル** - Angular CLIコマンドを実行するために必要 +- **開発ツール** - 開発ワークフローを改善するために、[Angular Language Service](/tools/language-service) をおすすめします ### 手順 @@ -31,11 +32,29 @@ ターミナルを開き（[Visual Studio Code](https://code.visualstudio.com/)を使用している場合は、[統合ターミナル](https://code.visualstudio.com/docs/editor/integrated-terminal)を開くことができます）、次のコマンドを実行します。 - - -npm install -g @angular/cli - - + + + npm install -g @angular/cli + + + pnpm install -g @angular/cli + + + yarn global add @angular/cli + + + bun install -g @angular/cli + + + WindowsまたはUnixでこのコマンドを実行する際に問題が発生した場合は、[CLIドキュメント](/tools/cli/setup-local#install-the-angular-cli)を参照してください。 diff --git a/adev-ja/src/content/reference/errors/NG0403.en.md b/adev-ja/src/content/reference/errors/NG0403.en.md index fd54ce65b..a78c1d99c 100644 --- a/adev-ja/src/content/reference/errors/NG0403.en.md +++ b/adev-ja/src/content/reference/errors/NG0403.en.md @@ -35,7 +35,7 @@ platformBrowser().bootstrapModule(AppModule); ## Debugging the error -Please make sure that the NgModule that is used for bootstrapping is setup correctly: +Please make sure that the NgModule that is used for bootstrapping is set up correctly: - either the `bootstrap` property exists (and contains a non-empty array) in the `@NgModule` annotation - or the `ngDoBootstrap` method exists on the NgModule class diff --git a/adev-ja/src/content/reference/migrations/outputs.md b/adev-ja/src/content/reference/migrations/outputs.md index 9ca85a326..bc662f8ad 100644 --- a/adev-ja/src/content/reference/migrations/outputs.md +++ b/adev-ja/src/content/reference/migrations/outputs.md @@ -80,7 +80,7 @@ ng generate @angular/core:output-migration --path src/app/sub-folder ## Exceptions In some cases, the migration will not touch the code. -One of these excpetions is the case where the event is used with a `pipe()` method. +One of these exceptions is the case where the event is used with a `pipe()` method. The following code won't be migrated: ```typescript @@ -93,4 +93,4 @@ export class MyDialogComponent { this.close.pipe(); } } -``` \ No newline at end of file +``` diff --git a/adev-ja/src/content/reference/migrations/overview.md b/adev-ja/src/content/reference/migrations/overview.md index 132beae45..847cc99d6 100644 --- a/adev-ja/src/content/reference/migrations/overview.md +++ b/adev-ja/src/content/reference/migrations/overview.md @@ -24,7 +24,10 @@ Learn about how you can migrate your existing angular project to the latest feat Convert existing decorator query fields to the improved signal queries API. The API is now production ready. - + Clean up unused imports in your project. + + Convert component templates to use self-closing tags where possible. + diff --git a/adev-ja/src/content/reference/migrations/self-closing-tags.md b/adev-ja/src/content/reference/migrations/self-closing-tags.md new file mode 100644 index 000000000..d8a103007 --- /dev/null +++ b/adev-ja/src/content/reference/migrations/self-closing-tags.md @@ -0,0 +1,26 @@ +# Migration to self-closing tags + +Self-closing tags are supported in Angular templates since [v16](https://blog.angular.dev/angular-v16-is-here-4d7a28ec680d#7065). . + +This schematic migrates the templates in your application to use self-closing tags. + +Run the schematic using the following command: + + + +ng generate @angular/core:self-closing-tag + + + + +#### Before + + + + + + + + + + diff --git a/adev-ja/src/content/reference/migrations/signal-inputs.md b/adev-ja/src/content/reference/migrations/signal-inputs.md index d2b31625a..f94d24afb 100644 --- a/adev-ja/src/content/reference/migrations/signal-inputs.md +++ b/adev-ja/src/content/reference/migrations/signal-inputs.md @@ -49,18 +49,18 @@ export class MyComponent { import {Component, input} from '@angular/core'; @Component({ -template: `Name: {{name() ?? ''}}` + template: `Name: {{name() ?? ''}}` }) export class MyComponent { -readonly name = input(); + readonly name = input(); -someMethod(): number { -const name = this.name(); -if (name) { -return name.length; -} -return -1; -} + someMethod(): number { + const name = this.name(); + if (name) { + return name.length; + } + return -1; + } } diff --git a/adev-ja/src/content/reference/releases.en.md b/adev-ja/src/content/reference/releases.en.md index c8fc4124b..445ebdfdf 100644 --- a/adev-ja/src/content/reference/releases.en.md +++ b/adev-ja/src/content/reference/releases.en.md @@ -76,7 +76,7 @@ HELPFUL: Approximate dates are offered as general guidance and are subject to ch |:--------|:-------------------| | v19.1 | Week of 2025-01-13 | | v19.2 | Week of 2025-02-24 | -| v20.0 | Week of 2025-05-19 | +| v20.0 | Week of 2025-05-26 | ### Support window diff --git a/adev-ja/src/content/reference/releases.md b/adev-ja/src/content/reference/releases.md index 8aed3a520..ff7f6954c 100644 --- a/adev-ja/src/content/reference/releases.md +++ b/adev-ja/src/content/reference/releases.md @@ -76,7 +76,7 @@ HELPFUL: 概算の日付は一般的なガイダンスとして提供されて |:--------|:-------------------| | v19.1 | Week of 2025-01-13 | | v19.2 | Week of 2025-02-24 | -| v20.0 | Week of 2025-05-19 | +| v20.0 | Week of 2025-05-26 | ### サポート期間 diff --git a/adev-ja/src/content/reference/versions.en.md b/adev-ja/src/content/reference/versions.en.md index 71c8caceb..eaf60db85 100644 --- a/adev-ja/src/content/reference/versions.en.md +++ b/adev-ja/src/content/reference/versions.en.md @@ -9,6 +9,7 @@ This table covers [Angular versions under active support](reference/releases#act | Angular | Node.js | TypeScript | RxJS | | ------------------ | ------------------------------------ | -------------- | ------------------ | +| 19.2.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.9.0 | ^6.5.3 \|\| ^7.4.0 | | 19.1.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.8.0 | ^6.5.3 \|\| ^7.4.0 | | 19.0.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.7.0 | ^6.5.3 \|\| ^7.4.0 | | 18.1.x \|\| 18.2.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.4.0 <5.6.0 | ^6.5.3 \|\| ^7.4.0 | diff --git a/adev-ja/src/content/reference/versions.md b/adev-ja/src/content/reference/versions.md index 77bd5e54d..d12863285 100644 --- a/adev-ja/src/content/reference/versions.md +++ b/adev-ja/src/content/reference/versions.md @@ -9,6 +9,7 @@ Node.js、TypeScript、RxJSのバージョンを示しています。 | Angular | Node.js | TypeScript | RxJS | | ------------------ | ------------------------------------ | -------------- | ------------------ | +| 19.2.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.9.0 | ^6.5.3 \|\| ^7.4.0 | | 19.1.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.8.0 | ^6.5.3 \|\| ^7.4.0 | | 19.0.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.7.0 | ^6.5.3 \|\| ^7.4.0 | | 18.1.x \|\| 18.2.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.4.0 <5.6.0 | ^6.5.3 \|\| ^7.4.0 | diff --git a/adev-ja/src/content/tools/cli/build.md b/adev-ja/src/content/tools/cli/build.md index 426835b46..f6f2140eb 100644 --- a/adev-ja/src/content/tools/cli/build.md +++ b/adev-ja/src/content/tools/cli/build.md @@ -8,9 +8,9 @@ Angular CLI includes four builders typically used as `build` targets: | Builder | Purpose | | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `@angular-devkit/build-angular:browser` | Bundles a client-side application for use in a browser with [webpack](https://webpack.js.org/). | -| `@angular-devkit/build-angular:browser-esbuild` | Bundles a client-side application for use in a browser with [esbuild](https://esbuild.github.io/). See [`browser-esbuild` documentation](tools/cli/build-system-migration#manual-migration-to-the-compatibility-builder) for more information. | | `@angular-devkit/build-angular:application` | Builds an application with a client-side bundle, a Node server, and build-time prerendered routes with [esbuild](https://esbuild.github.io/). | +| `@angular-devkit/build-angular:browser-esbuild` | Bundles a client-side application for use in a browser with [esbuild](https://esbuild.github.io/). See [`browser-esbuild` documentation](tools/cli/build-system-migration#manual-migration-to-the-compatibility-builder) for more information. | +| `@angular-devkit/build-angular:browser` | Bundles a client-side application for use in a browser with [webpack](https://webpack.js.org/). | | `@angular-devkit/build-angular:ng-packagr` | Builds an Angular library adhering to [Angular Package Format](tools/libraries/angular-package-format). | Applications generated by `ng new` use `@angular-devkit/build-angular:application` by default. @@ -153,3 +153,9 @@ Avoid expanding this list to more browsers. Even if your application code more b You should only ever _reduce_ the set of browsers or versions in this list. HELPFUL: Use [browsersl.ist](https://browsersl.ist) to display compatible browsers for a `browserslist` query. + +## Configuring Tailwind + +Angular supports [Tailwind](https://tailwindcss.com/), a utility-first CSS framework. + +Follow the [Tailwind documentation](https://tailwindcss.com/docs/installation/framework-guides/angular) for integrating with Angular CLI. diff --git a/adev-ja/src/content/tools/cli/end-to-end.md b/adev-ja/src/content/tools/cli/end-to-end.md index 00d235088..c1f888b49 100644 --- a/adev-ja/src/content/tools/cli/end-to-end.md +++ b/adev-ja/src/content/tools/cli/end-to-end.md @@ -2,7 +2,7 @@ End-to-end or (E2E) testing is a form of testing used to assert your entire application works as expected from start to finish or _"end-to-end"_. E2E testing differs from unit testing in that it is completely decoupled from the underlying implementation details of your code. It is typically used to validate an application in a way that mimics the way a user would interact with it. This page serves as a guide to getting started with end-to-end testing in Angular using the Angular CLI. -## Setup E2E Testing +## Set Up E2E Testing The Angular CLI downloads and installs everything you need to run end-to-end tests for your Angular application. @@ -36,7 +36,7 @@ Puppeteer -If you don't find the test runner you would like you use from the list above, you can add manually add a package using `ng add`. +If you don't find the test runner you would like to use from the list above, you can manually add a package using `ng add`. ## Running E2E Tests diff --git a/adev-ja/src/content/tools/cli/setup-local.md b/adev-ja/src/content/tools/cli/setup-local.md index f540d1228..87a87af9f 100644 --- a/adev-ja/src/content/tools/cli/setup-local.md +++ b/adev-ja/src/content/tools/cli/setup-local.md @@ -37,11 +37,29 @@ See [Angular's version compatibility](reference/versions) guide for more informa To install the Angular CLI, open a terminal window and run the following command: - - -npm install -g @angular/cli - - + + + npm install -g @angular/cli + + + pnpm install -g @angular/cli + + + yarn global add @angular/cli + + + bun install -g @angular/cli + + + ### Powershell execution policy @@ -58,14 +76,32 @@ Carefully read the message displayed after executing the command and follow the ### Unix permissions -On some Unix-like setups, global npm scripts may be owned by the root user, so to the above command may fail with a permission error. +On some Unix-like setups, global scripts may be owned by the root user, so to the above command may fail with a permission error. Run with `sudo` to execute the command as the root user and enter your password when prompted: - - -sudo npm install -g @angular/cli - - + + + sudo npm install -g @angular/cli + + + sudo pnpm install -g @angular/cli + + + sudo yarn global add @angular/cli + + + sudo bun install -g @angular/cli + + + Make sure you understand the implications of running commands as root. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md index 927bb72da..4464975e2 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md @@ -2,7 +2,7 @@ For most apps, there comes a point where the app requires more than a single page. When that time inevitably comes, routing becomes a big part of the performance story for users. -In this activity, you'll learn how to setup and configure your app to use Angular Router. +In this activity, you'll learn how to set up and configure your app to use Angular Router.
    @@ -71,6 +71,6 @@ export class AppComponent {} -Your app is now setup to use Angular Router. Nice work! 🙌 +Your app is now set up to use Angular Router. Nice work! 🙌 Keep the momentum going to learn the next step of defining the routes for our app. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md index 08dbb5bc9..47483325a 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md @@ -4,7 +4,7 @@ Forms are a big part of many apps because they enable your app to accept user in In Angular, there are two types of forms: template-driven and reactive. You'll learn about both over the next few activities. -In this activity, you'll learn how to setup a form using a template-driven approach. +In this activity, you'll learn how to set up a form using a template-driven approach.
    diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md index 1e6a8f867..f1e673d37 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md @@ -1,6 +1,6 @@ # Getting form control value -Now that your forms are setup with Angular, the next step is to access the values from the form controls. +Now that your forms are set up with Angular, the next step is to access the values from the form controls. In this activity, you'll learn how to get the value from your form input. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md index c257767e0..bfc4b213c 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md @@ -2,7 +2,7 @@ When you want to manage your forms programmatically instead of relying purely on the template, reactive forms are the answer. -In this activity, you'll learn how to setup reactive forms. +In this activity, you'll learn how to set up reactive forms.
    diff --git a/origin b/origin index 2ec826dfd..d9e022dae 160000 --- a/origin +++ b/origin @@ -1 +1 @@ -Subproject commit 2ec826dfdce8d8b57ffca58c018ab7e3082c28e6 +Subproject commit d9e022dae2e647682138a7b449a94a92c9f2115f diff --git a/tools/adev-patches/localize-home.patch b/tools/adev-patches/localize-home.patch index 117a38767..4a680e422 100644 --- a/tools/adev-patches/localize-home.patch +++ b/tools/adev-patches/localize-home.patch @@ -1,82 +1,57 @@ -diff --git a/adev/src/app/features/home/home.component.html b/adev/src/app/features/home/home.component.html -index 53d930d66d..732d40ec53 100644 ---- a/adev/src/app/features/home/home.component.html -+++ b/adev/src/app/features/home/home.component.html -@@ -3,8 +3,8 @@ -
    - - --

    Angular v19 is here!

    --

    Read about our newest release.

    -+

    Angular v19 が利用可能です！

    -+

    今すぐ開発者向けイベントを見よう!

    +diff --git a/adev/src/app/features/home/components/home-animation/home-animation.component.html b/adev/src/app/features/home/components/home-animation/home-animation.component.html +index a599d9eefa..75a23c7b6e 100644 +--- a/adev/src/app/features/home/components/home-animation/home-animation.component.html ++++ b/adev/src/app/features/home/components/home-animation/home-animation.component.html +@@ -6,13 +6,13 @@ + class="adev-banner" + target="_blank" + > +-

    Angular v19 is here!

    +-

    Read about our newest release.

    ++

    Angular v19 が利用可能です！

    ++

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

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

    Works at any scale

    ++

    あらゆる規模で機能する

    +

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

    -@@ -72,10 +72,10 @@ -
    -
    -
    --

    Works at any scale

    -+

    あらゆる規模で機能する

    -

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

    -
    -
    -@@ -85,10 +85,9 @@ -
    -
    -
    --

    Loved by millions

    -+

    数百万人に愛される

    -

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

    -
    -
    -@@ -99,12 +98,11 @@ -
    -
    -

    -- Build for everyone -- -+ すべての人のために -+ -

    -

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

    -
    -
    -@@ -112,10 +110,9 @@ - diff --git a/tools/adev-patches/replace-canonical-host.patch b/tools/adev-patches/replace-canonical-host.patch index 8843490aa..884239ea7 100644 --- a/tools/adev-patches/replace-canonical-host.patch +++ b/tools/adev-patches/replace-canonical-host.patch @@ -13,15 +13,15 @@ index ac27b818c4..9b34429ee9 100644 * Information about the deployment of this application. diff --git a/adev/src/index.html b/adev/src/index.html -index f6d4c0eb48..d0087eaf2a 100644 +index 4b15ccb87c..923c9e1799 100644 --- a/adev/src/index.html +++ b/adev/src/index.html @@ -58,7 +58,7 @@ -- -+ +- ++ diff --git a/tools/adev-patches/replace-version-links.patch b/tools/adev-patches/replace-version-links.patch index 7eb91146b..80d00f7d2 100644 --- a/tools/adev-patches/replace-version-links.patch +++ b/tools/adev-patches/replace-version-links.patch @@ -10,11 +10,11 @@ index fcb60cbd77..f59ab93291 100644 + aDevVersionsLinkPattern: 'https://{{prefix}}{{version}}angular.jp', aioVersions: [ { - version: 'v17', - url: 'https://v17.angular.io/docs', + version: 'v18', + url: 'https://v18.angular.dev/overview', }, { - version: 'v16', + version: 'v17', diff --git a/adev/src/app/core/services/version-manager.service.ts b/adev/src/app/core/services/version-manager.service.ts index 3da3517a8f..a2d80ea740 100644 --- a/adev/src/app/core/services/version-manager.service.ts diff --git a/tools/translator/translate.ts b/tools/translator/translate.ts index dcd42f056..2358d861e 100644 --- a/tools/translator/translate.ts +++ b/tools/translator/translate.ts @@ -44,7 +44,7 @@ ${prh} `.trim(); const model = this.#genAI.getGenerativeModel({ - model: 'gemini-1.5-flash', + model: 'gemini-2.0-flash', generationConfig: { responseMimeType: 'application/json', temperature: 0.2, @@ -60,7 +60,7 @@ ${prh} for (const block of blocks) { const { response } = await chatSession.sendMessage([ { - text: '次の段落を翻訳してください。\n\n', + text: '次のテキストに含まれる英語を日本語に翻訳してください。\n\n', }, { text: JSON.stringify({ text: block }), diff --git a/zoneless.en.md b/zoneless.en.md deleted file mode 100644 index 2234be0c2..000000000 --- a/zoneless.en.md +++ /dev/null @@ -1,118 +0,0 @@ -# Angular without ZoneJS (Zoneless) - -## Why use Zoneless? - -The main advantages to removing ZoneJS as a dependency are: - -- **Improved performance**: ZoneJS uses DOM events and async tasks as indicators of when application state _might_ have updated and subsequently triggers application synchronization to run change detection on the application's views. ZoneJS does not have any insight into whether application state actually changed and so this synchronization is triggered more frequently than necessary. -- **Improved Core Web Vitals**: ZoneJS brings a fair amount of overhead, both in payload size and in startup time cost. -- **Improved debugging experience**: ZoneJS makes debugging code more difficult. Stack traces are harder to understand with ZoneJS. It's also difficult to understand when code breaks as a result of being outside the Angular Zone. -- **Better ecosystem compatibility**: ZoneJS works by patching browser APIs but does not automatically have patches for every new browser API. Some APIs simply cannot be patched effectively, such as `async`/`await`, and have to be downleveled to work with ZoneJS. Sometimes libraries in the ecosystem are also incompatible with the way ZoneJS patches the native APIs. Removing ZoneJS as a dependency ensures better long-term compatibility by removing a source of complexity, monkey patching, and ongoing maintenance. - -## Enabling Zoneless in an application - -The API for enabling Zoneless is currently experimental. Neither the shape, nor the underlying behavior is stable and can change -in patch versions. There are known feature gaps, including the lack of an ergonomic API which prevents the application from serializing too early with Server Side Rendering. - -```typescript -// standalone bootstrap -bootstrapApplication(MyApp, {providers: [ - provideExperimentalZonelessChangeDetection(), -]}); - -// NgModule bootstrap requires the provider and `ngZone: 'noop'` -platformBrowser().bootstrapModule(AppModule, {ngZone: 'noop'}); -@NgModule({ - providers: [provideExperimentalZonelessChangeDetection()] -}) -export class AppModule {} -``` - -## Requirements for Zoneless compatibility - -Angular relies on notifications from core APIs in order to determine when to run change detection and on which views. -These notifications include: - -- `ChangeDetectorRef.markForCheck` (called automatically by `AsyncPipe`) -- `ComponentRef.setInput` -- Updating a signal that's read in a template -- Bound host or template listeners callbacks -- Attaching a view that was marked dirty by one of the above - -### `OnPush`-compatible components - -One way to ensure that a component is using the correct notification mechanisms from above is to -use [ChangeDetectionStrategy.OnPush](/adev/src/content/best-practices/runtime-performance/skipping-subtrees#using-onpush). - -The `OnPush` change detection strategy is not required, but it is a recommended step towards zoneless compatibility for application components. It is not always possible for library components to use `ChangeDetectionStrategy.OnPush`. -When a library component is a host for user-components which might use `ChangeDetectionStratey.Default`, it cannot use `OnPush` because that would prevent the child component from being refreshed if it is not `OnPush` compatible and relies on ZoneJS to trigger change detection. Components can use the `Default` strategy as long as they notify Angular when change detection needs to run (calling `markForCheck`, using signals, `AsyncPipe`, etc.). - -### Remove `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable`, `NgZone.isStable`, or `NgZone.onStable` - -Applications and libraries need to remove uses of `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable` and `NgZone.onStable`. -These observables will never emit when an Application enables zoneless change detection. -Similarly, `NgZone.isStable` will always be `true` and should not be used as a condition for code execution. - -The `NgZone.onMicrotaskEmpty` and `NgZone.onStable` observables are most often used to wait for Angular to -complete change detection before performing a task. Instead, these can be replaced by `afterNextRender` -if they need to wait for a single change detection or `afterRender` if there is some condition that might span -several change detection rounds. In other cases, these observables were used because they happened to be -familiar and have similar timing to what was needed. More straightforward or direct DOM APIs can be used instead, -such as `MutationObserver` when code needs to wait for certain DOM state (rather than waiting for it indirectly -through Angular's render hooks). - - -`NgZone.run` and `NgZone.runOutsideAngular` do not need to be removed in order for code to be compatible with -Zoneless applications. In fact, removing these calls can lead to performance regressions for libraries that -are used in applications that still rely on ZoneJS. - - -### `ExperimentalPendingTasks` for Server Side Rendering (SSR) - -If you are using SSR with Angular, you may know that it relies on ZoneJS to help determine when the application -is "stable" and can be serialized. If there are asynchronous tasks that should prevent serialization, an application -not using ZoneJS will need to make Angular aware of these with the `ExperimentalPendingTasks` service. Serialization -will wait for the first moment that all pending tasks have been removed. - -```typescript -const taskService = inject(ExperimentalPendingTasks); -const taskCleanup = taskService.add(); -await doSomeWorkThatNeedsToBeRendered(); -taskCleanup(); -``` - -The framework uses this service internally as well to prevent serialization until asynchronous tasks are complete. These include, but are not limited to, -an ongoing Router navigation and an incomplete `HttpClient` request. - -## Testing and Debugging - -### Using Zoneless in `TestBed` - -The zoneless provider function can also be used with `TestBed` to help -ensure the components under test are compatible with a Zoneless -Angular application. - -```typescript -TestBed.configureTestingModule({ - providers: [provideExperimentalZonelessChangeDetection()] -}); - -const fixture = TestBed.createComponent(MyComponent); -await fixture.whenStable(); -``` - -To ensure tests have the most similar behavior to production code, -avoid using `fixture.detectChanges()` when possibe. This forces -change detection to run when Angular might otherwise have not -scheduled change detection. Tests should ensure these notifications -are happening and allow Angular to handle when to synchronize -state rather than manually forcing it to happen in the test. - -### Debug-mode check to ensure updates are detected - -Angular also provides an additional tool to help verify that an application is making -updates to state in a zoneless-compatible way. `provideExperimentalCheckNoChangesForDebug` -can be used to periodically check to ensure that no bindings have been updated -without a notification. Angular will throw `ExpressionChangedAfterItHasBeenCheckedError` -if there is an updated binding that would not have refreshed by the zoneless change -detection.