From b121b3aa09bea1b32f5e8cd4fd4b9175a060e6eb Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Sun, 12 Nov 2023 09:36:53 +0900 Subject: [PATCH] fix: update origin v17.0 (#901) * feat: update origin * chore: update untranslated files * chore: migrate small changes * chore: migrate changes * chore: fix patches * chore: fix broken links * chore: fix broken link * chore: remove universal.md * chore: fix broken links --- aio-ja/content/errors/NG0302.en.md | 16 +- aio-ja/content/errors/NG0302.md | 19 +- aio-ja/content/errors/NG0507.md | 12 + aio-ja/content/errors/NG05104.md | 4 +- aio-ja/content/errors/NG0912.md | 6 +- aio-ja/content/errors/NG0913.md | 39 + aio-ja/content/errors/NG3003.md | 14 +- aio-ja/content/errors/NG602.md | 62 + aio-ja/content/guide/add-an-animation.md | 20 +- aio-ja/content/guide/ajs-quick-reference.md | 25 +- .../guide/angular-compiler-options.en.md | 8 +- .../content/guide/angular-compiler-options.md | 8 +- aio-ja/content/guide/animations.en.md | 14 +- aio-ja/content/guide/animations.md | 14 +- aio-ja/content/guide/app-shell.en.md | 74 +- aio-ja/content/guide/app-shell.md | 74 +- .../guide/architecture-components.en.md | 10 +- .../content/guide/architecture-components.md | 10 +- .../content/guide/architecture-modules.en.md | 17 +- aio-ja/content/guide/architecture-modules.md | 17 +- .../guide/architecture-next-steps.en.md | 5 +- .../content/guide/architecture-next-steps.md | 5 +- .../content/guide/architecture-services.en.md | 49 +- aio-ja/content/guide/architecture-services.md | 50 +- aio-ja/content/guide/architecture.en.md | 69 +- aio-ja/content/guide/architecture.md | 66 +- aio-ja/content/guide/binding-overview.en.md | 8 +- aio-ja/content/guide/binding-overview.md | 8 +- aio-ja/content/guide/bootstrapping.en.md | 6 +- aio-ja/content/guide/bootstrapping.md | 6 +- aio-ja/content/guide/browser-support.en.md | 29 +- aio-ja/content/guide/browser-support.md | 31 +- aio-ja/content/guide/build.en.md | 13 + aio-ja/content/guide/build.md | 20 +- aio-ja/content/guide/built-in-directives.md | 68 +- .../change-detection-slow-computations.en.md | 4 +- .../change-detection-slow-computations.md | 4 +- .../content/guide/comparing-observables.en.md | 129 -- aio-ja/content/guide/comparing-observables.md | 431 ++---- .../guide/comparing-observables.md.old | 318 ++++ aio-ja/content/guide/control_flow.md | 165 ++ aio-ja/content/guide/defer.md | 289 ++++ .../guide/dependency-injection-context.en.md | 6 +- .../guide/dependency-injection-context.md | 2 + .../dependency-injection-providers.en.md | 4 +- .../guide/dependency-injection-providers.md | 4 +- .../content/guide/dependency-injection.en.md | 25 +- aio-ja/content/guide/dependency-injection.md | 25 +- aio-ja/content/guide/deployment.md | 2 +- aio-ja/content/guide/deprecations.md | 104 +- .../content/guide/developer-guide-overview.md | 4 +- aio-ja/content/guide/devtools.en.md | 2 +- aio-ja/content/guide/devtools.md | 2 +- .../guide/directive-composition-api.md | 11 +- aio-ja/content/guide/doc-github-tasks.md | 4 +- .../guide/dynamic-component-loader.en.md | 94 +- .../content/guide/dynamic-component-loader.md | 176 +-- aio-ja/content/guide/dynamic-form.en.md | 41 +- aio-ja/content/guide/dynamic-form.md | 96 +- aio-ja/content/guide/elements.en.md | 67 +- aio-ja/content/guide/elements.md | 103 +- aio-ja/content/guide/esbuild.en.md | 179 --- aio-ja/content/guide/esbuild.md | 226 ++- aio-ja/content/guide/esbuild.md.old | 179 +++ aio-ja/content/guide/event-binding.en.md | 50 +- aio-ja/content/guide/event-binding.md | 50 +- aio-ja/content/guide/example-apps-list.md | 4 +- aio-ja/content/guide/file-structure.en.md | 6 +- aio-ja/content/guide/file-structure.md | 6 +- aio-ja/content/guide/form-validation.en.md | 2 +- aio-ja/content/guide/form-validation.md | 8 + aio-ja/content/guide/forms-overview.en.md | 2 +- aio-ja/content/guide/forms-overview.md | 8 + aio-ja/content/guide/glossary.en.md | 16 +- aio-ja/content/guide/glossary.md | 28 +- .../hierarchical-dependency-injection.en.md | 1011 ------------ .../hierarchical-dependency-injection.md | 1358 +++++++---------- .../hierarchical-dependency-injection.md.old2 | 1220 +++++++++++++++ .../guide/http-handle-request-errors.md | 25 +- .../http-intercept-requests-and-responses.md | 45 +- .../guide/http-interceptor-use-cases.md | 2 +- .../content/guide/http-make-jsonp-request.md | 24 +- .../guide/http-request-data-from-server.md | 123 +- .../guide/http-security-xsrf-protection.md | 6 +- .../content/guide/http-send-data-to-server.md | 3 +- .../guide/http-server-communication.md | 37 +- .../guide/http-setup-server-communication.md | 19 +- aio-ja/content/guide/hydration.en.md | 23 +- aio-ja/content/guide/hydration.md | 19 +- aio-ja/content/guide/i18n-example.en.md | 5 +- aio-ja/content/guide/i18n-example.md | 5 +- ...i18n-optional-import-global-variants.en.md | 19 +- .../i18n-optional-import-global-variants.md | 19 +- .../i18n-optional-manual-runtime-locale.en.md | 23 +- .../i18n-optional-manual-runtime-locale.md | 21 +- .../guide/i18n-optional-overview.en.md | 6 +- .../content/guide/i18n-optional-overview.md | 4 +- aio-ja/content/guide/i18n-overview.en.md | 2 +- aio-ja/content/guide/i18n-overview.md | 2 +- aio-ja/content/guide/image-directive.en.md | 39 +- aio-ja/content/guide/image-directive.md | 28 +- aio-ja/content/guide/inputs-outputs.en.md | 24 +- aio-ja/content/guide/inputs-outputs.md | 32 +- aio-ja/content/guide/interpolation.en.md | 2 +- aio-ja/content/guide/interpolation.md | 5 +- aio-ja/content/guide/language-service.en.md | 27 +- aio-ja/content/guide/language-service.md | 32 + .../guide/lazy-loading-ngmodules.en.md | 17 +- .../content/guide/lazy-loading-ngmodules.md | 17 +- aio-ja/content/guide/lifecycle-hooks.en.md | 6 +- aio-ja/content/guide/lifecycle-hooks.md | 6 +- aio-ja/content/guide/observables.en.md | 162 -- aio-ja/content/guide/observables.md | 155 +- aio-ja/content/guide/observables.md.old | 120 ++ aio-ja/content/guide/pipe-precedence.md | 25 + aio-ja/content/guide/pipe-template.md | 19 +- aio-ja/content/guide/pipes-overview.en.md | 37 +- aio-ja/content/guide/pipes-overview.md | 37 +- aio-ja/content/guide/pipes-transform-data.md | 57 +- aio-ja/content/guide/pipes.md | 101 +- aio-ja/content/guide/prerendering.en.md | 94 -- aio-ja/content/guide/prerendering.md | 102 +- aio-ja/content/guide/prerendering.md.old | 94 ++ .../property-binding-best-practices.en.md | 6 +- .../guide/property-binding-best-practices.md | 6 +- aio-ja/content/guide/property-binding.md | 16 +- aio-ja/content/guide/reactive-forms.en.md | 10 +- aio-ja/content/guide/reactive-forms.md | 10 +- aio-ja/content/guide/releases.en.md | 12 +- aio-ja/content/guide/releases.md | 12 +- aio-ja/content/guide/roadmap.en.md | 97 +- aio-ja/content/guide/roadmap.md | 95 +- aio-ja/content/guide/route-animations.en.md | 24 +- aio-ja/content/guide/route-animations.md | 26 +- aio-ja/content/guide/router-reference.en.md | 44 +- aio-ja/content/guide/router-reference.md | 207 +-- .../content/guide/router-tutorial-toh.en.md | 23 + aio-ja/content/guide/router-tutorial-toh.md | 25 +- aio-ja/content/guide/router-tutorial.en.md | 85 +- aio-ja/content/guide/router-tutorial.md | 85 +- aio-ja/content/guide/router.md | 248 ++- .../content/guide/routing-with-urlmatcher.md | 46 +- aio-ja/content/guide/rx-library.en.md | 129 -- aio-ja/content/guide/rx-library.md | 226 ++- aio-ja/content/guide/rx-library.md.old | 96 ++ aio-ja/content/guide/rxjs-interop.md | 17 +- .../guide/service-worker-communications.en.md | 4 +- .../guide/service-worker-communications.md | 7 +- .../content/guide/service-worker-config.en.md | 12 +- aio-ja/content/guide/service-worker-config.md | 27 +- .../content/guide/service-worker-devops.en.md | 4 +- aio-ja/content/guide/service-worker-devops.md | 4 +- .../service-worker-getting-started.en.md | 66 +- .../guide/service-worker-getting-started.md | 95 +- .../content/guide/service-worker-intro.en.md | 10 +- aio-ja/content/guide/service-worker-intro.md | 75 +- .../guide/service-worker-notifications.md | 2 +- aio-ja/content/guide/signals.en.md | 21 +- aio-ja/content/guide/signals.md | 21 +- aio-ja/content/guide/ssr.md | 134 ++ .../content/guide/standalone-components.en.md | 8 +- aio-ja/content/guide/standalone-components.md | 10 +- aio-ja/content/guide/standalone-migration.md | 2 +- aio-ja/content/guide/template-overview.en.md | 1 + .../content/guide/template-statements.en.md | 4 +- aio-ja/content/guide/template-statements.md | 4 +- .../guide/testing-attribute-directives.en.md | 2 +- .../guide/testing-attribute-directives.md | 8 + .../guide/testing-components-basics.en.md | 6 + .../guide/testing-components-basics.md | 6 + .../guide/testing-components-scenarios.en.md | 6 +- .../guide/testing-components-scenarios.md | 12 +- aio-ja/content/guide/testing-pipes.en.md | 4 +- aio-ja/content/guide/testing-pipes.md | 4 +- .../content/guide/testing-utility-apis.en.md | 2 +- aio-ja/content/guide/testing-utility-apis.md | 18 +- aio-ja/content/guide/testing.en.md | 2 +- aio-ja/content/guide/testing.md | 2 +- aio-ja/content/guide/typed-forms.en.md | 6 +- aio-ja/content/guide/typed-forms.md | 6 +- .../understanding-communicating-with-http.md | 4 +- .../understanding-template-expr-overview.md | 3 +- aio-ja/content/guide/universal.en.md | 369 ----- aio-ja/content/guide/universal.md | 372 ----- aio-ja/content/guide/universal.md.old | 532 ------- aio-ja/content/guide/update-to-version-14.md | 4 +- aio-ja/content/guide/versions.md | 55 +- aio-ja/content/guide/web-worker.en.md | 2 +- aio-ja/content/guide/web-worker.md | 2 +- aio-ja/content/guide/what-is-angular.en.md | 223 --- aio-ja/content/guide/what-is-angular.md | 454 ++++-- aio-ja/content/guide/what-is-angular.md.old | 205 +++ aio-ja/content/guide/workspace-config.en.md | 7 +- aio-ja/content/guide/workspace-config.md | 19 +- aio-ja/content/guide/zone.en.md | 12 +- aio-ja/content/guide/zone.md | 15 +- aio-ja/content/marketing/contributors.json | 33 +- aio-ja/content/marketing/events.json | 60 + aio-ja/content/marketing/index.en.html | 86 +- aio-ja/content/marketing/index.html | 89 +- aio-ja/content/marketing/presskit.html | 2 +- aio-ja/content/marketing/resources.json | 24 +- aio-ja/content/navigation.en.json | 56 +- aio-ja/content/navigation.json | 76 +- aio-ja/content/start/start-routing.en.md | 6 +- aio-ja/content/start/start-routing.md | 6 +- .../first-app/first-app-lesson-01.en.md | 4 +- .../tutorial/first-app/first-app-lesson-01.md | 2 +- .../first-app/first-app-lesson-02.en.md | 4 +- .../tutorial/first-app/first-app-lesson-02.md | 4 +- .../first-app/first-app-lesson-03.en.md | 6 +- .../tutorial/first-app/first-app-lesson-03.md | 4 +- .../first-app/first-app-lesson-04.en.md | 2 +- .../tutorial/first-app/first-app-lesson-04.md | 2 +- .../tutorial/first-app/first-app-lesson-08.md | 2 +- .../tutorial/first-app/first-app-lesson-10.md | 18 +- .../tutorial/first-app/first-app-lesson-14.md | 22 +- .../tutorial/tour-of-heroes/index.en.md | 4 + .../tutorial/tour-of-heroes/toh-pt0.en.md | 6 +- .../tutorial/tour-of-heroes/toh-pt0.md | 7 +- .../tutorial/tour-of-heroes/toh-pt1.en.md | 6 +- .../tutorial/tour-of-heroes/toh-pt1.md | 6 +- .../tutorial/tour-of-heroes/toh-pt2.en.md | 36 +- .../tutorial/tour-of-heroes/toh-pt2.md | 24 +- .../tutorial/tour-of-heroes/toh-pt3.en.md | 54 +- .../tutorial/tour-of-heroes/toh-pt3.md | 26 +- .../tutorial/tour-of-heroes/toh-pt4.en.md | 9 +- .../tutorial/tour-of-heroes/toh-pt4.md | 11 +- .../tutorial/tour-of-heroes/toh-pt5.en.md | 4 + .../tutorial/tour-of-heroes/toh-pt5.md | 4 + .../tutorial/tour-of-heroes/toh-pt6.en.md | 2 +- origin | 2 +- tools/git-patch/change-document-title.patch | 9 +- 233 files changed, 7189 insertions(+), 6978 deletions(-) create mode 100644 aio-ja/content/errors/NG0507.md create mode 100644 aio-ja/content/errors/NG0913.md create mode 100644 aio-ja/content/errors/NG602.md delete mode 100644 aio-ja/content/guide/comparing-observables.en.md create mode 100644 aio-ja/content/guide/comparing-observables.md.old create mode 100644 aio-ja/content/guide/control_flow.md create mode 100644 aio-ja/content/guide/defer.md delete mode 100644 aio-ja/content/guide/esbuild.en.md create mode 100644 aio-ja/content/guide/esbuild.md.old delete mode 100644 aio-ja/content/guide/hierarchical-dependency-injection.en.md create mode 100644 aio-ja/content/guide/hierarchical-dependency-injection.md.old2 delete mode 100644 aio-ja/content/guide/observables.en.md create mode 100644 aio-ja/content/guide/observables.md.old create mode 100644 aio-ja/content/guide/pipe-precedence.md delete mode 100644 aio-ja/content/guide/prerendering.en.md create mode 100644 aio-ja/content/guide/prerendering.md.old delete mode 100644 aio-ja/content/guide/rx-library.en.md create mode 100644 aio-ja/content/guide/rx-library.md.old create mode 100644 aio-ja/content/guide/ssr.md delete mode 100644 aio-ja/content/guide/universal.en.md delete mode 100644 aio-ja/content/guide/universal.md delete mode 100644 aio-ja/content/guide/universal.md.old delete mode 100644 aio-ja/content/guide/what-is-angular.en.md create mode 100644 aio-ja/content/guide/what-is-angular.md.old diff --git a/aio-ja/content/errors/NG0302.en.md b/aio-ja/content/errors/NG0302.en.md index 1d5ef89b3d..71ad185a32 100644 --- a/aio-ja/content/errors/NG0302.en.md +++ b/aio-ja/content/errors/NG0302.en.md @@ -7,19 +7,19 @@ @description Angular can't find a pipe with this name. -The pipe referenced in the template has not been named or declared properly. +The [pipe](guide/pipes-overview) referenced in the template has not been named or declared properly. -In order for a [pipe](guide/pipes) to be used: - - it must be declared as a part of an `NgModule` (added to the `declarations` array) or marked as standalone (by adding the `standalone: true` flag to the Pipe decorator). - - it must be imported in an `NgModule` or a standalone component where it is used. - - the name used in a template must match the name defined in the Pipe decorator. +To use the pipe: + - Ensure the name used in a template matches the name defined in the pipe decorator. + - Either mark it as standalone by adding the `standalone: true` flag to the pipe's decorator or declare it as a part of an `NgModule` by adding to that module's declarations array. + - Import it in the standalone components and/or the `NgModules` where it is needed. @debugging Use the pipe name to trace where the pipe is declared and used. -To resolve this error, ensure that: - - If the pipe is local to the `NgModule`, it is uniquely named in the pipe's decorator and declared in the `NgModule`. - - If the pipe is standalone or from another `NgModule`, it is added to the `imports` field of the current `NgModule` or standalone component. +To resolve this error: + - If the pipe is local to the `NgModule`, give it a unique name in the pipe's decorator and declared it in the `NgModule`. + - If the pipe is standalone or is declared in another `NgModule`, add it to the `imports` field of the standalone component or the current `NgModule`. If you recently added an import or declaration, you may need to restart your server to see these changes. diff --git a/aio-ja/content/errors/NG0302.md b/aio-ja/content/errors/NG0302.md index c187de0565..afced99747 100644 --- a/aio-ja/content/errors/NG0302.md +++ b/aio-ja/content/errors/NG0302.md @@ -7,20 +7,19 @@ @description Angularはこの名前のパイプを見つけられません。 -テンプレートで参照されているパイプは名前が付けられていないか、適切に宣言されていません。 +テンプレートで参照されている[パイプ](guide/pipes-overview)は名前が付けられていないか、適切に宣言されていません。 -[パイプ](guide/pipes)を使用するためには、 `NgModule` の一部として宣言されているか（`declarations` 配列に追加されます）、スタンドアロンとしてマークされている必要があります。 - - `NgModule` の一部として宣言されているか (`declarations` 配列に追加されている)、スタンドアロンとしてマークされている (Pipe デコレーターに `standalone: true` フラグを追加する) 必要があります。 - - パイプを使用する場合は、 `NgModule` やスタンドアロンコンポーネントの中でインポートされている必要があります。 - - テンプレートで使用される名前は、Pipe デコレーターで定義された名前と一致しなければなりません。 +パイプを使うには + - テンプレートで使用する名前がパイプのデコレーターで定義した名前と一致するようにします。 + - パイプのデコレーターに `standalone: true` フラグを追加してスタンドアロンとしてマークするか、モジュールの宣言配列に追加して `NgModule` の一部として宣言します。 + - スタンドアロンコンポーネントや `NgModules` の必要な部分にインポートします。 @debugging -Use the pipe name to trace where the pipe is declared and used. +パイプ名を使用して、パイプがどこで宣言され、使用されているかをトレースします。 -このエラーを解決するには、次のことを確認してください。 - - - パイプが `NgModule` のローカルにある場合は、パイプのデコレーターでユニークな名前を付けて `NgModule` 内で宣言します。 - - パイプがスタンドアロンまたは別の `NgModule` のものである場合は、現在の `NgModule` またはスタンドアロンコンポーネントの `imports` フィールドに追加される。 +このエラーを解決するには + - パイプが `NgModule` にローカルに存在する場合は、パイプのデコレーターで一意な名前を付けて `NgModule` で宣言します。 + - パイプがスタンドアロンであるか、別の `NgModule` で宣言されている場合は、スタンドアロンコンポーネントまたは現在の `NgModule` の `imports` フィールドに追加します。 最近インポートや宣言を追加した場合は、これらの変更を確認するためにサーバーを再起動する必要があるかもしれません。 diff --git a/aio-ja/content/errors/NG0507.md b/aio-ja/content/errors/NG0507.md new file mode 100644 index 0000000000..4b8648ee30 --- /dev/null +++ b/aio-ja/content/errors/NG0507.md @@ -0,0 +1,12 @@ +@name HTML content was altered after server-side rendering +@category runtime +@shortDescription HTML content was altered after server-side rendering + +@description +Angular throws this error when it detects that the content generated by server-side rendering (SSR) was altered after the rendering. The process of hydration relies on the content to be untouched after SSR, which also includes whitespaces and comment nodes. Those whitespaces and comment nodes must be retained in the HTML generated by the SSR process. Learn more in the [Hydration guide](guide/hydration#constraints). + +@debugging + +Typically this happens in the following cases: +* Some CDN providers have a built-in feature to remove whitespaces and comment nodes from HTML as an optimization. Please verify if there is such an option in CDN configuration and turn it off. +* If you use custom post-processing of HTML generated by SSR (as a build step), make sure that this process doesn't remove whitespaces and comment nodes. diff --git a/aio-ja/content/errors/NG05104.md b/aio-ja/content/errors/NG05104.md index f41075c998..aa0e851af4 100644 --- a/aio-ja/content/errors/NG05104.md +++ b/aio-ja/content/errors/NG05104.md @@ -3,9 +3,9 @@ @shortDescription Root element was not found during bootstrap. @description -Boostraped components are defined in the `bootstrap` property of an `@NgModule` decorator or as the first parameter of `boopstrapApplication` for standalone components. +Bootstrapped components are defined in the `bootstrap` property of an `@NgModule` decorator or as the first parameter of `bootstrapApplication` for standalone components. -This error happens when Angular tries to boostrap one of these components but cannot find its corresponing node in the DOM. +This error happens when Angular tries to bootstrap one of these components but cannot find its corresponding node in the DOM. @debugging diff --git a/aio-ja/content/errors/NG0912.md b/aio-ja/content/errors/NG0912.md index 3635cfde24..1819797194 100644 --- a/aio-ja/content/errors/NG0912.md +++ b/aio-ja/content/errors/NG0912.md @@ -7,7 +7,7 @@ When creating components, Angular generates a unique component ID for each compo Component IDs are used in Angular internally: - for extra annotations of DOM nodes for style encapsulation -- during [hydration](guide/hydration) to restore an application state after [server-side rendering](guide/universal). +- during [hydration](guide/hydration) to restore an application state after [server-side rendering](guide/ssr). To avoid issues that might be caused by the component ID collision, it's recommended to resolve them as described below. @@ -32,9 +32,9 @@ Having these two components defined will trigger an ID generation collision and The warning message includes the class name of the two components whose IDs are colliding. -The problem can be resolved using one of the solutions below: +The problem can be resolved using one of the solutions below: -1. Change the selector of one of the two components. For example by using a pseudo-selector with no effect like `:not()` and a different tag name. +1. Change the selector of one of the two components. For example by using a pseudo-selector with no effect like `:not()` and a different tag name. ```typescript @Component({ diff --git a/aio-ja/content/errors/NG0913.md b/aio-ja/content/errors/NG0913.md new file mode 100644 index 0000000000..889e2db858 --- /dev/null +++ b/aio-ja/content/errors/NG0913.md @@ -0,0 +1,39 @@ +@name Runtime Performance Warnings +@category runtime +@shortDescription Performance-harming image elements detected at runtime + +@description +After an application is loaded, Angular checks included `` elements for performance-harming misconfiguration. This warning can be triggered two ways: + +### Oversized images +When images are loaded, the **intrinsic size** of the downloaded file is checked against the actual size of the image on the page. The actual size is calculated using the **rendered size** of the image with CSS applied, multiplied by the [pixel device ratio](https://web.dev/codelab-density-descriptors/#pixel-density). If the downloaded image is much larger (more than 1200px too large in either dimension), this warning is triggered. Downloading oversized images can slow down page loading and have a negative effect on [Core Web Vitals](https://web.dev/vitals/). + +### Lazy-loaded LCP element +The largest contentful element on a page during load is considered the "LCP Element", which relates to [Largest Contentful Paint](https://web.dev/lcp/), one of the Core Web Vitals. Lazy loading an LCP element will have a strong negative effect on page performance. With this strategy, the browser has to complete layout calculations to determine whether the element is in the viewport before starting the image download. As a result, a warning is triggered when Angular detects that the LCP element has been given the `loading="lazy"` attribute. + +@debugging +Use the image URL provided in the console warning to find the `` element in question. +### Ways to fix oversized images +* Use a smaller source image +* Add a [`srcset`](https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset) if multiple sizes are needed for different layouts. +* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which generates [srcsets automatically](https://angular.io/guide/image-directive#request-images-at-the-correct-size-with-automatic-srcset). +### Ways to fix lazy-loaded LCP element + +* Change the `loading` attribute to a different value such as `"eager"`. +* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](https://angular.io/guide/image-directive#step-4-mark-images-as-priority). + +### Disabling Image Performance Warnings +Both warnings can be disabled individually, site-wide, using a provider at the root of your application: + + +providers: [ + { + provide: IMAGE_CONFIG, + useValue: { + disableImageSizeWarning: true, + disableImageLazyLoadWarning: true + } + }, +], + + diff --git a/aio-ja/content/errors/NG3003.md b/aio-ja/content/errors/NG3003.md index 898c5f8267..374ea9de70 100644 --- a/aio-ja/content/errors/NG3003.md +++ b/aio-ja/content/errors/NG3003.md @@ -30,7 +30,8 @@ parent.component.ts -> child.component.ts -> parent.component.ts ### Remote Scoping -To avoid adding imports that create cycles, additional code is added to the `NgModule` class where the component that wires up the dependencies is declared. +If you are using NgModules, to avoid adding imports that create cycles, additional code is added to the `NgModule` class where the component that wires up the dependencies is declared. + This is known as "remote scoping". ### Libraries @@ -53,10 +54,9 @@ The component ChildComponent is used in the template but importing it would crea Use this to identify how the referenced component, pipe, or directive has a dependency back to the component being compiled. Here are some ideas for fixing the problem: -* Try to rearrange your dependencies to avoid the cycle. - For example, using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle. - -* Move the classes that reference each other into the same file, to avoid any imports between them. -* Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles. +* Try to rearrange your dependencies to avoid the cycle. + For example, using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle. +* Move the classes that reference each other into the same file, to avoid any imports between them. +* Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles. -@reviewed 2022-02-28 +@reviewed 2023-08-30 diff --git a/aio-ja/content/errors/NG602.md b/aio-ja/content/errors/NG602.md new file mode 100644 index 0000000000..723672c922 --- /dev/null +++ b/aio-ja/content/errors/NG602.md @@ -0,0 +1,62 @@ +@name Disallowed function call inside reactive context +@category runtime +@shortDescription A disallowed function is called inside a reactive context + +@description +A function that is not allowed to run inside a reactive context was called from within a reactive context. + +For example, an `effect` cannot be scheduled from within a `computed` or an actively executing effect. +Avoid calling functions like `effect` as part of template expressions, as those execute in their own reactive context. + +Computed expressions are expected to be pure. +Pure means that expression do not trigger any side effects. +Side effects are operations like scheduling `afterRender`, creating a new `effect`, or subscribing to observables. + +Some operations are explicitly banned inside reactive contexts in order to avoid common pitfalls. +As an example, using `afterRender` inside a `computed` will schedule new render hooks every time the computed expression evaluates. +This is likely not intended and could degrade application performance. + +### Fixing the error + +This error guide is non-exhaustive. +It captures a few common scenarios and how to address the error. + +#### `afterRender` +Move the call for `afterRender` outside of the reactive context. + +A good place to schedule the after render hook is in the component's class constructor. +Alternatively, use `untracked` to leave the reactive context and explicitly opt-out of this error. + +#### `effect` +Move the call for `effect` outside of the reactive context. + +A good place to schedule an effect is in a `@Component`'s class constructor. + +#### `toSignal` +Move the call for `toSignal` outside of the reactive context. + +```typescript +result = computed(() => { + const dataSignal = toSignal(dataObservable$); + return doSomething(dataSignal()); +}); +``` + +can be refactored into: + +```typescript +dataSignal = toSignal(dataObservable$); +result = computed(() => doSomething(dataSignal())); +``` + +Alternatively, if this is not possible, consider manually subscribing to the observable. + +As a last resort, use `untracked` to leave the reactive context. +Be careful as leaving the reactive context can result in signal reads to be ignored inside `untracked`. + +@debugging + +The error message mentions the function that was unexpectedly called. +Look for this function call in your application code. + +Alternatively, the stack trace in your browser will show where the function was invoked and where it's located. diff --git a/aio-ja/content/guide/add-an-animation.md b/aio-ja/content/guide/add-an-animation.md index 562af74120..67e6ee5fe8 100644 --- a/aio-ja/content/guide/add-an-animation.md +++ b/aio-ja/content/guide/add-an-animation.md @@ -1,22 +1,24 @@ # Add an animation The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`. -When you create a new project using the Angular framework, these dependencies are automatically added to your project. To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular capability. ## Step 1: Enabling the animations module -Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module. +Import `provideAnimations` from `@angular/platform-browser/animations` and add it to the providers list in the `bootstrapApplication` function call. - - -
+```ts +bootstrapApplication(AppComponent, { + providers: [ + provideAnimations(), + ] +}); +``` -**NOTE**:
-When you use the Angular framework to create your application, the root application module `app.module.ts` is placed in the `src/app` directory. If you are using standalone components, look at main.ts or look at your root application component. +For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module. -
+ ## Step 2: Importing animation functions into component files @@ -31,4 +33,4 @@ You put the trigger that defines an animation within the `animations` metadata p -@reviewed 2022-12-19 +@reviewed 2023-08-15 diff --git a/aio-ja/content/guide/ajs-quick-reference.md b/aio-ja/content/guide/ajs-quick-reference.md index 811a5d5b43..19dd16b1e7 100644 --- a/aio-ja/content/guide/ajs-quick-reference.md +++ b/aio-ja/content/guide/ajs-quick-reference.md @@ -42,7 +42,7 @@ The following are some of the key AngularJS built-in directives and their equiva | AngularJS | Angular | |:--- |:--- | -|
ng-app
<body ng-app="movieHunter"> The application startup process is called **bootstrapping**.
Although you can bootstrap an AngularJS application in code, many applications bootstrap declaratively with the `ng-app` directive, giving it the name of the module \(`movieHunter`\) of the application. |
Bootstrapping
Angular does not have a bootstrap directive. To launch the application in code, explicitly bootstrap the root module \(`AppModule`\) of the application in `main.ts` and the root component \(`AppComponent`\) of the application in `app.module.ts`. | +|
ng-app
<body ng-app="movieHunter"> The application startup process is called **bootstrapping**.
Although you can bootstrap an AngularJS application in code, many applications bootstrap declaratively with the `ng-app` directive, giving it the name of the module \(`movieHunter`\) of the application. |
Bootstrapping
Angular does not have a bootstrap directive. To launch the application in code, explicitly bootstrap the application's root component \(`AppComponent`\) in `main.ts`.| ### `ng-class` → `ngClass` @@ -170,12 +170,11 @@ For more information on pipes, see [Pipes][AioGuidePipes]. |:--- |:--- | |
orderBy
<tr ng-repeat="movie in movieList | orderBy : 'title'"> Displays the collection in the order specified by the expression. In this example, the movie title orders the `movieList`. |
none
For performance reasons, no comparable pipe exists in Angular. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe. | -## Modules / controllers / components - -In both AngularJS and Angular, modules help you organize your application into cohesive blocks of features. +## Controllers and Components In AngularJS, you write the code that provides the model and the methods for the view in a **controller**. -In Angular, you build a **component**. + +In Angular, you build a **component** which typically acquires its model from an **injected service**. Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. The Angular code is shown using TypeScript. @@ -184,25 +183,21 @@ The Angular code is shown using TypeScript. | AngularJS | Angular | |:--- |:--- | -|
IIFE
(   function () {     …   }() ); In AngularJS, an IIFE around controller code keeps it out of the global namespace. |
none
This is a nonissue in Angular because ES 2015 modules handle the namespace for you.
For more information on modules, see the [Modules][AioGuideArchitectureModules] section of the [Architecture Overview][AioGuideArchitecture]. | +|
IIFE
(   function () {     …   }() ); In AngularJS, an IIFE around controller code keeps it out of the global namespace. |
none
This is a nonissue in Angular because ES 2015 modules handle the namespace for you. | -### Angular modules → `NgModules` -| AngularJS | Angular | -|:--- |:--- | -|
Angular modules
angular .module(   "movieHunter",   [     "ngRoute"   ] ); In AngularJS, an Angular module keeps track of controllers, services, and other code. The second argument defines the list of other modules that this module depends upon. |
NgModules
NgModules, defined with the `NgModule` decorator, serve the same purpose: For more information on modules, see [NgModules][AioGuideNgmodules]. | ### Controller registration → component decorator | AngularJS | Angular | |:--- |:--- | -|
Controller registration
angular .module(   "movieHunter" ) .controller(   "MovieListCtrl",   [     "movieService",     MovieListCtrl   ] ); AngularJS has code in each controller that looks up an appropriate Angular module and registers the controller with that module.
The first argument is the controller name. The second argument defines the string names of all dependencies injected into this controller, and a reference to the controller function. |
Component decorator
Angular adds a decorator to the component class to provide any required metadata. The `@Component` decorator declares that the class is a component and provides metadata about that component such as its selector, or tag, and its template.
This is how you associate a template with logic, which is defined in the component class.
For more information, see the [Components][AioGuideArchitectureComponents] section of the [Architecture Overview][AioGuideArchitecture] page. | +|
Controller registration
angular .module(   "movieHunter" ) .controller(   "MovieListCtrl",   [     "movieService",     MovieListCtrl   ] ); AngularJS has code in each controller that looks up an appropriate AngularJS module and registers the controller with that module.
The first argument is the controller name. The second argument defines the string names of all dependencies injected into this controller, and a reference to the controller function. |
Component decorator
Angular adds a decorator to the component class to provide any required metadata. The `@Component` decorator declares that the class is a component and provides metadata about that component such as its selector, or tag, and its template.
This is how you associate a template with logic, which is defined in the component class.
For more information, see the [Components][AioGuideArchitectureComponents] section of the [Architecture Overview][AioGuideArchitecture] page. | ### Controller function → component class | AngularJS | Angular | |:--- |:--- | -|
Controller function
function MovieListCtrl(movieService) { } In AngularJS, you write the code for the model and methods in a controller function. |
Component class
In Angular, you create a component class to contain the data model and control methods. Use the TypeScript export keyword to export the class so that the component can be imported into NgModules.
For more information, see the [Components][AioGuideArchitectureComponents] section of the [Architecture Overview][AioGuideArchitecture] page. | +|
Controller function
function MovieListCtrl(movieService) { } In AngularJS, you write the code for the model and methods in a controller function. |
Component class
In Angular, you create a component class to contain the data model and control methods. Use the TypeScript export keyword to export the class so that the component can be imported into other classes.
For more information, see the [Components][AioGuideArchitectureComponents] section of the [Architecture Overview][AioGuideArchitecture] page. | ### Dependency injection → dependency injection @@ -234,7 +229,7 @@ Now you can also encapsulate a style sheet within a specific component. [AioGuideArchitecture]: guide/architecture "Introduction to Angular concepts | Angular" [AioGuideArchitectureComponents]: guide/architecture#components "Components - Introduction to Angular concepts | Angular" -[AioGuideArchitectureModules]: guide/architecture#modules "Modules - Introduction to Angular concepts | Angular" + [AioGuideArchitectureServicesAndDependencyInjection]: guide/architecture#services-and-dependency-injection "Services and dependency injection - Introduction to Angular concepts | Angular" [AioGuideAttributeBinding]: guide/attribute-binding "Attribute, class, and style bindings | Angular" @@ -249,8 +244,6 @@ Now you can also encapsulate a style sheet within a specific component. [AioGuideInterpolation]: guide/interpolation "Text interpolation | Angular" -[AioGuideNgmodules]: guide/ngmodules "NgModules | Angular" - [AioGuidePipes]: guide/pipes "Transforming Data Using Pipes | Angular" [AioGuidePropertyBinding]: guide/property-binding "Property binding | Angular" @@ -267,4 +260,4 @@ Now you can also encapsulate a style sheet within a specific component. -@reviewed 2022-02-28 +@reviewed 2023-09-25 diff --git a/aio-ja/content/guide/angular-compiler-options.en.md b/aio-ja/content/guide/angular-compiler-options.en.md index a9d9239b0b..391c6ed413 100644 --- a/aio-ja/content/guide/angular-compiler-options.en.md +++ b/aio-ja/content/guide/angular-compiler-options.en.md @@ -138,7 +138,7 @@ The `module` field of the library's `package.json` would be `"index.js"` and the When `true`, the recommended value, enables the [binding expression validation](guide/aot-compiler#binding-expression-validation) phase of the template compiler. This phase uses TypeScript to verify binding expressions. For more information, see [Template type checking](guide/template-typecheck). -Default is `false`, but when you use the Angular CLI command `ng new --strict`, it is set to `true` in the new project's configuration. +Default is `false`, but set to `true` in the created workspace configuration when creating a project using the Angular CLI.
@@ -213,7 +213,7 @@ When `true`, reports an error for a supplied parameter whose injection type cann When `false`, constructor parameters of classes marked with `@Injectable` whose type cannot be resolved produce a warning. The recommended value is `true`, but the default value is `false`. -When you use the Angular CLI command `ng new --strict`, it is set to `true` in the created project's configuration. +Set to `true` in the created workspace configuration when creating a project using the Angular CLI. ### `strictTemplates` @@ -222,7 +222,7 @@ When `true`, enables [strict template type checking](guide/template-typecheck#st The strictness flags that this option enables allow you to turn on and off specific types of strict template type checking. See [troubleshooting template errors](guide/template-typecheck#troubleshooting-template-errors). -When you use the Angular CLI command `ng new --strict`, it is set to `true` in the new project's configuration. +Set to `true` in the created workspace configuration when creating a project using the Angular CLI. ### `trace` @@ -246,4 +246,4 @@ Besides the configuration file, you can also use [`tsc` command line options](ht -@reviewed 2023-04-19 +@reviewed 2023-10-24 diff --git a/aio-ja/content/guide/angular-compiler-options.md b/aio-ja/content/guide/angular-compiler-options.md index bcdb4e407c..469d148ad8 100644 --- a/aio-ja/content/guide/angular-compiler-options.md +++ b/aio-ja/content/guide/angular-compiler-options.md @@ -138,7 +138,7 @@ When `true`, enables the deprecated `