mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Compare commits
293 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4736c6d133 | |||
| 327bae473b | |||
| 27e6936912 | |||
| ce9e67932c | |||
| b7af42433c | |||
| bba82754c3 | |||
| b6c0f13ee2 | |||
| 801b8c219e | |||
| 9ec3cd0166 | |||
| f25e77b83e | |||
| 81892b1676 | |||
| 9209678719 | |||
| 0ad308ef26 | |||
| 182138e74b | |||
| 8e44f07ddf | |||
| 76f7c5c1b7 | |||
| acea887f16 | |||
| 20ab57abc4 | |||
| 4c7964c970 | |||
| baa6c3c514 | |||
| 1ed8ec6d90 | |||
| 9774ebe1da | |||
| c421d8a9d4 | |||
| faf922b24e | |||
| 5941419cd4 | |||
| 418a35f3fb | |||
| b10e031f52 | |||
| d83dda560f | |||
| 8734b8fd34 | |||
| 41bd844b4e | |||
| a7ef3aa170 | |||
| fc5e032be2 | |||
| 2a7089bdfc | |||
| 2f1530b5f3 | |||
| 349f24af56 | |||
| 45badde88c | |||
| d0d83960f3 | |||
| 5a93df9f18 | |||
| 71f8bca9a7 | |||
| 84f70cc1f1 | |||
| 9d36a2d998 | |||
| 99bf2cd524 | |||
| 7725b70a0a | |||
| a5c3857a7b | |||
| 5e0d2bc143 | |||
| b86a81136d | |||
| 0fa674ba50 | |||
| bd4dbdd2bd | |||
| 436111f661 | |||
| c21b459ba6 | |||
| ec5807cbdc | |||
| f978e9caf1 | |||
| 760e284428 | |||
| 3818436ebc | |||
| c9f27b434a | |||
| 0e6fbfb758 | |||
| 4c50e1e7cb | |||
| 82bbcde843 | |||
| 266ad40e62 | |||
| 4261fd367e | |||
| 6250269f1f | |||
| 3eea50da64 | |||
| e5d58d250d | |||
| ac4e8f7bca | |||
| 51ac883167 | |||
| 9bb3446e35 | |||
| 04d77d5a1c | |||
| 1ca24cb936 | |||
| 967bbc1e3e | |||
| 507d83d5ed | |||
| 4a33efaa3e | |||
| 5530c5e505 | |||
| ce094b227c | |||
| 9258160598 | |||
| 3ee861835a | |||
| 9cd633e1b8 | |||
| 75db462d8b | |||
| c3d077cca1 | |||
| af0eb846a5 | |||
| 544aedee6f | |||
| add11c6854 | |||
| 5083d893a9 | |||
| 826861b1fa | |||
| 9cb003ac3d | |||
| efb9eb4fa9 | |||
| 79a29e4f14 | |||
| eda03d4b89 | |||
| 8979fba2c5 | |||
| d5ee04edc1 | |||
| 87921d7fff | |||
| d38135a12d | |||
| 775476b9ac | |||
| 5cf14da35c | |||
| aeeb38a546 | |||
| 2c66afe857 | |||
| a19e214cbe | |||
| d4c103ae08 | |||
| 39b7bdabec | |||
| 99df5a8ba2 | |||
| 8ae4783d9b | |||
| cc57d4c499 | |||
| 8c6f261fa3 | |||
| c67cbe98a6 | |||
| 9bf9864e79 | |||
| a3b1dc005d | |||
| 8bd9ad02a4 | |||
| 8a670e6bc5 | |||
| afdcff3f71 | |||
| 051c140cc3 | |||
| c77ebb6f51 | |||
| b955999d29 | |||
| 268a26f1b6 | |||
| ca8969b946 | |||
| ce231fb271 | |||
| 888360a6b0 | |||
| 1713d31026 | |||
| 4390d09d58 | |||
| 7676d8fc2d | |||
| e9e8960e76 | |||
| 766548c3ec | |||
| 545fb0d88b | |||
| 9a2295fcee | |||
| d0ae5561b0 | |||
| 9d6effcec9 | |||
| 5587dde5d5 | |||
| 650101e19d | |||
| 36e8f4d5c8 | |||
| 766db6a069 | |||
| 5826d8cb52 | |||
| a7c1115c3d | |||
| 5c0004bb62 | |||
| 9f0691577e | |||
| 4d2a8005e8 | |||
| 13404d5107 | |||
| 68d51f08a3 | |||
| 422e9754b0 | |||
| 80d1094a4e | |||
| 53427d875d | |||
| 9cb1d27406 | |||
| ee0412fb29 | |||
| 05e7bf8734 | |||
| 16eba152c4 | |||
| 4ac78fb846 | |||
| 5ba2a48f49 | |||
| 88f0545e8e | |||
| eb9a5f5bbe | |||
| 158ceaf062 | |||
| 816ddf4539 | |||
| f4e9768da2 | |||
| 7b67ad2fc5 | |||
| 129c973934 | |||
| bc429baa92 | |||
| a84beaa4a7 | |||
| fd45d03d2f | |||
| 949dec26b8 | |||
| fc034137ab | |||
| ca60d9dd3f | |||
| 10851d27cc | |||
| d10dc5c85c | |||
| cb95e2f8ab | |||
| eb0ccfc40c | |||
| a8a20ad238 | |||
| e53d02df85 | |||
| 109df125c8 | |||
| 17f2181299 | |||
| 0bcea6c928 | |||
| 2c325d46b0 | |||
| 54a8fc3b19 | |||
| 555696635e | |||
| 878f581961 | |||
| 9cef0d210f | |||
| 346a555e93 | |||
| fa837a393e | |||
| 4d043992e5 | |||
| 2abcb040eb | |||
| 67f0cf5fc8 | |||
| 2f9d94bc4a | |||
| ee76001431 | |||
| b63afb9e93 | |||
| 658fb0a17f | |||
| f8aa778b70 | |||
| 60ed00a601 | |||
| c7ff3d158a | |||
| aeb20f95d2 | |||
| 708ba8115f | |||
| fb5a28858d | |||
| 5b67c94775 | |||
| b478dfbfda | |||
| 75d1cae616 | |||
| 53fe455630 | |||
| 1470b7d40e | |||
| 76631995e1 | |||
| 519e781701 | |||
| 1af2be9b23 | |||
| a893f0b60d | |||
| 93ce4d0483 | |||
| ed271ebb37 | |||
| 6734b59b35 | |||
| 789326d483 | |||
| 4b63716b4a | |||
| 308b194ee3 | |||
| 62510a7b4d | |||
| ece2deeab6 | |||
| 4d8d324ea6 | |||
| 3253576db8 | |||
| 365fd50407 | |||
| d1d9f5569f | |||
| 7763387253 | |||
| 0ec68a2a40 | |||
| 2ad5dcf3f0 | |||
| 9aff43b5e8 | |||
| fa46844f5c | |||
| cd00ec582b | |||
| 821012d0f7 | |||
| 8958e0bf70 | |||
| 4bb332ef08 | |||
| 64f202cab9 | |||
| cf34d2b87f | |||
| ec4483c471 | |||
| 1f7e81aef9 | |||
| cb433af0e1 | |||
| 3cf70e26ba | |||
| 2b7bad5151 | |||
| 78d4ad20e6 | |||
| c2149dfaa8 | |||
| 99e9474aa2 | |||
| 766bdf3207 | |||
| 2a1ea5a22b | |||
| 529a5f434d | |||
| e70228afa9 | |||
| 4ab3a9afad | |||
| 1f5ab960ef | |||
| 860eccef48 | |||
| e61ccd2ac5 | |||
| 80e5a0a03d | |||
| c0788200e2 | |||
| 42318e7c3d | |||
| 33dc072b70 | |||
| 209632e64d | |||
| e78dd31cea | |||
| 91029aa082 | |||
| 52296bc29d | |||
| 64862cbff2 | |||
| 90bbc68d44 | |||
| a5cc82ee84 | |||
| 855b8e046c | |||
| 35e8184935 | |||
| 74506e76a8 | |||
| c22c5c4543 | |||
| 5d41ab9cd1 | |||
| 243ccce624 | |||
| e8badecf4f | |||
| cdfcb779df | |||
| ac395d0f68 | |||
| e75a9a4d83 | |||
| 41f28f88b1 | |||
| 7df0a8a278 | |||
| 9889346620 | |||
| 39a50f9a8d | |||
| 1f77083a2d | |||
| bb35414a38 | |||
| fcfb42a8ba | |||
| 57e54e29e7 | |||
| 2909e9817d | |||
| 619f3c8792 | |||
| 0ee1a1419d | |||
| f386a04c9d | |||
| 492e03f699 | |||
| ba9ddd7ac2 | |||
| 5d23e601d1 | |||
| a7872ca77a | |||
| 10314787d6 | |||
| 40a94b3ab6 | |||
| 1f129f114e | |||
| 962934bc4f | |||
| 6ce8fc8637 | |||
| e82173e8c4 | |||
| b6a7d509fe | |||
| 01722ee637 | |||
| 7225485311 | |||
| a45e69f627 | |||
| a7d6c64a47 | |||
| 2f7c7b3833 | |||
| 0daa1ea19d | |||
| 658ae699d8 | |||
| 9cf6b9369e | |||
| 9ea0d69275 | |||
| f1991d49b0 | |||
| 198f2ff5f2 | |||
| 8d37ed035c | |||
| 365955322f | |||
| d870856840 | |||
| 7bfa3610c5 |
@@ -65,6 +65,13 @@ build:aio_local_deps --workspace_status_command="yarn -s --cwd aio local-workspa
|
||||
build:snapshot-build --workspace_status_command="yarn -s ng-dev release build-env-stamp --mode=snapshot"
|
||||
build:snapshot-build --stamp
|
||||
|
||||
# Angular DevTools for Firefox releases *cannot* be stamped and `--config snapshot-build-firefox` is a no-op.
|
||||
# This is because Mozilla requires add-on source code to be uploaded and then they manually reproduce the build.
|
||||
# If we stamp the build based on Git information such as the current commit, then reproducing the build would require
|
||||
# uploading the entire `.git` directory. We already must upload the entire monorepo, and uploading `.git` as well
|
||||
# exceeds the max source file size. To address this, we just *don't* stamp Firefox builds of Angular DevTools.
|
||||
build:snapshot-build-firefox --nostamp
|
||||
|
||||
##########################################################
|
||||
# AIO architect build configuration #
|
||||
# See aio/angular.json for available configurations. #
|
||||
|
||||
@@ -4,7 +4,7 @@ description: 'Installs the dependencies using Yarn'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/cache@13aacd865c20de90d75de3b17ebe84f7a17d57d2 # v4
|
||||
- uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4
|
||||
with:
|
||||
path: |
|
||||
./node_modules/
|
||||
|
||||
@@ -21,16 +21,16 @@ jobs:
|
||||
(github.event.action == 'synchronize' && contains(github.event.pull_request.labels.*.name, 'adev: preview'))
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@5774b71c01a55c4c998f858ee37d3b77ae704c31
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@5774b71c01a55c4c998f858ee37d3b77ae704c31
|
||||
- name: Setup Bazel RBE
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@5774b71c01a55c4c998f858ee37d3b77ae704c31
|
||||
- name: Install node modules
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Build adev to ensure it continues to work
|
||||
run: yarn bazel build --config=aio_local_deps //adev:build
|
||||
- uses: angular/dev-infra/github-actions/previews/pack-and-upload-artifact@c83e99a12397014162531ca125c94549db55dd84
|
||||
- uses: angular/dev-infra/github-actions/previews/pack-and-upload-artifact@5774b71c01a55c4c998f858ee37d3b77ae704c31
|
||||
with:
|
||||
workflow-artifact-name: 'adev-preview'
|
||||
pull-number: '${{github.event.pull_request.number}}'
|
||||
|
||||
@@ -29,7 +29,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
if: ${{ github.event.workflow_run.conclusion == 'success' }}
|
||||
steps:
|
||||
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
|
||||
- uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4
|
||||
with:
|
||||
token: '${{secrets.GITHUB_TOKEN}}'
|
||||
|
||||
@@ -40,7 +40,7 @@ jobs:
|
||||
npx -y firebase-tools@latest target:clear --config adev/firebase.json --project ${{env.PREVIEW_PROJECT}} hosting angular-docs
|
||||
npx -y firebase-tools@latest target:apply --config adev/firebase.json --project ${{env.PREVIEW_PROJECT}} hosting angular-docs ${{env.PREVIEW_SITE}}
|
||||
|
||||
- uses: angular/dev-infra/github-actions/previews/upload-artifacts-to-firebase@c83e99a12397014162531ca125c94549db55dd84
|
||||
- uses: angular/dev-infra/github-actions/previews/upload-artifacts-to-firebase@5774b71c01a55c4c998f858ee37d3b77ae704c31
|
||||
with:
|
||||
github-token: '${{secrets.GITHUB_TOKEN}}'
|
||||
workflow-artifact-name: 'adev-preview'
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
# This workflow builds the AIO previews for pull requests when a certain label is applied.
|
||||
# The actual deployment happens as part of a dedicated second workflow to avoid security
|
||||
# issues where the building would otherwise occur in an authorized context where secrets
|
||||
# could be leaked. More details can be found here:
|
||||
|
||||
# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/.
|
||||
|
||||
name: Build AIO app for preview deployment
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
types: [synchronize, labeled]
|
||||
|
||||
permissions: read-all
|
||||
|
||||
jobs:
|
||||
aio-build:
|
||||
runs-on: ubuntu-latest
|
||||
# We only want to build and deploy the AIO app if the `aio: preview` label has been
|
||||
# added, or if the label is already applied and new changes have been made in the PR.
|
||||
if: |
|
||||
(github.event.action == 'labeled' && github.event.label.name == 'aio: preview') ||
|
||||
(github.event.action == 'synchronize' && contains(github.event.pull_request.labels.*.name, 'aio: preview'))
|
||||
steps:
|
||||
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
|
||||
- uses: ./.github/actions/yarn-install
|
||||
|
||||
- uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
with:
|
||||
bazelrc: ./.bazelrc.user
|
||||
|
||||
# Build the web package. Note: We run Bazel from a low-resource Github action container,
|
||||
# so we manually need to instruct Bazel to run more actions concurrently as by default
|
||||
# the number of concurrent actions is determined based on the host resources.
|
||||
- run: bazel build //aio:build --jobs=32 --announce_rc --verbose_failures
|
||||
|
||||
- uses: angular/dev-infra/github-actions/previews/pack-and-upload-artifact@c83e99a12397014162531ca125c94549db55dd84
|
||||
with:
|
||||
workflow-artifact-name: 'aio'
|
||||
pull-number: '${{github.event.pull_request.number}}'
|
||||
artifact-build-revision: '${{github.event.pull_request.head.sha}}'
|
||||
deploy-directory: './dist/bin/aio/build'
|
||||
@@ -0,0 +1,44 @@
|
||||
# This workflow runs whenever the AIO build workflow has completed. Deployment happens
|
||||
# as part of a dedicated second workflow to avoid security issues where the building would
|
||||
# otherwise occur in an authorized context where secrets could be leaked.
|
||||
#
|
||||
# More details can be found here:
|
||||
# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/.
|
||||
|
||||
name: Deploying AIO preview to Firebase
|
||||
|
||||
on:
|
||||
workflow_run:
|
||||
workflows: ['Build AIO app for preview deployment']
|
||||
types: [completed]
|
||||
|
||||
permissions:
|
||||
# Needed in order to be able to comment on the pull request.
|
||||
pull-requests: write
|
||||
|
||||
env:
|
||||
PREVIEW_PROJECT: ng-dev-previews
|
||||
PREVIEW_SITE: ng-dev-previews-fw
|
||||
|
||||
jobs:
|
||||
aio-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
if: ${{ github.event.workflow_run.conclusion == 'success' }}
|
||||
steps:
|
||||
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
|
||||
|
||||
- name: Configure Firebase deploy target
|
||||
working-directory: aio/
|
||||
run: |
|
||||
# We can use `npx` as the Firebase deploy actions uses it too.
|
||||
npx -y firebase-tools@latest target:clear --project ${{env.PREVIEW_PROJECT}} hosting aio
|
||||
npx -y firebase-tools@latest target:apply --project ${{env.PREVIEW_PROJECT}} hosting aio ${{env.PREVIEW_SITE}}
|
||||
|
||||
- uses: angular/dev-infra/github-actions/previews/upload-artifacts-to-firebase@c83e99a12397014162531ca125c94549db55dd84
|
||||
with:
|
||||
github-token: '${{secrets.GITHUB_TOKEN}}'
|
||||
workflow-artifact-name: 'aio'
|
||||
firebase-config-dir: './aio/'
|
||||
firebase-public-dir: './aio/dist'
|
||||
firebase-project-id: '${{env.PREVIEW_PROJECT}}'
|
||||
firebase-service-key: '${{secrets.FIREBASE_PREVIEW_SERVICE_TOKEN}}'
|
||||
@@ -16,6 +16,6 @@ jobs:
|
||||
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: angular/dev-infra/github-actions/branch-manager@c83e99a12397014162531ca125c94549db55dd84
|
||||
- uses: angular/dev-infra/github-actions/branch-manager@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
|
||||
|
||||
@@ -19,7 +19,7 @@ jobs:
|
||||
exit: true
|
||||
|
||||
# Indicate that the benchmark command was received.
|
||||
- uses: peter-evans/create-or-update-comment@23ff15729ef2fc348714a3bb66d2f655ca9066f2 # v3
|
||||
- uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4
|
||||
with:
|
||||
comment-id: ${{github.event.comment.id}}
|
||||
token: '${{secrets.BENCHMARK_POST_RESULTS_GITHUB_TOKEN}}'
|
||||
@@ -38,7 +38,7 @@ jobs:
|
||||
|
||||
- uses: ./.github/actions/yarn-install
|
||||
|
||||
- uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
- uses: angular/dev-infra/github-actions/bazel/configure-remote@5774b71c01a55c4c998f858ee37d3b77ae704c31
|
||||
with:
|
||||
bazelrc: ./.bazelrc.user
|
||||
|
||||
@@ -53,7 +53,7 @@ jobs:
|
||||
id: benchmark
|
||||
name: Running benchmark
|
||||
|
||||
- uses: peter-evans/create-or-update-comment@23ff15729ef2fc348714a3bb66d2f655ca9066f2 # v3
|
||||
- uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4
|
||||
with:
|
||||
issue-number: ${{github.event.issue.number}}
|
||||
token: '${{secrets.BENCHMARK_POST_RESULTS_GITHUB_TOKEN}}'
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
name: CI
|
||||
|
||||
on:
|
||||
pull_request_target:
|
||||
types: [opened, synchronize, reopened]
|
||||
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.head_ref }}
|
||||
cancel-in-progress: true
|
||||
|
||||
permissions: {}
|
||||
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
|
||||
jobs:
|
||||
saucelabs:
|
||||
runs-on: ubuntu-latest-4core
|
||||
env:
|
||||
SAUCE_TUNNEL_IDENTIFIER: angular-framework-${{ github.run_number }}
|
||||
SAUCE_USERNAME: ${{ vars.SAUCE_USERNAME }}
|
||||
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
with:
|
||||
cache-node-modules: true
|
||||
# Checking out the pull request commit is intended here as we need to run the changed code tests.
|
||||
ref: ${{ github.event.pull_request.head.sha }}
|
||||
- name: Install node modules
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
- name: Starting Saucelabs tunnel service
|
||||
run: ./tools/saucelabs/sauce-service.sh run &
|
||||
# Build test fixtures for a test that rely on Bazel-generated fixtures. Note that disabling
|
||||
# specific tests which are reliant on such generated fixtures is not an option as SystemJS
|
||||
# in the Saucelabs legacy job always fetches referenced files, even if the imports would be
|
||||
# guarded by an check to skip in the Saucelabs legacy job. We should be good running such
|
||||
# test in all supported browsers on Saucelabs anyway until this job can be removed.
|
||||
- name: Preparing Bazel-generated fixtures required in legacy tests
|
||||
run: |
|
||||
yarn bazel build //packages/core/test:downleveled_es5_fixture //packages/common/locales
|
||||
# Needed for the ES5 downlevel reflector test in `packages/core/test/reflection`.
|
||||
mkdir -p dist/legacy-test-out/core/test/reflection/
|
||||
cp dist/bin/packages/core/test/reflection/es5_downleveled_inheritance_fixture.js \
|
||||
dist/legacy-test-out/core/test/reflection/es5_downleveled_inheritance_fixture.js
|
||||
# Locale files are needed for i18n tests running within Saucelabs. These are added
|
||||
# directly as sources so that the TypeScript compilation of `/packages/tsconfig.json`
|
||||
# can succeed. Note that the base locale and currencies files are checked-in, so
|
||||
# we do not need to re-generate those through Bazel.
|
||||
mkdir -p packages/common/locales/extra
|
||||
cp dist/bin/packages/common/locales/*.ts packages/common/locales
|
||||
cp dist/bin/packages/common/locales/extra/*.ts packages/common/locales/extra
|
||||
- name: Build bundle of tests to run on Saucelabs
|
||||
run: node tools/legacy-saucelabs/build-saucelabs-test-bundle.mjs
|
||||
- name: Wait and confirm Saucelabs tunnel has connected
|
||||
run: ./tools/saucelabs/sauce-service.sh ready-wait
|
||||
timeout-minutes: 3
|
||||
- name: Running tests on Saucelabs.
|
||||
run: KARMA_WEB_TEST_MODE=SL_REQUIRED yarn karma start ./karma-js.conf.js --single-run
|
||||
- name: Stop Saucelabs tunnel service
|
||||
run: ./tools/saucelabs/sauce-service.sh stop
|
||||
+157
-23
@@ -23,7 +23,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
cache-node-modules: true
|
||||
node-module-directories: |
|
||||
@@ -35,6 +35,8 @@ jobs:
|
||||
run: yarn install --frozen-lockfile --cwd aio
|
||||
- name: Check code lint
|
||||
run: yarn -s tslint
|
||||
- name: Check code lint in aio
|
||||
run: yarn -s --cwd aio lint
|
||||
- name: Check for circular dependencies
|
||||
run: yarn -s ts-circular-deps:check
|
||||
- name: Validate pull approve configuration
|
||||
@@ -58,13 +60,13 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
cache-node-modules: true
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Bazel RBE
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Install node modules
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Run unit tests
|
||||
@@ -76,35 +78,77 @@ jobs:
|
||||
runs-on: ubuntu-latest-4core
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
cache-node-modules: true
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Bazel Remote Caching
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Install node modules
|
||||
run: yarn install --frozen-lockfile --network-timeout 100000
|
||||
- name: Run CI tests for framework
|
||||
run: yarn test:ci
|
||||
|
||||
aio:
|
||||
runs-on: ubuntu-latest-4core
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
with:
|
||||
cache-node-modules: true
|
||||
node-module-directories: |
|
||||
./aio/node_modules
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
- name: Setup Bazel RBE
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
- name: Install node modules for aio
|
||||
run: yarn install --cwd aio --frozen-lockfile
|
||||
- name: Run AIO tests with upstream packages
|
||||
run: yarn --cwd aio test:ci
|
||||
- name: Check generated bundle sizes
|
||||
run: yarn --cwd aio payload-size
|
||||
|
||||
adev:
|
||||
runs-on:
|
||||
labels: ubuntu-latest-4core
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Bazel RBE
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Install node modules
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Build adev to ensure it continues to work
|
||||
run: yarn bazel test --config=aio_local_deps //adev:test
|
||||
|
||||
publish-snapshots:
|
||||
if: github.event_name == 'push'
|
||||
aio-local:
|
||||
runs-on:
|
||||
labels: ubuntu-latest-4core
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
with:
|
||||
cache-node-modules: true
|
||||
node-module-directories: |
|
||||
./aio/node_modules
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
- name: Setup Bazel RBE
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
- name: Install node modules
|
||||
run: yarn install --cwd aio --frozen-lockfile
|
||||
- name: Run AIO tests with local packages
|
||||
run: yarn --cwd aio test-local:ci
|
||||
- name: Check generated bundle sizes
|
||||
run: yarn --cwd aio payload-size aio-local
|
||||
|
||||
aio-deploy:
|
||||
needs: [aio]
|
||||
if: needs.aio.result == 'success' && github.event_name == 'push'
|
||||
runs-on:
|
||||
labels: ubuntu-latest
|
||||
steps:
|
||||
@@ -112,10 +156,54 @@ jobs:
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
with:
|
||||
cache-node-modules: true
|
||||
node-module-directories: |
|
||||
./aio/node_modules
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
- name: Setup Bazel RBE
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
- name: Install node modules for aio
|
||||
run: yarn install --cwd aio --frozen-lockfile
|
||||
- name: Set the stable branch environment variable
|
||||
id: latest_version
|
||||
run: |
|
||||
echo "CI_STABLE_BRANCH=$(npm info @angular/core dist-tags.latest | sed -r 's/^\s*([0-9]+\.[0-9]+)\.[0-9]+.*$/\1.x/')" >> $GITHUB_OUTPUT
|
||||
echo "CI_BRANCH=$(echo ${{ github.event.ref }} | cut -d '/' -f 3)" >> $GITHUB_OUTPUT
|
||||
- name: Deploy aio to production
|
||||
env:
|
||||
CI_AIO_MIN_PWA_SCORE: '95'
|
||||
CI_COMMIT: ${{ github.event.after }}
|
||||
CI_REPO_NAME: 'angular'
|
||||
CI_PULL_REQUEST: 'false'
|
||||
CI_REPO_OWNER: 'angular'
|
||||
CI_BUILD_URL: '${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}'
|
||||
CI_STABLE_BRANCH: ${{ steps.latest_version.outputs.CI_STABLE_BRANCH }}
|
||||
CI_BRANCH: ${{ steps.latest_version.outputs.CI_BRANCH }}
|
||||
CI_SECRET_AIO_DEPLOY_FIREBASE_TOKEN: ${{ secrets.AIO_DEPLOY_TOKEN }}
|
||||
CI_SECRET_PAYLOAD_FIREBASE_TOKEN: ${{ secrets.AIO_PAYLOAD_TOKEN }}
|
||||
run: yarn --cwd aio deploy-production
|
||||
- name: Notify about failed deployment
|
||||
if: ${{ failure() }}
|
||||
uses: slackapi/slack-github-action@2a8087d4af6f83146a87539a70defe909fe6dbe6 # v=v1.24.0
|
||||
with:
|
||||
channel-id: 'C07DT5M6V,CKV1F72BG'
|
||||
slack-message: 'Deploy to aio job failed for ${{ github.base_ref }} branch failed on build ${{ github.event.after }}: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}'
|
||||
env:
|
||||
SLACK_BOT_TOKEN: ${{ secrets.ANGULAR_ROBOT_SLACK_TOKEN }}
|
||||
|
||||
publish-snapshots:
|
||||
if: github.event_name == 'push'
|
||||
runs-on:
|
||||
labels: ubuntu-latest
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
cache-node-modules: true
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Bazel RBE
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Install node modules
|
||||
run: yarn install --frozen-lockfile
|
||||
- run: echo "https://${{secrets.SNAPSHOT_BUILDS_GITHUB_TOKEN}}:@github.com" > ${HOME}/.git_credentials
|
||||
@@ -127,7 +215,7 @@ jobs:
|
||||
labels: ubuntu-latest-4core
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
cache-node-modules: true
|
||||
node-module-directories: |
|
||||
@@ -135,9 +223,9 @@ jobs:
|
||||
./packages/zone.js/node_modules
|
||||
./packages/zone.js/test/typings/node_modules
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Bazel RBE
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Install node modules
|
||||
run: yarn install --frozen-lockfile
|
||||
- run: |
|
||||
@@ -176,7 +264,7 @@ jobs:
|
||||
JOBS: 2
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
cache-node-modules: true
|
||||
# Checking out the pull request commit is intended here as we need to run the changed code tests.
|
||||
@@ -184,20 +272,66 @@ jobs:
|
||||
- name: Install node modules
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Bazel Remote Caching
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Saucelabs Variables
|
||||
uses: angular/dev-infra/github-actions/saucelabs@50bb71e51d3372ca2e359adb9069f89beeac4ae7
|
||||
- name: Set up Sauce Tunnel Daemon
|
||||
run: yarn bazel run //tools/saucelabs-daemon/background-service -- $JOBS &
|
||||
env:
|
||||
SAUCE_TUNNEL_IDENTIFIER: angular-framework-${{ github.run_number }}
|
||||
SAUCE_USERNAME: ${{ vars.SAUCE_USERNAME }}
|
||||
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
|
||||
- name: Run all saucelabs bazel tests
|
||||
run: |
|
||||
TESTS=$(./node_modules/.bin/bazelisk query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "fixme-saucelabs", ...)')
|
||||
yarn bazel test --config=saucelabs --jobs=$JOBS ${TESTS}
|
||||
|
||||
saucelabs:
|
||||
runs-on: ubuntu-latest-4core
|
||||
env:
|
||||
SAUCE_TUNNEL_IDENTIFIER: angular-framework-${{ github.run_number }}
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
cache-node-modules: true
|
||||
- name: Install node modules
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Saucelabs Variables
|
||||
uses: angular/dev-infra/github-actions/saucelabs@50bb71e51d3372ca2e359adb9069f89beeac4ae7
|
||||
- name: Starting Saucelabs tunnel service
|
||||
run: ./tools/saucelabs/sauce-service.sh run &
|
||||
# Build test fixtures for a test that rely on Bazel-generated fixtures. Note that disabling
|
||||
# specific tests which are reliant on such generated fixtures is not an option as SystemJS
|
||||
# in the Saucelabs legacy job always fetches referenced files, even if the imports would be
|
||||
# guarded by an check to skip in the Saucelabs legacy job. We should be good running such
|
||||
# test in all supported browsers on Saucelabs anyway until this job can be removed.
|
||||
- name: Preparing Bazel-generated fixtures required in legacy tests
|
||||
run: |
|
||||
yarn bazel build //packages/core/test:downleveled_es5_fixture //packages/common/locales
|
||||
# Needed for the ES5 downlevel reflector test in `packages/core/test/reflection`.
|
||||
mkdir -p dist/legacy-test-out/core/test/reflection/
|
||||
cp dist/bin/packages/core/test/reflection/es5_downleveled_inheritance_fixture.js \
|
||||
dist/legacy-test-out/core/test/reflection/es5_downleveled_inheritance_fixture.js
|
||||
# Locale files are needed for i18n tests running within Saucelabs. These are added
|
||||
# directly as sources so that the TypeScript compilation of `/packages/tsconfig.json`
|
||||
# can succeed. Note that the base locale and currencies files are checked-in, so
|
||||
# we do not need to re-generate those through Bazel.
|
||||
mkdir -p packages/common/locales/extra
|
||||
cp dist/bin/packages/common/locales/*.ts packages/common/locales
|
||||
cp dist/bin/packages/common/locales/extra/*.ts packages/common/locales/extra
|
||||
- name: Build bundle of tests to run on Saucelabs
|
||||
run: node tools/legacy-saucelabs/build-saucelabs-test-bundle.mjs
|
||||
- name: Wait and confirm Saucelabs tunnel has connected
|
||||
run: ./tools/saucelabs/sauce-service.sh ready-wait
|
||||
timeout-minutes: 3
|
||||
- name: Running tests on Saucelabs.
|
||||
run: KARMA_WEB_TEST_MODE=SL_REQUIRED yarn karma start ./karma-js.conf.js --single-run
|
||||
- name: Stop Saucelabs tunnel service
|
||||
run: ./tools/saucelabs/sauce-service.sh stop
|
||||
|
||||
adev-deploy:
|
||||
needs: [adev]
|
||||
if: needs.adev.result == 'success' && github.event_name == 'push' && github.ref_name == 'main'
|
||||
@@ -207,11 +341,11 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Setup Bazel RBE
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
- name: Install node modules
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Build adev to ensure it continues to work
|
||||
|
||||
@@ -13,13 +13,13 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
|
||||
- uses: angular/dev-infra/github-actions/commit-message-based-labels@c83e99a12397014162531ca125c94549db55dd84
|
||||
- uses: angular/dev-infra/github-actions/commit-message-based-labels@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
|
||||
post_approval_changes:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
|
||||
- uses: angular/dev-infra/github-actions/post-approval-changes@c83e99a12397014162531ca125c94549db55dd84
|
||||
- uses: angular/dev-infra/github-actions/post-approval-changes@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
|
||||
|
||||
@@ -14,7 +14,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
|
||||
- uses: angular/dev-infra/github-actions/google-internal-tests@c83e99a12397014162531ca125c94549db55dd84
|
||||
- uses: angular/dev-infra/github-actions/google-internal-tests@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
run-tests-guide-url: http://go/angular-g3sync-start
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
@@ -9,6 +9,6 @@ jobs:
|
||||
status:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: angular/dev-infra/github-actions/unified-status-check@c83e99a12397014162531ca125c94549db55dd84
|
||||
- uses: angular/dev-infra/github-actions/unified-status-check@4b433074a806bbbd4d319264430740cd46e62f27
|
||||
with:
|
||||
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
|
||||
|
||||
@@ -22,15 +22,15 @@ jobs:
|
||||
version: ['https://next.angular.io/', 'https://angular.io/']
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@5774b71c01a55c4c998f858ee37d3b77ae704c31
|
||||
with:
|
||||
cache-node-modules: true
|
||||
node-module-directories: |
|
||||
./aio/node_modules
|
||||
- name: Setup Bazel
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/setup@5774b71c01a55c4c998f858ee37d3b77ae704c31
|
||||
- name: Setup Bazel RBE
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/bazel/configure-remote@5774b71c01a55c4c998f858ee37d3b77ae704c31
|
||||
- name: Install node modules in aio
|
||||
run: yarn install --frozen-lockfile --cwd aio
|
||||
- name: Run basic e2e and deployment config tests.
|
||||
@@ -44,7 +44,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Initialize environment
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@5774b71c01a55c4c998f858ee37d3b77ae704c31
|
||||
with:
|
||||
cache-node-modules: true
|
||||
node-module-directories: |
|
||||
|
||||
@@ -25,12 +25,12 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: 'Checkout code'
|
||||
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
|
||||
uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
|
||||
with:
|
||||
persist-credentials: false
|
||||
|
||||
- name: 'Run analysis'
|
||||
uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
|
||||
uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
|
||||
with:
|
||||
results_file: results.sarif
|
||||
results_format: sarif
|
||||
@@ -39,7 +39,7 @@ jobs:
|
||||
|
||||
# Upload the results as artifacts.
|
||||
- name: 'Upload artifact'
|
||||
uses: actions/upload-artifact@5d5d22a31266ced268874388b861e4b58bb5c2f3 # v4.3.1
|
||||
uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
|
||||
with:
|
||||
name: SARIF file
|
||||
path: results.sarif
|
||||
@@ -47,6 +47,6 @@ jobs:
|
||||
|
||||
# Upload the results to GitHub's code scanning dashboard.
|
||||
- name: 'Upload to code-scanning'
|
||||
uses: github/codeql-action/upload-sarif@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
|
||||
uses: github/codeql-action/upload-sarif@b7cec7526559c32f1616476ff32d17ba4c59b2d6 # v3.25.5
|
||||
with:
|
||||
sarif_file: results.sarif
|
||||
|
||||
@@ -32,7 +32,7 @@ jobs:
|
||||
env:
|
||||
ANGULAR_CLI_BUILDS_READONLY_GITHUB_TOKEN: ${{ secrets.ANGULAR_CLI_BUILDS_READONLY_GITHUB_TOKEN }}
|
||||
- name: Create a PR (if necessary)
|
||||
uses: angular/dev-infra/github-actions/create-pr-for-changes@c83e99a12397014162531ca125c94549db55dd84
|
||||
uses: angular/dev-infra/github-actions/create-pr-for-changes@1421ff04811ecb45812930c5d1f61d912880e75f
|
||||
with:
|
||||
branch-prefix: update-cli-help
|
||||
pr-title: 'docs: update Angular CLI help [${{github.ref_name}}]'
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
# Update the `events.json` file that powers the [AIO events page](https://angular.io/events) (if
|
||||
# necessary) and create a pull request.
|
||||
#
|
||||
# For more details on the overall process, see
|
||||
# [aio/scripts/generate-events/README.md](../../aio/scripts/generate-events/README.md).
|
||||
|
||||
name: Update AIO events
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs: {}
|
||||
schedule:
|
||||
# Run every day at 15:00.
|
||||
- cron: '0 15 * * *'
|
||||
|
||||
# Declare default permissions as read only.
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
update_events:
|
||||
name: Update `events.json` (if necessary)
|
||||
if: github.repository == 'angular/angular'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout the repository
|
||||
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
|
||||
with:
|
||||
# Setting `persist-credentials: false` prevents the github-action account from being the
|
||||
# account that is attempted to be used for authentication, instead the remote is set to
|
||||
# an authenticated URL.
|
||||
persist-credentials: false
|
||||
# This is needed as otherwise the PR creation will fail with `shallow update not allowed` when the forked branch is not in sync.
|
||||
fetch-depth: 0
|
||||
- name: Generate `events.json`
|
||||
run: node aio/scripts/generate-events/index.mjs --ignore-invalid-dates
|
||||
- name: Create a PR (if necessary)
|
||||
uses: angular/dev-infra/github-actions/create-pr-for-changes@c83e99a12397014162531ca125c94549db55dd84
|
||||
with:
|
||||
branch-prefix: docs-update-events
|
||||
pr-title: 'docs: update events'
|
||||
pr-description: |
|
||||
Generated `events.json` with the latest events retrieved from the Firebase DB.
|
||||
pr-labels: |
|
||||
action: review
|
||||
area: docs
|
||||
target: patch
|
||||
angular-robot-token: ${{ secrets.ANGULAR_ROBOT_ACCESS_TOKEN }}
|
||||
+84
-23
@@ -140,7 +140,7 @@ groups:
|
||||
- alxhub
|
||||
- crisbeto
|
||||
- ~jelbourn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
|
||||
# =========================================================
|
||||
# Framework: Compiler
|
||||
@@ -183,7 +183,7 @@ groups:
|
||||
- crisbeto
|
||||
- devversion
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- AndrewKushnir
|
||||
|
||||
# =========================================================
|
||||
@@ -193,7 +193,7 @@ groups:
|
||||
<<: *defaults
|
||||
conditions:
|
||||
- >
|
||||
contains_any_globs(files.exclude("packages/core/schematics/*"), [
|
||||
contains_any_globs(files.exclude("packages/core/schematics/*").exclude('packages/core/primitives/*'), [
|
||||
'packages/core/**/{*,.*}',
|
||||
'packages/examples/core/**/{*,.*}',
|
||||
'packages/platform-browser/**/{*,.*}',
|
||||
@@ -358,7 +358,7 @@ groups:
|
||||
- crisbeto
|
||||
- devversion
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
|
||||
# =========================================================
|
||||
@@ -378,7 +378,7 @@ groups:
|
||||
- AndrewKushnir
|
||||
- atscott
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
|
||||
# =========================================================
|
||||
@@ -415,7 +415,7 @@ groups:
|
||||
- AndrewKushnir
|
||||
- atscott
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
|
||||
# =========================================================
|
||||
@@ -438,7 +438,7 @@ groups:
|
||||
- andrewseguin
|
||||
- atscott
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
|
||||
# =========================================================
|
||||
@@ -536,7 +536,7 @@ groups:
|
||||
- AndrewKushnir
|
||||
- atscott
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
|
||||
# =========================================================
|
||||
@@ -615,7 +615,7 @@ groups:
|
||||
reviewers:
|
||||
users:
|
||||
- alxhub
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
|
||||
# =========================================================
|
||||
# Framework: Testing
|
||||
@@ -644,7 +644,7 @@ groups:
|
||||
- AndrewKushnir
|
||||
- atscott
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
|
||||
# =========================================================
|
||||
@@ -663,7 +663,7 @@ groups:
|
||||
- AndrewKushnir
|
||||
- atscott
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
|
||||
# =========================================================
|
||||
@@ -682,7 +682,7 @@ groups:
|
||||
- AndrewKushnir
|
||||
- atscott
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
|
||||
# =========================================================
|
||||
@@ -778,7 +778,7 @@ groups:
|
||||
- atscott
|
||||
- crisbeto
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
|
||||
# =========================================================
|
||||
@@ -813,7 +813,7 @@ groups:
|
||||
- AndrewKushnir
|
||||
- atscott
|
||||
- dylhunn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- josephperrott
|
||||
- pkozlowski-opensource
|
||||
|
||||
@@ -867,7 +867,7 @@ groups:
|
||||
reviewers:
|
||||
users:
|
||||
- AndrewKushnir
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
|
||||
# =========================================================
|
||||
# Docs: Marketing
|
||||
@@ -946,7 +946,7 @@ groups:
|
||||
- alxhub
|
||||
- AndrewKushnir
|
||||
- atscott
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- jelbourn
|
||||
|
||||
# =========================================================
|
||||
@@ -1078,11 +1078,12 @@ groups:
|
||||
- josephperrott
|
||||
- jelbourn
|
||||
- bencodezen
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- dylhunn
|
||||
- AndrewKushnir
|
||||
- alxhub
|
||||
- crisbeto
|
||||
- devversion
|
||||
- atscott
|
||||
- pkozlowski-opensource
|
||||
- ~JeanMeche
|
||||
@@ -1143,7 +1144,7 @@ groups:
|
||||
reviewers:
|
||||
users:
|
||||
- AndrewKushnir
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- josephperrott
|
||||
|
||||
# =========================================================
|
||||
@@ -1200,7 +1201,7 @@ groups:
|
||||
'tools/gulp-tasks/**/{*,.*}',
|
||||
'tools/legacy-saucelabs/**/{*,.*}',
|
||||
'tools/manual_api_docs/**/{*,.*}',
|
||||
'tools/npm-patches/**/{*,.*}',
|
||||
'tools/npm-patches*/**/{*,.*}',
|
||||
'tools/rxjs/**/{*,.*}',
|
||||
'tools/saucelabs-daemon/**/{*,.*}',
|
||||
'tools/saucelabs/**/{*,.*}',
|
||||
@@ -1242,7 +1243,7 @@ groups:
|
||||
- atscott
|
||||
- dylhunn
|
||||
- ~jelbourn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
reviews:
|
||||
request: 3 # Request reviews from 3 people
|
||||
@@ -1268,7 +1269,7 @@ groups:
|
||||
- atscott
|
||||
- dylhunn
|
||||
- ~jelbourn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
reviews:
|
||||
request: 2 # Request reviews from 2 people
|
||||
@@ -1294,7 +1295,7 @@ groups:
|
||||
- atscott
|
||||
- dylhunn
|
||||
- ~jelbourn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- pkozlowski-opensource
|
||||
|
||||
####################################################################################
|
||||
@@ -1318,9 +1319,69 @@ groups:
|
||||
- andrewseguin
|
||||
- dgp1130
|
||||
- ~jelbourn
|
||||
- jessicajaniuk
|
||||
- thePunderWoman
|
||||
- josephperrott
|
||||
|
||||
# =========================================================
|
||||
# Primitives
|
||||
# =========================================================
|
||||
|
||||
# Angular team required reviews
|
||||
primitives:
|
||||
<<: *defaults
|
||||
conditions:
|
||||
- >
|
||||
contains_any_globs(files, [
|
||||
'packages/core/primitives/**/{*,.*}',
|
||||
])
|
||||
reviewers:
|
||||
users:
|
||||
- pkozlowski-opensource # Pawel Kozlowski
|
||||
- alxhub # Alex Rickabaugh
|
||||
- thePunderWoman # Jessica Janiuk
|
||||
- dylhunn # Dylan Hunn
|
||||
- AndrewKushnir # Andrew Kushnir
|
||||
- atscott # Andrew Scott
|
||||
reviews:
|
||||
required: 1
|
||||
reviewed_for: required
|
||||
labels:
|
||||
pending: 'requires: TGP'
|
||||
approved: 'requires: TGP'
|
||||
rejected: 'requires: TGP'
|
||||
|
||||
# External team required reviews
|
||||
primitives-shared:
|
||||
<<: *defaults
|
||||
conditions:
|
||||
- >
|
||||
contains_any_globs(files, [
|
||||
'packages/core/primitives/**/{*,.*}',
|
||||
])
|
||||
reviewers:
|
||||
users:
|
||||
- csmick # Cameron Smick
|
||||
- lannka # Hongfei Ding
|
||||
- eduhmc # Eduardo Huerta-Mercado
|
||||
- ehlemur # Edward Lesmes
|
||||
- ellenyuan # Ellen Yuan
|
||||
- jatraman # Jatin Ramanathan
|
||||
- jesse-good # Jesse Costello-Good
|
||||
- mturco # Matt Turco
|
||||
- neonstalwart # Ben Hockey
|
||||
- nicholasyu-google # Nicholas Yu
|
||||
- emspishak # Eric Spishak-Thomas
|
||||
- iteriani # Thomas Nguyen
|
||||
- tbondwilkinson # Tom Wilkinson
|
||||
- rahatarmanahmed # Rahat Ahmed
|
||||
reviews:
|
||||
required: 1
|
||||
reviewed_for: required
|
||||
labels:
|
||||
pending: 'requires: TGP'
|
||||
approved: 'requires: TGP'
|
||||
rejected: 'requires: TGP'
|
||||
|
||||
####################################################################################
|
||||
# Override managed result groups
|
||||
#
|
||||
|
||||
Vendored
+5
@@ -5,7 +5,12 @@
|
||||
// List of extensions which should be recommended for users of this workspace.
|
||||
"recommendations": [
|
||||
"BazelBuild.vscode-bazel",
|
||||
"gkalpak.aio-docs-utils",
|
||||
"ms-vscode.vscode-typescript-tslint-plugin",
|
||||
"xaver.clang-format",
|
||||
// The following extensions are useful when working on angular.io (i.e. inside the `aio/` directory).
|
||||
//"angular.ng-template",
|
||||
//"dbaeumer.vscode-eslint",
|
||||
//"errata-ai.vale-server",
|
||||
],
|
||||
}
|
||||
|
||||
+163
-48
@@ -1,25 +1,180 @@
|
||||
<a name="17.3.0-rc.0"></a>
|
||||
# 17.3.0-rc.0 (2024-03-06)
|
||||
### compiler-cli
|
||||
<a name="17.3.12"></a>
|
||||
# 17.3.12 (2024-07-17)
|
||||
### compiler
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [5afa4f0ec1](https://github.com/angular/angular/commit/5afa4f0ec1b64b88ef875d48bd143e0f36e0a955) | fix | support `ModuleWithProviders` literal detection with `typeof` ([#54650](https://github.com/angular/angular/pull/54650)) |
|
||||
| [ae7dbe42de](https://github.com/angular/angular/commit/ae7dbe42de5779e578fb636938699b8ba85b33f6) | fix | unwrap expressions with type parameters in query read property ([#54647](https://github.com/angular/angular/pull/54647)) |
|
||||
| [327bae473b](https://github.com/angular/angular/commit/327bae473b4ed430efefb4663312a01f59304081) | fix | JIT mode incorrectly interpreting host directive configuration in partial compilation ([#57002](https://github.com/angular/angular/pull/57002)) ([#57003](https://github.com/angular/angular/pull/57003)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.11"></a>
|
||||
# 17.3.11 (2024-06-05)
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.10"></a>
|
||||
# 17.3.10 (2024-05-22)
|
||||
|
||||
This release includes some internal updates for Angular's documentation infrastructure.
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.9"></a>
|
||||
# 17.3.9 (2024-05-15)
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.8"></a>
|
||||
# 17.3.8 (2024-05-08)
|
||||
### compiler
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [c21b459ba6](https://github.com/angular/angular/commit/c21b459ba6520fd5835e23800338ac9c997fee91) | fix | add math elements to schema ([#55631](https://github.com/angular/angular/pull/55631)) ([#55645](https://github.com/angular/angular/pull/55645)) |
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [3818436ebc](https://github.com/angular/angular/commit/3818436ebc649267bb39b976b6b567b7f2b06a64) | fix | don't schedule timer triggers on the server ([#55605](https://github.com/angular/angular/pull/55605)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.7"></a>
|
||||
# 17.3.7 (2024-05-01)
|
||||
### compiler-cli
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [51ac883167](https://github.com/angular/angular/commit/51ac8831670637b562dfa135bec1e27a0b49f21d) | fix | don't type check the bodies of control flow nodes in basic mode ([#55558](https://github.com/angular/angular/pull/55558)) |
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [af0eb846a5](https://github.com/angular/angular/commit/af0eb846a572d0e9de2c6bb7016ddd339473dc00) | fix | render hooks should not specifically run outside the Angular zone ([#55399](https://github.com/angular/angular/pull/55399)) |
|
||||
### router
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [3eea50da64](https://github.com/angular/angular/commit/3eea50da644f6023e7f001b8738c54cb89aece4c) | fix | Scroller should scroll as soon as change detection completes ([#55105](https://github.com/angular/angular/pull/55105)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.6"></a>
|
||||
# 17.3.6 (2024-04-25)
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [826861b1fa](https://github.com/angular/angular/commit/826861b1fa7693010743f5dd881fb31ec33eee52) | fix | DeferBlockFixture.render should not wait for stability ([#55271](https://github.com/angular/angular/pull/55271)) |
|
||||
| [5cf14da35c](https://github.com/angular/angular/commit/5cf14da35cce1ea4456bae4365d3dbe6667b1881) | fix | make `ActivatedRoute` inject correct instance inside `@defer` blocks ([#55374](https://github.com/angular/angular/pull/55374)) |
|
||||
| [8979fba2c5](https://github.com/angular/angular/commit/8979fba2c5813673767a133caeec9ac768d17329) | fix | skip defer timers on the server ([#55480](https://github.com/angular/angular/pull/55480)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.5"></a>
|
||||
# 17.3.5 (2024-04-17)
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.4"></a>
|
||||
# 17.3.4 (2024-04-10)
|
||||
### common
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [53427d875d](https://github.com/angular/angular/commit/53427d875d33de16b1dbb04e76a9fe32a2b8a445) | fix | invalid ImageKit quality parameter ([#55193](https://github.com/angular/angular/pull/55193)) |
|
||||
| [766548c3ec](https://github.com/angular/angular/commit/766548c3ecc06ffd8f06ed9a7d0cbb3db6f1b0f6) | fix | skip transfer cache on client ([#55012](https://github.com/angular/angular/pull/55012)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.3"></a>
|
||||
# 17.3.3 (2024-04-03)
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [158ceaf062](https://github.com/angular/angular/commit/158ceaf062036bde2a828ee769580f99433a31a8) | fix | handle `ChainedInjector`s in injector debug utils ([#55144](https://github.com/angular/angular/pull/55144)) |
|
||||
| [4d043992e5](https://github.com/angular/angular/commit/4d043992e5635a2f841b633fb38d0009a39f05d0) | fix | test cleanup should not throw if Zone is not present ([#55096](https://github.com/angular/angular/pull/55096)) |
|
||||
### migrations
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [949dec26b8](https://github.com/angular/angular/commit/949dec26b860a500e90874ad778da74549d21d7e) | fix | avoid conflicts with some greek letters in control flow migration ([#55113](https://github.com/angular/angular/pull/55113)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.2"></a>
|
||||
# 17.3.2 (2024-03-28)
|
||||
### compiler
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [2b7bad5151](https://github.com/angular/angular/commit/2b7bad515100cbfa40b3e8d844bae13d43fd5602) | fix | invoke method-based tracking function with context ([#54960](https://github.com/angular/angular/pull/54960)) |
|
||||
### compiler-cli
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [b478dfbfda](https://github.com/angular/angular/commit/b478dfbfda3f32fbe723a1e8725e86490422520d) | fix | report errors when initializer APIs are used on private fields ([#55070](https://github.com/angular/angular/pull/55070)) |
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [708ba8115f](https://github.com/angular/angular/commit/708ba8115f7ad05201db5c529aefe4dd48fc64c5) | fix | establish proper injector resolution order for `@defer` blocks ([#55079](https://github.com/angular/angular/pull/55079)) |
|
||||
### http
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [cb433af0e1](https://github.com/angular/angular/commit/cb433af0e1ba61073eb4a02ccd75cf360e9fd409) | fix | include transferCache when cloning HttpRequest ([#54939](https://github.com/angular/angular/pull/54939)) |
|
||||
| [64f202cab9](https://github.com/angular/angular/commit/64f202cab9e7a5c873b17bbddd02368006426152) | fix | manage different body types for caching POST requests ([#54980](https://github.com/angular/angular/pull/54980)) |
|
||||
### migrations
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [2f9d94bc4a](https://github.com/angular/angular/commit/2f9d94bc4ab5a94e620a13404aba4e094f8b2344) | fix | account for variables in imports initializer ([#55081](https://github.com/angular/angular/pull/55081)) |
|
||||
### router
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [365fd50407](https://github.com/angular/angular/commit/365fd504077d0e7509efc3077ea4ae8bbafb01f7) | fix | RouterLinkActive will always remove active classes when links are not active ([#54982](https://github.com/angular/angular/pull/54982)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.1"></a>
|
||||
# 17.3.1 (2024-03-20)
|
||||
### compiler
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [c0788200e2](https://github.com/angular/angular/commit/c0788200e26406bacb90ee0079ea9753eebd1b32) | fix | capture data bindings for content projection purposes in blocks ([#54876](https://github.com/angular/angular/pull/54876)) |
|
||||
### compiler-cli
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [99e9474aa2](https://github.com/angular/angular/commit/99e9474aa2ccccdf4385fbac6b62b1a4585ed4b4) | fix | symbol feature detection for the compiler ([#54711](https://github.com/angular/angular/pull/54711)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.0"></a>
|
||||
# 17.3.0 (2024-03-13)
|
||||
### compiler
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [1a6beae8a2](https://github.com/angular/angular/commit/1a6beae8a2bdcff27d4c1e402f98246a52247906) | feat | Enable template pipeline by default. ([#54571](https://github.com/angular/angular/pull/54571)) |
|
||||
| [f386a04c9d](https://github.com/angular/angular/commit/f386a04c9ddc2951c8105d5cafcce7b4bedea569) | fix | handle two-way bindings to signal-based template variables in instruction generation ([#54714](https://github.com/angular/angular/pull/54714)) |
|
||||
| [1f129f114e](https://github.com/angular/angular/commit/1f129f114edb21137d74471dd6b652848d2ffb68) | fix | not catching for loop empty tracking expressions ([#54772](https://github.com/angular/angular/pull/54772)) |
|
||||
### compiler-cli
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [12dc4d074e](https://github.com/angular/angular/commit/12dc4d074e63edaff626003ad6136a8d122b2ba6) | fix | account for as expression in docs extraction ([#54414](https://github.com/angular/angular/pull/54414)) |
|
||||
| [da7fbb40f0](https://github.com/angular/angular/commit/da7fbb40f06e6e37504f69e7b335f8219f424de2) | fix | detect when the linker is working in unpublished angular and widen supported versions ([#54439](https://github.com/angular/angular/pull/54439)) |
|
||||
| [492e03f699](https://github.com/angular/angular/commit/492e03f699ca95df4cf854885253f63a5a1fb5c1) | fix | flag two-way bindings to non-signal values in templates ([#54714](https://github.com/angular/angular/pull/54714)) |
|
||||
| [5afa4f0ec1](https://github.com/angular/angular/commit/5afa4f0ec1b64b88ef875d48bd143e0f36e0a955) | fix | support `ModuleWithProviders` literal detection with `typeof` ([#54650](https://github.com/angular/angular/pull/54650)) |
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [331b16efd2](https://github.com/angular/angular/commit/331b16efd2f5af876e6dc0ad2474ee7a87b00de5) | feat | add API to inject attributes on the host node ([#54604](https://github.com/angular/angular/pull/54604)) |
|
||||
| [fb540e169a](https://github.com/angular/angular/commit/fb540e169a78a61f38d611f538eea8fdb0971f1d) | feat | add migration for invalid two-way bindings ([#54630](https://github.com/angular/angular/pull/54630)) |
|
||||
| [c687b8f453](https://github.com/angular/angular/commit/c687b8f4531252cd1c3dfbb9a7bd42bdbe666a36) | feat | expose new `output()` API ([#54650](https://github.com/angular/angular/pull/54650)) |
|
||||
| [c809069f21](https://github.com/angular/angular/commit/c809069f213244afd0e2d803a6a43510b218e6f5) | feat | introduce `outputFromObservable()` interop function ([#54650](https://github.com/angular/angular/pull/54650)) |
|
||||
| [aff65fd1f4](https://github.com/angular/angular/commit/aff65fd1f4a61ed76a6f9b623852f197eb3500e4) | feat | introduce `outputToObservable` interop helper ([#54650](https://github.com/angular/angular/pull/54650)) |
|
||||
| [33a6fab094](https://github.com/angular/angular/commit/33a6fab094205cc74aceb916e45c8afa22293cf4) | fix | apply TestBed provider overrides to `@defer` dependencies ([#54667](https://github.com/angular/angular/pull/54667)) |
|
||||
| [78e69117f0](https://github.com/angular/angular/commit/78e69117f07e8ae11aab3abe0343df815b3649be) | fix | generic inference for signal inputs may break with `--strictFunctionTypes` ([#54652](https://github.com/angular/angular/pull/54652)) |
|
||||
| [974958913c](https://github.com/angular/angular/commit/974958913ca632971f878a045537472f2c99c665) | feat | support TypeScript 5.4 ([#54414](https://github.com/angular/angular/pull/54414)) |
|
||||
| [39a50f9a8d](https://github.com/angular/angular/commit/39a50f9a8df5afc4968d18924f3d9d7d6b649d3a) | fix | ensure all initializer functions run in an injection context ([#54761](https://github.com/angular/angular/pull/54761)) |
|
||||
| [243ccce624](https://github.com/angular/angular/commit/243ccce62475ae03a2e727d2b3cb2d51a595c4a7) | fix | exclude class attribute intended for projection matching from directive matching ([#54800](https://github.com/angular/angular/pull/54800)) |
|
||||
| [2909e9817d](https://github.com/angular/angular/commit/2909e9817daf69b6478d7d09229491a9a48cff16) | fix | prevent infinite loops in clobbered elements check ([#54425](https://github.com/angular/angular/pull/54425)) |
|
||||
| [7243c704cf](https://github.com/angular/angular/commit/7243c704cf8a4986fae419793027458e142658f0) | fix | return a readonly signal on `asReadonly`. ([#54706](https://github.com/angular/angular/pull/54706)) |
|
||||
| [ffad7b8ea9](https://github.com/angular/angular/commit/ffad7b8ea9d1286ddb3ee7a2dac7dd33fd76b3aa) | fix | untrack various core operations ([#54614](https://github.com/angular/angular/pull/54614)) |
|
||||
| [bb35414a38](https://github.com/angular/angular/commit/bb35414a38f8a8447d03c66dc5bf60b84409f9e3) | perf | speed up retrieval of `DestroyRef` in `EventEmitter` ([#54748](https://github.com/angular/angular/pull/54748)) |
|
||||
### http
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [8d37ed035c](https://github.com/angular/angular/commit/8d37ed035c9e9796ba9a7b1f055404ea220dbb3b) | fix | exclude caching for authenticated HTTP requests ([#54746](https://github.com/angular/angular/pull/54746)) |
|
||||
### router
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [c1c7384e02](https://github.com/angular/angular/commit/c1c7384e02becc623c6a42985f7178ca98137264) | feat | Add reusable types for router guards ([#54580](https://github.com/angular/angular/pull/54580)) |
|
||||
| [7225485311](https://github.com/angular/angular/commit/722548531108e247660ebe6966b99b57d510b615) | fix | Navigations triggered by cancellation events should cancel previous navigation ([#54710](https://github.com/angular/angular/pull/54710)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
@@ -63,46 +218,6 @@
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.0-next.1"></a>
|
||||
# 17.3.0-next.1 (2024-02-27)
|
||||
### common
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [707bfc9b32](https://github.com/angular/angular/commit/707bfc9b326f321f302dccfdfebef7380c914eb5) | perf | `AsyncPipe` should not call `markForCheck` on subscription ([#54554](https://github.com/angular/angular/pull/54554)) |
|
||||
### compiler
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [1a6beae8a2](https://github.com/angular/angular/commit/1a6beae8a2bdcff27d4c1e402f98246a52247906) | feat | Enable template pipeline by default. ([#54571](https://github.com/angular/angular/pull/54571)) |
|
||||
### compiler-cli
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [12dc4d074e](https://github.com/angular/angular/commit/12dc4d074e63edaff626003ad6136a8d122b2ba6) | fix | account for as expression in docs extraction ([#54414](https://github.com/angular/angular/pull/54414)) |
|
||||
| [f578889ca2](https://github.com/angular/angular/commit/f578889ca2dbb22f2e050d4c4af6aa2d597bf70d) | fix | catch function instance properties in interpolated signal diagnostic ([#54325](https://github.com/angular/angular/pull/54325)) |
|
||||
| [f04ecc0cda](https://github.com/angular/angular/commit/f04ecc0cdaeb3a292a748b1ccc94ce70a573fc79) | fix | identify aliased initializer functions ([#54480](https://github.com/angular/angular/pull/54480)) |
|
||||
| [f5c566c079](https://github.com/angular/angular/commit/f5c566c0793eacf9ca146c8a6b8da15b0e8f4c4d) | fix | identify aliased initializer functions ([#54609](https://github.com/angular/angular/pull/54609)) |
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [331b16efd2](https://github.com/angular/angular/commit/331b16efd2f5af876e6dc0ad2474ee7a87b00de5) | feat | add API to inject attributes on the host node ([#54604](https://github.com/angular/angular/pull/54604)) |
|
||||
| [974958913c](https://github.com/angular/angular/commit/974958913ca632971f878a045537472f2c99c665) | feat | support TypeScript 5.4 ([#54414](https://github.com/angular/angular/pull/54414)) |
|
||||
| [dcb9deb363](https://github.com/angular/angular/commit/dcb9deb3631ff4e839f738f2fb97ca6b894256ef) | fix | collect providers from NgModules while rendering `@defer` block ([#52881](https://github.com/angular/angular/pull/52881)) |
|
||||
| [ff40c9f762](https://github.com/angular/angular/commit/ff40c9f762b2c14870ac2859201ece9660087e79) | fix | fix typo in injectors.svg file ([#54596](https://github.com/angular/angular/pull/54596)) |
|
||||
### migrations
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [71e0c7df69](https://github.com/angular/angular/commit/71e0c7df695f274a54d5ffb9dfc0587d06d3a953) | fix | resolve infinite loop for a single line element with a long tag name and angle bracket on a new line ([#54588](https://github.com/angular/angular/pull/54588)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.3.0-next.0"></a>
|
||||
# 17.3.0-next.0 (2024-02-21)
|
||||
### compiler-cli
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [da7fbb40f0](https://github.com/angular/angular/commit/da7fbb40f06e6e37504f69e7b335f8219f424de2) | fix | detect when the linker is working in unpublished angular and widen supported versions ([#54439](https://github.com/angular/angular/pull/54439)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="17.2.2"></a>
|
||||
# 17.2.2 (2024-02-21)
|
||||
### common
|
||||
|
||||
@@ -389,7 +389,6 @@ The following documents can help you sort out issues with GitHub accounts and mu
|
||||
|
||||
|
||||
|
||||
[angular-group]: https://groups.google.com/forum/#!forum/angular
|
||||
[coc]: https://github.com/angular/code-of-conduct/blob/main/CODE_OF_CONDUCT.md
|
||||
[commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#
|
||||
[corporate-cla]: https://cla.developers.google.com/about/google-corporate
|
||||
@@ -398,7 +397,3 @@ The following documents can help you sort out issues with GitHub accounts and mu
|
||||
[discord]: https://discord.gg/angular
|
||||
[individual-cla]: https://cla.developers.google.com/about/google-individual
|
||||
[js-style-guide]: https://google.github.io/styleguide/jsguide.html
|
||||
[jsfiddle]: https://jsfiddle.net/
|
||||
[plunker]: https://plnkr.co/edit
|
||||
[runnable]: https://runnable.com/
|
||||
[stackoverflow]: https://stackoverflow.com/questions/tagged/angular
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<h1 align="center">Angular - The modern web developer's platform</h1>
|
||||
|
||||
<p align="center">
|
||||
<img src="aio/src/assets/images/logos/angular/angular_renaissance.png" alt="angular-logo" width="120px" height="120px"/>
|
||||
<img src="adev/src/assets/images/press-kit/angular_icon_gradient.gif" alt="angular-logo" width="120px" height="120px"/>
|
||||
<br>
|
||||
<em>Angular is a development platform for building mobile and desktop web applications
|
||||
<br> using TypeScript/JavaScript and other languages.</em>
|
||||
@@ -167,8 +167,8 @@ Join the conversation and help the community.
|
||||
[angularmaterial]: https://material.angular.io/
|
||||
[cli]: https://angular.dev/tools/cli
|
||||
[architecture]: https://angular.dev/essentials
|
||||
[componentstemplates]: https://angular.dev/tutorials/learn-angular/components-in-angular
|
||||
[forms]: https://angular.dev/tutorials/learn-angular/forms
|
||||
[componentstemplates]: https://angular.dev/tutorials/learn-angular/1-components-in-angular
|
||||
[forms]: https://angular.dev/tutorials/learn-angular/15-forms
|
||||
[api]: https://angular.dev/api
|
||||
[angularelements]: https://angular.dev/guide/elements
|
||||
[ssr]: https://angular.dev/guide/ssr
|
||||
|
||||
@@ -9,20 +9,6 @@ workspace(
|
||||
load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
|
||||
load("//:yarn.bzl", "YARN_LABEL")
|
||||
|
||||
# Add a patch fix for rules_webtesting v0.3.5 required for enabling runfiles on Windows.
|
||||
# TODO: Remove the http_archive for this transitive dependency when a release is cut
|
||||
# for https://github.com/bazelbuild/rules_webtesting/commit/581b1557e382f93419da6a03b91a45c2ac9a9ec8
|
||||
# and the version is updated in rules_nodejs.
|
||||
http_archive(
|
||||
name = "io_bazel_rules_webtesting",
|
||||
patch_args = ["-p1"],
|
||||
patches = [
|
||||
"//:tools/bazel-repo-patches/rules_webtesting__windows_runfiles_fix.patch",
|
||||
],
|
||||
sha256 = "e9abb7658b6a129740c0b3ef6f5a2370864e102a5ba5ffca2cea565829ed825a",
|
||||
urls = ["https://github.com/bazelbuild/rules_webtesting/releases/download/0.3.5/rules_webtesting.tar.gz"],
|
||||
)
|
||||
|
||||
http_archive(
|
||||
name = "build_bazel_rules_nodejs",
|
||||
patches = [
|
||||
@@ -65,16 +51,16 @@ load("@rules_nodejs//nodejs:repositories.bzl", "nodejs_register_toolchains")
|
||||
nodejs_register_toolchains(
|
||||
name = "nodejs",
|
||||
node_repositories = {
|
||||
"18.18.2-darwin_arm64": ("node-v18.18.2-darwin-arm64.tar.gz", "node-v18.18.2-darwin-arm64", "9f982cc91b28778dd8638e4f94563b0c2a1da7aba62beb72bd427721035ab553"),
|
||||
"18.18.2-darwin_amd64": ("node-v18.18.2-darwin-x64.tar.gz", "node-v18.18.2-darwin-x64", "5bb8da908ed590e256a69bf2862238c8a67bc4600119f2f7721ca18a7c810c0f"),
|
||||
"18.18.2-linux_arm64": ("node-v18.18.2-linux-arm64.tar.xz", "node-v18.18.2-linux-arm64", "2e630e18548627f61eaf573233da7949dc0a1df5eef3f486fa9820c5f6c121aa"),
|
||||
"18.18.2-linux_ppc64le": ("node-v18.18.2-linux-ppc64le.tar.xz", "node-v18.18.2-linux-ppc64le", "b0adff5cf5938266b711d6c724fb134d802e0dee40b3a3f73d162de1b3d11880"),
|
||||
"18.18.2-linux_s390x": ("node-v18.18.2-linux-s390x.tar.xz", "node-v18.18.2-linux-s390x", "c70ec2074b5e2b42c55bb4b8105418b67bf8a61c500d9376a07430dfcc341fdb"),
|
||||
"18.18.2-linux_amd64": ("node-v18.18.2-linux-x64.tar.xz", "node-v18.18.2-linux-x64", "75aba25ae76999309fc6c598efe56ce53fbfc221381a44a840864276264ab8ac"),
|
||||
"18.18.2-windows_amd64": ("node-v18.18.2-win-x64.zip", "node-v18.18.2-win-x64", "3bb0e51e579a41a22b3bf6cb2f3e79c03801aa17acbe0ca00fc555d1282e7acd"),
|
||||
"18.19.1-darwin_arm64": ("node-v18.19.1-darwin-arm64.tar.gz", "node-v18.19.1-darwin-arm64", "0c7249318868877032ed21cc0ed450015ee44b31b9b281955521cd3fc39fbfa3"),
|
||||
"18.19.1-darwin_amd64": ("node-v18.19.1-darwin-x64.tar.gz", "node-v18.19.1-darwin-x64", "ab67c52c0d215d6890197c951e1bd479b6140ab630212b96867395e21d813016"),
|
||||
"18.19.1-linux_arm64": ("node-v18.19.1-linux-arm64.tar.xz", "node-v18.19.1-linux-arm64", "228ad1eee660fba3f9fd2cccf02f05b8ebccc294d27f22c155d20b233a9d76b3"),
|
||||
"18.19.1-linux_ppc64le": ("node-v18.19.1-linux-ppc64le.tar.xz", "node-v18.19.1-linux-ppc64le", "2e5812b8fc00548e2e8ab9daa88ace13974c16b6ba5595a7a50c35f848f7d432"),
|
||||
"18.19.1-linux_s390x": ("node-v18.19.1-linux-s390x.tar.xz", "node-v18.19.1-linux-s390x", "15106acf4c9e3aca02416dd89fb5c71af77097042455a73f9caa064c1988ead5"),
|
||||
"18.19.1-linux_amd64": ("node-v18.19.1-linux-x64.tar.xz", "node-v18.19.1-linux-x64", "f35f24edd4415cd609a2ebc03be03ed2cfe211d7333d55c752d831754fb849f0"),
|
||||
"18.19.1-windows_amd64": ("node-v18.19.1-win-x64.zip", "node-v18.19.1-win-x64", "ff08f8fe253fba9274992d7052e9d9a70141342d7b36ddbd6e84cbe823e312c6"),
|
||||
},
|
||||
# We need at least Node 18.17 due to some transitive dependencies.
|
||||
node_version = "18.18.2",
|
||||
node_version = "18.19.1",
|
||||
)
|
||||
|
||||
# Download npm dependencies.
|
||||
@@ -206,10 +192,10 @@ cldr_xml_data_repository(
|
||||
# sass rules
|
||||
http_archive(
|
||||
name = "io_bazel_rules_sass",
|
||||
sha256 = "974f5e14c54d300ca63a67910ebfcea6d838d8811fefc61184f2872107152705",
|
||||
strip_prefix = "rules_sass-888dd9c02709e228b60a8b3e51e2b16b2ca5279d",
|
||||
sha256 = "e50e1ca1b0a737d2c09efbbb886e0194d99caed617337a766b17c1ee4bae93f2",
|
||||
strip_prefix = "rules_sass-fcce06104e072bbebbf92c1a244ea9f8c2fc8402",
|
||||
urls = [
|
||||
"https://github.com/bazelbuild/rules_sass/archive/888dd9c02709e228b60a8b3e51e2b16b2ca5279d.zip",
|
||||
"https://github.com/bazelbuild/rules_sass/archive/fcce06104e072bbebbf92c1a244ea9f8c2fc8402.zip",
|
||||
],
|
||||
)
|
||||
|
||||
|
||||
+29
-18
@@ -1,8 +1,9 @@
|
||||
load("//:packages.bzl", "link_packages")
|
||||
load("@aio_npm//@angular/build-tooling/bazel/remote-execution:index.bzl", "ENABLE_NETWORK")
|
||||
load("@npm//@angular/build-tooling/bazel/remote-execution:index.bzl", "ENABLE_NETWORK")
|
||||
load("@bazel_skylib//rules:common_settings.bzl", "bool_flag")
|
||||
load("@build_bazel_rules_nodejs//:index.bzl", "copy_to_bin")
|
||||
load("@npm//@angular-devkit/architect-cli:index.bzl", "architect", "architect_test")
|
||||
load("@bazel_skylib//lib:collections.bzl", "collections")
|
||||
load("//adev/tools/local_deps:index.bzl", "ensure_local_package_deps", "link_local_packages")
|
||||
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
@@ -30,7 +31,17 @@ TEST_FILES = APPLICATION_FILES + [
|
||||
["**/*.spec.ts"],
|
||||
)
|
||||
|
||||
APPLICATION_DEPS = link_packages([
|
||||
APPLICATION_ASSETS = [
|
||||
"//adev/src/assets/images",
|
||||
"//adev/src/assets/textures",
|
||||
"//adev/src/assets/previews",
|
||||
"//adev/src/assets:tutorials",
|
||||
"//adev/src/assets/icons",
|
||||
"//adev/src/assets:api",
|
||||
"//adev/src/assets:content",
|
||||
]
|
||||
|
||||
APPLICATION_DEPS = [
|
||||
"@npm//@angular-devkit/build-angular",
|
||||
"@npm//@angular/animations",
|
||||
"@npm//@angular/cdk",
|
||||
@@ -50,13 +61,6 @@ APPLICATION_DEPS = link_packages([
|
||||
"@npm//ogl",
|
||||
"@npm//rxjs",
|
||||
"@npm//typescript",
|
||||
"//adev/src/assets/images",
|
||||
"//adev/src/assets/textures",
|
||||
"//adev/src/assets/previews",
|
||||
"//adev/src/assets:tutorials",
|
||||
"//adev/src/assets/icons",
|
||||
"//adev/src/assets:api",
|
||||
"//adev/src/assets:content",
|
||||
"@npm//@typescript/vfs",
|
||||
"@npm//@codemirror/state",
|
||||
"@npm//@codemirror/view",
|
||||
@@ -76,11 +80,10 @@ APPLICATION_DEPS = link_packages([
|
||||
"@npm//xterm",
|
||||
"@npm//xterm-addon-fit",
|
||||
"@npm//angular-split",
|
||||
])
|
||||
]
|
||||
|
||||
TEST_DEPS = APPLICATION_DEPS + link_packages([
|
||||
TEST_DEPS = APPLICATION_DEPS + [
|
||||
"@npm//@angular/platform-browser-dynamic",
|
||||
"@npm//@angular/build-tooling/bazel/browsers/chromium",
|
||||
"@npm//@types/jasmine",
|
||||
"@npm//@types/node",
|
||||
"@npm//assert",
|
||||
@@ -90,8 +93,13 @@ TEST_DEPS = APPLICATION_DEPS + link_packages([
|
||||
"@npm//karma-coverage",
|
||||
"@npm//karma-jasmine",
|
||||
"@npm//karma-jasmine-html-reporter",
|
||||
"//aio/tools:windows-chromium-path",
|
||||
])
|
||||
]
|
||||
|
||||
# Create `npm_link` targets for all dependencies that correspond to a
|
||||
# first-party Angular package that can be built from `HEAD`.
|
||||
link_local_packages(
|
||||
all_deps = collections.uniq(APPLICATION_DEPS + TEST_DEPS),
|
||||
)
|
||||
|
||||
copy_to_bin(
|
||||
name = "application_files_bin",
|
||||
@@ -129,7 +137,7 @@ architect(
|
||||
"--output-path=build",
|
||||
] + config_based_architect_flags,
|
||||
chdir = "$(RULEDIR)",
|
||||
data = APPLICATION_DEPS + [
|
||||
data = ensure_local_package_deps(APPLICATION_DEPS) + APPLICATION_ASSETS + [
|
||||
":application_files_bin",
|
||||
],
|
||||
# Network is required to inline fonts.
|
||||
@@ -149,7 +157,7 @@ architect(
|
||||
"--watch",
|
||||
],
|
||||
chdir = package_name(),
|
||||
data = APPLICATION_DEPS + [
|
||||
data = ensure_local_package_deps(APPLICATION_DEPS) + APPLICATION_ASSETS + [
|
||||
":application_files_bin",
|
||||
],
|
||||
tags = [
|
||||
@@ -164,7 +172,10 @@ architect_test(
|
||||
"--no-watch",
|
||||
],
|
||||
chdir = package_name(),
|
||||
data = TEST_DEPS + TEST_FILES,
|
||||
data = ensure_local_package_deps(TEST_DEPS) + TEST_FILES + APPLICATION_ASSETS + [
|
||||
"//aio/tools:windows-chromium-path",
|
||||
"@npm//@angular/build-tooling/bazel/browsers/chromium",
|
||||
],
|
||||
env = {
|
||||
"CHROME_BIN": "../$(CHROMIUM)",
|
||||
},
|
||||
|
||||
+8
-9
@@ -19,9 +19,7 @@
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"options": {
|
||||
"externalDependencies": [
|
||||
"path"
|
||||
],
|
||||
"externalDependencies": ["path"],
|
||||
"outputPath": "dist/angular-dev",
|
||||
"index": "src/index.html",
|
||||
"browser": "src/main.ts",
|
||||
@@ -29,11 +27,7 @@
|
||||
"polyfills": ["src/polyfills.ts", "zone.js"],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/robots.txt",
|
||||
"src/assets"
|
||||
],
|
||||
"assets": ["src/favicon.ico", "src/robots.txt", "src/assets"],
|
||||
"styles": ["@angular/docs/styles/global-styles.scss"],
|
||||
"scripts": [],
|
||||
"webWorkerTsConfig": "tsconfig.worker.json",
|
||||
@@ -99,6 +93,11 @@
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": "dca119a9-da31-47f7-a6cb-b60541037021"
|
||||
"analytics": "dca119a9-da31-47f7-a6cb-b60541037021",
|
||||
"cache": {
|
||||
// Disable build caching as the cache folder will just be dropped
|
||||
// when run under Bazel sandboxed execution.
|
||||
"enabled": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright Google LLC All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.dev/license
|
||||
*/
|
||||
|
||||
export const VERSIONS_CONFIG = {
|
||||
currentVersion: 'stable',
|
||||
historicalVersionsLinkPattern: 'https://v{{version}}.angular.dev',
|
||||
mainVersions: [
|
||||
{
|
||||
version: 'stable',
|
||||
url: 'https://angular.dev',
|
||||
},
|
||||
{
|
||||
version: 'v16',
|
||||
url: 'https://v16.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v15',
|
||||
url: 'https://v15.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v14',
|
||||
url: 'https://v14.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v13',
|
||||
url: 'https://v13.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v12',
|
||||
url: 'https://v12.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v11',
|
||||
url: 'https://v11.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v10',
|
||||
url: 'https://v10.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v9',
|
||||
url: 'https://v9.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v8',
|
||||
url: 'https://v8.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v7',
|
||||
url: 'https://v7.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v6',
|
||||
url: 'https://v6.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v5',
|
||||
url: 'https://v5.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v4',
|
||||
url: 'https://v4.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v2',
|
||||
url: 'https://v2.angular.io/docs',
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -1,5 +1,5 @@
|
||||
<div [attr.id]="SECONDARY_NAV_ID" class="adev-secondary-nav-mask" [class.docs-nav-secondary--open]="isSecondaryNavVisible()" (docsClickOutside)="close()" [docsClickOutsideIgnore]="[PRIMARY_NAV_ID]">
|
||||
<div class="docs-nav-secondary docs-scroll-track-transparent" [style.transform]="translateX()" [style.transition]="transition">
|
||||
<div class="docs-nav-secondary docs-scroll-track-transparent" [style.transform]="translateX()" [style.transition]="transition()">
|
||||
<!-- Secondary Nav -->
|
||||
@if (navigationItems && navigationItems.length > 0) {
|
||||
<docs-navigation-list
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
PLATFORM_ID,
|
||||
computed,
|
||||
inject,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';
|
||||
import {
|
||||
@@ -76,7 +77,7 @@ export class SecondaryNavigation implements OnInit {
|
||||
const level = this.navigationState.expandedItems()?.length ?? 0;
|
||||
return `translateX(${-level * 100}%)`;
|
||||
});
|
||||
transition: string = '0ms';
|
||||
transition = signal('0ms');
|
||||
|
||||
readonly PRIMARY_NAV_ID = PRIMARY_NAV_ID;
|
||||
readonly SECONDARY_NAV_ID = SECONDARY_NAV_ID;
|
||||
@@ -182,7 +183,7 @@ export class SecondaryNavigation implements OnInit {
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.transition = `${ANIMATION_DURATION}ms`;
|
||||
this.transition.set(`${ANIMATION_DURATION}ms`);
|
||||
}, ANIMATION_DURATION);
|
||||
}
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ import {HttpClient} from '@angular/common/http';
|
||||
import {Injectable, inject} from '@angular/core';
|
||||
import {DocContent, DocsContentLoader} from '@angular/docs';
|
||||
import {Router} from '@angular/router';
|
||||
import {firstValueFrom} from 'rxjs';
|
||||
import {map} from 'rxjs/operators';
|
||||
|
||||
@Injectable()
|
||||
@@ -27,12 +28,13 @@ export class ContentLoader implements DocsContentLoader {
|
||||
try {
|
||||
this.cache.set(
|
||||
path,
|
||||
this.httpClient
|
||||
.get(`assets/content/${path}`, {
|
||||
responseType: 'text',
|
||||
})
|
||||
.pipe(map((contents) => ({contents, id: path})))
|
||||
.toPromise(),
|
||||
firstValueFrom(
|
||||
this.httpClient
|
||||
.get(`assets/content/${path}`, {
|
||||
responseType: 'text',
|
||||
})
|
||||
.pipe(map((contents) => ({contents, id: path}))),
|
||||
),
|
||||
);
|
||||
} catch {
|
||||
this.router.navigateByUrl('/404');
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
* found in the LICENSE file at https://angular.dev/license
|
||||
*/
|
||||
|
||||
import {Component, Inject} from '@angular/core';
|
||||
import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
|
||||
import {MAT_SNACK_BAR_DATA, MatSnackBarAction, MatSnackBarRef} from '@angular/material/snack-bar';
|
||||
|
||||
export interface ErrorSnackBarData {
|
||||
@@ -16,6 +16,7 @@ export interface ErrorSnackBarData {
|
||||
|
||||
@Component({
|
||||
selector: 'error-snack-bar',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
{{ message }}
|
||||
<button
|
||||
@@ -28,8 +29,8 @@ export interface ErrorSnackBarData {
|
||||
{{ actionText }}
|
||||
</button>
|
||||
`,
|
||||
imports: [MatSnackBarAction],
|
||||
standalone: true,
|
||||
imports: [MatSnackBarAction],
|
||||
styles: `:host { display: flex; align-items: center; button { margin-left: 16px }}`,
|
||||
})
|
||||
export class ErrorSnackBar {
|
||||
|
||||
@@ -82,7 +82,7 @@ export class ThemeManager {
|
||||
}
|
||||
|
||||
private watchPreferredColorScheme() {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
|
||||
window.matchMedia(PREFERS_COLOR_SCHEME_DARK).addEventListener('change', (event) => {
|
||||
const preferredScheme = event.matches ? 'dark' : 'light';
|
||||
this.setThemeBodyClasses(preferredScheme);
|
||||
});
|
||||
@@ -90,5 +90,5 @@ export class ThemeManager {
|
||||
}
|
||||
|
||||
function preferredScheme(): 'dark' | 'light' {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
return window.matchMedia(PREFERS_COLOR_SCHEME_DARK).matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
@@ -7,74 +7,7 @@
|
||||
*/
|
||||
|
||||
import {Injectable, VERSION, computed, signal} from '@angular/core';
|
||||
|
||||
// TODO(josephperrott): extract this out of the file into a managed location.
|
||||
const VERSIONS_CONFIG = {
|
||||
currentVersion: 'stable',
|
||||
historicalVersionsLinkPattern: 'https://v{{version}}.angular.dev',
|
||||
mainVersions: [
|
||||
{
|
||||
version: 'stable',
|
||||
url: 'https://angular.dev',
|
||||
},
|
||||
{
|
||||
version: 'v16',
|
||||
url: 'https://v16.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v15',
|
||||
url: 'https://v15.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v14',
|
||||
url: 'https://v14.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v13',
|
||||
url: 'https://v13.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v12',
|
||||
url: 'https://v12.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v11',
|
||||
url: 'https://v11.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v10',
|
||||
url: 'https://v10.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v9',
|
||||
url: 'https://v9.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v8',
|
||||
url: 'https://v8.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v7',
|
||||
url: 'https://v7.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v6',
|
||||
url: 'https://v6.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v5',
|
||||
url: 'https://v5.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v4',
|
||||
url: 'https://v4.angular.io/docs',
|
||||
},
|
||||
{
|
||||
version: 'v2',
|
||||
url: 'https://v2.angular.io/docs',
|
||||
},
|
||||
],
|
||||
};
|
||||
import {VERSIONS_CONFIG} from '../constants/versions';
|
||||
|
||||
export interface Version {
|
||||
displayName: string;
|
||||
|
||||
@@ -8,6 +8,7 @@ $width-breakpoint: 950px;
|
||||
container-name: embedded-editor;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border: 1px solid var(--senary-contrast);
|
||||
}
|
||||
|
||||
// The entire thing - editor, terminal, console
|
||||
|
||||
@@ -8,13 +8,14 @@
|
||||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {DocContent, DocViewer} from '@angular/docs';
|
||||
import {Component, inject} from '@angular/core';
|
||||
import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
|
||||
import {toSignal} from '@angular/core/rxjs-interop';
|
||||
import {ActivatedRoute} from '@angular/router';
|
||||
import {map} from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'docs-docs',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone: true,
|
||||
imports: [CommonModule, DocViewer],
|
||||
styleUrls: ['./docs.component.scss'],
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -36,6 +36,7 @@
|
||||
box-sizing: border-box;
|
||||
transition: background 0.3s ease, border 0.3s ease;
|
||||
|
||||
h1,
|
||||
p {
|
||||
display: inline;
|
||||
font-size: 0.875rem;
|
||||
|
||||
+21
-2
@@ -108,7 +108,6 @@
|
||||
& > .docs-code {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-height: 93vh;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
@@ -119,6 +118,7 @@
|
||||
|
||||
button {
|
||||
transition: background-color 0.3s ease;
|
||||
font-family: monospace;
|
||||
|
||||
&.hljs-ln-line {
|
||||
font-weight: 400;
|
||||
@@ -154,6 +154,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.docs-reference-cli-toc {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.adev-reference-tab {
|
||||
min-width: 50ch;
|
||||
margin-block-start: 2.5rem;
|
||||
@@ -267,7 +271,9 @@
|
||||
background-color: var(--octonary-contrast);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transition: background-color 0.3s ease, border 0.3s ease;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
border 0.3s ease;
|
||||
|
||||
// h3 + code || # of overloads
|
||||
.docs-reference-header {
|
||||
@@ -404,4 +410,17 @@
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-ref-content {
|
||||
padding: 1rem 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-block-start: 1px solid var(--senary-contrast);
|
||||
}
|
||||
|
||||
.docs-param-keyword {
|
||||
display: block;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+25
-4
@@ -16,12 +16,12 @@ import {
|
||||
inject,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import {DOCUMENT, NgFor, NgIf} from '@angular/common';
|
||||
import {DOCUMENT, NgFor, NgIf, ViewportScroller} from '@angular/common';
|
||||
import {MatTabGroup, MatTabsModule} from '@angular/material/tabs';
|
||||
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
|
||||
import {distinctUntilChanged, map} from 'rxjs/operators';
|
||||
import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
|
||||
import {distinctUntilChanged, filter, map, take} from 'rxjs/operators';
|
||||
import {DocContent, DocViewer} from '@angular/docs';
|
||||
import {ActivatedRoute, Router, RouterLink} from '@angular/router';
|
||||
import {ActivatedRoute, Router, RouterLink, Scroll} from '@angular/router';
|
||||
import {ApiItemType} from './../interfaces/api-item-type';
|
||||
import {ReferenceScrollHandler} from '../services/reference-scroll-handler.service';
|
||||
import {
|
||||
@@ -51,6 +51,15 @@ export default class ApiReferenceDetailsPage implements OnInit, AfterViewInit {
|
||||
private readonly document = inject(DOCUMENT);
|
||||
private readonly router = inject(Router);
|
||||
private readonly scrollHandler = inject(ReferenceScrollHandler);
|
||||
private readonly scroller = inject(ViewportScroller);
|
||||
private scrollEvent = toSignal(
|
||||
this.router.events.pipe(
|
||||
filter((e): e is Scroll => e instanceof Scroll),
|
||||
take(1),
|
||||
),
|
||||
{initialValue: null},
|
||||
);
|
||||
private cardsDisplayedOnInit = false;
|
||||
|
||||
ApiItemType = ApiItemType;
|
||||
|
||||
@@ -67,10 +76,22 @@ export default class ApiReferenceDetailsPage implements OnInit, AfterViewInit {
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.setActiveTab();
|
||||
if (this.canDisplayCards()) {
|
||||
this.cardsDisplayedOnInit = true;
|
||||
}
|
||||
this.listenToTabChange();
|
||||
}
|
||||
|
||||
membersCardsLoaded(): void {
|
||||
const event = this.scrollEvent();
|
||||
if (this.cardsDisplayedOnInit && event) {
|
||||
// Cards loaded after scroll event happened. We have to handle the scroll event manually
|
||||
if (event.position) {
|
||||
this.scroller.scrollToPosition(event.position);
|
||||
} else if (event.anchor) {
|
||||
this.scroller.scrollToAnchor(event.anchor);
|
||||
}
|
||||
}
|
||||
this.scrollHandler.setupListeners(API_TAB_CLASS_NAME);
|
||||
}
|
||||
|
||||
|
||||
+15
-13
@@ -3,6 +3,11 @@
|
||||
<h6>Getting Started</h6>
|
||||
<h1 tabindex="-1">API Reference</h1>
|
||||
</header>
|
||||
|
||||
@if (featuredGroup().items.length) {
|
||||
<adev-api-items-section [group]="featuredGroup()" class="adev-featured-list" />
|
||||
}
|
||||
|
||||
<form class="adev-reference-list-form">
|
||||
<docs-text-field
|
||||
name="query"
|
||||
@@ -22,23 +27,20 @@
|
||||
</div>
|
||||
<ul class="adev-reference-list-legend">
|
||||
@for (itemType of itemTypes; track itemType) {
|
||||
<li
|
||||
class="adev-reference-list-legend-item"
|
||||
[class.adev-reference-list-legend-item-active]="type() === itemType"
|
||||
(click)="filterByItemType(itemType)"
|
||||
>
|
||||
<docs-api-item-label [type]="itemType" mode="short" class="docs-api-item-label" />
|
||||
<span>{{ itemType | adevApiLabel : 'full' }}</span>
|
||||
</li>
|
||||
<li
|
||||
class="adev-reference-list-legend-item"
|
||||
[class.adev-reference-list-legend-item-active]="type() === itemType"
|
||||
(click)="filterByItemType(itemType)"
|
||||
>
|
||||
<docs-api-item-label [type]="itemType" mode="short" class="docs-api-item-label" />
|
||||
<span class="docs-api-item-label-full">{{ itemType | adevApiLabel : 'full' }}</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</form>
|
||||
|
||||
@if (featuredGroup().items.length) {
|
||||
<adev-api-items-section [group]="featuredGroup()" class="adev-featured-list" />
|
||||
} @for (group of filteredGroups(); track group) {
|
||||
<adev-api-items-section [group]="group" />
|
||||
@for (group of filteredGroups(); track group) {
|
||||
<adev-api-items-section [group]="group" />
|
||||
}
|
||||
|
||||
<span id="deprecated-description" class="docs-deprecated-description">Deprecated</span>
|
||||
</div>
|
||||
|
||||
+7
-7
@@ -77,8 +77,9 @@
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap-reverse;
|
||||
gap: 1.5rem;
|
||||
padding-block-start: 0;
|
||||
padding-block-start: 1.5rem;
|
||||
padding-block-end: 2rem;
|
||||
border-block: 1px solid var(--senary-contrast);
|
||||
}
|
||||
|
||||
.adev-reference-list-form-part-two {
|
||||
@@ -89,13 +90,12 @@
|
||||
|
||||
.adev-featured-list {
|
||||
display: block;
|
||||
padding-block-end: 2rem;
|
||||
padding-block-start: 1.5rem;
|
||||
padding-block-end: 1rem;
|
||||
margin-block: 1rem;
|
||||
border-block: 1px solid var(--senary-contrast);
|
||||
border-top: 0;
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.docs-deprecated-description {
|
||||
display: none;
|
||||
.docs-api-item-label-full {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@ import {ApiItemsGroup} from '../interfaces/api-items-group';
|
||||
import {ApiManifest} from '../interfaces/api-manifest';
|
||||
|
||||
export const FEATURED_API_ITEMS_KEY = 'apiFeaturedItems';
|
||||
export const FEATURED_GROUP_TITLE = 'Featured';
|
||||
export const FEATURED_GROUP_TITLE = 'Most Common';
|
||||
|
||||
export type FeaturedItemsByGroup = Record<string, ApiItem[]>;
|
||||
|
||||
|
||||
@@ -19,4 +19,5 @@ export enum ApiItemType {
|
||||
PIPE = 'pipe',
|
||||
NG_MODULE = 'ng_module',
|
||||
TYPE_ALIAS = 'type_alias',
|
||||
INITIALIZER_API_FUNCTION = 'initializer_api_function',
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
*/
|
||||
|
||||
import {Pipe, PipeTransform} from '@angular/core';
|
||||
|
||||
import {ApiItemType} from '../interfaces/api-item-type';
|
||||
|
||||
@Pipe({
|
||||
@@ -27,6 +28,7 @@ export class ApiLabel implements PipeTransform {
|
||||
[ApiItemType.PIPE]: 'P',
|
||||
[ApiItemType.NG_MODULE]: 'M',
|
||||
[ApiItemType.TYPE_ALIAS]: 'T',
|
||||
[ApiItemType.INITIALIZER_API_FUNCTION]: 'IA',
|
||||
};
|
||||
|
||||
private readonly fullLabelsMap: Record<ApiItemType, string> = {
|
||||
@@ -42,6 +44,7 @@ export class ApiLabel implements PipeTransform {
|
||||
[ApiItemType.PIPE]: 'Pipe',
|
||||
[ApiItemType.NG_MODULE]: 'Module',
|
||||
[ApiItemType.TYPE_ALIAS]: 'Type Alias',
|
||||
[ApiItemType.INITIALIZER_API_FUNCTION]: 'Initializer API',
|
||||
};
|
||||
|
||||
transform(value: ApiItemType, labelType: 'short' | 'full'): string {
|
||||
|
||||
@@ -160,9 +160,6 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
|
||||
for (const line of Array.from(activeLines)) {
|
||||
line.classList.remove(API_TAB_ACTIVE_CODE_LINE);
|
||||
}
|
||||
this.getAllMemberCards().forEach((card) => {
|
||||
card.blur();
|
||||
});
|
||||
} else {
|
||||
const lines = this.document.querySelectorAll<HTMLButtonElement>(
|
||||
`button[${MEMBER_ID_ATTRIBUTE}="${currentActiveMemberId}"]`,
|
||||
@@ -170,7 +167,7 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
|
||||
for (const line of Array.from(lines)) {
|
||||
line.classList.add(API_TAB_ACTIVE_CODE_LINE);
|
||||
}
|
||||
this.document.getElementById(`${currentActiveMemberId}`)?.focus();
|
||||
this.document.getElementById(`${currentActiveMemberId}`)?.focus({preventScroll: true});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -179,7 +176,9 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
|
||||
return;
|
||||
}
|
||||
|
||||
card.focus();
|
||||
if (card !== <HTMLElement>document.activeElement) {
|
||||
(<HTMLElement>document.activeElement).blur();
|
||||
}
|
||||
|
||||
this.window.scrollTo({
|
||||
top: card!.offsetTop - this.membersMarginTopInPx(),
|
||||
@@ -211,8 +210,9 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
|
||||
|
||||
this.resizeObserver = new ResizeObserver((_) => {
|
||||
this.ngZone.run(() => {
|
||||
if (tabBody.offsetTop) {
|
||||
this.membersMarginTopInPx.set(tabBody.offsetTop);
|
||||
const offsetTop = tabBody.getBoundingClientRect().top;
|
||||
if (offsetTop) {
|
||||
this.membersMarginTopInPx.set(offsetTop);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -117,6 +117,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
|
||||
path: 'guide/components/outputs',
|
||||
contentPath: 'guide/components/outputs',
|
||||
},
|
||||
{
|
||||
label: 'output() function',
|
||||
path: 'guide/components/output-fn',
|
||||
contentPath: 'guide/components/output-function',
|
||||
},
|
||||
{
|
||||
label: 'Content projection with ng-content',
|
||||
path: 'guide/components/content-projection',
|
||||
@@ -1143,9 +1148,9 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
|
||||
contentPath: 'reference/errors/NG3003',
|
||||
},
|
||||
{
|
||||
label: 'NG5000: Hydration with unsupported Zone.js instance.',
|
||||
path: 'errors/NG5000',
|
||||
contentPath: 'reference/errors/NG5000',
|
||||
label: 'NG05000: Hydration with unsupported Zone.js instance.',
|
||||
path: 'errors/NG05000',
|
||||
contentPath: 'reference/errors/NG05000',
|
||||
},
|
||||
{
|
||||
label: 'NG6100: NgModule.id Set to module.id anti-pattern',
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 MiB After Width: | Height: | Size: 3.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
@@ -17,16 +17,16 @@ Use attribute binding template syntax to control the values of accessibility-rel
|
||||
When binding to ARIA attributes in Angular, you must use the `attr.` prefix. The ARIA specification depends specifically on HTML attributes rather than properties of DOM elements.
|
||||
|
||||
<docs-code language="html">
|
||||
<!-- Use attr. when binding to an ARIA attribute -->
|
||||
<button [attr.aria-label]="myActionLabel">…</button>
|
||||
<!-- Use attr. when binding to an ARIA attribute -->
|
||||
<button [attr.aria-label]="myActionLabel">…</button>
|
||||
</docs-code>
|
||||
|
||||
Note: This syntax is only necessary for attribute *bindings*.
|
||||
Static ARIA attributes require no extra syntax.
|
||||
|
||||
<docs-code language="html">
|
||||
<!-- Static ARIA attributes require no extra syntax -->
|
||||
<button aria-label="Save document">…</button>
|
||||
<!-- Static ARIA attributes require no extra syntax -->
|
||||
<button aria-label="Save document">…</button>
|
||||
</docs-code>
|
||||
|
||||
HELPFUL: By convention, HTML attributes use lowercase names \(`tabindex`\), while properties use camelCase names \(`tabIndex`\).
|
||||
@@ -103,8 +103,8 @@ The following example shows how to find and focus the main content header in the
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
|
||||
const mainHeader = document.querySelector('#main-content-header')
|
||||
router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
|
||||
const mainHeader = document.querySelector('#main-content-header')
|
||||
if (mainHeader) {
|
||||
mainHeader.focus();
|
||||
}
|
||||
|
||||
@@ -59,8 +59,6 @@ If Angular handles an event within a component with OnPush strategy, the framewo
|
||||
|
||||
As an example, if Angular handles an event within `MainComponent`, the framework will run change detection in the entire component tree. Angular will ignore the subtree with root `LoginComponent` because it has `OnPush` and the event happened outside of its scope.
|
||||
|
||||
<img alt="Change detection propagation from OnPush component" src="assets/images/best-practices/runtime-performance/on-push-trigger.svg">
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
app[AppComponent] --- header[HeaderComponent];
|
||||
|
||||
@@ -35,7 +35,7 @@ class AppComponent implements OnInit {
|
||||
|
||||
The preceding snippet instructs Angular to call `setInterval` outside the Angular Zone and skip running change detection after `pollForUpdates` runs.
|
||||
|
||||
Third-party libraries commonly trigger unnecessary change detection cycles because they weren't authored with Zone.js in mind. Avoid these extra cycles by calling library APIs outside the Angular zone:
|
||||
Third-party libraries commonly trigger unnecessary change detection cycles when their APIs are invoked within the Angular zone. This phenomenon particularly affects libraries that setup event listeners or initiate other tasks (such as timers, XHR requests, etc.). Avoid these extra cycles by calling library APIs outside the Angular zone:
|
||||
|
||||
<docs-code header="Move the plot initialization outside of the Zone" language='ts' linenums>
|
||||
import { Component, NgZone, OnInit } from '@angular/core';
|
||||
@@ -57,3 +57,67 @@ class AppComponent implements OnInit {
|
||||
Running `Plotly.newPlot('chart', data);` within `runOutsideAngular` instructs the framework that it shouldn’t run change detection after the execution of tasks scheduled by the initialization logic.
|
||||
|
||||
For example, if `Plotly.newPlot('chart', data)` adds event listeners to a DOM element, Angular does not run change detection after the execution of their handlers.
|
||||
|
||||
But sometimes, you may need to listen to events dispatched by third-party APIs. In such cases, it's important to remember that those event listeners will also execute outside of the Angular zone if the initialization logic was done there:
|
||||
|
||||
<docs-code header="Check whether the handler is called outside of the Zone" language='ts' linenums>
|
||||
import { Component, NgZone, OnInit, output } from '@angular/core';
|
||||
import * as Plotly from 'plotly.js-dist-min';
|
||||
|
||||
@Component(...)
|
||||
class AppComponent implements OnInit {
|
||||
plotlyClick = output<Plotly.PlotMouseEvent>();
|
||||
|
||||
constructor(private ngZone: NgZone) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
this.createPlotly();
|
||||
});
|
||||
}
|
||||
|
||||
private async createPlotly() {
|
||||
const plotly = await Plotly.newPlot('chart', data);
|
||||
|
||||
plotly.on('plotly_click', (event: Plotly.PlotMouseEvent) => {
|
||||
// This handler will be called outside of the Angular zone because
|
||||
// the initialization logic is also called outside of the zone. To check
|
||||
// whether we're in the Angular zone, we can call the following:
|
||||
console.log(NgZone.isInAngularZone());
|
||||
this.plotlyClick.emit(event);
|
||||
});
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
If you need to dispatch events to parent components and execute specific view update logic, you should consider re-entering the Angular zone to instruct the framework to run change detection or run change detection manually:
|
||||
|
||||
<docs-code header="Re-enter the Angular zone when dispatching event" language='ts' linenums>
|
||||
import { Component, NgZone, OnInit, output } from '@angular/core';
|
||||
import * as Plotly from 'plotly.js-dist-min';
|
||||
|
||||
@Component(...)
|
||||
class AppComponent implements OnInit {
|
||||
plotlyClick = output<Plotly.PlotMouseEvent>();
|
||||
|
||||
constructor(private ngZone: NgZone) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
this.createPlotly();
|
||||
});
|
||||
}
|
||||
|
||||
private async createPlotly() {
|
||||
const plotly = await Plotly.newPlot('chart', data);
|
||||
|
||||
plotly.on('plotly_click', (event: Plotly.PlotMouseEvent) => {
|
||||
this.ngZone.run(() => {
|
||||
this.plotlyClick.emit(event);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
The scenario of dispatching events outside of the Angular zone may also arise. It's important to remember that triggering change detection (for example, manually) may result to the creation/update of views outside of the Angular zone.
|
||||
@@ -151,14 +151,14 @@ Consistent conventions make it easy to quickly identify and reference assets of
|
||||
|
||||
| Symbol name | File name |
|
||||
|:--- |:--- |
|
||||
| <docs-code hideCopy language="typescript"> @Component({ … }) 
export class AppComponent { } </docs-code> | app.component.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Component({ … }) 
export class HeroesComponent { } </docs-code> | heroes.component.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Component({ … }) 
export class HeroListComponent { } </docs-code> | hero-list.component.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Component({ … }) 
export class HeroDetailComponent { } </docs-code> | hero-detail.component.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Directive({ … }) 
export class ValidationDirective { } </docs-code> | validation.directive.ts |
|
||||
| <docs-code hideCopy language="typescript"> @NgModule({ … }) 
export class AppModule </docs-code> | app.module.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Pipe({ name: 'initCaps' }) 
export class InitCapsPipe implements PipeTransform { } </docs-code> | init-caps.pipe.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Injectable() 
export class UserProfileService { } </docs-code> | user-profile.service.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Component({ … }) <br>export class AppComponent { } </docs-code> | app.component.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Component({ … }) <br>export class HeroesComponent { } </docs-code> | heroes.component.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Component({ … }) <br>export class HeroListComponent { } </docs-code> | hero-list.component.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Component({ … }) <br>export class HeroDetailComponent { } </docs-code> | hero-detail.component.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Directive({ … }) <br>export class ValidationDirective { } </docs-code> | validation.directive.ts |
|
||||
| <docs-code hideCopy language="typescript"> @NgModule({ … }) <br>export class AppModule </docs-code> | app.module.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Pipe({ name: 'initCaps' }) <br>export class InitCapsPipe implements PipeTransform { } </docs-code> | init-caps.pipe.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Injectable() <br>export class UserProfileService { } </docs-code> | user-profile.service.ts |
|
||||
|
||||
### Service names
|
||||
|
||||
@@ -186,9 +186,9 @@ Service names such as `Credit` are nouns and require a suffix and should be name
|
||||
|
||||
| Symbol name | File name |
|
||||
|:--- |:--- |
|
||||
| <docs-code hideCopy language="typescript"> @Injectable() 
export class HeroDataService { } </docs-code> | hero-data.service.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Injectable() 
export class CreditService { } </docs-code> | credit.service.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Injectable() 
export class Logger { } </docs-code> | logger.service.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Injectable() <br>export class HeroDataService { } </docs-code> | hero-data.service.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Injectable() <br>export class CreditService { } </docs-code> | credit.service.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Injectable() <br>export class Logger { } </docs-code> | logger.service.ts |
|
||||
|
||||
### Bootstrapping
|
||||
|
||||
@@ -293,8 +293,8 @@ Provides a consistent way to quickly identify and reference pipes.
|
||||
|
||||
| Symbol name | File name |
|
||||
|:--- |:--- |
|
||||
| <docs-code hideCopy language="typescript"> @Pipe({ standalone: true, name: 'ellipsis' }) 
export class EllipsisPipe implements PipeTransform { } </docs-code> | ellipsis.pipe.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Pipe({ standalone: true, name: 'initCaps' }) 
export class InitCapsPipe implements PipeTransform { } </docs-code> | init-caps.pipe.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Pipe({ standalone: true, name: 'ellipsis' }) <br>export class EllipsisPipe implements PipeTransform { } </docs-code> | ellipsis.pipe.ts |
|
||||
| <docs-code hideCopy language="typescript"> @Pipe({ standalone: true, name: 'initCaps' }) <br>export class InitCapsPipe implements PipeTransform { } </docs-code> | init-caps.pipe.ts |
|
||||
|
||||
### Unit test file names
|
||||
|
||||
@@ -354,40 +354,40 @@ project root
|
||||
├── src
|
||||
│ ├── app
|
||||
│ │ ├── core
|
||||
│ │ │ └── exception.service.ts|spec.ts
|
||||
│ │ │ └── user-profile.service.ts|spec.ts
|
||||
│ │ │ └── exception.service.ts|spec.ts
|
||||
│ │ │ └── user-profile.service.ts|spec.ts
|
||||
│ │ ├── heroes
|
||||
│ │ │ ├── hero
|
||||
│ │ │ │ └── hero.component.ts|html|css|spec.ts
|
||||
│ │ │ │ └── hero.component.ts|html|css|spec.ts
|
||||
│ │ │ ├── hero-list
|
||||
│ │ │ │ └── hero-list.component.ts|html|css|spec.ts
|
||||
│ │ │ │ └── hero-list.component.ts|html|css|spec.ts
|
||||
│ │ │ ├── shared
|
||||
│ │ │ │ └── hero-button.component.ts|html|css|spec.ts
|
||||
│ │ │ │ └── hero-button.component.ts|html|css|spec.ts
|
||||
│ │ │ │ └── hero.model.ts
|
||||
│ │ │ │ └── hero.service.ts|spec.ts
|
||||
│ │ │ └── heroes.component.ts|html|css|spec.ts
|
||||
│ │ │ │ └── hero.service.ts|spec.ts
|
||||
│ │ │ └── heroes.component.ts|html|css|spec.ts
|
||||
│ │ │ └── heroes.routes.ts
|
||||
│ │ ├── shared
|
||||
│ │ │ └── init-caps.pipe.ts|spec.ts
|
||||
│ │ │ └── filter-text.component.ts|spec.ts
|
||||
│ │ │ └── filter-text.service.ts|spec.ts
|
||||
│ │ │ └── init-caps.pipe.ts|spec.ts
|
||||
│ │ │ └── filter-text.component.ts|spec.ts
|
||||
│ │ │ └── filter-text.service.ts|spec.ts
|
||||
│ │ ├── villains
|
||||
│ │ │ ├── villain
|
||||
│ │ │ │ └── …
|
||||
│ │ │ │ └── …
|
||||
│ │ │ ├── villain-list
|
||||
│ │ │ │ └── …
|
||||
│ │ │ │ └── …
|
||||
│ │ │ ├── shared
|
||||
│ │ │ │ └── …
|
||||
│ │ │ └── villains.component.ts|html|css|spec.ts
|
||||
│ │ │ │ └── …
|
||||
│ │ │ └── villains.component.ts|html|css|spec.ts
|
||||
│ │ │ └── villains.module.ts
|
||||
│ │ │ └── villains-routing.module.ts
|
||||
│ │ └── app.component.ts|html|css|spec.ts
|
||||
│ │ └── app.component.ts|html|css|spec.ts
|
||||
│ │ └── app.routes.ts
|
||||
│ └── main.ts
|
||||
│ └── index.html
|
||||
│ └── …
|
||||
└── node_modules/…
|
||||
└── …
|
||||
│ └── …
|
||||
└── node_modules/…
|
||||
└── …
|
||||
```
|
||||
|
||||
HELPFUL: While components in dedicated folders are widely preferred, another option for small applications is to keep components flat \(not in a dedicated folder\).
|
||||
@@ -506,15 +506,15 @@ project root
|
||||
├──├──app
|
||||
├──├──├── shared
|
||||
├──├──├──└── shared.module.ts
|
||||
├──├──├──└── init-caps.pipe.ts|spec.ts
|
||||
├──├──├──└── filter-text.component.ts|spec.ts
|
||||
├──├──├──└── filter-text.service.ts|spec.ts
|
||||
├──├──└── app.component.ts|html|css|spec.ts
|
||||
├──├──├──└── init-caps.pipe.ts|spec.ts
|
||||
├──├──├──└── filter-text.component.ts|spec.ts
|
||||
├──├──├──└── filter-text.service.ts|spec.ts
|
||||
├──├──└── app.component.ts|html|css|spec.ts
|
||||
├──├──└── app.module.ts
|
||||
├──├──└── app-routing.module.ts
|
||||
├──└── main.ts
|
||||
├──└── index.html
|
||||
└── …
|
||||
└── …
|
||||
```
|
||||
|
||||
<docs-code-multifile>
|
||||
@@ -761,7 +761,7 @@ An element may have more than one attribute directive applied.
|
||||
**Do** be consistent in your choice.
|
||||
|
||||
**Why**? <br />
|
||||
The property associated with `@HostBinding` or the method associated with `@HostListener` can be modified only in a single place —in the directive's class.
|
||||
The property associated with `@HostBinding` or the method associated with `@HostListener` can be modified only in a single place —in the directive's class.
|
||||
If you use the `host` metadata property, you must modify both the property/method declaration in the directive's class and the metadata in the decorator associated with the directive.
|
||||
|
||||
<docs-code header="app/shared/validator.directive.ts" path="adev/src/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts"/>
|
||||
@@ -811,7 +811,7 @@ In this scenario it would be better to provide the service at the component leve
|
||||
|
||||
<docs-code header="src/app/treeshaking/service.ts" path="adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.ts"/>
|
||||
|
||||
### Use the @Injectable() class decorator
|
||||
### Use the @Injectable() class decorator
|
||||
|
||||
#### Style 07-04
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ Keeping your Angular application up-to-date enables you to take advantage of lea
|
||||
|
||||
This document contains information and resources to help you keep your Angular applications and libraries up-to-date.
|
||||
|
||||
For information about our versioning policy and practices —including support and deprecation practices, as well as the release schedule— see [Angular versioning and releases](reference/releases "Angular versioning and releases").
|
||||
For information about our versioning policy and practices —including support and deprecation practices, as well as the release schedule— see [Angular versioning and releases](reference/releases "Angular versioning and releases").
|
||||
|
||||
HELPFUL: If you are currently using AngularJS, see [Upgrading from AngularJS](https://angular.io/guide/upgrade "Upgrading from Angular JS").
|
||||
*AngularJS* is the name for all v1.x versions of Angular.
|
||||
|
||||
@@ -5,6 +5,8 @@ It can improve the user experience by quickly launching a static rendered page (
|
||||
|
||||
This gives users a meaningful first paint of your application that appears quickly because the browser can render the HTML and CSS without the need to initialize any JavaScript.
|
||||
|
||||
Learn more in [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell).
|
||||
|
||||
<docs-workflow>
|
||||
<docs-step title="Prepare the application">
|
||||
Do this with the following Angular CLI command:
|
||||
@@ -15,7 +17,7 @@ ng new my-app --routing
|
||||
|
||||
</docs-code>
|
||||
|
||||
For an existing application, you have to manually add the `RouterModule` and defining a `<router-outlet>` within your application.
|
||||
For an existing application, you have to manually add the `Router` and defining a `<router-outlet>` within your application.
|
||||
</docs-step>
|
||||
<docs-step title="Create the application shell">
|
||||
Use the Angular CLI to automatically create the application shell.
|
||||
@@ -28,57 +30,24 @@ ng generate app-shell
|
||||
|
||||
For more information about this command, see [App shell command](cli/generate#app-shell-command).
|
||||
|
||||
After running this command you can see that the `angular.json` configuration file has been updated to add two new targets, with a few other changes.
|
||||
The command updates the application code and adds extra files to the project structure.
|
||||
|
||||
<docs-code language="json">
|
||||
<code-example language="text">
|
||||
|
||||
src
|
||||
├── app
|
||||
│ ├── app.config.server.ts # server application configuration
|
||||
│ └── app-shell # app-shell component
|
||||
│ ├── app-shell.component.html
|
||||
│ ├── app-shell.component.scss
|
||||
│ ├── app-shell.component.spec.ts
|
||||
│ └── app-shell.component.ts
|
||||
└── main.server.ts # main server application bootstrapping
|
||||
|
||||
</code-example>
|
||||
|
||||
"server": {
|
||||
"builder": "@angular-devkit/build-angular:server",
|
||||
"defaultConfiguration": "production",
|
||||
"options": {
|
||||
"outputPath": "dist/my-app/server",
|
||||
"main": "src/main.server.ts",
|
||||
"tsConfig": "tsconfig.server.json"
|
||||
},
|
||||
"configurations": {
|
||||
"development": {
|
||||
"outputHashing": "none",
|
||||
},
|
||||
"production": {
|
||||
"outputHashing": "media",
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"sourceMap": false,
|
||||
"optimization": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"app-shell": {
|
||||
"builder": "@angular-devkit/build-angular:app-shell",
|
||||
"defaultConfiguration": "production",
|
||||
"options": {
|
||||
"route": "shell"
|
||||
},
|
||||
"configurations": {
|
||||
"development": {
|
||||
"browserTarget": "my-app:build:development",
|
||||
"serverTarget": "my-app:server:development",
|
||||
},
|
||||
"production": {
|
||||
"browserTarget": "my-app:build:production",
|
||||
"serverTarget": "my-app:server:production"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</docs-code>
|
||||
</docs-step>
|
||||
<docs-step title="Verify the application is built with the shell content">
|
||||
Use the Angular CLI to build the `app-shell` target.
|
||||
|
||||
<docs-code language="shell">
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@ The `versionUpdates` is an `Observable` property of `SwUpdate` and emits four ev
|
||||
### Checking for updates
|
||||
|
||||
It's possible to ask the service worker to check if any updates have been deployed to the server.
|
||||
The service worker checks for updates during initialization and on each navigation request —that is, when the user navigates from a different address to your application.
|
||||
The service worker checks for updates during initialization and on each navigation request —that is, when the user navigates from a different address to your application.
|
||||
However, you might choose to manually check for updates if you have a site that changes frequently or want updates to happen on a schedule.
|
||||
|
||||
Do this with the `checkForUpdate()` method:
|
||||
|
||||
@@ -7,7 +7,7 @@ This topic describes the properties of the service worker configuration file.
|
||||
The `ngsw-config.json` JSON configuration file specifies which files and data URLs the Angular service worker should cache and how it should update the cached files and data.
|
||||
The [Angular CLI](tools/cli) processes this configuration file during `ng build`.
|
||||
|
||||
All file paths must begin with `/`, which corresponds to the deployment directory — usually `dist/<project-name>` in CLI projects.
|
||||
All file paths must begin with `/`, which corresponds to the deployment directory — usually `dist/<project-name>` in CLI projects.
|
||||
|
||||
Unless otherwise commented, patterns use a **limited*** glob format that internally will be converted into regex:
|
||||
|
||||
@@ -68,10 +68,10 @@ This field contains an array of asset groups, each of which defines a set of ass
|
||||
{
|
||||
"assetGroups": [
|
||||
{
|
||||
…
|
||||
…
|
||||
},
|
||||
{
|
||||
…
|
||||
…
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -169,10 +169,10 @@ This field contains an array of data groups, each of which defines a set of data
|
||||
{
|
||||
"dataGroups": [
|
||||
{
|
||||
…
|
||||
…
|
||||
},
|
||||
{
|
||||
…
|
||||
…
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -197,7 +197,7 @@ export interface DataGroup {
|
||||
maxSize: number;
|
||||
maxAge: string;
|
||||
timeout?: string;
|
||||
strategy?: 'freshness' | 'performance';
|
||||
strategy?: 'freshness' | 'performance';
|
||||
};
|
||||
cacheQueryOptions?: {
|
||||
ignoreSearch?: boolean;
|
||||
@@ -226,7 +226,7 @@ Only non-mutating requests (GET and HEAD) are cached.
|
||||
Occasionally APIs change formats in a way that is not backward-compatible.
|
||||
A new version of the application might not be compatible with the old API format and thus might not be compatible with existing cached resources from that API.
|
||||
|
||||
`version` provides a mechanism to indicate that the resources being cached have been updated in a backwards-incompatible way, and that the old cache entries —those from previous versions— should be discarded.
|
||||
`version` provides a mechanism to indicate that the resources being cached have been updated in a backwards-incompatible way, and that the old cache entries —those from previous versions— should be discarded.
|
||||
|
||||
`version` is an integer field and defaults to `1`.
|
||||
|
||||
@@ -306,7 +306,7 @@ In case you are not familiar, an [opaque response][https://fetch.spec.whatwg.org
|
||||
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.
|
||||
|
||||
If you are not able to implement CORS — for example, if you don't control the origin — prefer using the `freshness` strategy for resources that result in opaque responses.
|
||||
If you are not able to implement CORS — for example, if you don't control the origin — prefer using the `freshness` strategy for resources that result in opaque responses.
|
||||
|
||||
</docs-callout>
|
||||
|
||||
|
||||
@@ -155,7 +155,7 @@ Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100
|
||||
Last update tick: 1s496u
|
||||
Last update run: never
|
||||
Task queue:
|
||||
* init post-load (update, cleanup)
|
||||
* init post-load (update, cleanup)
|
||||
|
||||
Debug log:
|
||||
|
||||
@@ -232,7 +232,7 @@ HELPFUL: This version hash is the "latest manifest hash" listed above. Both clie
|
||||
Last update tick: 1s496u
|
||||
Last update run: never
|
||||
Task queue:
|
||||
* init post-load (update, cleanup)
|
||||
* init post-load (update, cleanup)
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ To simulate a network issue, disable network interaction for your application.
|
||||
|
||||
In Chrome:
|
||||
|
||||
1. Select **Tools** > **Developer Tools** (from the Chrome menu located in the top right corner).
|
||||
1. Select **Tools** > **Developer Tools** (from the Chrome menu located in the top right corner).
|
||||
1. Go to the **Network tab**.
|
||||
1. Select **Offline** in the **Throttling** dropdown menu.
|
||||
|
||||
@@ -110,7 +110,7 @@ Make a change to the application, and watch the service worker install the updat
|
||||
<docs-code language="shell">
|
||||
|
||||
ng build
|
||||
npx http-server -p 8080 -c-1 dist/<project-name>/browser
|
||||
npx http-server -p 8080 -c-1 dist/<project-name>/browser
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ Invoke push notifications by pushing a message with a valid payload.
|
||||
See `SwPush` for guidance.
|
||||
|
||||
HELPFUL: In Chrome, you can test push notifications without a backend.
|
||||
Open Devtools -> Application -> Service Workers and use the `Push` input to send a JSON notification payload.
|
||||
Open Devtools -> Application -> Service Workers and use the `Push` input to send a JSON notification payload.
|
||||
|
||||
## Notification click handling
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ To add a web worker to an existing project, use the Angular CLI `ng generate` co
|
||||
|
||||
<docs-code language="shell">
|
||||
|
||||
ng generate web-worker <location>
|
||||
ng generate web-worker <location>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -31,8 +31,8 @@ The command performs the following actions.
|
||||
|
||||
<docs-code language="typescript" header="src/app/app.worker.ts">
|
||||
|
||||
addEventListener('message', ({ data }) => {
|
||||
const response = `worker response to ${data}`;
|
||||
addEventListener('message', ({ data }) => {
|
||||
const response = `worker response to ${data}`;
|
||||
postMessage(response);
|
||||
});
|
||||
|
||||
@@ -45,8 +45,8 @@ The command performs the following actions.
|
||||
if (typeof Worker !== 'undefined') {
|
||||
// Create a new
|
||||
const worker = new Worker(new URL('./app.worker', import.meta.url));
|
||||
worker.onmessage = ({ data }) => {
|
||||
console.log(`page got message: ${data}`);
|
||||
worker.onmessage = ({ data }) => {
|
||||
console.log(`page got message: ${data}`);
|
||||
};
|
||||
worker.postMessage('hello');
|
||||
} else {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
load("//aio/content/examples:examples.bzl", "docs_example")
|
||||
load("@aio_npm//@angular/build-tooling/bazel/remote-execution:index.bzl", "ENABLE_NETWORK")
|
||||
load("@npm//@angular/build-tooling/bazel/remote-execution:index.bzl", "ENABLE_NETWORK")
|
||||
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
|
||||
@@ -6,32 +6,28 @@
|
||||
|
||||
<blockquote>
|
||||
<!-- #docregion asterisk -->
|
||||
@if (hero) {<div class="name">{{ hero.name }}</div>}
|
||||
<div *ngIf="hero" class="name">{{hero.name}}</div>
|
||||
<!-- #enddocregion asterisk -->
|
||||
</blockquote>
|
||||
|
||||
<p>List of heroes</p>
|
||||
|
||||
<ul>
|
||||
@for (hero of heroes; track hero) {<li>{{ hero.name }}</li>}
|
||||
<li *ngFor="let hero of heroes">{{hero.name}}</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2 id="ngIf">NgIf</h2>
|
||||
|
||||
@if (true) {
|
||||
<p>
|
||||
Expression is true and ngIf is true.
|
||||
This paragraph is in the DOM.
|
||||
</p>
|
||||
}
|
||||
@if (false) {
|
||||
<p>
|
||||
Expression is false and ngIf is false.
|
||||
This paragraph is not in the DOM.
|
||||
</p>
|
||||
}
|
||||
<p *ngIf="true">
|
||||
Expression is true and ngIf is true.
|
||||
This paragraph is in the DOM.
|
||||
</p>
|
||||
<p *ngIf="false">
|
||||
Expression is false and ngIf is false.
|
||||
This paragraph is not in the DOM.
|
||||
</p>
|
||||
|
||||
<p [style.display]="'block'">
|
||||
Expression sets display to "block".
|
||||
@@ -46,7 +42,7 @@
|
||||
<p><ng-template> element</p>
|
||||
<!-- #docregion ngif-template -->
|
||||
<ng-template [ngIf]="hero">
|
||||
<div class="name">{{ hero.name }}</div>
|
||||
<div class="name">{{hero.name}}</div>
|
||||
</ng-template>
|
||||
<!-- #enddocregion ngif-template -->
|
||||
|
||||
@@ -61,18 +57,18 @@
|
||||
<!-- #docregion ngif-ngcontainer -->
|
||||
<p>
|
||||
I turned the corner
|
||||
@if (hero) {
|
||||
and saw {{ hero.name }}. I waved
|
||||
}
|
||||
<ng-container *ngIf="hero">
|
||||
and saw {{hero.name}}. I waved
|
||||
</ng-container>
|
||||
and continued on my way.
|
||||
</p>
|
||||
<!-- #enddocregion ngif-ngcontainer -->
|
||||
|
||||
<p>
|
||||
I turned the corner
|
||||
@if (hero) {
|
||||
<span>and saw {{ hero.name }}. I waved</span>
|
||||
}
|
||||
<span *ngIf="hero">
|
||||
and saw {{hero.name}}. I waved
|
||||
</span>
|
||||
and continued on my way.
|
||||
</p>
|
||||
|
||||
@@ -83,15 +79,11 @@
|
||||
(<label for="show-sad"><input id="show-sad" type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
|
||||
</div>
|
||||
<select [(ngModel)]="hero">
|
||||
@for (h of heroes; track h) {
|
||||
<span>
|
||||
@if (showSad || h.emotion !== 'sad') {
|
||||
<span>
|
||||
<option [ngValue]="h">{{ h.name }} ({{ h.emotion }})</option>
|
||||
</span>
|
||||
}
|
||||
<span *ngFor="let h of heroes">
|
||||
<span *ngIf="showSad || h.emotion !== 'sad'">
|
||||
<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
|
||||
</span>
|
||||
}
|
||||
</span>
|
||||
</select>
|
||||
|
||||
<p><em><select> with <ng-container></em></p>
|
||||
@@ -101,11 +93,11 @@
|
||||
(<label for="showSad"><input id="showSad" type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
|
||||
</div>
|
||||
<select [(ngModel)]="hero">
|
||||
@for (h of heroes; track h) {
|
||||
@if (showSad || h.emotion !== 'sad') {
|
||||
<option [ngValue]="h">{{ h.name }} ({{ h.emotion }})</option>
|
||||
}
|
||||
}
|
||||
<ng-container *ngFor="let h of heroes">
|
||||
<ng-container *ngIf="showSad || h.emotion !== 'sad'">
|
||||
<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</select>
|
||||
<!-- #enddocregion select-ngcontainer -->
|
||||
<br><br>
|
||||
@@ -118,12 +110,11 @@
|
||||
|
||||
<p class="code"><div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd"></p>
|
||||
<!--#docregion inside-ngfor -->
|
||||
@for (hero of heroes; track hero; let odd = $odd; let i = $index) {
|
||||
<div
|
||||
[class.odd]="odd">
|
||||
({{ i }}) {{ hero.name }}
|
||||
</div>
|
||||
}
|
||||
<div
|
||||
*ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById"
|
||||
[class.odd]="odd">
|
||||
({{i}}) {{hero.name}}
|
||||
</div>
|
||||
|
||||
<!--#enddocregion inside-ngfor -->
|
||||
<p class="code"><ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"/></p>
|
||||
@@ -131,7 +122,7 @@
|
||||
<ng-template ngFor let-hero [ngForOf]="heroes"
|
||||
let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
|
||||
<div [class.odd]="odd">
|
||||
({{ i }}) {{ hero.name }}
|
||||
({{i}}) {{hero.name}}
|
||||
</div>
|
||||
</ng-template>
|
||||
<!--#enddocregion inside-ngfor -->
|
||||
@@ -143,46 +134,35 @@
|
||||
|
||||
<div>Pick your favorite hero</div>
|
||||
<p>
|
||||
@for (h of heroes; track h) {
|
||||
<label for="hero-{{ h }}">
|
||||
<input id="hero-{{ h }}" type="radio" name="heroes" [(ngModel)]="hero" [value]="h">{{ h.name }}
|
||||
</label>
|
||||
}
|
||||
<label for="hero-{{h}}" *ngFor="let h of heroes">
|
||||
<input id="hero-{{h}}" type="radio" name="heroes" [(ngModel)]="hero" [value]="h">{{h.name}}
|
||||
</label>
|
||||
<label for="none-of-the-above"><input id="none-of-the-above" type="radio" name="heroes" (click)="hero = null">None of the above</label>
|
||||
</p>
|
||||
|
||||
<h4>NgSwitch</h4>
|
||||
|
||||
<div>
|
||||
@switch (hero?.emotion) {
|
||||
@case ('happy') {
|
||||
<app-happy-hero [hero]="hero!"></app-happy-hero>
|
||||
} @case ('sad') {
|
||||
<app-sad-hero [hero]="hero!"></app-sad-hero>
|
||||
} @case ('confused') {
|
||||
<app-confused-hero [hero]="hero!"></app-confused-hero>
|
||||
} @default {
|
||||
<app-unknown-hero [hero]="hero!"></app-unknown-hero>
|
||||
}
|
||||
}
|
||||
<div [ngSwitch]="hero?.emotion">
|
||||
<app-happy-hero *ngSwitchCase="'happy'" [hero]="hero!"></app-happy-hero>
|
||||
<app-sad-hero *ngSwitchCase="'sad'" [hero]="hero!"></app-sad-hero>
|
||||
<app-confused-hero *ngSwitchCase="'confused'" [hero]="hero!"></app-confused-hero>
|
||||
<app-unknown-hero *ngSwitchDefault [hero]="hero!"></app-unknown-hero>
|
||||
</div>
|
||||
|
||||
<h4>NgSwitch with <ng-template></h4>
|
||||
<div>
|
||||
@switch (hero?.emotion) {
|
||||
@case ('happy') {
|
||||
<app-happy-hero [hero]="hero!"></app-happy-hero>
|
||||
}
|
||||
@case ('sad') {
|
||||
<app-sad-hero [hero]="hero!"></app-sad-hero>
|
||||
}
|
||||
@case ('confused') {
|
||||
<app-confused-hero [hero]="hero!"></app-confused-hero>
|
||||
}
|
||||
@default {
|
||||
<app-unknown-hero [hero]="hero!"></app-unknown-hero>
|
||||
}
|
||||
}
|
||||
<div [ngSwitch]="hero?.emotion">
|
||||
<ng-template ngSwitchCase="happy">
|
||||
<app-happy-hero [hero]="hero!"></app-happy-hero>
|
||||
</ng-template>
|
||||
<ng-template ngSwitchCase="sad">
|
||||
<app-sad-hero [hero]="hero!"></app-sad-hero>
|
||||
</ng-template>
|
||||
<ng-template ngSwitchCase="confused">
|
||||
<app-confused-hero [hero]="hero!"></app-confused-hero>
|
||||
</ng-template >
|
||||
<ng-template ngSwitchDefault>
|
||||
<app-unknown-hero [hero]="hero!"></app-unknown-hero>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
@@ -192,12 +172,12 @@
|
||||
<!-- #docregion toggle-info -->
|
||||
<p>
|
||||
The condition is currently
|
||||
<span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{ condition }}</span>.
|
||||
<span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
|
||||
<button
|
||||
type="button"
|
||||
(click)="condition = !condition"
|
||||
[ngClass]="{ 'a': condition, 'b': !condition }" >
|
||||
Toggle condition to {{ condition ? 'false' : 'true' }}
|
||||
[ngClass] = "{ 'a': condition, 'b': !condition }" >
|
||||
Toggle condition to {{condition ? 'false' : 'true'}}
|
||||
</button>
|
||||
</p>
|
||||
<!-- #enddocregion toggle-info -->
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
load("//aio/content/examples:examples.bzl", "docs_example")
|
||||
load("@aio_npm//@angular/build-tooling/bazel/remote-execution:index.bzl", "ENABLE_NETWORK")
|
||||
load("@npm//@angular/build-tooling/bazel/remote-execution:index.bzl", "ENABLE_NETWORK")
|
||||
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
load("//aio/content/examples:examples.bzl", "docs_example")
|
||||
load("@aio_npm//@angular/build-tooling/bazel/remote-execution:index.bzl", "ENABLE_NETWORK")
|
||||
load("@npm//@angular/build-tooling/bazel/remote-execution:index.bzl", "ENABLE_NETWORK")
|
||||
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
load("//aio/content/examples:examples.bzl", "docs_example")
|
||||
load("@aio_npm//@angular/build-tooling/bazel/remote-execution:index.bzl", "ENABLE_NETWORK")
|
||||
load("@npm//@angular/build-tooling/bazel/remote-execution:index.bzl", "ENABLE_NETWORK")
|
||||
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
|
||||
@@ -196,7 +196,7 @@ HELPFUL: Some additional notes on using styles within [`state`](api/animations/s
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
transition( 'on => off, off => void' )
|
||||
transition( 'on => off, off => void' )
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -227,7 +227,7 @@ Then, you can bind the trigger to a template expression using standard Angular p
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
<div [@triggerName]="expression">…</div>;
|
||||
<div [@triggerName]="expression">…</div>;
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -266,7 +266,7 @@ Learn about more advanced features in Angular animations under the Animation sec
|
||||
## Animations API summary
|
||||
|
||||
The functional API provided by the `@angular/animations` module provides a domain-specific language \(DSL\) for creating and controlling animations in Angular applications.
|
||||
See the [API reference](api/animations) for a complete listing and syntax details of the core functions and related data structures.
|
||||
See the [API reference](api#animations) for a complete listing and syntax details of the core functions and related data structures.
|
||||
|
||||
| Function name | What it does |
|
||||
|:--- |:--- |
|
||||
|
||||
@@ -113,7 +113,7 @@ Adding these styles to the views animates the containers in place and prevents o
|
||||
Use the `query()` method to find and animate elements within the current host component.
|
||||
The `query(":enter")` statement returns the view that is being inserted, and `query(":leave")` returns the view that is being removed.
|
||||
|
||||
Assume that you are routing from the *Home => About*.
|
||||
Assume that you are routing from the *Home => About*.
|
||||
|
||||
<docs-code header="src/app/animations.ts (excerpt)" path="adev/src/content/examples/animations/src/app/animations.ts" visibleRegion="query"/>
|
||||
|
||||
|
||||
@@ -85,8 +85,8 @@ These aliases are used by several animation functions.
|
||||
|
||||
<docs-code hideCopy language="typescript">
|
||||
|
||||
transition ( ':enter', [ … ] ); // alias for void => *
|
||||
transition ( ':leave', [ … ] ); // alias for * => void
|
||||
transition ( ':enter', [ … ] ); // alias for void => *
|
||||
transition ( ':leave', [ … ] ); // alias for * => void
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
# Function-based outputs
|
||||
|
||||
The `output()` function declares an output in a directive or component.
|
||||
Outputs allow you to emit values to parent components.
|
||||
|
||||
HELPFUL: The `output()` function is currently in [developer preview](/reference/releases#developer-preview).
|
||||
|
||||
<docs-code language="ts" highlight="[[5], [8]]">
|
||||
import {Component, output} from '@angular/core';
|
||||
|
||||
@Component({...})
|
||||
export class MyComp {
|
||||
onNameChange = output<string>() // OutputEmitterRef<string>
|
||||
|
||||
setNewName(newName: string) {
|
||||
this.onNameChange.emit(newName);
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
An output is automatically recognized by Angular whenever you use the `output` function as an initializer of a class member.
|
||||
Parent components can listen to outputs in templates by using the event binding syntax.
|
||||
|
||||
```html
|
||||
<my-comp (onNameChange)="showNewName($event)" />
|
||||
```
|
||||
|
||||
## Aliasing an output
|
||||
|
||||
Angular uses the class member name as the name of the output.
|
||||
You can alias outputs to change their public name to be different.
|
||||
|
||||
```typescript
|
||||
class MyComp {
|
||||
onNameChange = output({alias: 'ngxNameChange'});
|
||||
}
|
||||
```
|
||||
|
||||
This allows users to bind to your output using `(ngxNameChange)`, while inside your component you can access the output emitter using `this.onNameChange`.
|
||||
|
||||
## Subscribing programmatically
|
||||
|
||||
Consumers may create your component dynamically with a reference to a `ComponentRef`.
|
||||
In those cases, parents can subscribe to outputs by directly accessing the property of type `OutputRef`.
|
||||
|
||||
```ts
|
||||
const myComp = viewContainerRef.createComponent(...);
|
||||
|
||||
myComp.instance.onNameChange.subscribe(newName => {
|
||||
console.log(newName);
|
||||
});
|
||||
```
|
||||
|
||||
Angular will automatically clean up the subscription when `myComp` is destroyed.
|
||||
Alternatively, an object with a function to explicitly unsubscribe earlier is returned.
|
||||
|
||||
## Using RxJS observables as source
|
||||
|
||||
In some cases, you may want to emit output values based on RxJS observables.
|
||||
Angular provides a way to use RxJS observables as source for outputs.
|
||||
|
||||
The `outputFromObservable` function is a compiler primitive, similar to the `output()` function, and declares outputs that are driven by RxJS observables.
|
||||
|
||||
<docs-code language="ts" highlight="[7]">
|
||||
import {Directive} from '@angular/core';
|
||||
import {outputFromObservable} from '@angular/core/rxjs-interop';
|
||||
|
||||
@Directive(...)
|
||||
class MyDir {
|
||||
nameChange$ = this.dataService.get(); // Observable<Data>
|
||||
nameChange = outputFromObservable(this.nameChange$);
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
Angular will forward subscriptions to the observable, but will stop forwarding values when the owning directive is destroyed.
|
||||
In the example above, if `MyDir` is destroyed, `nameChange` will no longer emit values.
|
||||
|
||||
HELPFUL: Most of the time, using `output()` is sufficient and you can emit values imperatively.
|
||||
|
||||
## Converting an output to an observable
|
||||
|
||||
You can subscribe to outputs by calling `.subscribe` method on `OutputRef`.
|
||||
In other cases, Angular provides a helper function that converts an `OutputRef` to an observable.
|
||||
|
||||
<docs-code language="ts" highlight="[11]">
|
||||
import {outputToObservable} from '@angular/core/rxjs-interop';
|
||||
|
||||
@Component(...)
|
||||
class MyComp {
|
||||
onNameChange = output<string>();
|
||||
}
|
||||
|
||||
// Instance reference to `MyComp`.
|
||||
const myComp: MyComp;
|
||||
|
||||
outputToObservable(this.myComp.instance.onNameChange) // Observable<string>
|
||||
.pipe(...)
|
||||
.subscribe(...);
|
||||
</docs-code>
|
||||
|
||||
## Why you should use `output()` over decorator-based `@Output()`?
|
||||
|
||||
The `output()` function provides numerous benefits over decorator-based `@Output` and `EventEmitter`:
|
||||
|
||||
1. Simpler mental model and API:
|
||||
<br/>• No concept of error channel, completion channels, or other APIs from RxJS.
|
||||
<br/>• Outputs are simple emitters. You can emit values using the `.emit` function.
|
||||
2. More accurate types.
|
||||
<br/>• `OutputEmitterRef.emit(value)` is now correctly typed, while `EventEmitter` has broken types and can cause runtime errors.
|
||||
@@ -56,7 +56,9 @@ Note: Certain triggers may require the presence of either a `@placeholder` or a
|
||||
|
||||
### `@loading`
|
||||
|
||||
The `@loading` block is an optional block that allows you to declare content that will be shown during the loading of any deferred dependencies. For example, you could show a loading spinner. Similar to `@placeholder`, the dependencies of the `@loading` block are eagerly loaded.
|
||||
The `@loading` block is an optional block that allows you to declare content that will be shown during the loading of any deferred dependencies. Its dependences are eagerly loaded (similar to `@placeholder`).
|
||||
|
||||
For example, you could show a loading spinner. Once loading has been triggered, the `@loading` block replaces the `@placeholder` block.
|
||||
|
||||
The `@loading` block accepts two optional parameters to specify the `minimum` amount of time that this placeholder should be shown and amount of time to wait `after` loading begins before showing the loading template. `minimum` and `after` parameters are specified in time increments of milliseconds (ms) or seconds (s). Just like `@placeholder`, these parameters exist to prevent fast flickering of content in the case that the deferred dependencies are fetched quickly. Both the `minimum` and `after` timers for the `@loading` block begins immediately after the loading has been triggered.
|
||||
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
# Injection context
|
||||
|
||||
The dependency injection (DI) system relies internally on a runtime context where the current injector is available.
|
||||
This means that injectors can only work when code is executed in this context.
|
||||
This means that injectors can only work when code is executed in such a context.
|
||||
|
||||
The injection context is available in these situations:
|
||||
|
||||
* Construction (via the `constructor`) of a class being instantiated by the DI system, such as an `@Injectable` or `@Component`.
|
||||
* During construction (via the `constructor`) of a class being instantiated by the DI system, such as an `@Injectable` or `@Component`.
|
||||
* In the initializer for fields of such classes.
|
||||
* In the factory function specified for `useFactory` of a `Provider` or an `@Injectable`.
|
||||
* In the `factory` function specified for an `InjectionToken`.
|
||||
* Within a stack frame that is run in a injection context.
|
||||
* Within a stack frame that runs in an injection context.
|
||||
|
||||
Knowing when you are in an injection context, will allow you to use the [`inject`](api/core/inject) function to inject instances.
|
||||
Knowing when you are in an injection context will allow you to use the [`inject`](api/core/inject) function to inject instances.
|
||||
|
||||
## Class constructors
|
||||
|
||||
Everytime the DI system instantiates a class, this is done in an injection context. This is being handled by the framework itself. The constructor of the class is executed in that runtime context thus allowing to inject a token using the [`inject`](api/core/inject) function.
|
||||
Every time the DI system instantiates a class, it does so in an injection context. This is handled by the framework itself. The constructor of the class is executed in that runtime context, which also allows injection of a token using the [`inject`](api/core/inject) function.
|
||||
|
||||
<docs-code language="typescript" highlight="[[3],[6]]">
|
||||
class MyComponent {
|
||||
@@ -30,7 +30,7 @@ class MyComponent {
|
||||
|
||||
## Stack frame in context
|
||||
|
||||
Some APIs are designed to be run in an injection context. This is the case, for example, of the router guards. It allows the use of [`inject`](api/core/inject) to access a service within the guard function.
|
||||
Some APIs are designed to be run in an injection context. This is the case, for example, with router guards. This allows the use of [`inject`](api/core/inject) within the guard function to access a service.
|
||||
|
||||
Here is an example for `CanActivateFn`
|
||||
|
||||
@@ -43,8 +43,8 @@ const canActivateTeam: CanActivateFn =
|
||||
|
||||
## Run within an injection context
|
||||
|
||||
When you want to run a given function in an injection context without being in one, you can do it with `runInInjectionContext`.
|
||||
This requires to have access to a given injector like the `EnvironmentInjector` for example.
|
||||
When you want to run a given function in an injection context without already being in one, you can do so with `runInInjectionContext`.
|
||||
This requires access to a given injector, like the `EnvironmentInjector`, for example:
|
||||
|
||||
<docs-code header="src/app/heroes/hero.service.ts" language="typescript"
|
||||
highlight="[9]">
|
||||
@@ -66,7 +66,7 @@ Note that `inject` will return an instance only if the injector can resolve the
|
||||
|
||||
## Asserts the context
|
||||
|
||||
Angular provides `assertInInjectionContext` helper function to assert that the current context is an injection context.
|
||||
Angular provides the `assertInInjectionContext` helper function to assert that the current context is an injection context.
|
||||
|
||||
## Using DI outside of a context
|
||||
|
||||
|
||||
@@ -4,13 +4,13 @@ Dependency injection, or DI, is one of the fundamental concepts in Angular. DI i
|
||||
|
||||
Two main roles exist in the DI system: dependency consumer and dependency provider.
|
||||
|
||||
Angular facilitates the interaction between dependency consumers and dependency providers using an abstraction called `Injector`. When a dependency is requested, the injector checks its registry to see if there is an instance already available there. If not, a new instance is created and stored in the registry. Angular creates an application-wide injector (also known as "root" injector) during the application bootstrap process. In most cases you don't need to manually create injectors, but you should know that there is a layer that connects providers and consumers.
|
||||
Angular facilitates the interaction between dependency consumers and dependency providers using an abstraction called `Injector`. When a dependency is requested, the injector checks its registry to see if there is an instance already available there. If not, a new instance is created and stored in the registry. Angular creates an application-wide injector (also known as the "root" injector) during the application bootstrap process. In most cases you don't need to manually create injectors, but you should know that there is a layer that connects providers and consumers.
|
||||
|
||||
This topic covers basic scenarios of how a class can act as a dependency. Angular also allows you to use functions, objects, primitive types such as string or Boolean, or any other types as dependencies. For more information, see [Dependency providers](/guide/di/dependency-injection-providers).
|
||||
|
||||
## Providing dependency
|
||||
## Providing a dependency
|
||||
|
||||
Consider there is a class called `HeroService` that needs to act as a dependency in a component.
|
||||
Consider a class called `HeroService` that needs to act as a dependency in a component.
|
||||
|
||||
The first step is to add the `@Injectable` decorator to show that the class can be injected.
|
||||
|
||||
@@ -24,7 +24,7 @@ A dependency can be provided in multiple places:
|
||||
|
||||
* [**Preferred**: At the application root level using `providedIn`.](#preferred-at-the-application-root-level-using-providedin)
|
||||
* [At the Component level.](#at-the-component-level)
|
||||
* [At application root level using `ApplicationConfig`.](#at-application-root-level-using-applicationconfig)
|
||||
* [At the application root level using `ApplicationConfig`.](#at-the-application-root-level-using-applicationconfig)
|
||||
* [`NgModule` based applications.](#ngmodule-based-applications)
|
||||
|
||||
### **Preferred**: At the application root level using `providedIn`
|
||||
@@ -64,11 +64,11 @@ When you register a provider at the component level, you get a new instance of t
|
||||
|
||||
Note: Declaring a service like this causes `HeroService` to always be included in your application— even if the service is unused.
|
||||
|
||||
### At application root level using `ApplicationConfig`
|
||||
### At the application root level using `ApplicationConfig`
|
||||
|
||||
You can use the `providers` field of the `ApplicationConfig` (passed to the `bootstrapApplication` function) to provide a service or other `Injectable` at the application level.
|
||||
|
||||
In the example below, the `HeroService` is available to all components, directives, and pipes.
|
||||
In the example below, the `HeroService` is available to all components, directives, and pipes:
|
||||
|
||||
<docs-code language="typescript" highlight="[3]">
|
||||
export const appConfig: ApplicationConfig = {
|
||||
@@ -136,5 +136,5 @@ style componentConstructor text-align: left
|
||||
## What's next
|
||||
|
||||
<docs-pill-row>
|
||||
<docs-pill href="/guide/di/creating-injectable-service" title="Creating and injecting services"/>
|
||||
<docs-pill href="/guide/di/creating-injectable-service" title="Creating an injectable service"/>
|
||||
</docs-pill-row>
|
||||
|
||||
@@ -5,7 +5,7 @@ This guide explores additional features of dependency injection in Angular.
|
||||
## Custom providers with `@Inject`
|
||||
|
||||
Using a custom provider allows you to provide a concrete implementation for implicit dependencies, such as built-in browser APIs.
|
||||
The following example uses an `InjectionToken` to provide the [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) browser API as a dependency in the `BrowserStorageService`.
|
||||
The following example uses an `InjectionToken` to provide the [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) browser API as a dependency in the `BrowserStorageService`:
|
||||
|
||||
<docs-code header="src/app/storage.service.ts" language="typescript"
|
||||
highlight="[[3,6],[12]]">
|
||||
@@ -32,8 +32,8 @@ export class BrowserStorageService {
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
The `factory` function returns the `localStorage` property that is attached to the browser window object.
|
||||
The `Inject` decorator is a constructor parameter used to specify a custom provider of a dependency.
|
||||
The `factory` function returns the `localStorage` property that is attached to the browser's window object.
|
||||
The `Inject` decorator is applied to the `storage` constructor parameter and specifies a custom provider of the dependency.
|
||||
|
||||
This custom provider can now be overridden during testing with a mock API of `localStorage` instead of interacting with real browser APIs.
|
||||
|
||||
@@ -42,7 +42,7 @@ This custom provider can now be overridden during testing with a mock API of `lo
|
||||
Although developers strive to avoid it, some visual effects and third-party tools require direct DOM access.
|
||||
As a result, you might need to access a component's DOM element.
|
||||
|
||||
Angular exposes the underlying element of a `@Component` or `@Directive` via injection using the `ElementRef` injection token.
|
||||
Angular exposes the underlying element of a `@Component` or `@Directive` via injection using the `ElementRef` injection token:
|
||||
|
||||
<docs-code language="typescript" highlight="[7]">
|
||||
import { Directive, ElementRef } from '@angular/core';
|
||||
@@ -66,14 +66,13 @@ You can't refer directly to a class until it's been defined.
|
||||
|
||||
This isn't usually a problem, especially if you adhere to the recommended *one class per file* rule.
|
||||
But sometimes circular references are unavoidable.
|
||||
For example, when class 'A' refers to class 'B' and 'B' refers to 'A'.
|
||||
One of them has to be defined first.
|
||||
For example, when class 'A' refers to class 'B' and 'B' refers to 'A', one of them has to be defined first.
|
||||
|
||||
The Angular `forwardRef()` function creates an *indirect* reference that Angular can resolve later.
|
||||
|
||||
You face a similar problem when a class makes *a reference to itself*.
|
||||
For example in its `providers` array.
|
||||
The `providers` array is a property of the `@Component()` decorator function which must appear before the class definition.
|
||||
For example, in its `providers` array.
|
||||
The `providers` array is a property of the `@Component()` decorator function, which must appear before the class definition.
|
||||
You can break such circular references by using `forwardRef`.
|
||||
|
||||
<docs-code header="app.component.ts" language="typescript" highlight="[4]">
|
||||
|
||||
@@ -30,7 +30,7 @@ The `EnvironmentInjector` can be configured in one of two ways by using:
|
||||
* The `@Injectable()` `providedIn` property to refer to `root` or `platform`
|
||||
* The `ApplicationConfig` `providers` array
|
||||
|
||||
<docs-callout title="Tree-shaking and @Injectable()">
|
||||
<docs-callout title="Tree-shaking and @Injectable()">
|
||||
|
||||
Using the `@Injectable()` `providedIn` property is preferable to using the `ApplicationConfig` `providers` array. With `@Injectable()` `providedIn`, optimization tools can perform tree-shaking, which removes services that your application isn't using. This results in smaller bundle sizes.
|
||||
|
||||
@@ -46,7 +46,7 @@ Provide services using `providedIn` of `@Injectable()` as follows:
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root' // <--provides this service in the root EnvironmentInjector
|
||||
providedIn: 'root' // <--provides this service in the root EnvironmentInjector
|
||||
})
|
||||
export class ItemService {
|
||||
name = 'telephone';
|
||||
@@ -134,7 +134,7 @@ For example, the following `TestComponent` configures the `ElementInjector` by p
|
||||
|
||||
<docs-code language="typescript" highlight="[3]">
|
||||
@Component({
|
||||
…
|
||||
…
|
||||
providers: [{ provide: ItemService, useValue: { name: 'lamp' } }]
|
||||
})
|
||||
export class TestComponent
|
||||
@@ -335,11 +335,11 @@ The following is an example of how the `<app-root>` and `<app-child>` view trees
|
||||
<#VIEW>
|
||||
<app-child>
|
||||
<#VIEW>
|
||||
…content goes here…
|
||||
…content goes here…
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
<#VIEW>
|
||||
<app-root>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
</docs-code>
|
||||
|
||||
Understanding the idea of the `<#VIEW>` demarcation is especially significant when you configure services in the component class.
|
||||
@@ -387,24 +387,24 @@ The most basic rendered view would look like nested HTML elements such as the fo
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<app-root> <!-- AppComponent selector -->
|
||||
<app-child> <!-- ChildComponent selector -->
|
||||
</app-child>
|
||||
</app-root>
|
||||
<app-root> <!-- AppComponent selector -->
|
||||
<app-child> <!-- ChildComponent selector -->
|
||||
</app-child>
|
||||
</app-root>
|
||||
|
||||
</docs-code>
|
||||
|
||||
However, behind the scenes, Angular uses a logical view representation as follows when resolving injection requests:
|
||||
|
||||
<docs-code language="html">
|
||||
<app-root> <!-- AppComponent selector -->
|
||||
<#VIEW>
|
||||
<app-child> <!-- ChildComponent selector -->
|
||||
<#VIEW>
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
<app-root> <!-- AppComponent selector -->
|
||||
<#VIEW>
|
||||
<app-child> <!-- ChildComponent selector -->
|
||||
<#VIEW>
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
</docs-code>
|
||||
|
||||
The `<#VIEW>` here represents an instance of a template.
|
||||
@@ -435,16 +435,16 @@ Emoji from FlowerService: 🌺
|
||||
In the logical tree, this would be represented as follows:
|
||||
|
||||
<docs-code language="html" highlight="[[1],[2],[4]]">
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(FlowerService) flower=>"🌺">
|
||||
<#VIEW>
|
||||
<p>Emoji from FlowerService: {{flower.emoji}} (🌺)</p>
|
||||
<app-child>
|
||||
<#VIEW>
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(FlowerService) flower=>"🌺">
|
||||
<#VIEW>
|
||||
<p>Emoji from FlowerService: {{flower.emoji}} (🌺)</p>
|
||||
<app-child>
|
||||
<#VIEW>
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -507,19 +507,19 @@ In the logical tree, this is represented as follows:
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(FlowerService) flower=>"🌺">
|
||||
<#VIEW>
|
||||
<p>Emoji from FlowerService: {{flower.emoji}} (🌺)</p>
|
||||
<app-child @Provide(FlowerService="🌻")
|
||||
@Inject(FlowerService)=>"🌻"> <!-- search ends here -->
|
||||
<#VIEW> <!-- search starts here -->
|
||||
<h2>Child Component</h2>
|
||||
<p>Emoji from FlowerService: {{flower.emoji}} (🌻)</p>
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(FlowerService) flower=>"🌺">
|
||||
<#VIEW>
|
||||
<p>Emoji from FlowerService: {{flower.emoji}} (🌺)</p>
|
||||
<app-child @Provide(FlowerService="🌻")
|
||||
@Inject(FlowerService)=>"🌻"> <!-- search ends here -->
|
||||
<#VIEW> <!-- search starts here -->
|
||||
<h2>Child Component</h2>
|
||||
<p>Emoji from FlowerService: {{flower.emoji}} (🌻)</p>
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -613,18 +613,18 @@ The logic tree for this example of `viewProviders` is as follows:
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(AnimalService) animal=>"🐳">
|
||||
<#VIEW>
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService=>"🐶")>
|
||||
<!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->
|
||||
<p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(AnimalService) animal=>"🐳">
|
||||
<#VIEW>
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService=>"🐶")>
|
||||
<!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->
|
||||
<p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -715,31 +715,31 @@ The `AnimalService` in the logical tree would look like this:
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(AnimalService) animal=>"🐳">
|
||||
<#VIEW>
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService=>"🐶")>
|
||||
<!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->
|
||||
<p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(AnimalService) animal=>"🐳">
|
||||
<#VIEW>
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService=>"🐶")>
|
||||
<!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->
|
||||
<p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
|
||||
|
||||
<div class="container">
|
||||
<h3>Content projection</h3>
|
||||
<app-inspector @Inject(AnimalService) animal=>"🐳">
|
||||
<p>Emoji from AnimalService: {{animal.emoji}} (🐳)</p>
|
||||
</app-inspector>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h3>Content projection</h3>
|
||||
<app-inspector @Inject(AnimalService) animal=>"🐳">
|
||||
<p>Emoji from AnimalService: {{animal.emoji}} (🐳)</p>
|
||||
</app-inspector>
|
||||
</div>
|
||||
|
||||
<app-inspector>
|
||||
<#VIEW @Inject(AnimalService) animal=>"🐶">
|
||||
<p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
|
||||
</#VIEW>
|
||||
</app-inspector>
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
<app-inspector>
|
||||
<#VIEW @Inject(AnimalService) animal=>"🐶">
|
||||
<p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
|
||||
</#VIEW>
|
||||
</app-inspector>
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -773,16 +773,16 @@ In a logical tree, this same idea might look like this:
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(FlowerService) flower=>"🌺">
|
||||
<#VIEW>
|
||||
<app-child @Provide(FlowerService="🌻")>
|
||||
<#VIEW @Inject(FlowerService, SkipSelf)=>"🌺">
|
||||
<!-- With SkipSelf, the injector looks to the next injector up the tree (app-root) -->
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(FlowerService) flower=>"🌺">
|
||||
<#VIEW>
|
||||
<app-child @Provide(FlowerService="🌻")>
|
||||
<#VIEW @Inject(FlowerService, SkipSelf)=>"🌺">
|
||||
<!-- With SkipSelf, the injector looks to the next injector up the tree (app-root) -->
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -794,15 +794,15 @@ Here's the idea in the logical tree:
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(FlowerService) flower=>"🌺">
|
||||
<#VIEW> <!-- end search here with null-->
|
||||
<app-child @Provide(FlowerService="🌻")> <!-- start search here -->
|
||||
<#VIEW @Inject(FlowerService, @SkipSelf, @Host, @Optional)=>null>
|
||||
</#VIEW>
|
||||
</app-parent>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(FlowerService) flower=>"🌺">
|
||||
<#VIEW> <!-- end search here with null-->
|
||||
<app-child @Provide(FlowerService="🌻")> <!-- start search here -->
|
||||
<#VIEW @Inject(FlowerService, @SkipSelf, @Host, @Optional)=>null>
|
||||
</#VIEW>
|
||||
</app-parent>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -820,7 +820,7 @@ Instead, the injector will begin at the `<app-root>` `ElementInjector`.
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: 'app-child',
|
||||
…
|
||||
…
|
||||
viewProviders: [
|
||||
{ provide: AnimalService, useValue: { emoji: '🐶' } },
|
||||
],
|
||||
@@ -831,17 +831,17 @@ The logical tree looks like this with `@SkipSelf()` in `<app-child>`:
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(AnimalService=>"🐳")>
|
||||
<#VIEW><!-- search begins here -->
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService, SkipSelf=>"🐳")>
|
||||
<!--Add @SkipSelf -->
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(AnimalService=>"🐳")>
|
||||
<#VIEW><!-- search begins here -->
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService, SkipSelf=>"🐳")>
|
||||
<!--Add @SkipSelf -->
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -857,7 +857,7 @@ You can also see `@Host()` in the constructor:
|
||||
@Component({
|
||||
standalone: true
|
||||
selector: 'app-child',
|
||||
…
|
||||
…
|
||||
viewProviders: [
|
||||
{ provide: AnimalService, useValue: { emoji: '🐶' } },
|
||||
]
|
||||
@@ -871,16 +871,16 @@ export class ChildComponent {
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(AnimalService=>"🐳")>
|
||||
<#VIEW>
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService, @Host=>"🐶")> <!-- @Host stops search here -->
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(AnimalService=>"🐳")>
|
||||
<#VIEW>
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService, @Host=>"🐶")> <!-- @Host stops search here -->
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -915,7 +915,7 @@ export class ChildComponent {
|
||||
and how `@Host()` works.
|
||||
-->
|
||||
|
||||
When `@Host()` and `@SkipSelf()` were applied to the `FlowerService`, which is in the `providers` array, the result was `null` because `@SkipSelf()` starts its search in the `<app-child>` injector, but `@Host()` stops searching at `<#VIEW>` —where there is no `FlowerService`
|
||||
When `@Host()` and `@SkipSelf()` were applied to the `FlowerService`, which is in the `providers` array, the result was `null` because `@SkipSelf()` starts its search in the `<app-child>` injector, but `@Host()` stops searching at `<#VIEW>` —where there is no `FlowerService`
|
||||
In the logical tree, you can see that the `FlowerService` is visible in `<app-child>`, not its `<#VIEW>`.
|
||||
|
||||
However, the `AnimalService`, which is provided in the `AppComponent` `viewProviders` array, is visible.
|
||||
@@ -924,19 +924,19 @@ The logical tree representation shows why this is:
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(AnimalService=>"🐳")>
|
||||
<#VIEW @Provide(AnimalService="🦔")
|
||||
@Inject(AnimalService, @Optional)=>"🦔">
|
||||
<!-- ^^@SkipSelf() starts here, @Host() stops here^^ -->
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"🦔">
|
||||
<!-- Add @SkipSelf ^^-->
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
<app-root @ApplicationConfig
|
||||
@Inject(AnimalService=>"🐳")>
|
||||
<#VIEW @Provide(AnimalService="🦔")
|
||||
@Inject(AnimalService, @Optional)=>"🦔">
|
||||
<!-- ^^@SkipSelf() starts here, @Host() stops here^^ -->
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"🦔">
|
||||
<!-- Add @SkipSelf ^^-->
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ This component contains a body and can contain an optional header.
|
||||
<docs-code language="html">
|
||||
|
||||
<lib-card>;
|
||||
<lib-header>…</lib-header>;
|
||||
<lib-header>…</lib-header>;
|
||||
</lib-card>;
|
||||
|
||||
</docs-code>
|
||||
@@ -35,13 +35,13 @@ In a likely implementation, the `<lib-card>` component uses `@ContentChild()` or
|
||||
<docs-code language="typescript" highlight="[12]">
|
||||
@Component({
|
||||
selector: 'lib-header',
|
||||
…,
|
||||
…,
|
||||
})
|
||||
class LibHeaderComponent {}
|
||||
|
||||
@Component({
|
||||
selector: 'lib-card',
|
||||
…,
|
||||
…,
|
||||
})
|
||||
class LibCardComponent {
|
||||
@ContentChild(LibHeaderComponent) header: LibHeaderComponent|null = null;
|
||||
@@ -108,13 +108,13 @@ abstract class LibHeaderToken {}
|
||||
providers: [
|
||||
{provide: LibHeaderToken, useExisting: LibHeaderComponent}
|
||||
]
|
||||
…,
|
||||
…,
|
||||
})
|
||||
class LibHeaderComponent extends LibHeaderToken {}
|
||||
|
||||
@Component({
|
||||
selector: 'lib-card',
|
||||
…,
|
||||
…,
|
||||
})
|
||||
class LibCardComponent {
|
||||
@ContentChild(LibHeaderToken) header: LibHeaderToken|null = null;
|
||||
@@ -156,7 +156,7 @@ abstract class LibHeaderToken {
|
||||
providers: [
|
||||
{provide: LibHeaderToken, useExisting: LibHeaderComponent}
|
||||
]
|
||||
…,
|
||||
…,
|
||||
})
|
||||
class LibHeaderComponent extends LibHeaderToken {
|
||||
doSomething(): void {
|
||||
@@ -166,7 +166,7 @@ class LibHeaderComponent extends LibHeaderToken {
|
||||
|
||||
@Component({
|
||||
selector: 'lib-card',
|
||||
…,
|
||||
…,
|
||||
})
|
||||
class LibCardComponent implement AfterContentInit {
|
||||
@ContentChild(LibHeaderToken) header: LibHeaderToken|null = null;
|
||||
|
||||
@@ -195,33 +195,3 @@ providers.
|
||||
If a component or directive with `hostDirectives` and those host directives both provide the same
|
||||
injection token, the providers defined by class with `hostDirectives` take precedence over providers
|
||||
defined by the host directives.
|
||||
|
||||
### Performance
|
||||
|
||||
While the directive composition API offers a powerful tool for reusing common behaviors, excessive
|
||||
use of host directives can impact your application's memory use. If you create components or
|
||||
directives that use *many* host directives, you may inadvertently balloon the memory used by your
|
||||
application.
|
||||
|
||||
The following example shows a component that applies several host directives.
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
standalone: true,
|
||||
hostDirectives: [
|
||||
DisabledState,
|
||||
RequiredState,
|
||||
ValidationState,
|
||||
ColorState,
|
||||
RippleBehavior,
|
||||
],
|
||||
})
|
||||
export class CustomCheckbox { }
|
||||
```
|
||||
|
||||
This example declares a custom checkbox component that includes five host directives. This
|
||||
means that Angular will create six objects each time a `CustomCheckbox` renders— one for the
|
||||
component and one for each host directive. For a few checkboxes on a page, this won't pose any
|
||||
significant issues. However, if your page renders *hundreds* of checkboxes, such as in a table, then
|
||||
you could start to see an impact of the additional object allocations. Always be sure to profile
|
||||
your application to determine the right composition pattern for your use case.
|
||||
|
||||
@@ -130,7 +130,7 @@ When you write your own structural directives, use the following syntax:
|
||||
|
||||
<docs-code hideCopy language="typescript">
|
||||
|
||||
*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"
|
||||
*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ After you register your configured class with the browser's custom-element regis
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<my-popup message="Use Angular!"></my-popup>
|
||||
<my-popup message="Use Angular!"></my-popup>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -73,7 +73,7 @@ For more information, see Web Component documentation for [Creating custom event
|
||||
|
||||
Previously, when you wanted to add a component to an application at runtime, you had to define a _dynamic component_, and then you would have to load it, attach it to an element in the DOM, and wire up all of the dependencies, change detection, and event handling.
|
||||
|
||||
Using an Angular custom element makes the process simpler and more transparent, by providing all the infrastructure and framework automatically —all you have to do is define the kind of event handling you want.
|
||||
Using an Angular custom element makes the process simpler and more transparent, by providing all the infrastructure and framework automatically —all you have to do is define the kind of event handling you want.
|
||||
\(You do still have to exclude the component from compilation, if you are not going to use it in your application.\)
|
||||
|
||||
The following Popup Service example application defines a component that you can either load dynamically or convert to a custom element.
|
||||
@@ -111,9 +111,9 @@ Assume you create a `my-dialog` custom element based on the following component:
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
@Component(…)
|
||||
@Component(…)
|
||||
class MyDialog {
|
||||
@Input() content: string;
|
||||
@Input() content: string;
|
||||
}
|
||||
|
||||
</docs-code>
|
||||
@@ -123,10 +123,10 @@ For that, use the `NgElement` and `WithProperties` types \(both exported from `@
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
const aDialog = document.createElement('my-dialog') as NgElement & WithProperties<{content: string}>;
|
||||
const aDialog = document.createElement('my-dialog') as NgElement & WithProperties<{content: string}>;
|
||||
aDialog.content = 'Hello, world!';
|
||||
aDialog.content = 123; // <-- ERROR: TypeScript knows this should be a string.
|
||||
aDialog.body = 'News'; // <-- ERROR: TypeScript knows there is no `body` property on `aDialog`.
|
||||
aDialog.content = 123; // <-- ERROR: TypeScript knows this should be a string.
|
||||
aDialog.body = 'News'; // <-- ERROR: TypeScript knows there is no `body` property on `aDialog`.
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -139,9 +139,9 @@ An alternative way, that only requires defining each custom element's type once,
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'my-dialog': NgElement & WithProperties<{content: string}>;
|
||||
'my-other-element': NgElement & WithProperties<{foo: 'bar'}>;
|
||||
…
|
||||
'my-dialog': NgElement & WithProperties<{content: string}>;
|
||||
'my-other-element': NgElement & WithProperties<{foo: 'bar'}>;
|
||||
…
|
||||
}
|
||||
}
|
||||
|
||||
@@ -151,9 +151,9 @@ Now, TypeScript can infer the correct type the same way it does for built-in ele
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
document.createElement('div') //--> HTMLDivElement (built-in element)
|
||||
document.querySelector('foo') //--> Element (unknown element)
|
||||
document.createElement('my-dialog') //--> NgElement & WithProperties<{content: string}> (custom element)
|
||||
document.querySelector('my-other-element') //--> NgElement & WithProperties<{foo: 'bar'}> (custom element)
|
||||
document.createElement('div') //--> HTMLDivElement (built-in element)
|
||||
document.querySelector('foo') //--> Element (unknown element)
|
||||
document.createElement('my-dialog') //--> NgElement & WithProperties<{content: string}> (custom element)
|
||||
document.querySelector('my-other-element') //--> NgElement & WithProperties<{foo: 'bar'}> (custom element)
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -42,7 +42,7 @@ The following code from the example shows the setup in the root module.
|
||||
## Create a form object model
|
||||
|
||||
A dynamic form requires an object model that can describe all scenarios needed by the form functionality.
|
||||
The example hero-application form is a set of questions — that is, each control in the form must ask a question and accept an answer.
|
||||
The example hero-application form is a set of questions — that is, each control in the form must ask a question and accept an answer.
|
||||
|
||||
The data model for this type of form must represent a question.
|
||||
The example includes the `DynamicFormQuestionComponent`, which defines a question as the fundamental object in the model.
|
||||
|
||||
@@ -61,11 +61,11 @@ The same built-in validators that are available as attributes in template-driven
|
||||
For a full list of built-in validators, see the [Validators](api/forms/Validators) API reference.
|
||||
|
||||
To update the actor form to be a reactive form, use some of the same
|
||||
built-in validators —this time, in function form, as in the following example.
|
||||
built-in validators —this time, in function form, as in the following example.
|
||||
|
||||
<docs-code header="reactive/actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="form-group"/>
|
||||
|
||||
In this example, the `name` control sets up two built-in validators —`Validators.required` and `Validators.minLength(4)`— and one custom validator, `forbiddenNameValidator`.
|
||||
In this example, the `name` control sets up two built-in validators —`Validators.required` and `Validators.minLength(4)`— and one custom validator, `forbiddenNameValidator`.
|
||||
|
||||
All of these validators are synchronous, so they are passed as the second argument.
|
||||
Notice that you can support multiple validators by passing the functions in as an array.
|
||||
@@ -129,7 +129,7 @@ For example:
|
||||
<docs-code header="template/actor-form-template.component.html (forbidden-name-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-input"/>
|
||||
|
||||
HELPFUL: Notice that the custom validation directive is instantiated with `useExisting` rather than `useClass`.
|
||||
The registered validator must be *this instance* of the `ForbiddenValidatorDirective` —the instance in the form with its `forbiddenName` property bound to "bob".
|
||||
The registered validator must be *this instance* of the `ForbiddenValidatorDirective` —the instance in the form with its `forbiddenName` property bound to "bob".
|
||||
|
||||
If you were to replace `useExisting` with `useClass`, then you'd be registering a new class instance, one that doesn't have a `forbiddenName`.
|
||||
|
||||
@@ -253,8 +253,8 @@ The following example shows how to achieve this in a template-driven form.
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<input [(ngModel)]="name" #model="ngModel" appSomeAsyncValidator>
|
||||
<app-spinner *ngIf="model.pending"></app-spinner>
|
||||
<input [(ngModel)]="name" #model="ngModel" appSomeAsyncValidator>
|
||||
<app-spinner *ngIf="model.pending"></app-spinner>
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
@@ -110,7 +110,7 @@ The view-to-model diagram shows how data flows when an input field's value is ch
|
||||
```mermaid
|
||||
flowchart TB
|
||||
U{User}
|
||||
I("<input>")
|
||||
I("<input>")
|
||||
CVA(ControlValueAccessor)
|
||||
FC(FormControl)
|
||||
O(Observers)
|
||||
@@ -130,14 +130,14 @@ The model-to-view diagram shows how a programmatic change to the model is propag
|
||||
```mermaid
|
||||
flowchart TB
|
||||
U{User}
|
||||
I(<input>)
|
||||
I(<input>)
|
||||
CVA(ControlValueAccessor)
|
||||
FC(FormControl)
|
||||
O(Observers)
|
||||
U-->|"Calls setValue() on the FormControl"|FC
|
||||
FC-->|Notifies the ControlValueAccessor|CVA
|
||||
FC-.->|Fires a 'valueChanges' event to observers|O
|
||||
CVA-->|"Updates the value of the <input>"|I
|
||||
CVA-->|"Updates the value of the <input>"|I
|
||||
```
|
||||
|
||||
### Data flow in template-driven forms
|
||||
@@ -157,7 +157,7 @@ The view-to-model diagram shows how data flows when an input field's value is ch
|
||||
```mermaid
|
||||
flowchart TB
|
||||
U{User}
|
||||
I(<input>)
|
||||
I(<input>)
|
||||
CVA(ControlValueAccessor)
|
||||
FC(FormControl)
|
||||
M(NgModel)
|
||||
@@ -207,7 +207,7 @@ flowchart TB
|
||||
FC2(FormControl)
|
||||
O(Observers)
|
||||
CVA(ControlValueAccessor)
|
||||
I("<input>")
|
||||
I("<input>")
|
||||
FC2-.->|Fires a 'valueChanges' event to observers|O
|
||||
O-->|ControlValueAccessor receives valueChanges event|CVA
|
||||
CVA-->|Sets the value in the control|I
|
||||
|
||||
@@ -10,7 +10,7 @@ Angular supports two design approaches for interactive forms. Template-driven fo
|
||||
Template-driven forms are a great choice for small or simple forms, while reactive forms are more scalable and suitable for complex forms. For a comparison of the two approaches, see [Choosing an approach](guide/forms#choosing-an-approach)
|
||||
</docs-callout>
|
||||
|
||||
You can build almost any kind of form with an Angular template —login forms, contact forms, and pretty much any business form.
|
||||
You can build almost any kind of form with an Angular template —login forms, contact forms, and pretty much any business form.
|
||||
You can lay out the controls creatively and bind them to the data in your object model.
|
||||
You can specify validation rules and display validation errors, conditionally allow input from specific controls, trigger built-in visual feedback, and much more.
|
||||
|
||||
@@ -339,11 +339,11 @@ You will bind the form property that indicates its overall validity to the **Sub
|
||||
</docs-step>
|
||||
|
||||
<docs-step title="Run the application">
|
||||
Notice that the button is enabled —although it doesn't do anything useful yet.
|
||||
Notice that the button is enabled —although it doesn't do anything useful yet.
|
||||
</docs-step>
|
||||
|
||||
<docs-step title="Delete the Name value">
|
||||
This violates the "required" rule, so it displays the error message —and notice that it also disables the **Submit** button.
|
||||
This violates the "required" rule, so it displays the error message —and notice that it also disables the **Submit** button.
|
||||
|
||||
You didn't have to explicitly wire the button's enabled state to the form's validity.
|
||||
The `FormsModule` did this automatically when you defined a template reference variable on the enhanced form element, then referred to that variable in the button control.
|
||||
|
||||
@@ -83,11 +83,11 @@ HELPFUL: Prefer using [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/C
|
||||
|
||||
### `withXsrfConfiguration(...)`
|
||||
|
||||
Including this option allows for customization of `HttpClient`'s built-in XSRF security functionality. See the [security guide](guide/http/security) for more information.
|
||||
Including this option allows for customization of `HttpClient`'s built-in XSRF security functionality. See the [security guide](best-practices/security) for more information.
|
||||
|
||||
### `withNoXsrfProtection()`
|
||||
|
||||
Including this option disables `HttpClient`'s built-in XSRF security functionality. See the [security guide](guide/http/security) for more information.
|
||||
Including this option disables `HttpClient`'s built-in XSRF security functionality. See the [security guide](best-practices/security) for more information.
|
||||
|
||||
## `HttpClientModule`-based configuration
|
||||
|
||||
@@ -95,12 +95,12 @@ Some applications may configure `HttpClient` using the older API based on NgModu
|
||||
|
||||
This table lists the NgModules available from `@angular/common/http` and how they relate to the provider configuration functions above.
|
||||
|
||||
| **NgModule** | `provideHttpClient()` equivalent |
|
||||
| - | - |
|
||||
| `HttpClientModule` | `provideHttpClient(withInterceptorsFromDi())` |
|
||||
| `HttpClientJsonpModule` | `withJsonpSupport()` |
|
||||
| `HttpClientXsrfModule.withOptions(...)` | `withXsrfConfiguration(...)` |
|
||||
| `HttpClientXsrfModule.disable()` | `withNoXsrfProtection()` |
|
||||
| **NgModule** | `provideHttpClient()` equivalent |
|
||||
| --------------------------------------- | --------------------------------------------- |
|
||||
| `HttpClientModule` | `provideHttpClient(withInterceptorsFromDi())` |
|
||||
| `HttpClientJsonpModule` | `withJsonpSupport()` |
|
||||
| `HttpClientXsrfModule.withOptions(...)` | `withXsrfConfiguration(...)` |
|
||||
| `HttpClientXsrfModule.disable()` | `withNoXsrfProtection()` |
|
||||
|
||||
<docs-callout important title="Use caution when using HttpClientModule in multiple injectors">
|
||||
When `HttpClientModule` is present in multiple injectors, the behavior of interceptors is poorly defined and depends on the exact options and provider/import ordering.
|
||||
|
||||
@@ -8,12 +8,13 @@ At the end, tests can verify that the app made no unexpected requests.
|
||||
|
||||
## Setup for testing
|
||||
|
||||
To begin testing usage of `HttpClient`, configure `TestBed` and include `provideHttpClientTesting` in your test's setup. This configures `HttpClient` to use a test backend instead of the real network. It also provides `HttpTestingController`, which you'll use to interact with the test backend, set expectations about which requests have been made, and flush responses to those requests. `HttpTestingController` can be injected from `TestBed` once configured.
|
||||
To begin testing usage of `HttpClient`, configure `TestBed` and include `provideHttpClient()` and `provideHttpClientTesting` in your test's setup. This configures `HttpClient` to use a test backend instead of the real network. It also provides `HttpTestingController`, which you'll use to interact with the test backend, set expectations about which requests have been made, and flush responses to those requests. `HttpTestingController` can be injected from `TestBed` once configured.
|
||||
|
||||
<docs-code language="ts">
|
||||
TestBed.configureTestingModule({
|
||||
providers: [
|
||||
// ... other test providers
|
||||
provideHttpClient(),
|
||||
provideHttpClientTesting(),
|
||||
],
|
||||
});
|
||||
@@ -31,6 +32,7 @@ For example, you can write a test that expects a GET request to occur and provid
|
||||
TestBed.configureTestingModule({
|
||||
providers: [
|
||||
ConfigService,
|
||||
provideHttpClient(),
|
||||
provideHttpClientTesting(),
|
||||
],
|
||||
});
|
||||
|
||||
@@ -18,7 +18,7 @@ To display the current date in the format for the current locale, use the follow
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
{{ today | date }}
|
||||
{{ today | date }}
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -32,7 +32,7 @@ To force the currency to use American English \(`en-US`\), use the following for
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
{{ amount | currency : 'en-US' }}
|
||||
{{ amount | currency : 'en-US' }}
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ The following example defines the `introductionHeader` custom ID for a variable.
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
variableText1 = $localize `:@@introductionHeader:Hello i18n!`;
|
||||
variableText1 = $localize `:@@introductionHeader:Hello i18n!`;
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -58,7 +58,7 @@ The following example defines the `introductionHeader` custom ID and description
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
variableText2 = $localize `:An introduction header for this sample@@introductionHeader:Hello i18n!`;
|
||||
variableText2 = $localize `:An introduction header for this sample@@introductionHeader:Hello i18n!`;
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -72,7 +72,7 @@ The following example defines the `introductionHeader` custom ID for a variable.
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
variableText3 = $localize `:site header|An introduction header for this sample@@introductionHeader:Hello i18n!`;
|
||||
variableText3 = $localize `:site header|An introduction header for this sample@@introductionHeader:Hello i18n!`;
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ To prepare your project for translation, complete the following actions.
|
||||
In a component template, the i18n metadata is the value of the `i18n` attribute.
|
||||
|
||||
<docs-code language="html">
|
||||
<element i18n="{i18n_metadata}">{string_to_translate}</element>
|
||||
<element i18n="{i18n_metadata}">{string_to_translate}</element>
|
||||
</docs-code>
|
||||
|
||||
Use the `i18n` attribute to mark a static text message in your component templates for translation.
|
||||
@@ -44,7 +44,7 @@ The following example shows the `<ng-container>` element transformed into a non-
|
||||
In a component template, the i18n metadata is the value of the `i18n-{attribute_name}` attribute.
|
||||
|
||||
<docs-code language="html">
|
||||
<element i18n-{attribute_name}="{i18n_metadata}" {attribute_name}="{attribute_value}" />
|
||||
<element i18n-{attribute_name}="{i18n_metadata}" {attribute_name}="{attribute_value}" />
|
||||
</docs-code>
|
||||
|
||||
The attributes of HTML elements include text that should be translated along with the rest of the displayed text in the component template.
|
||||
@@ -55,7 +55,7 @@ Use the following syntax to assign a meaning, description, and custom ID.
|
||||
<!--todo: replace with docs-code -->
|
||||
|
||||
<docs-code language="html">
|
||||
i18n-{attribute_name}="{meaning}|{description}@@{id}"
|
||||
i18n-{attribute_name}="{meaning}|{description}@@{id}"
|
||||
</docs-code>
|
||||
|
||||
### `i18n-title` example
|
||||
@@ -82,7 +82,7 @@ Use the [`$localize`][ApiLocalizeInitLocalize] tagged message string to mark a s
|
||||
<!--todo: replace with docs-code -->
|
||||
|
||||
<docs-code language="typescript">
|
||||
$localize `string_to_translate`;
|
||||
$localize `string_to_translate`;
|
||||
</docs-code>
|
||||
|
||||
The i18n metadata is surrounded by colon \(`:`\) characters and prepends the translation source text.
|
||||
@@ -90,7 +90,7 @@ The i18n metadata is surrounded by colon \(`:`\) characters and prepends the tra
|
||||
<!--todo: replace with docs-code -->
|
||||
|
||||
<docs-code language="typescript">
|
||||
$localize `:{i18n_metadata}:string_to_translate`
|
||||
$localize `:{i18n_metadata}:string_to_translate`
|
||||
</docs-code>
|
||||
|
||||
### Include interpolated text
|
||||
@@ -100,13 +100,13 @@ Include [interpolations](guide/templates/interpolation) in a [`$localize`][ApiLo
|
||||
<!--todo: replace with docs-code -->
|
||||
|
||||
<docs-code language="typescript">
|
||||
$localize `string_to_translate ${variable_name}`;
|
||||
$localize `string_to_translate ${variable_name}`;
|
||||
</docs-code>
|
||||
|
||||
### Name the interpolation placeholder
|
||||
|
||||
<docs-code language="typescript">
|
||||
$localize `string_to_translate ${variable_name}:placeholder_name:`;
|
||||
$localize `string_to_translate ${variable_name}:placeholder_name:`;
|
||||
</docs-code>
|
||||
|
||||
## i18n metadata for translation
|
||||
@@ -114,7 +114,7 @@ Include [interpolations](guide/templates/interpolation) in a [`$localize`][ApiLo
|
||||
<!--todo: replace with docs-code -->
|
||||
|
||||
<docs-code language="html">
|
||||
{meaning}|{description}@@{custom_id}
|
||||
{meaning}|{description}@@{custom_id}
|
||||
</docs-code>
|
||||
|
||||
The following parameters provide context and additional information to reduce confusion for your translator.
|
||||
@@ -143,7 +143,7 @@ The following example shows the value of the [`$localize`][ApiLocalizeInitLocali
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
$localize `:An introduction header for this sample:Hello i18n!`;
|
||||
$localize `:An introduction header for this sample:Hello i18n!`;
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -166,7 +166,7 @@ The following code example shows the value of the [`$localize`][ApiLocalizeInitL
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
$localize `:site header|An introduction header for this sample:Hello i18n!`;
|
||||
$localize `:site header|An introduction header for this sample:Hello i18n!`;
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
@@ -88,7 +88,7 @@ To create a translation file for a locale or language, complete the following ac
|
||||
|
||||
<docs-code language="file">
|
||||
|
||||
messages.xlf --> messages.{locale}.xlf
|
||||
messages.xlf --> messages.{locale}.xlf
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -132,20 +132,20 @@ The following actions describe the translation process for French.
|
||||
1. Open `messages.fr.xlf` and find the first `<trans-unit>` element.
|
||||
This is a *translation unit*, also known as a *text node*, that represents the translation of the `<h1>` greeting tag that was previously marked with the `i18n` attribute.
|
||||
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-hello-before"/>
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-hello-before"/>
|
||||
|
||||
The `id="introductionHeader"` is a [custom ID][GuideI18nOptionalManageMarkedText], but without the `@@` prefix required in the source HTML.
|
||||
|
||||
1. Duplicate the `<source>... </source>` element in the text node, rename it to `target`, and then replace the content with the French text.
|
||||
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>, after translation)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-hello"/>
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>, after translation)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-hello"/>
|
||||
|
||||
In a more complex translation, the information and context in the [description and meaning elements][GuideI18nCommonPrepareAddHelpfulDescriptionsAndMeanings] help you choose the right words for translation.
|
||||
|
||||
1. Translate the other text nodes.
|
||||
The following example displays the way to translate.
|
||||
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-other-nodes"/>
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-other-nodes"/>
|
||||
|
||||
IMPORTANT: Don't change the IDs for translation units.
|
||||
Each `id` attribute is generated by Angular and depends on the content of the component text and the assigned meaning.
|
||||
@@ -169,7 +169,7 @@ To translate a `plural`, translate the ICU format match values.
|
||||
|
||||
The following example displays the way to translate.
|
||||
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-plural"/>
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-plural"/>
|
||||
|
||||
## Translate alternate expressions
|
||||
|
||||
@@ -184,18 +184,18 @@ The following example displays a `select` ICU expression in the component templa
|
||||
In this example, Angular extracts the expression into two translation units.
|
||||
The first contains the text outside of the `select` clause, and uses a placeholder for `select` \(`<x id="ICU">`\):
|
||||
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-select-1"/>
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-select-1"/>
|
||||
|
||||
IMPORTANT: When you translate the text, move the placeholder if necessary, but don't remove it.
|
||||
If you remove the placeholder, the ICU expression is removed from your translated application.
|
||||
|
||||
The following example displays the second translation unit that contains the `select` clause.
|
||||
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-select-2"/>
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-select-2"/>
|
||||
|
||||
The following example displays both translation units after translation is complete.
|
||||
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-select"/>
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-select"/>
|
||||
|
||||
## Translate nested expressions
|
||||
|
||||
@@ -206,15 +206,15 @@ Angular extracts the expression into two translation units.
|
||||
|
||||
The following example displays the first translation unit that contains the text outside of the nested expression.
|
||||
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-nested-1"/>
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-nested-1"/>
|
||||
|
||||
The following example displays the second translation unit that contains the complete nested expression.
|
||||
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-nested-2"/>
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-nested-2"/>
|
||||
|
||||
The following example displays both translation units after translating.
|
||||
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-nested"/>
|
||||
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-nested"/>
|
||||
|
||||
## What's next
|
||||
|
||||
|
||||
@@ -52,7 +52,7 @@ To activate the `NgOptimizedImage` directive, replace your image's `src` attribu
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
<img ngSrc="cat.jpg">
|
||||
<img ngSrc="cat.jpg">
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -63,7 +63,7 @@ Always mark the [LCP image](https://web.dev/lcp/#what-elements-are-considered) o
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
<img ngSrc="cat.jpg" width="400" height="200" priority>
|
||||
<img ngSrc="cat.jpg" width="400" height="200" priority>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -80,7 +80,7 @@ In order to prevent [image-related layout shifts](https://web.dev/css-web-vitals
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
<img ngSrc="cat.jpg" width="400" height="200">
|
||||
<img ngSrc="cat.jpg" width="400" height="200">
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -100,7 +100,7 @@ When you add the `fill` attribute to your image, you do not need and should not
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
<img ngSrc="cat.jpg" fill>
|
||||
<img ngSrc="cat.jpg" fill>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -118,17 +118,17 @@ IMPORTANT: For the "fill" image to render properly, its parent element **must**
|
||||
|
||||
NgOptimizedImage can display an automatic low-resolution placeholder for your image if you're using a CDN or image host that provides automatic image resizing. Take advantage of this feature by adding the `placeholder` attribute to your image:
|
||||
|
||||
<code-example format="typescript" language="typescript">
|
||||
<docs-code format="typescript" language="typescript">
|
||||
|
||||
<img ngSrc="cat.jpg" width="400" height="200" placeholder>
|
||||
<img ngSrc="cat.jpg" width="400" height="200" placeholder>
|
||||
|
||||
</code-example>
|
||||
</docs-code>
|
||||
|
||||
Adding this attribute automatically requests a second, smaller version of the image using your specified image loader. This small image will be applied as a `background-image` style with a CSS blur while your image loads. If no image loader is provided, no placeholder image can be generated and an error will be thrown.
|
||||
|
||||
The default size for generated placeholders is 30px wide. You can change this size by specifying a pixel value in the `IMAGE_CONFIG` provider, as seen below:
|
||||
|
||||
<code-example format="typescript" language="typescript">
|
||||
<docs-code format="typescript" language="typescript">
|
||||
providers: [
|
||||
{
|
||||
provide: IMAGE_CONFIG,
|
||||
@@ -137,7 +137,7 @@ providers: [
|
||||
}
|
||||
},
|
||||
],
|
||||
</code-example>
|
||||
</docs-code>
|
||||
|
||||
If you want sharp edges around your blurred placeholder, you can wrap your image in a containing `<div>` with the `overflow: hidden` style. As long as the `<div>` is the same size as the image (such as by using the `width: fit-content` style), the "fuzzy edges" of the placeholder will be hidden.
|
||||
|
||||
@@ -145,11 +145,11 @@ If you want sharp edges around your blurred placeholder, you can wrap your image
|
||||
|
||||
You can also specify a placeholder using a base64 [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) without an image loader. The data url format is `data:image/[imagetype];[data]`, where `[imagetype]` is the image format, just as `png`, and `[data]` is a base64 encoding of the image. That encoding can be done using the command line or in JavaScript. For specific commands, see [the MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs#encoding_data_into_base64_format). An example of a data URL placeholder with truncated data is shown below:
|
||||
|
||||
<code-example format="typescript" language="typescript">
|
||||
<docs-code format="typescript" language="typescript">
|
||||
|
||||
<img ngSrc="cat.jpg" width="400" height="200" placeholder="data:image/png;base64,iVBORw0K...">
|
||||
<img ngSrc="cat.jpg" width="400" height="200" placeholder="data:image/png;base64,iVBORw0K...">
|
||||
|
||||
</code-example>
|
||||
</docs-code>
|
||||
|
||||
However, large data URLs increase the size of your Angular bundles and slow down page load. If you cannot use an image loader, the Angular team recommends keeping base64 placeholder images smaller than 4KB and using them exclusively on critical images. In addition to decreasing placeholder dimensions, consider changing image formats or parameters used when saving images. At very low resolutions, these parameters can have a large effect on file size.
|
||||
|
||||
@@ -157,11 +157,11 @@ However, large data URLs increase the size of your Angular bundles and slow dow
|
||||
|
||||
By default, NgOptimizedImage applies a CSS blur effect to image placeholders. To render a placeholder without blur, provide a `placeholderConfig` argument with an object that includes the `blur` property, set to false. For example:
|
||||
|
||||
<code-example format="typescript" language="typescript">
|
||||
<docs-code format="typescript" language="typescript">
|
||||
|
||||
<img ngSrc="cat.jpg" width="400" height="200" placeholder [placeholderConfig]="{blur: false}">
|
||||
<img ngSrc="cat.jpg" width="400" height="200" placeholder [placeholderConfig]="{blur: false}">
|
||||
|
||||
</code-example>
|
||||
</docs-code>
|
||||
|
||||
## Adjusting image styling
|
||||
|
||||
@@ -181,7 +181,7 @@ You can add a [`preconnect` resource hint](https://web.dev/preconnect-and-dns-pr
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<link rel="preconnect" href="https://my.cdn.origin" />
|
||||
<link rel="preconnect" href="https://my.cdn.origin" />
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -236,7 +236,7 @@ If you would like to manually define a `srcset` attribute, you can provide your
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w">
|
||||
<img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w">
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -244,7 +244,7 @@ If the `ngSrcset` attribute is present, `NgOptimizedImage` generates and sets th
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w" sizes="50vw">
|
||||
<img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w" sizes="50vw">
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -254,7 +254,7 @@ To disable srcset generation for a single image, you can add the `disableOptimiz
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<img ngSrc="about.jpg" disableOptimizedSrcset>
|
||||
<img ngSrc="about.jpg" disableOptimizedSrcset>
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -264,7 +264,7 @@ By default, `NgOptimizedImage` sets `loading=lazy` for all images that are not m
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<img ngSrc="cat.jpg" width="400" height="200" loading="eager">
|
||||
<img ngSrc="cat.jpg" width="400" height="200" loading="eager">
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -274,7 +274,7 @@ You may want to have images displayed at varying widths on differently-sized scr
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<img ngSrc="cat.jpg" width="400" height="200" sizes="(max-width: 768px) 100vw, 50vw">
|
||||
<img ngSrc="cat.jpg" width="400" height="200" sizes="(max-width: 768px) 100vw, 50vw">
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -371,7 +371,7 @@ Note that in the above example, we've invented the 'roundedCorners' property nam
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<img ngSrc="profile.jpg" width="300" height="300" [loaderParams]="{roundedCorners: true}">
|
||||
<img ngSrc="profile.jpg" width="300" height="300" [loaderParams]="{roundedCorners: true}">
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
@@ -31,10 +31,10 @@ The following table summarizes the `@NgModule` metadata properties.
|
||||
|
||||
| Property | Details |
|
||||
|:--- |:--- |
|
||||
| `declarations` | A list of [declarable](/guide/ngmodules/faq#what-is-a-declarable?) classes (*components*, *directives*, and *pipes*) that *belong to this module*. <ol> <li> When compiling a template, you need to determine a set of selectors which should be used for triggering their corresponding directives. </li> <li> The template is compiled within the context of an NgModule —the NgModule within which the template's component is declared— which determines the set of selectors using the following rules: <ul> <li> All selectors of directives listed in `declarations`. </li> <li> All selectors of directives exported from imported NgModules. </li> </ul> </li> </ol> Components, directives, and pipes must belong to *exactly* one module. The compiler emits an error if you try to declare the same class in more than one module. Be careful not to re-declare a class that is imported directly or indirectly from another module. |
|
||||
| `declarations` | A list of [declarable](/guide/ngmodules/faq#what-is-a-declarable?) classes (*components*, *directives*, and *pipes*) that *belong to this module*. <ol> <li> When compiling a template, you need to determine a set of selectors which should be used for triggering their corresponding directives. </li> <li> The template is compiled within the context of an NgModule —the NgModule within which the template's component is declared— which determines the set of selectors using the following rules: <ul> <li> All selectors of directives listed in `declarations`. </li> <li> All selectors of directives exported from imported NgModules. </li> </ul> </li> </ol> Components, directives, and pipes must belong to *exactly* one module. The compiler emits an error if you try to declare the same class in more than one module. Be careful not to re-declare a class that is imported directly or indirectly from another module. |
|
||||
| `providers` | A list of dependency-injection providers. <br /> Angular registers these providers with the NgModule's injector. If it is the NgModule used for bootstrapping then it is the root injector. <br /> These services become available for injection into any component, directive, pipe or service which is a child of this injector. <br /> A lazy-loaded module has its own injector which is typically a child of the application root injector. <br /> Lazy-loaded services are scoped to the lazy module's injector. If a lazy-loaded module also provides the `UserService`, any component created within that module's context (such as by router navigation) gets the local instance of the service, not the instance in the root application injector. <br /> Components in external modules continue to receive the instance provided by their injectors. <br /> For more information on injector hierarchy and scoping, see [Providers](/guide/ngmodules/providers) and the [DI Guide](/guide/di). |
|
||||
| `imports` | A list of modules which should be folded into this module. Folded means it is as if all the imported NgModule's exported properties were declared here. <br /> Specifically, it is as if the list of modules whose exported components, directives, or pipes are referenced by the component templates were declared in this module. <br /> A component template can [reference](/guide/ngmodules/faq#how-does-angular-find-components,-directives,-and-pipes-in-a-template?-what-is-a-template-reference?) another component, directive, or pipe when the reference is declared in this module or if the imported module has exported it. For example, a component can use the `NgIf` and `NgFor` directives only if the module has imported the Angular `CommonModule` (perhaps indirectly by importing `BrowserModule`). <br /> You can import many standard directives from the `CommonModule` but some familiar directives belong to other modules. For example, you can use `[(ngModel)]` only after importing the Angular `FormsModule`. |
|
||||
| `exports` | A list of declarations —*component*, *directive*, and *pipe* classes— that an importing module can use. <br /> Exported declarations are the module's *public API*. A component in another module can use *this* module's `UserComponent` if it imports this module and this module exports `UserComponent`. <br /> Declarations are private by default. If this module does *not* export `UserComponent`, then only the components within *this* module can use `UserComponent`. <br /> Importing a module does *not* automatically re-export the imported module's imports. Module 'B' can't use `ngIf` just because it imported module 'A' which imported `CommonModule`. Module 'B' must import `CommonModule` itself. <br /> A module can list another module among its `exports`, in which case all of that module's public components, directives, and pipes are exported. <br /> [Re-export](/guide/ngmodules/faq#what-should-i-export?) makes module transitivity explicit. If Module 'A' re-exports `CommonModule` and Module 'B' imports Module 'A', Module 'B' components can use `ngIf` even though 'B' itself didn't import `CommonModule`. |
|
||||
| `exports` | A list of declarations —*component*, *directive*, and *pipe* classes— that an importing module can use. <br /> Exported declarations are the module's *public API*. A component in another module can use *this* module's `UserComponent` if it imports this module and this module exports `UserComponent`. <br /> Declarations are private by default. If this module does *not* export `UserComponent`, then only the components within *this* module can use `UserComponent`. <br /> Importing a module does *not* automatically re-export the imported module's imports. Module 'B' can't use `ngIf` just because it imported module 'A' which imported `CommonModule`. Module 'B' must import `CommonModule` itself. <br /> A module can list another module among its `exports`, in which case all of that module's public components, directives, and pipes are exported. <br /> [Re-export](/guide/ngmodules/faq#what-should-i-export?) makes module transitivity explicit. If Module 'A' re-exports `CommonModule` and Module 'B' imports Module 'A', Module 'B' components can use `ngIf` even though 'B' itself didn't import `CommonModule`. |
|
||||
| `bootstrap` | A list of components that are automatically bootstrapped. <br /> Usually there's only one component in this list, the *root component* of the application. <br /> Angular can launch with multiple bootstrap components, each with its own location in the host web page. |
|
||||
|
||||
## More on NgModules
|
||||
|
||||
@@ -6,14 +6,14 @@ This page answers the questions many developers ask about NgModule design and im
|
||||
|
||||
## What classes should I add to the `declarations` array?
|
||||
|
||||
Add [declarable](/guide/ngmodules/bootstrapping#the-declarations-array) classes —components, directives, and pipes— to a `declarations` list.
|
||||
Add [declarable](/guide/ngmodules/bootstrapping#the-declarations-array) classes —components, directives, and pipes— to a `declarations` list.
|
||||
|
||||
Declare these classes in *exactly one* module of the application.
|
||||
Declare them in a module if they belong to that particular module.
|
||||
|
||||
## What is a `declarable`?
|
||||
|
||||
Declarables are the class types —components, directives, and pipes— that you can add to a module's `declarations` list.
|
||||
Declarables are the class types —components, directives, and pipes— that you can add to a module's `declarations` list.
|
||||
They're the only classes that you can add to `declarations`.
|
||||
|
||||
## What classes should I *not* add to `declarations`?
|
||||
@@ -97,7 +97,7 @@ Export [declarable](/guide/ngmodules/bootstrapping#the-declarations-array) class
|
||||
These are your *public* classes.
|
||||
If you don't export a declarable class, it stays *private*, visible only to other components declared in this NgModule.
|
||||
|
||||
You *can* export any declarable class —components, directives, and pipes— whether
|
||||
You *can* export any declarable class —components, directives, and pipes— whether
|
||||
it's declared in this NgModule or in an imported NgModule.
|
||||
|
||||
You *can* re-export entire imported NgModules, which effectively re-export all of their exported classes.
|
||||
@@ -389,7 +389,7 @@ In an Angular app, NgModules and JavaScript modules work together.
|
||||
In modern JavaScript, every file is a module (see the [Modules](https://exploringjs.com/es6/ch_modules.html) page of the Exploring ES6 website).
|
||||
Within each file you write an `export` statement to make parts of the module public.
|
||||
|
||||
An Angular NgModule is a class with the `@NgModule` decorator —JavaScript modules don't have to have the `@NgModule` decorator.
|
||||
An Angular NgModule is a class with the `@NgModule` decorator —JavaScript modules don't have to have the `@NgModule` decorator.
|
||||
Angular's `NgModule` has `imports` and `exports` and they serve a similar purpose.
|
||||
|
||||
You *import* other NgModules so you can use their exported classes in component templates.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# Lazy-loading feature modules
|
||||
|
||||
By default, NgModules are eagerly loaded. This means that as soon as the application loads, so do all the NgModules, whether they are immediately necessary or not.
|
||||
For large applications with lots of routes, consider lazy loading —a design pattern that loads NgModules as needed.
|
||||
For large applications with lots of routes, consider lazy loading —a design pattern that loads NgModules as needed.
|
||||
Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.
|
||||
|
||||
<!-- For the final sample application with two lazy-loaded modules that this page describes: -->
|
||||
@@ -363,7 +363,7 @@ In the newly created service, implement the `Resolve` interface provided by the
|
||||
|
||||
import { Resolve } from '@angular/router';
|
||||
|
||||
…
|
||||
…
|
||||
|
||||
/*An interface that represents your data model*/
|
||||
export interface Crisis {
|
||||
@@ -371,8 +371,8 @@ export interface Crisis {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export class CrisisDetailResolverService implements Resolve<Crisis> {
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
|
||||
export class CrisisDetailResolverService implements Resolve<Crisis> {
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
|
||||
// your logic goes here
|
||||
}
|
||||
}
|
||||
@@ -405,7 +405,7 @@ In the component's constructor, inject an instance of the `ActivatedRoute` class
|
||||
<docs-code header="Component's constructor (excerpt)">
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({ … })
|
||||
@Component({ … })
|
||||
class YourComponent {
|
||||
constructor(private route: ActivatedRoute) {}
|
||||
}
|
||||
@@ -417,7 +417,7 @@ Use the injected instance of the `ActivatedRoute` class to access `data` associa
|
||||
highlight="[1,5,8]">
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({ … })
|
||||
@Component({ … })
|
||||
class YourComponent {
|
||||
constructor(private route: ActivatedRoute) {}
|
||||
|
||||
@@ -425,7 +425,7 @@ class YourComponent {
|
||||
this.route.data
|
||||
.subscribe(data => {
|
||||
const crisis: Crisis = data.crisis;
|
||||
// …
|
||||
// …
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# Guidelines for creating NgModules
|
||||
|
||||
This topic provides a conceptual overview of the different categories of NgModules you can create in order to organize your code in a modular structure.
|
||||
These categories are not cast in stone —they are suggestions.
|
||||
These categories are not cast in stone —they are suggestions.
|
||||
You may want to create NgModules for other purposes, or combine the characteristics of some of these categories.
|
||||
|
||||
NgModules are a great way to organize an application and keep code related to a specific functionality or feature separate from other code.
|
||||
|
||||
@@ -14,7 +14,7 @@ For the module specification, see the [6th Edition of the ECMAScript standard](h
|
||||
To make the code in a JavaScript module available to other modules, use an `export` statement at the end of the relevant code in the module, such as the following:
|
||||
|
||||
<docs-code language="typescript">
|
||||
export class AppComponent { … }
|
||||
export class AppComponent { … }
|
||||
</docs-code>
|
||||
|
||||
When you need that module's code in another module, use an `import` statement as follows:
|
||||
|
||||
@@ -97,7 +97,7 @@ Make a pipe impure by setting its `pure` flag to `false`:
|
||||
visibleRegion="pipe-decorator" highlight="[19]"/>
|
||||
|
||||
The following code shows the complete implementation of `FlyingHeroesImpurePipe`, which extends `FlyingHeroesPipe` to inherit its characteristics.
|
||||
The example shows that you don't have to change anything else—the only difference is setting the `pure` flag as `false` in the pipe metadata.
|
||||
The example shows that you don't have to change anything else—the only difference is setting the `pure` flag as `false` in the pipe metadata.
|
||||
|
||||
<docs-code-multifile>
|
||||
<docs-code header="src/app/flying-heroes.pipe.ts (FlyingHeroesImpurePipe)" path="adev/src/content/examples/pipes/src/app/flying-heroes.pipe.ts" visibleRegion="impure"/>
|
||||
|
||||
@@ -168,12 +168,6 @@ set id(heroId: string) {
|
||||
```
|
||||
|
||||
NOTE: You can bind all route data with key, value pairs to component inputs: static or resolved route data, path parameters, matrix parameters, and query parameters.
|
||||
If you want to use the parent components route info you will need to set the router paramsInheritanceStrategy option: withRouterConfig({paramsInheritanceStrategy: 'always'})
|
||||
|
||||
</docs-step>
|
||||
|
||||
Note: You can bind all route data with key, value pairs to component inputs: static or resolved route data, path parameters, matrix parameters, and query parameters.
|
||||
|
||||
If you want to use the parent components route info you will need to set the router `paramsInheritanceStrategy` option:
|
||||
`withRouterConfig({paramsInheritanceStrategy: 'always'})`
|
||||
|
||||
@@ -380,7 +374,7 @@ The router uses an `id` to show the correct hero's details.
|
||||
First, import the following members in the component you want to navigate from.
|
||||
|
||||
```ts
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
```
|
||||
|
||||
@@ -59,7 +59,7 @@ The data property is accessible within each activated route.
|
||||
Use it to store items such as page titles, breadcrumb text, and other read-only, static data.
|
||||
Use the resolve guard to retrieve dynamic data.
|
||||
|
||||
The empty path in the fourth route represents the default path for the application —the place to go when the path in the URL is empty, as it typically is at the start.
|
||||
The empty path in the fourth route represents the default path for the application —the place to go when the path in the URL is empty, as it typically is at the start.
|
||||
This default route redirects to the route for the `/heroes` URL and, therefore, displays the `HeroesListComponent`.
|
||||
|
||||
If you need to see what events are happening during the navigation lifecycle, there is the `withDebugTracing` feature.
|
||||
@@ -74,8 +74,8 @@ It acts as a placeholder that marks the spot in the template where the router sh
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
<!-- Routed components go here -->
|
||||
<router-outlet></router-outlet>
|
||||
<!-- Routed components go here -->
|
||||
|
||||
</docs-code>
|
||||
|
||||
@@ -170,7 +170,7 @@ These events are shown in the following table.
|
||||
| [`ChildActivationEnd`](api/router/ChildActivationEnd) | Triggered when the Router finishes activating a route's children. |
|
||||
| [`ActivationEnd`](api/router/ActivationEnd) | Triggered when the Router finishes activating a route. |
|
||||
| [`NavigationEnd`](api/router/NavigationEnd) | Triggered when navigation ends successfully. |
|
||||
| [`NavigationCancel`](api/router/NavigationCancel) | Triggered when navigation is canceled. This can happen when a Route Guard returns false during navigation, or redirects by returning a `UrlTree` or `RedirectCommand`. |
|
||||
| [`NavigationCancel`](api/router/NavigationCancel) | Triggered when navigation is canceled. This can happen when a Route Guard returns false during navigation, or redirects by returning a `UrlTree`. |
|
||||
| [`NavigationError`](api/router/NavigationError) | Triggered when navigation fails due to an unexpected error. |
|
||||
| [`Scroll`](api/router/Scroll) | Represents a scrolling event. |
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ This is one of the most common attacks on the web.
|
||||
|
||||
To block XSS attacks, you must prevent malicious code from entering the Document Object Model (DOM).
|
||||
For example, if attackers can trick you into inserting a `<script>` tag in the DOM, they can run arbitrary code on your website.
|
||||
The attack isn't limited to `<script>` tags —many elements and properties in the DOM allow code execution, for example, `<img alt="" onerror="...">` and `<a href="javascript:...">`.
|
||||
The attack isn't limited to `<script>` tags —many elements and properties in the DOM allow code execution, for example, `<img alt="" onerror="...">` and `<a href="javascript:...">`.
|
||||
If attacker-controlled data enters the DOM, expect security vulnerabilities.
|
||||
|
||||
### Angular's cross-site scripting security model
|
||||
@@ -63,7 +63,7 @@ Angular defines the following security contexts:
|
||||
| URL | Used for URL properties, such as `<a href>`. |
|
||||
| Resource URL | A URL that is loaded and executed as code, for example, in `<script src>`. |
|
||||
|
||||
Angular sanitizes untrusted values for HTML, styles, and URLs. Sanitizing resource URLs isn't possible because they contain arbitrary code.
|
||||
Angular sanitizes untrusted values for HTML and URLs. Sanitizing resource URLs isn't possible because they contain arbitrary code.
|
||||
In development mode, Angular prints a console warning when it has to change a value during sanitization.
|
||||
|
||||
### Sanitization example
|
||||
@@ -72,7 +72,7 @@ The following template binds the value of `htmlSnippet`. Once by interpolating i
|
||||
|
||||
<docs-code header="src/app/inner-html-binding.component.html" path="adev/src/content/examples/security/src/app/inner-html-binding.component.html"/>
|
||||
|
||||
Interpolated content is always escaped —the HTML isn't interpreted and the browser displays angle brackets in the element's text content.
|
||||
Interpolated content is always escaped —the HTML isn't interpreted and the browser displays angle brackets in the element's text content.
|
||||
|
||||
For the HTML to be interpreted, bind it to an HTML property such as `innerHTML`.
|
||||
Be aware that binding a value that an attacker might control into `innerHTML` normally causes an XSS vulnerability.
|
||||
@@ -93,7 +93,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
|
||||
|
||||
@@ -155,7 +155,7 @@ You can set the nonce for Angular in one of two ways:
|
||||
|
||||
<docs-code language="typescript">
|
||||
|
||||
import {bootstrapApplication, CSP_NONCE} from '@angular/core';
|
||||
import {bootstrapApplication, CSP_NONCE} from '@angular/core';
|
||||
import {AppComponent} from './app/app.component';
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
@@ -301,8 +301,56 @@ Only code from the website on which cookies are set can read the cookies from th
|
||||
That means only your application can read this cookie token and set the custom header.
|
||||
The malicious code on `evil.com` can't.
|
||||
|
||||
Angular's `HttpClient` has built-in support for the client-side half of this technique.
|
||||
Read about it more in the [HttpClient guide](/guide/http/security#xsrf-csrf-protection).
|
||||
### `HttpClient` XSRF/CSRF security
|
||||
|
||||
`HttpClient` supports a [common mechanism](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-header_token) used to prevent XSRF attacks. When performing HTTP requests, an interceptor reads a token from a cookie, by default `XSRF-TOKEN`, and sets it as an HTTP header, `X-XSRF-TOKEN`. Because only code that runs on your domain could read the cookie, the backend can be certain that the HTTP request came from your client application and not an attacker.
|
||||
|
||||
By default, an interceptor sends this header on all mutating requests (such as `POST`) to relative URLs, but not on GET/HEAD requests or on requests with an absolute URL.
|
||||
|
||||
<docs-callout helpful title="Why not protect GET requests?">
|
||||
CSRF protection is only needed for requests that can change state on the backend. By their nature, CSRF attacks cross domain boundaries, and the web's [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) will prevent an attacking page from retrieving the results of authenticated GET requests.
|
||||
</docs-callout>
|
||||
|
||||
To take advantage of this, your server needs to set a token in a JavaScript readable session cookie called `XSRF-TOKEN` on either the page load or the first GET request. On subsequent requests the server can verify that the cookie matches the `X-XSRF-TOKEN` HTTP header, and therefore be sure that only code running on your domain could have sent the request. The token must be unique for each user and must be verifiable by the server; this prevents the client from making up its own tokens. Set the token to a digest of your site's authentication cookie with a salt for added security.
|
||||
|
||||
To prevent collisions in environments where multiple Angular apps share the same domain or subdomain, give each application a unique cookie name.
|
||||
|
||||
<docs-callout important title="HttpClient supports only the client half of the XSRF protection scheme">
|
||||
Your backend service must be configured to set the cookie for your page, and to verify that the header is present on all eligible requests. Failing to do so renders Angular's default protection ineffective.
|
||||
</docs-callout>
|
||||
|
||||
### Configure custom cookie/header names
|
||||
|
||||
If your backend service uses different names for the XSRF token cookie or header, use `withXsrfConfiguration` to override the defaults.
|
||||
|
||||
Add it to the `provideHttpClient` call as follows:
|
||||
|
||||
<docs-code language="ts">
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideHttpClient(
|
||||
withXsrfConfiguration({
|
||||
cookieName: 'CUSTOM_XSRF_TOKEN',
|
||||
headerName: 'X-Custom-Xsrf-Header',
|
||||
}),
|
||||
),
|
||||
]
|
||||
};
|
||||
</docs-code>
|
||||
|
||||
### Disabling XSRF protection
|
||||
|
||||
If the built-in XSRF protection mechanism doesn't work for your application, you can disable it using the `withNoXsrfProtection` feature:
|
||||
|
||||
<docs-code language="ts">
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideHttpClient(
|
||||
withNoXsrfProtection(),
|
||||
),
|
||||
]
|
||||
};
|
||||
</docs-code>
|
||||
|
||||
For information about CSRF at the Open Web Application Security Project \(OWASP\), see [Cross-Site Request Forgery (CSRF)](https://owasp.org/www-community/attacks/csrf) and [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html).
|
||||
The Stanford University paper [Robust Defenses for Cross-Site Request Forgery](https://seclab.stanford.edu/websec/csrf/csrf.pdf) is a rich source of detail.
|
||||
|
||||
@@ -98,3 +98,29 @@ mySignal.set(3);
|
||||
```
|
||||
|
||||
Here, only the last value (3) will be logged.
|
||||
|
||||
### `outputFromObservable`
|
||||
|
||||
`outputFromObservable(...)` declares an Angular output that emits values based on an RxJS observable.
|
||||
|
||||
```ts
|
||||
class MyDir {
|
||||
nameChange$ = new Observable<string>(/* ... */);
|
||||
nameChange = outputFromObservable(this.nameChange$); // OutputRef<string>
|
||||
}
|
||||
```
|
||||
|
||||
See more details in the [output() API guide](/guide/output-function).
|
||||
|
||||
### `outputToObservable`
|
||||
|
||||
`outputToObservable(...)` converts an Angular output to an observable.
|
||||
This allows you use integrate Angular outputs conveniently into RxJS streams.
|
||||
|
||||
```ts
|
||||
outputToObservable(myComp.instance.onNameChange)
|
||||
.pipe(...)
|
||||
.subscribe(...)
|
||||
```
|
||||
|
||||
See more details in the [output() API guide](/guide/output-function).
|
||||
|
||||
@@ -10,7 +10,7 @@ Then, you set the attribute value with an expression that resolves to a string.
|
||||
|
||||
<docs-code language="html">
|
||||
|
||||
<p [attr.attribute-you-are-targeting]="expression"></p>
|
||||
<p [attr.attribute-you-are-targeting]="expression"></p>
|
||||
|
||||
</docs-code>
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user