skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: skills:v21.2.10
Branches Tags
skills:main skills:22.1.x skills:g3 skills:20.3.x skills:21.2.x skills:22.0.x skills:19.2.x skills:21.1.x skills:21.0.x skills:17.3.x skills:18.2.x skills:20.2.x skills:prototype/signal-forms skills:20.1.x skills:20.0.x skills:19.1.x skills:19.0.x skills:18.1.x skills:18.0.x skills:twerske-v18-changelog skills:redirects-aio skills:update-dropdown-for-v18 skills:remove-embedded-editor-from-first-app skills:add-missing-border-on-editor skills:dylhunn-patch-1 skills:dylhunn-zonejs-instructions skills:55725-fix-visible-snippets skills:browser-update-test skills:docs-developer-preview-fix skills:fix-extra-padding-on-tutorial-editor skills:fix-playground-spacing-issue skills:robots-aio skills:twerske-patch-2 skills:twerske-patch-1 skills:add-adev-docs skills:16.2.x skills:55510/fix-security-guide-links skills:sonukapoor-patch-1 skills:53015-add-h1-for-skip-to-main-content skills:docs/update-security-guide-reference skills:52695-improve-clarity-of-tutorial-intro skills:remove-aio-stuff skills:17.2.x skills:fix-missing-security-guide skills:in-depth-guides-refactor skills:jperrott-test skills:17.1.x skills:add-ben-to-reviewers skills:add-docs-script-command skills:17.0.x skills:signals skills:publish-snapshots skills:15.2.x skills:saucelabs-bazel skills:16.1.x skills:styling-experiments skills:16.0.x skills:13.4.x skills:14.3.x skills:12.3.x skills:15.1.x skills:15.0.x skills:12.2.x skills:13.3.x skills:14.2.x skills:14.1.x skills:14.0.x skills:image-directive-13.3.x skills:11.2.x skills:13.2.x skills:13.1.x skills:13.0.x skills:12.1.x skills:12.0.x skills:9.1.x skills:10.2.x skills:11.1.x skills:11.0.x skills:watch-burn-rates skills:8.2.x skills:10.1.x skills:windows-executor-no-cache skills:10.0.x skills:9.0.x skills:7.2.x skills:8.1.x skills:8.0.x skills:6.1.x skills:5.2.x skills:backup-7.2.x skills:7.1.x skills:7.0.x skills:bazel skills:6.0.x skills:4.4.x skills:5.2x skills:5.1.x skills:5.0.x skills:4.3.x skills:4.2.x skills:4.1.x skills:4.0.x skills:2.4.x skills:2.3.x skills:2.2.x skills:2.1.x skills:2.0.x
skills:vsix-22.1.1 skills:v22.2.0-next.7 skills:v22.2.0-next.6 skills:v22.1.6 skills:v20.3.31 skills:v21.2.23 skills:v22.2.0-next.5 skills:v22.1.5 skills:zone.js-0.16.3 skills:v22.2.0-next.4 skills:v22.1.4 skills:v21.2.22 skills:v20.3.30 skills:v22.2.0-next.3 skills:v22.1.3 skills:v20.3.29 skills:v21.2.21 skills:v22.1.2 skills:v22.2.0-next.2 skills:v20.3.28 skills:v21.2.20 skills:vsix-22.1.0 skills:v22.2.0-next.1 skills:v22.1.1 skills:v22.2.0-next.0 skills:v21.2.19 skills:v22.1.0 skills:v20.3.27 skills:v22.1.0-rc.0 skills:v22.0.8 skills:v22.1.0-next.6 skills:v22.0.7 skills:v20.3.26 skills:v21.2.18 skills:v22.1.0-next.5 skills:v22.0.6 skills:v22.1.0-next.4 skills:v22.0.5 skills:v22.1.0-next.3 skills:v22.0.4 skills:v22.1.0-next.2 skills:v22.0.3 skills:v22.1.0-next.1 skills:v22.0.2 skills:vsix-22.0.1 skills:v22.1.0-next.0 skills:v22.0.1 skills:v21.2.17 skills:v20.3.25 skills:vsix-22.0.0 skills:v22.0.0 skills:v21.2.16 skills:v19.2.25 skills:v20.3.24 skills:v22.0.0-rc.3 skills:v22.0.0-rc.2 skills:v21.2.15 skills:v19.2.24 skills:v20.3.23 skills:v20.3.22 skills:v19.2.23 skills:vsix-included-21.2.4 skills:vsix-21.2.4 skills:v22.0.0-rc.1 skills:v21.2.14 skills:v22.0.0-rc.0 skills:v21.2.13 skills:v19.2.22 skills:v20.3.21 skills:v22.0.0-next.12 skills:zone.js-0.16.2 skills:v22.0.0-next.11 skills:v21.2.12 skills:v20.3.20 skills:v22.0.0-next.10 skills:v21.2.11 skills:v22.0.0-next.9 skills:v21.2.10 skills:v19.2.21 skills:v20.3.19 skills:v22.0.0-next.8 skills:v21.2.9 skills:v22.0.0-next.7 skills:v21.2.8 skills:v22.0.0-next.6 skills:v21.2.7 skills:v22.0.0-next.5 skills:v21.2.6 skills:v22.0.0-next.4 skills:v21.2.5 skills:v19.2.20 skills:v20.3.18 skills:v22.0.0-next.3 skills:v21.2.4 skills:vsix-21.2.3 skills:v22.0.0-next.2 skills:v21.2.3 skills:v21.2.2 skills:v22.0.0-next.1 skills:vsix-21.2.2 skills:v22.0.0-next.0 skills:v21.2.1 skills:vsix-21.2.1 skills:v19.2.19 skills:v20.3.17 skills:v21.2.0 skills:v21.1.6 skills:zone.js-0.16.1 skills:vsix-21.2.0 skills:v21.2.0-rc.0 skills:v21.1.5 skills:v21.2.0-next.3 skills:v21.1.4 skills:v21.2.0-next.2 skills:v21.1.3 skills:v21.2.0-next.1 skills:v21.1.2 skills:vsix-21.1.1 skills:v21.2.0-next.0 skills:v21.1.1 skills:v21.1.0 skills:v21.0.9 skills:vsix-21.1.0 skills:v21.1.0-rc.0 skills:v21.0.8 skills:v20.3.16 skills:v19.2.18 skills:v21.0.7 skills:vsix-21.0.1 skills:v21.1.0-next.4 skills:v21.0.6 skills:v21.1.0-next.3 skills:v21.0.5 skills:v21.1.0-next.2 skills:v21.0.4 skills:21.1.0-next.1 skills:21.0.3 skills:21.0.2 skills:20.3.15 skills:19.2.17 skills:19.2.16 skills:21.1.0-next.0 skills:20.3.14 skills:21.0.1 skills:zone.js-0.16.0 skills:21.0.0 skills:20.3.13 skills:vsix-21.0.0 skills:21.0.0-rc.3 skills:20.3.12 skills:21.0.0-rc.2 skills:20.3.11 skills:21.0.0-rc.1 skills:20.3.10 skills:vsix-20.3.3 skills:21.0.0-rc.0 skills:21.0.0-next.10 skills:20.3.9 skills:20.3.8 skills:21.0.0-next.9 skills:20.3.7 skills:20.3.6 skills:21.0.0-next.8 skills:20.3.5 skills:21.0.0-next.7 skills:20.3.4 skills:21.0.0-next.6 skills:20.3.3 skills:21.0.0-next.5 skills:20.3.2 skills:21.0.0-next.4 skills:20.3.1 skills:18.2.14 skills:19.2.15 skills:21.0.0-next.3 skills:20.3.0 skills:20.3.0-rc.0 skills:21.0.0-next.2 skills:20.2.4 skills:20.2.3 skills:21.0.0-next.1 skills:20.2.2 skills:20.2.1 skills:21.0.0-next.0 skills:20.2.0 skills:20.1.8 skills:20.2.0-rc.1 skills:20.1.7 skills:20.2.0-rc.0 skills:20.2.0-next.6 skills:20.2.0-next.5 skills:20.1.6 skills:20.2.0-next.4 skills:20.1.5 skills:20.2.0-next.3 skills:20.1.4 skills:20.2.0-next.2 skills:20.1.3 skills:20.1.2 skills:20.2.0-next.1 skills:20.1.1 skills:20.2.0-next.0 skills:20.1.0 skills:20.0.7 skills:20.1.0-rc.0 skills:20.0.6 skills:20.1.0-next.3 skills:20.0.5 skills:20.1.0-next.2 skills:20.0.4 skills:20.1.0-next.1 skills:20.0.3 skills:20.0.2 skills:20.1.0-next.0 skills:20.0.1 skills:20.0.0 skills:19.2.14 skills:20.0.0-rc.3 skills:19.2.13 skills:zone.js-0.15.1 skills:20.0.0-rc.2 skills:19.2.12 skills:20.0.0-rc.1 skills:19.2.11 skills:20.0.0-rc.0 skills:19.2.10 skills:20.0.0-next.9 skills:19.2.9 skills:20.0.0-next.8 skills:19.2.8 skills:20.0.0-next.7 skills:19.2.7 skills:20.0.0-next.6 skills:19.2.6 skills:20.0.0-next.5 skills:19.2.5 skills:20.0.0-next.4 skills:19.2.4 skills:20.0.0-next.3 skills:19.2.3 skills:20.0.0-next.2 skills:19.2.2 skills:20.0.0-next.1 skills:19.2.1 skills:20.0.0-next.0 skills:19.2.0 skills:19.1.8 skills:19.2.0-rc.0 skills:19.1.7 skills:19.2.0-next.3 skills:19.1.6 skills:19.2.0-next.2 skills:19.1.5 skills:19.2.0-next.1 skills:19.1.4 skills:19.2.0-next.0 skills:19.1.3 skills:19.1.2 skills:19.1.1 skills:19.1.0 skills:19.0.7 skills:19.1.0-rc.0 skills:19.0.6 skills:19.1.0-next.4 skills:19.0.5 skills:19.1.0-next.3 skills:19.0.4 skills:19.1.0-next.2 skills:19.0.3 skills:19.1.0-next.1 skills:19.0.2 skills:18.2.13 skills:19.1.0-next.0 skills:19.0.1 skills:19.0.0 skills:19.0.0-rc.3 skills:19.0.0-rc.2 skills:18.2.12 skills:19.0.0-rc.1 skills:18.2.11 skills:19.0.0-rc.0 skills:18.2.10 skills:19.0.0-next.11 skills:18.2.9 skills:19.0.0-next.10 skills:19.0.0-next.9 skills:18.2.8 skills:19.0.0-next.8 skills:18.2.7 skills:19.0.0-next.7 skills:18.2.6 skills:19.0.0-next.6 skills:18.2.5 skills:19.0.0-next.5 skills:18.2.4 skills:19.0.0-next.4 skills:19.0.0-next.3 skills:18.2.3 skills:19.0.0-next.2 skills:18.2.2 skills:18.2.1 skills:19.0.0-next.1 skills:zone.js-0.15.0 skills:19.0.0-next.0 skills:18.2.0 skills:18.1.5 skills:18.2.0-rc.0 skills:18.1.4 skills:18.2.0-next.4 skills:zone.js-0.14.10 skills:18.2.0-next.3 skills:18.1.3 skills:18.2.0-next.2 skills:18.1.2 skills:zone.js-0.14.8 skills:18.2.0-next.1 skills:18.1.1 skills:17.3.12 skills:18.2.0-next.0 skills:18.1.0 skills:18.0.7 skills:18.0.6 skills:18.1.0-rc.0 skills:18.0.5 skills:18.1.0-next.4 skills:18.1.0-next.3 skills:18.0.4 skills:18.1.0-next.2 skills:18.0.3 skills:zone.js-0.14.7 skills:18.1.0-next.1 skills:18.0.2 skills:17.3.11 skills:18.1.0-next.0 skills:18.0.1 skills:17.3.10 skills:18.0.0 skills:18.0.0-rc.3 skills:zone.js-0.14.6 skills:18.0.0-rc.2 skills:17.3.9 skills:18.0.0-rc.1 skills:17.3.8 skills:18.0.0-rc.0 skills:17.3.7 skills:zone.js-0.14.5 skills:18.0.0-next.6 skills:17.3.6 skills:18.0.0-next.5 skills:17.3.5 skills:18.0.0-next.4 skills:17.3.4 skills:18.0.0-next.3 skills:17.3.3 skills:18.0.0-next.2 skills:17.3.2 skills:18.0.0-next.1 skills:17.3.1 skills:18.0.0-next.0 skills:17.3.0 skills:17.3.0-rc.0 skills:17.2.4 skills:17.2.3 skills:17.3.0-next.1 skills:17.3.0-next.0 skills:17.2.2 skills:17.2.1 skills:17.2.0 skills:zone.js-0.14.4 skills:17.2.0-rc.1 skills:17.2.0-rc.0 skills:17.1.3 skills:17.2.0-next.1 skills:17.1.2 skills:17.2.0-next.0 skills:17.1.1 skills:17.1.0 skills:17.1.0-rc.0 skills:17.0.9 skills:zone.js-0.14.3 skills:17.1.0-next.5 skills:17.0.8 skills:17.1.0-next.4 skills:17.0.7 skills:17.1.0-next.3 skills:17.0.6 skills:17.1.0-next.2 skills:17.0.5 skills:17.1.0-next.1 skills:17.0.4 skills:17.1.0-next.0 skills:17.0.3 skills:17.0.2 skills:17.0.1 skills:17.0.0 skills:17.0.0-rc.3 skills:zone.js-0.14.2 skills:17.0.0-rc.2 skills:16.2.12 skills:zone.js-0.14.1 skills:17.0.0-rc.1 skills:16.2.11 skills:17.0.0-rc.0 skills:16.2.10 skills:17.0.0-next.8 skills:16.2.9 skills:17.0.0-next.7 skills:16.2.8 skills:15.2.10 skills:17.0.0-next.6 skills:16.2.7 skills:17.0.0-next.5 skills:16.2.6 skills:zone.js-0.14.0 skills:17.0.0-next.4 skills:16.2.5 skills:zone.js-0.13.3 skills:zone.js-0.13.2 skills:17.0.0-next.3 skills:16.2.4 skills:17.0.0-next.2 skills:16.2.3 skills:17.0.0-next.1 skills:16.2.2 skills:17.0.0-next.0 skills:16.2.1 skills:16.2.0 skills:16.1.9 skills:16.2.0-rc.0 skills:16.1.8 skills:16.2.0-next.4 skills:16.1.7 skills:16.2.0-next.3 skills:16.1.6 skills:16.2.0-next.2 skills:16.1.5 skills:16.1.4 skills:16.2.0-next.1 skills:16.1.3 skills:16.2.0-next.0 skills:16.1.2 skills:16.1.1 skills:16.1.0 skills:16.0.6 skills:zone.js-0.13.1 skills:16.0.5 skills:16.1.0-rc.0 skills:16.1.0-next.3 skills:16.0.4 skills:16.1.0-next.2 skills:16.0.3 skills:16.1.0-next.1 skills:16.0.2 skills:16.1.0-next.0 skills:16.0.1 skills:16.0.0 skills:15.2.9 skills:16.0.0-rc.4 skills:16.0.0-rc.3 skills:16.0.0-rc.2 skills:15.2.8 skills:16.0.0-rc.1 skills:16.0.0-rc.0 skills:15.2.7 skills:13.4.0 skills:16.0.0-next.7 skills:15.2.6 skills:16.0.0-next.6 skills:16.0.0-next.5 skills:15.2.5 skills:16.0.0-next.4 skills:15.2.4 skills:16.0.0-next.3 skills:15.2.3 skills:14.3.0 skills:16.0.0-next.2 skills:15.2.2 skills:zone.js-0.13.0 skills:16.0.0-next.1 skills:15.2.1 skills:16.0.0-next.0 skills:15.2.0 skills:15.2.0-rc.0 skills:15.1.5 skills:15.2.0-next.4 skills:15.1.4 skills:15.1.3 skills:15.2.0-next.3 skills:15.2.0-next.2 skills:15.1.2 skills:15.2.0-next.1 skills:15.1.1 skills:15.2.0-next.0 skills:15.1.0 skills:15.1.0-rc.0 skills:15.1.0-next.3 skills:15.0.4 skills:15.1.0-next.2 skills:15.0.3 skills:15.1.0-next.1 skills:15.0.2 skills:15.0.1 skills:15.1.0-next.0 skills:12.2.17 skills:13.3.12 skills:14.2.12 skills:15.0.0 skills:14.2.11 skills:15.0.0-rc.4 skills:15.0.0-rc.3 skills:14.2.10 skills:15.0.0-rc.2 skills:14.2.9 skills:zone.js-0.12.0 skills:15.0.0-rc.1 skills:14.2.8 skills:15.0.0-rc.0 skills:14.2.7 skills:15.0.0-next.6 skills:14.2.6 skills:15.0.0-next.5 skills:14.2.5 skills:15.0.0-next.4 skills:14.2.4 skills:15.0.0-next.3 skills:14.2.3 skills:15.0.0-next.2 skills:14.2.2 skills:15.0.0-next.1 skills:14.2.1 skills:15.0.0-next.0 skills:14.2.0 skills:14.2.0-rc.0 skills:14.1.3 skills:14.1.2 skills:14.2.0-next.1 skills:zone.js-0.11.8 skills:14.2.0-next.0 skills:14.1.1 skills:zone.js-0.11.7 skills:14.1.0 skills:14.0.7 skills:14.1.0-rc.0 skills:14.0.6 skills:14.1.0-next.4 skills:14.0.5 skills:14.1.0-next.3 skills:14.0.4 skills:14.1.0-next.2 skills:14.0.3 skills:14.1.0-next.1 skills:14.0.2 skills:zone.js-0.11.6 skills:14.1.0-next.0 skills:14.0.1 skills:14.0.0 skills:14.0.0-rc.3 skills:13.3.11 skills:14.0.0-rc.2 skills:13.3.10 skills:14.0.0-rc.1 skills:13.3.9 skills:13.3.8 skills:14.0.0-rc.0 skills:13.3.7 skills:14.0.0-next.16 skills:13.3.6 skills:14.0.0-next.15 skills:13.3.5 skills:14.0.0-next.14 skills:13.3.4 skills:14.0.0-next.13 skills:13.3.3 skills:14.0.0-next.12 skills:14.0.0-next.11 skills:13.3.2 skills:13.3.1 skills:14.0.0-next.10 skills:14.0.0-next.9 skills:14.0.0-next.8 skills:14.0.0-next.7 skills:13.3.0 skills:13.2.7 skills:13.3.0-rc.0 skills:14.0.0-next.6 skills:13.3.0-next.0 skills:13.2.6 skills:zone.js-0.11.5 skills:14.0.0-next.5 skills:13.2.5 skills:14.0.0-next.4 skills:13.2.4 skills:14.0.0-next.3 skills:13.2.3 skills:13.2.2 skills:14.0.0-next.2 skills:14.0.0-next.1 skills:13.2.1 skills:12.2.16 skills:14.0.0-next.0 skills:13.2.0 skills:13.2.0-rc.1 skills:13.2.0-rc.0 skills:13.1.3 skills:13.2.0-next.2 skills:13.1.2 skills:13.2.0-next.1 skills:13.1.1 skills:12.2.15 skills:13.2.0-next.0 skills:13.1.0 skills:12.2.14 skills:13.1.0-next.3 skills:13.0.3 skills:13.1.0-next.2 skills:13.0.2 skills:13.1.0-next.1 skills:13.0.1 skills:13.1.0-next.0 skills:12.2.13 skills:13.0.0 skills:13.0.0-rc.3 skills:13.0.0-rc.2 skills:12.2.12 skills:13.0.0-rc.1 skills:12.2.11 skills:13.0.0-rc.0 skills:12.2.10 skills:13.0.0-next.15 skills:13.0.0-next.14 skills:12.2.9 skills:13.0.0-next.13 skills:13.0.0-next.12 skills:13.0.0-next.11 skills:13.0.0-next.10 skills:13.0.0-next.9 skills:12.2.8 skills:13.0.0-next.8 skills:13.0.0-next.7 skills:12.2.7 skills:13.0.0-next.6 skills:12.2.6 skills:13.0.0-next.5 skills:12.2.5 skills:13.0.0-next.4 skills:12.2.4 skills:13.0.0-next.3 skills:12.2.3 skills:13.0.0-next.2 skills:12.2.2 skills:13.0.0-next.1 skills:12.2.1 skills:13.0.0-next.0 skills:12.2.0 skills:12.1.5 skills:12.2.0-rc.0 skills:12.1.4 skills:12.2.0-next.3 skills:12.1.3 skills:12.2.0-next.2 skills:12.1.2 skills:12.2.0-next.1 skills:12.1.1 skills:12.2.0-next.0 skills:12.1.0 skills:12.1.0-next.6 skills:12.0.5 skills:12.1.0-next.5 skills:12.0.4 skills:12.1.0-next.4 skills:12.0.3 skills:12.1.0-next.3 skills:12.0.2 skills:12.1.0-next.2 skills:12.0.1 skills:12.0.0 skills:11.2.14 skills:12.0.0-rc.3 skills:12.0.0-rc.2 skills:11.2.13 skills:12.0.0-rc.1 skills:11.2.12 skills:12.0.0-rc.0 skills:v10.2.5 skills:11.2.11 skills:10.2.5 skills:12.0.0-next.9 skills:11.2.10 skills:12.0.0-next.8 skills:11.2.9 skills:12.0.0-next.7 skills:11.2.8 skills:12.0.0-next.6 skills:11.2.7 skills:12.0.0-next.5 skills:11.2.6 skills:12.0.0-next.4 skills:11.2.5 skills:12.0.0-next.3 skills:11.2.4 skills:12.0.0-next.2 skills:11.2.3 skills:11.2.2 skills:12.0.0-next.1 skills:11.2.1 skills:zone.js-0.11.4 skills:12.0.0-next.0 skills:11.2.0 skills:11.2.0-rc.0 skills:11.2.0-next.1 skills:11.1.2 skills:11.2.0-next.0 skills:11.1.1 skills:11.1.0 skills:11.1.0-rc.0 skills:11.1.0-next.5 skills:11.0.9 skills:11.0.8 skills:11.0.7 skills:11.1.0-next.4 skills:11.0.6 skills:9.1.13 skills:10.2.4 skills:11.1.0-next.3 skills:11.0.5 skills:11.1.0-next.2 skills:11.0.4 skills:11.1.0-next.1 skills:11.0.3 skills:11.0.2 skills:11.1.0-next.0 skills:11.0.1 skills:11.0.0 skills:11.0.0-rc.3 skills:10.2.3 skills:11.0.0-rc.2 skills:10.2.2 skills:zone.js-0.11.3 skills:11.0.0-rc.1 skills:10.2.1 skills:11.0.0-rc.0 skills:10.2.0 skills:zone.js-0.11.2 skills:11.0.0-next.6 skills:10.1.6 skills:11.0.0-next.5 skills:10.1.5 skills:11.0.0-next.4 skills:10.1.4 skills:11.0.0-next.3 skills:10.1.3 skills:11.0.0-next.2 skills:10.1.2 skills:11.0.0-next.1 skills:10.1.1 skills:11.0.0-next.0 skills:10.1.0 skills:10.1.0-rc.0 skills:10.0.14 skills:10.0.13 skills:10.1.0-next.8 skills:10.0.12 skills:10.1.0-next.7 skills:10.0.11 skills:zone.js-0.11.0 skills:10.1.0-next.6 skills:10.0.10 skills:10.1.0-next.5 skills:10.0.9 skills:10.1.0-next.4 skills:10.0.8 skills:10.0.7 skills:10.1.0-next.3 skills:10.0.6 skills:10.1.0-next.2 skills:10.0.5 skills:10.0.4 skills:10.1.0-next.1 skills:10.1.0-next.0 skills:10.0.3 skills:9.1.12 skills:10.0.2 skills:10.0.1 skills:10.0.0 skills:10.0.0-rc.6 skills:10.0.0-rc.5 skills:10.0.0-rc.4 skills:9.1.11 skills:9.1.10 skills:10.0.0-rc.3 skills:10.0.0-rc.2 skills:10.0.0-rc.0 skills:9.1.9 skills:9.1.8 skills:10.0.0-next.9 skills:10.0.0-next.8 skills:10.0.0-next.7 skills:9.1.7 skills:9.1.6 skills:10.0.0-next.6 skills:9.1.5 skills:10.0.0-next.5 skills:10.0.0-next.4 skills:9.1.4 skills:10.0.0-next.3 skills:9.1.3 skills:10.0.0-next.2 skills:9.1.2 skills:10.0.0-next.1 skills:10.0.0-next.0 skills:9.1.1 skills:9.1.0 skills:9.1.0-rc.2 skills:9.1.0-rc.1 skills:9.1.0-rc.0 skills:9.1.0-next.5 skills:9.0.7 skills:zone.js-0.10.3 skills:9.0.6 skills:9.1.0-next.4 skills:9.1.0-next.3 skills:9.0.5 skills:9.0.4 skills:9.1.0-next.2 skills:9.0.3 skills:9.1.0-next.1 skills:9.0.2 skills:9.1.0-next.0 skills:9.0.1 skills:9.0.0 skills:9.0.0-rc.14 skills:9.0.0-rc.13 skills:9.0.0-rc.12 skills:9.0.0-rc.11 skills:9.0.0-rc.10 skills:9.0.0-rc.9 skills:9.0.0-rc.8 skills:7.2.16 skills:9.0.0-rc.7 skills:9.0.0-rc.6 skills:9.0.0-rc.5 skills:9.0.0-rc.4 skills:9.0.0-rc.3 skills:9.0.0-rc.2 skills:8.2.14 skills:9.0.0-rc.1 skills:9.0.0-rc.0 skills:9.0.0-next.15 skills:8.2.13 skills:9.0.0-next.14 skills:9.0.0-next.13 skills:8.2.12 skills:9.0.0-next.12 skills:9.0.0-next.11 skills:8.2.11 skills:9.0.0-next.10 skills:8.2.10 skills:9.0.0-next.9 skills:8.2.9 skills:9.0.0-next.8 skills:8.2.8 skills:9.0.0-next.7 skills:8.2.7 skills:9.0.0-next.6 skills:8.2.6 skills:9.0.0-next.5 skills:8.2.5 skills:9.0.0-next.4 skills:8.2.4 skills:9.0.0-next.3 skills:8.2.3 skills:zone.js-0.10.2 skills:9.0.0-next.2 skills:8.2.2 skills:9.0.0-next.1 skills:8.2.1 skills:zone.js-0.10.1 skills:9.0.0-next.0 skills:8.2.0 skills:8.1.3 skills:zone.js-0.10.0 skills:8.2.0-rc.0 skills:8.2.0-next.2 skills:8.1.2 skills:8.2.0-next.1 skills:8.1.1 skills:8.2.0-next.0 skills:8.1.0 skills:8.1.0-rc.0 skills:8.0.3 skills:zone.js-0.9.2 skills:8.1.0-next.3 skills:8.0.2 skills:8.1.0-next.2 skills:8.0.1 skills:8.1.0-next.1 skills:8.1.0-beta.0 skills:8.0.0 skills:8.0.0-rc.5 skills:8.0.0-rc.4 skills:8.0.0-rc.3 skills:7.2.15 skills:8.0.0-rc.2 skills:8.0.0-rc.1 skills:8.0.0-rc.0 skills:8.0.0-beta.14 skills:7.2.14 skills:8.0.0-beta.13 skills:8.0.0-beta.12 skills:7.2.13 skills:8.0.0-beta.11 skills:7.2.12 skills:8.0.0-beta.10 skills:7.2.11 skills:7.2.10 skills:8.0.0-beta.9 skills:8.0.0-beta.8 skills:7.2.9 skills:8.0.0-beta.7 skills:7.2.8 skills:8.0.0-beta.6 skills:7.2.7 skills:8.0.0-beta.5 skills:7.2.6 skills:8.0.0-beta.4 skills:7.2.5 skills:8.0.0-beta.3 skills:7.2.4 skills:8.0.0-beta.2 skills:7.2.3 skills:8.0.0-beta.1 skills:7.2.2 skills:ngcontainer_0.9.0 skills:8.0.0-beta.0 skills:7.2.1 skills:7.2.0 skills:7.2.0-rc.0 skills:7.1.4 skills:7.2.0-beta.2 skills:7.1.3 skills:7.1.2 skills:7.2.0-beta.1 skills:7.2.0-beta.0 skills:7.1.1 skills:7.1.0 skills:7.1.0-rc.0 skills:7.0.4 skills:7.1.0-beta.2 skills:7.0.3 skills:7.1.0-beta.1 skills:7.0.2 skills:7.1.0-beta.0 skills:7.0.1 skills:7.0.0 skills:7.0.0-rc.1 skills:6.1.10 skills:7.0.0-rc.0 skills:7.0.0-beta.7 skills:6.1.9 skills:7.0.0-beta.6 skills:6.1.8 skills:7.0.0-beta.5 skills:6.1.7 skills:ngcontainer_0.5.0 skills:7.0.0-beta.4 skills:6.1.6 skills:6.1.5 skills:7.0.0-beta.3 skills:6.1.4 skills:7.0.0-beta.2 skills:6.1.3 skills:patch_sync skills:7.0.0-beta.1 skills:6.1.2 skills:ngcontainer_0.4.0 skills:6.1.1 skills:7.0.0-beta.0 skills:6.1.0 skills:6.1.0-rc.3 skills:6.0.9 skills:6.1.0-rc.0 skills:6.0.8 skills:ngcontainer_0.3.3 skills:6.1.0-beta.3 skills:6.0.7 skills:6.1.0-beta.2 skills:6.0.6 skills:6.1.0-beta.1 skills:6.0.5 skills:ngcontainer_0.3.2 skills:6.1.0-beta.0 skills:6.0.4 skills:ngcontainer_0.3.1 skills:6.0.3 skills:5.2.11 skills:6.0.2 skills:6.0.1 skills:6.0.0 skills:ngcontainer_0.3.0 skills:6.0.0-rc.6 skills:4.4.7 skills:5.2.10 skills:6.0.0-rc.5 skills:6.0.0-rc.4 skills:6.0.0-rc.3 skills:6.0.0-rc.2 skills:6.0.0-rc.1 skills:6.0.0-rc.0 skills:6.0.0-beta.8 skills:5.2.9 skills:6.0.0-beta.7 skills:5.2.8 skills:6.0.0-beta.6 skills:5.2.7 skills:6.0.0-beta.5 skills:5.2.6 skills:6.0.0-beta.4 skills:5.2.5 skills:6.0.0-beta.3 skills:5.2.4 skills:6.0.0-beta.2 skills:5.2.3 skills:6.0.0-beta.1 skills:5.2.2 skills:6.0.0-beta.0 skills:5.2.1 skills:5.2.0 skills:5.2.0-rc.0 skills:5.1.3 skills:5.2.0-beta.1 skills:5.1.2 skills:5.2.0-beta.0 skills:5.1.1 skills:5.1.0 skills:5.1.0-rc.1 skills:5.0.5 skills:5.1.0-rc.0 skills:5.0.4 skills:5.1.0-beta.2 skills:5.0.3 skills:5.1.0-beta.1 skills:5.0.2 skills:5.1.0-beta.0 skills:5.0.1 skills:5.0.0 skills:5.0.0-rc.9 skills:5.0.0-rc.8 skills:5.0.0-rc.7 skills:5.0.0-rc.6 skills:5.0.0-rc.5 skills:5.0.0-rc.4 skills:5.0.0-rc.3 skills:4.4.6 skills:5.0.0-rc.2 skills:4.4.5 skills:5.0.0-rc.1 skills:5.0.0-rc.0 skills:4.4.4 skills:4.4.3 skills:4.4.2 skills:4.4.1 skills:4.4.0 skills:5.0.0-beta.7 skills:5.0.0-beta.6 skills:4.4.0-RC.0 skills:5.0.0-beta.5 skills:4.3.6 skills:5.0.0-beta.4 skills:4.3.5 skills:4.3.4 skills:5.0.0-beta.3 skills:5.0.0-beta.2 skills:4.3.3 skills:5.0.0-beta.1 skills:4.3.2 skills:5.0.0-beta.0 skills:4.3.1 skills:4.3.0 skills:4.3.0-rc.0 skills:4.2.6 skills:4.2.5 skills:4.3.0-beta.1 skills:4.3.0-beta.0 skills:4.2.4 skills:4.2.3 skills:4.2.2 skills:4.2.1 skills:4.2.0 skills:4.2.0-rc.2 skills:4.2.0-rc.1 skills:4.2.0-rc.0 skills:4.1.3 skills:4.2.0-beta.1 skills:4.1.2 skills:4.2.0-beta.0 skills:4.1.1 skills:4.1.0 skills:4.1.0-rc.0 skills:4.0.3 skills:4.1.0-beta.1 skills:4.0.2 skills:4.1.0-beta.0 skills:4.0.1 skills:4.0.0 skills:4.0.0-rc.6 skills:4.0.0-rc.5 skills:4.0.0-rc.4 skills:2.4.10 skills:4.0.0-rc.3 skills:2.4.9 skills:4.0.0-rc.2 skills:4.0.0-rc.1 skills:4.0.0-beta.8 skills:2.4.8 skills:4.0.0-beta.7 skills:2.4.7 skills:4.0.0-beta.6 skills:2.4.6 skills:4.0.0-beta.5 skills:2.4.5 skills:4.0.0-beta.4 skills:2.4.4 skills:4.0.0-beta.3 skills:2.4.3 skills:2.4.2 skills:4.0.0-beta.2 skills:4.0.0-beta.1 skills:2.4.1 skills:2.4.0 skills:2.4.0-marker skills:2.3.1 skills:4.0.0-beta.0 skills:2.3.0 skills:2.3.0-rc.0 skills:2.2.4 skills:2.2.3 skills:2.3.0-beta.1 skills:2.2.2 skills:2.3.0-beta.0 skills:2.2.1 skills:2.2.0 skills:2.2.0-rc.0 skills:2.1.2 skills:2.2.0-beta.1 skills:2.1.1 skills:2.2.0-beta.0 skills:2.1.0 skills:2.1.0-rc.0 skills:2.0.2 skills:2.1.0-beta.0 skills:2.0.1 skills:2.0.0 skills:2.0.0-rc.7 skills:2.0.0-rc.6 skills:2.0.0-rc.5 skills:2.0.0-rc.4 skills:2.0.0-rc.3 skills:2.0.0-rc.2 skills:2.0.0-rc.1 skills:2.0.0-rc.0 skills:2.0.0-beta.17 skills:2.0.0-beta.16 skills:2.0.0-beta.15 skills:2.0.0-beta.14 skills:2.0.0-beta.13 skills:2.0.0-beta.12 skills:2.0.0-beta.11 skills:2.0.0-beta.10 skills:2.0.0-beta.9 skills:2.0.0-beta.8 skills:2.0.0-beta.7 skills:2.0.0-beta.6 skills:2.0.0-beta.5 skills:2.0.0-beta.4 skills:2.0.0-beta.3 skills:2.0.0-beta.2 skills:2.0.0-build.16d9c60.dart skills:2.0.0-build.16d9c60.js skills:2.0.0-build.0ae7775.dart skills:2.0.0-build.0ae7775.js skills:2.0.0-build.132829e.dart skills:2.0.0-build.132829e.js skills:2.0.0-build.05fb269.dart skills:2.0.0-build.05fb269.js skills:2.0.0-build.13e6354.dart skills:2.0.0-build.13e6354.js skills:2.0.0-build.0290362.dart skills:2.0.0-build.0290362.js skills:2.0.0-build.065ac93.dart skills:2.0.0-build.065ac93.js skills:2.0.0-build.046758c.dart skills:2.0.0-build.046758c.js skills:2.0.0-build.041c599.dart skills:2.0.0-build.041c599.js skills:2.0.0-beta.1 skills:2.0.0-build.0b6e75a.dart skills:2.0.0-build.0b6e75a.js skills:2.0.0-build.03823d4.dart skills:2.0.0-build.03823d4.js skills:2.0.0-build.06b2aa1.dart skills:2.0.0-build.06b2aa1.js skills:2.0.0-build.020ce32.dart skills:2.0.0-build.020ce32.js skills:2.0.0-build.0f85b36.dart skills:2.0.0-build.0f85b36.js skills:2.0.0-build.0544e07.dart skills:2.0.0-build.0544e07.js skills:2.0.0-beta.0 skills:2.0.0-alpha.55 skills:2.0.0-build.00822c3.dart skills:2.0.0-build.00822c3.js skills:2.0.0-build.059e09c.dart skills:2.0.0-build.059e09c.js skills:2.0.0-alpha.54 skills:2.0.0-build.03e3035.dart skills:2.0.0-build.03e3035.js skills:2.0.0-build.16e74cf.dart skills:2.0.0-build.16e74cf.js skills:2.0.0-build.116015b.dart skills:2.0.0-build.116015b.js skills:2.0.0-build.0f8e40b.dart skills:2.0.0-build.0f8e40b.js skills:2.0.0-build.006a96d.js skills:2.0.0-build.1607ef8.dart skills:2.0.0-build.1607ef8.js skills:2.0.0-build.05fa1fd.dart skills:2.0.0-build.05fa1fd.js skills:2.0.0-alpha.53 skills:2.0.0-build.080469f.dart skills:2.0.0-build.080469f.js skills:2.0.0-build.06e32eb.dart skills:2.0.0-build.06e32eb.js skills:2.0.0-build.039ed3b.dart skills:2.0.0-build.039ed3b.js skills:2.0.0-build.06d076a.dart skills:2.0.0-build.06d076a.js skills:2.0.0-alpha.52 skills:2.0.0-alpha.51 skills:2.0.0-build.01ba94b.dart skills:2.0.0-build.01ba94b.js skills:2.0.0-build.0ef6809.dart skills:2.0.0-build.0ef6809.js skills:2.0.0-build.0cdf280.dart skills:2.0.0-build.0cdf280.js skills:2.0.0-alpha.50 skills:2.0.0-build.071165f.dart skills:2.0.0-build.071165f.js skills:2.0.0-alpha.49 skills:2.0.0-build.15f5f27.dart skills:2.0.0-build.15f5f27.js skills:2.0.0-build.0df8bc4.dart skills:2.0.0-build.0df8bc4.js skills:2.0.0-build.0ec9ccf.dart skills:2.0.0-build.0ec9ccf.js skills:2.0.0-build.140ce9f.dart skills:2.0.0-build.140ce9f.js skills:2.0.0-build.0a44fc6.dart skills:2.0.0-build.0a44fc6.js skills:2.0.0-alpha.48 skills:2.0.0-build.0614797.dart skills:2.0.0-build.0614797.js skills:2.0.0-build.0a3a17f.dart skills:2.0.0-build.0a3a17f.js skills:2.0.0-build.0206d72.dart skills:2.0.0-build.0206d72.js skills:2.0.0-build.070d818.dart skills:2.0.0-build.070d818.js skills:2.0.0-build.1417e12.dart skills:2.0.0-build.1417e12.js skills:2.0.0-build.093b794.dart skills:2.0.0-build.093b794.js skills:2.0.0-build.015faee.dart skills:2.0.0-build.015faee.js skills:2.0.0-alpha.47 skills:2.0.0-build.016ab31.dart skills:2.0.0-build.016ab31.js skills:2.0.0-build.0c9596a.dart skills:2.0.0-build.0c9596a.js skills:2.0.0-build.019cb41.dart skills:2.0.0-build.019cb41.js skills:2.0.0-build.0815a77.dart skills:2.0.0-build.0815a77.js skills:2.0.0-build.125fa38.dart skills:2.0.0-build.125fa38.js skills:2.0.0-build.074075d.dart skills:2.0.0-build.074075d.js skills:2.0.0-build.0db0252.dart skills:2.0.0-build.0db0252.js skills:2.0.0-alpha.46 skills:2.0.0-alpha.45 skills:2.0.0-alpha.44 skills:2.0.0-alpha.42 skills:2.0.0-alpha.41 skills:2.0.0-alpha.40 skills:2.0.0-alpha.39 skills:2.0.0-alpha.38 skills:2.0.0-alpha.37 skills:2.0.0-alpha.36 skills:2.0.0-alpha.35 skills:2.0.0-alpha.34 skills:2.0.0-alpha.33 skills:2.0.0-alpha.32 skills:2.0.0-alpha.31 skills:2.0.0-alpha.30 skills:2.0.0-alpha.29 skills:2.0.0-alpha.28 skills:2.0.0-alpha.27 skills:2.0.0-alpha.26 skills:2.0.0-alpha.25 skills:2.0.0-alpha.24 skills:2.0.0-alpha.23 skills:2.0.0-alpha.22 skills:2.0.0-alpha.21 skills:2.0.0-alpha.20 skills:2.0.0-alpha.19 skills:2.0.0-alpha.18 skills:2.0.0-alpha.17 skills:2.0.0-alpha.16 skills:2.0.0-alpha.15 skills:2.0.0-alpha.14 skills:starting skills:2.0.0-alpha.13
...
compare: skills:v21.2.23
Branches Tags
skills:22.1.x skills:main skills:g3 skills:20.3.x skills:21.2.x skills:22.0.x skills:19.2.x skills:21.1.x skills:21.0.x skills:17.3.x skills:18.2.x skills:20.2.x skills:prototype/signal-forms skills:20.1.x skills:20.0.x skills:19.1.x skills:19.0.x skills:18.1.x skills:18.0.x skills:twerske-v18-changelog skills:redirects-aio skills:update-dropdown-for-v18 skills:remove-embedded-editor-from-first-app skills:add-missing-border-on-editor skills:dylhunn-patch-1 skills:dylhunn-zonejs-instructions skills:55725-fix-visible-snippets skills:browser-update-test skills:docs-developer-preview-fix skills:fix-extra-padding-on-tutorial-editor skills:fix-playground-spacing-issue skills:robots-aio skills:twerske-patch-2 skills:twerske-patch-1 skills:add-adev-docs skills:16.2.x skills:55510/fix-security-guide-links skills:sonukapoor-patch-1 skills:53015-add-h1-for-skip-to-main-content skills:docs/update-security-guide-reference skills:52695-improve-clarity-of-tutorial-intro skills:remove-aio-stuff skills:17.2.x skills:fix-missing-security-guide skills:in-depth-guides-refactor skills:jperrott-test skills:17.1.x skills:add-ben-to-reviewers skills:add-docs-script-command skills:17.0.x skills:signals skills:publish-snapshots skills:15.2.x skills:saucelabs-bazel skills:16.1.x skills:styling-experiments skills:16.0.x skills:13.4.x skills:14.3.x skills:12.3.x skills:15.1.x skills:15.0.x skills:12.2.x skills:13.3.x skills:14.2.x skills:14.1.x skills:14.0.x skills:image-directive-13.3.x skills:11.2.x skills:13.2.x skills:13.1.x skills:13.0.x skills:12.1.x skills:12.0.x skills:9.1.x skills:10.2.x skills:11.1.x skills:11.0.x skills:watch-burn-rates skills:8.2.x skills:10.1.x skills:windows-executor-no-cache skills:10.0.x skills:9.0.x skills:7.2.x skills:8.1.x skills:8.0.x skills:6.1.x skills:5.2.x skills:backup-7.2.x skills:7.1.x skills:7.0.x skills:bazel skills:6.0.x skills:4.4.x skills:5.2x skills:5.1.x skills:5.0.x skills:4.3.x skills:4.2.x skills:4.1.x skills:4.0.x skills:2.4.x skills:2.3.x skills:2.2.x skills:2.1.x skills:2.0.x
skills:vsix-22.1.1 skills:v22.2.0-next.7 skills:v22.2.0-next.6 skills:v22.1.6 skills:v20.3.31 skills:v21.2.23 skills:v22.2.0-next.5 skills:v22.1.5 skills:zone.js-0.16.3 skills:v22.2.0-next.4 skills:v22.1.4 skills:v21.2.22 skills:v20.3.30 skills:v22.2.0-next.3 skills:v22.1.3 skills:v20.3.29 skills:v21.2.21 skills:v22.1.2 skills:v22.2.0-next.2 skills:v20.3.28 skills:v21.2.20 skills:vsix-22.1.0 skills:v22.2.0-next.1 skills:v22.1.1 skills:v22.2.0-next.0 skills:v21.2.19 skills:v22.1.0 skills:v20.3.27 skills:v22.1.0-rc.0 skills:v22.0.8 skills:v22.1.0-next.6 skills:v22.0.7 skills:v20.3.26 skills:v21.2.18 skills:v22.1.0-next.5 skills:v22.0.6 skills:v22.1.0-next.4 skills:v22.0.5 skills:v22.1.0-next.3 skills:v22.0.4 skills:v22.1.0-next.2 skills:v22.0.3 skills:v22.1.0-next.1 skills:v22.0.2 skills:vsix-22.0.1 skills:v22.1.0-next.0 skills:v22.0.1 skills:v21.2.17 skills:v20.3.25 skills:vsix-22.0.0 skills:v22.0.0 skills:v21.2.16 skills:v19.2.25 skills:v20.3.24 skills:v22.0.0-rc.3 skills:v22.0.0-rc.2 skills:v21.2.15 skills:v19.2.24 skills:v20.3.23 skills:v20.3.22 skills:v19.2.23 skills:vsix-included-21.2.4 skills:vsix-21.2.4 skills:v22.0.0-rc.1 skills:v21.2.14 skills:v22.0.0-rc.0 skills:v21.2.13 skills:v19.2.22 skills:v20.3.21 skills:v22.0.0-next.12 skills:zone.js-0.16.2 skills:v22.0.0-next.11 skills:v21.2.12 skills:v20.3.20 skills:v22.0.0-next.10 skills:v21.2.11 skills:v22.0.0-next.9 skills:v21.2.10 skills:v19.2.21 skills:v20.3.19 skills:v22.0.0-next.8 skills:v21.2.9 skills:v22.0.0-next.7 skills:v21.2.8 skills:v22.0.0-next.6 skills:v21.2.7 skills:v22.0.0-next.5 skills:v21.2.6 skills:v22.0.0-next.4 skills:v21.2.5 skills:v19.2.20 skills:v20.3.18 skills:v22.0.0-next.3 skills:v21.2.4 skills:vsix-21.2.3 skills:v22.0.0-next.2 skills:v21.2.3 skills:v21.2.2 skills:v22.0.0-next.1 skills:vsix-21.2.2 skills:v22.0.0-next.0 skills:v21.2.1 skills:vsix-21.2.1 skills:v19.2.19 skills:v20.3.17 skills:v21.2.0 skills:v21.1.6 skills:zone.js-0.16.1 skills:vsix-21.2.0 skills:v21.2.0-rc.0 skills:v21.1.5 skills:v21.2.0-next.3 skills:v21.1.4 skills:v21.2.0-next.2 skills:v21.1.3 skills:v21.2.0-next.1 skills:v21.1.2 skills:vsix-21.1.1 skills:v21.2.0-next.0 skills:v21.1.1 skills:v21.1.0 skills:v21.0.9 skills:vsix-21.1.0 skills:v21.1.0-rc.0 skills:v21.0.8 skills:v20.3.16 skills:v19.2.18 skills:v21.0.7 skills:vsix-21.0.1 skills:v21.1.0-next.4 skills:v21.0.6 skills:v21.1.0-next.3 skills:v21.0.5 skills:v21.1.0-next.2 skills:v21.0.4 skills:21.1.0-next.1 skills:21.0.3 skills:21.0.2 skills:20.3.15 skills:19.2.17 skills:19.2.16 skills:21.1.0-next.0 skills:20.3.14 skills:21.0.1 skills:zone.js-0.16.0 skills:21.0.0 skills:20.3.13 skills:vsix-21.0.0 skills:21.0.0-rc.3 skills:20.3.12 skills:21.0.0-rc.2 skills:20.3.11 skills:21.0.0-rc.1 skills:20.3.10 skills:vsix-20.3.3 skills:21.0.0-rc.0 skills:21.0.0-next.10 skills:20.3.9 skills:20.3.8 skills:21.0.0-next.9 skills:20.3.7 skills:20.3.6 skills:21.0.0-next.8 skills:20.3.5 skills:21.0.0-next.7 skills:20.3.4 skills:21.0.0-next.6 skills:20.3.3 skills:21.0.0-next.5 skills:20.3.2 skills:21.0.0-next.4 skills:20.3.1 skills:18.2.14 skills:19.2.15 skills:21.0.0-next.3 skills:20.3.0 skills:20.3.0-rc.0 skills:21.0.0-next.2 skills:20.2.4 skills:20.2.3 skills:21.0.0-next.1 skills:20.2.2 skills:20.2.1 skills:21.0.0-next.0 skills:20.2.0 skills:20.1.8 skills:20.2.0-rc.1 skills:20.1.7 skills:20.2.0-rc.0 skills:20.2.0-next.6 skills:20.2.0-next.5 skills:20.1.6 skills:20.2.0-next.4 skills:20.1.5 skills:20.2.0-next.3 skills:20.1.4 skills:20.2.0-next.2 skills:20.1.3 skills:20.1.2 skills:20.2.0-next.1 skills:20.1.1 skills:20.2.0-next.0 skills:20.1.0 skills:20.0.7 skills:20.1.0-rc.0 skills:20.0.6 skills:20.1.0-next.3 skills:20.0.5 skills:20.1.0-next.2 skills:20.0.4 skills:20.1.0-next.1 skills:20.0.3 skills:20.0.2 skills:20.1.0-next.0 skills:20.0.1 skills:20.0.0 skills:19.2.14 skills:20.0.0-rc.3 skills:19.2.13 skills:zone.js-0.15.1 skills:20.0.0-rc.2 skills:19.2.12 skills:20.0.0-rc.1 skills:19.2.11 skills:20.0.0-rc.0 skills:19.2.10 skills:20.0.0-next.9 skills:19.2.9 skills:20.0.0-next.8 skills:19.2.8 skills:20.0.0-next.7 skills:19.2.7 skills:20.0.0-next.6 skills:19.2.6 skills:20.0.0-next.5 skills:19.2.5 skills:20.0.0-next.4 skills:19.2.4 skills:20.0.0-next.3 skills:19.2.3 skills:20.0.0-next.2 skills:19.2.2 skills:20.0.0-next.1 skills:19.2.1 skills:20.0.0-next.0 skills:19.2.0 skills:19.1.8 skills:19.2.0-rc.0 skills:19.1.7 skills:19.2.0-next.3 skills:19.1.6 skills:19.2.0-next.2 skills:19.1.5 skills:19.2.0-next.1 skills:19.1.4 skills:19.2.0-next.0 skills:19.1.3 skills:19.1.2 skills:19.1.1 skills:19.1.0 skills:19.0.7 skills:19.1.0-rc.0 skills:19.0.6 skills:19.1.0-next.4 skills:19.0.5 skills:19.1.0-next.3 skills:19.0.4 skills:19.1.0-next.2 skills:19.0.3 skills:19.1.0-next.1 skills:19.0.2 skills:18.2.13 skills:19.1.0-next.0 skills:19.0.1 skills:19.0.0 skills:19.0.0-rc.3 skills:19.0.0-rc.2 skills:18.2.12 skills:19.0.0-rc.1 skills:18.2.11 skills:19.0.0-rc.0 skills:18.2.10 skills:19.0.0-next.11 skills:18.2.9 skills:19.0.0-next.10 skills:19.0.0-next.9 skills:18.2.8 skills:19.0.0-next.8 skills:18.2.7 skills:19.0.0-next.7 skills:18.2.6 skills:19.0.0-next.6 skills:18.2.5 skills:19.0.0-next.5 skills:18.2.4 skills:19.0.0-next.4 skills:19.0.0-next.3 skills:18.2.3 skills:19.0.0-next.2 skills:18.2.2 skills:18.2.1 skills:19.0.0-next.1 skills:zone.js-0.15.0 skills:19.0.0-next.0 skills:18.2.0 skills:18.1.5 skills:18.2.0-rc.0 skills:18.1.4 skills:18.2.0-next.4 skills:zone.js-0.14.10 skills:18.2.0-next.3 skills:18.1.3 skills:18.2.0-next.2 skills:18.1.2 skills:zone.js-0.14.8 skills:18.2.0-next.1 skills:18.1.1 skills:17.3.12 skills:18.2.0-next.0 skills:18.1.0 skills:18.0.7 skills:18.0.6 skills:18.1.0-rc.0 skills:18.0.5 skills:18.1.0-next.4 skills:18.1.0-next.3 skills:18.0.4 skills:18.1.0-next.2 skills:18.0.3 skills:zone.js-0.14.7 skills:18.1.0-next.1 skills:18.0.2 skills:17.3.11 skills:18.1.0-next.0 skills:18.0.1 skills:17.3.10 skills:18.0.0 skills:18.0.0-rc.3 skills:zone.js-0.14.6 skills:18.0.0-rc.2 skills:17.3.9 skills:18.0.0-rc.1 skills:17.3.8 skills:18.0.0-rc.0 skills:17.3.7 skills:zone.js-0.14.5 skills:18.0.0-next.6 skills:17.3.6 skills:18.0.0-next.5 skills:17.3.5 skills:18.0.0-next.4 skills:17.3.4 skills:18.0.0-next.3 skills:17.3.3 skills:18.0.0-next.2 skills:17.3.2 skills:18.0.0-next.1 skills:17.3.1 skills:18.0.0-next.0 skills:17.3.0 skills:17.3.0-rc.0 skills:17.2.4 skills:17.2.3 skills:17.3.0-next.1 skills:17.3.0-next.0 skills:17.2.2 skills:17.2.1 skills:17.2.0 skills:zone.js-0.14.4 skills:17.2.0-rc.1 skills:17.2.0-rc.0 skills:17.1.3 skills:17.2.0-next.1 skills:17.1.2 skills:17.2.0-next.0 skills:17.1.1 skills:17.1.0 skills:17.1.0-rc.0 skills:17.0.9 skills:zone.js-0.14.3 skills:17.1.0-next.5 skills:17.0.8 skills:17.1.0-next.4 skills:17.0.7 skills:17.1.0-next.3 skills:17.0.6 skills:17.1.0-next.2 skills:17.0.5 skills:17.1.0-next.1 skills:17.0.4 skills:17.1.0-next.0 skills:17.0.3 skills:17.0.2 skills:17.0.1 skills:17.0.0 skills:17.0.0-rc.3 skills:zone.js-0.14.2 skills:17.0.0-rc.2 skills:16.2.12 skills:zone.js-0.14.1 skills:17.0.0-rc.1 skills:16.2.11 skills:17.0.0-rc.0 skills:16.2.10 skills:17.0.0-next.8 skills:16.2.9 skills:17.0.0-next.7 skills:16.2.8 skills:15.2.10 skills:17.0.0-next.6 skills:16.2.7 skills:17.0.0-next.5 skills:16.2.6 skills:zone.js-0.14.0 skills:17.0.0-next.4 skills:16.2.5 skills:zone.js-0.13.3 skills:zone.js-0.13.2 skills:17.0.0-next.3 skills:16.2.4 skills:17.0.0-next.2 skills:16.2.3 skills:17.0.0-next.1 skills:16.2.2 skills:17.0.0-next.0 skills:16.2.1 skills:16.2.0 skills:16.1.9 skills:16.2.0-rc.0 skills:16.1.8 skills:16.2.0-next.4 skills:16.1.7 skills:16.2.0-next.3 skills:16.1.6 skills:16.2.0-next.2 skills:16.1.5 skills:16.1.4 skills:16.2.0-next.1 skills:16.1.3 skills:16.2.0-next.0 skills:16.1.2 skills:16.1.1 skills:16.1.0 skills:16.0.6 skills:zone.js-0.13.1 skills:16.0.5 skills:16.1.0-rc.0 skills:16.1.0-next.3 skills:16.0.4 skills:16.1.0-next.2 skills:16.0.3 skills:16.1.0-next.1 skills:16.0.2 skills:16.1.0-next.0 skills:16.0.1 skills:16.0.0 skills:15.2.9 skills:16.0.0-rc.4 skills:16.0.0-rc.3 skills:16.0.0-rc.2 skills:15.2.8 skills:16.0.0-rc.1 skills:16.0.0-rc.0 skills:15.2.7 skills:13.4.0 skills:16.0.0-next.7 skills:15.2.6 skills:16.0.0-next.6 skills:16.0.0-next.5 skills:15.2.5 skills:16.0.0-next.4 skills:15.2.4 skills:16.0.0-next.3 skills:15.2.3 skills:14.3.0 skills:16.0.0-next.2 skills:15.2.2 skills:zone.js-0.13.0 skills:16.0.0-next.1 skills:15.2.1 skills:16.0.0-next.0 skills:15.2.0 skills:15.2.0-rc.0 skills:15.1.5 skills:15.2.0-next.4 skills:15.1.4 skills:15.1.3 skills:15.2.0-next.3 skills:15.2.0-next.2 skills:15.1.2 skills:15.2.0-next.1 skills:15.1.1 skills:15.2.0-next.0 skills:15.1.0 skills:15.1.0-rc.0 skills:15.1.0-next.3 skills:15.0.4 skills:15.1.0-next.2 skills:15.0.3 skills:15.1.0-next.1 skills:15.0.2 skills:15.0.1 skills:15.1.0-next.0 skills:12.2.17 skills:13.3.12 skills:14.2.12 skills:15.0.0 skills:14.2.11 skills:15.0.0-rc.4 skills:15.0.0-rc.3 skills:14.2.10 skills:15.0.0-rc.2 skills:14.2.9 skills:zone.js-0.12.0 skills:15.0.0-rc.1 skills:14.2.8 skills:15.0.0-rc.0 skills:14.2.7 skills:15.0.0-next.6 skills:14.2.6 skills:15.0.0-next.5 skills:14.2.5 skills:15.0.0-next.4 skills:14.2.4 skills:15.0.0-next.3 skills:14.2.3 skills:15.0.0-next.2 skills:14.2.2 skills:15.0.0-next.1 skills:14.2.1 skills:15.0.0-next.0 skills:14.2.0 skills:14.2.0-rc.0 skills:14.1.3 skills:14.1.2 skills:14.2.0-next.1 skills:zone.js-0.11.8 skills:14.2.0-next.0 skills:14.1.1 skills:zone.js-0.11.7 skills:14.1.0 skills:14.0.7 skills:14.1.0-rc.0 skills:14.0.6 skills:14.1.0-next.4 skills:14.0.5 skills:14.1.0-next.3 skills:14.0.4 skills:14.1.0-next.2 skills:14.0.3 skills:14.1.0-next.1 skills:14.0.2 skills:zone.js-0.11.6 skills:14.1.0-next.0 skills:14.0.1 skills:14.0.0 skills:14.0.0-rc.3 skills:13.3.11 skills:14.0.0-rc.2 skills:13.3.10 skills:14.0.0-rc.1 skills:13.3.9 skills:13.3.8 skills:14.0.0-rc.0 skills:13.3.7 skills:14.0.0-next.16 skills:13.3.6 skills:14.0.0-next.15 skills:13.3.5 skills:14.0.0-next.14 skills:13.3.4 skills:14.0.0-next.13 skills:13.3.3 skills:14.0.0-next.12 skills:14.0.0-next.11 skills:13.3.2 skills:13.3.1 skills:14.0.0-next.10 skills:14.0.0-next.9 skills:14.0.0-next.8 skills:14.0.0-next.7 skills:13.3.0 skills:13.2.7 skills:13.3.0-rc.0 skills:14.0.0-next.6 skills:13.3.0-next.0 skills:13.2.6 skills:zone.js-0.11.5 skills:14.0.0-next.5 skills:13.2.5 skills:14.0.0-next.4 skills:13.2.4 skills:14.0.0-next.3 skills:13.2.3 skills:13.2.2 skills:14.0.0-next.2 skills:14.0.0-next.1 skills:13.2.1 skills:12.2.16 skills:14.0.0-next.0 skills:13.2.0 skills:13.2.0-rc.1 skills:13.2.0-rc.0 skills:13.1.3 skills:13.2.0-next.2 skills:13.1.2 skills:13.2.0-next.1 skills:13.1.1 skills:12.2.15 skills:13.2.0-next.0 skills:13.1.0 skills:12.2.14 skills:13.1.0-next.3 skills:13.0.3 skills:13.1.0-next.2 skills:13.0.2 skills:13.1.0-next.1 skills:13.0.1 skills:13.1.0-next.0 skills:12.2.13 skills:13.0.0 skills:13.0.0-rc.3 skills:13.0.0-rc.2 skills:12.2.12 skills:13.0.0-rc.1 skills:12.2.11 skills:13.0.0-rc.0 skills:12.2.10 skills:13.0.0-next.15 skills:13.0.0-next.14 skills:12.2.9 skills:13.0.0-next.13 skills:13.0.0-next.12 skills:13.0.0-next.11 skills:13.0.0-next.10 skills:13.0.0-next.9 skills:12.2.8 skills:13.0.0-next.8 skills:13.0.0-next.7 skills:12.2.7 skills:13.0.0-next.6 skills:12.2.6 skills:13.0.0-next.5 skills:12.2.5 skills:13.0.0-next.4 skills:12.2.4 skills:13.0.0-next.3 skills:12.2.3 skills:13.0.0-next.2 skills:12.2.2 skills:13.0.0-next.1 skills:12.2.1 skills:13.0.0-next.0 skills:12.2.0 skills:12.1.5 skills:12.2.0-rc.0 skills:12.1.4 skills:12.2.0-next.3 skills:12.1.3 skills:12.2.0-next.2 skills:12.1.2 skills:12.2.0-next.1 skills:12.1.1 skills:12.2.0-next.0 skills:12.1.0 skills:12.1.0-next.6 skills:12.0.5 skills:12.1.0-next.5 skills:12.0.4 skills:12.1.0-next.4 skills:12.0.3 skills:12.1.0-next.3 skills:12.0.2 skills:12.1.0-next.2 skills:12.0.1 skills:12.0.0 skills:11.2.14 skills:12.0.0-rc.3 skills:12.0.0-rc.2 skills:11.2.13 skills:12.0.0-rc.1 skills:11.2.12 skills:12.0.0-rc.0 skills:v10.2.5 skills:11.2.11 skills:10.2.5 skills:12.0.0-next.9 skills:11.2.10 skills:12.0.0-next.8 skills:11.2.9 skills:12.0.0-next.7 skills:11.2.8 skills:12.0.0-next.6 skills:11.2.7 skills:12.0.0-next.5 skills:11.2.6 skills:12.0.0-next.4 skills:11.2.5 skills:12.0.0-next.3 skills:11.2.4 skills:12.0.0-next.2 skills:11.2.3 skills:11.2.2 skills:12.0.0-next.1 skills:11.2.1 skills:zone.js-0.11.4 skills:12.0.0-next.0 skills:11.2.0 skills:11.2.0-rc.0 skills:11.2.0-next.1 skills:11.1.2 skills:11.2.0-next.0 skills:11.1.1 skills:11.1.0 skills:11.1.0-rc.0 skills:11.1.0-next.5 skills:11.0.9 skills:11.0.8 skills:11.0.7 skills:11.1.0-next.4 skills:11.0.6 skills:9.1.13 skills:10.2.4 skills:11.1.0-next.3 skills:11.0.5 skills:11.1.0-next.2 skills:11.0.4 skills:11.1.0-next.1 skills:11.0.3 skills:11.0.2 skills:11.1.0-next.0 skills:11.0.1 skills:11.0.0 skills:11.0.0-rc.3 skills:10.2.3 skills:11.0.0-rc.2 skills:10.2.2 skills:zone.js-0.11.3 skills:11.0.0-rc.1 skills:10.2.1 skills:11.0.0-rc.0 skills:10.2.0 skills:zone.js-0.11.2 skills:11.0.0-next.6 skills:10.1.6 skills:11.0.0-next.5 skills:10.1.5 skills:11.0.0-next.4 skills:10.1.4 skills:11.0.0-next.3 skills:10.1.3 skills:11.0.0-next.2 skills:10.1.2 skills:11.0.0-next.1 skills:10.1.1 skills:11.0.0-next.0 skills:10.1.0 skills:10.1.0-rc.0 skills:10.0.14 skills:10.0.13 skills:10.1.0-next.8 skills:10.0.12 skills:10.1.0-next.7 skills:10.0.11 skills:zone.js-0.11.0 skills:10.1.0-next.6 skills:10.0.10 skills:10.1.0-next.5 skills:10.0.9 skills:10.1.0-next.4 skills:10.0.8 skills:10.0.7 skills:10.1.0-next.3 skills:10.0.6 skills:10.1.0-next.2 skills:10.0.5 skills:10.0.4 skills:10.1.0-next.1 skills:10.1.0-next.0 skills:10.0.3 skills:9.1.12 skills:10.0.2 skills:10.0.1 skills:10.0.0 skills:10.0.0-rc.6 skills:10.0.0-rc.5 skills:10.0.0-rc.4 skills:9.1.11 skills:9.1.10 skills:10.0.0-rc.3 skills:10.0.0-rc.2 skills:10.0.0-rc.0 skills:9.1.9 skills:9.1.8 skills:10.0.0-next.9 skills:10.0.0-next.8 skills:10.0.0-next.7 skills:9.1.7 skills:9.1.6 skills:10.0.0-next.6 skills:9.1.5 skills:10.0.0-next.5 skills:10.0.0-next.4 skills:9.1.4 skills:10.0.0-next.3 skills:9.1.3 skills:10.0.0-next.2 skills:9.1.2 skills:10.0.0-next.1 skills:10.0.0-next.0 skills:9.1.1 skills:9.1.0 skills:9.1.0-rc.2 skills:9.1.0-rc.1 skills:9.1.0-rc.0 skills:9.1.0-next.5 skills:9.0.7 skills:zone.js-0.10.3 skills:9.0.6 skills:9.1.0-next.4 skills:9.1.0-next.3 skills:9.0.5 skills:9.0.4 skills:9.1.0-next.2 skills:9.0.3 skills:9.1.0-next.1 skills:9.0.2 skills:9.1.0-next.0 skills:9.0.1 skills:9.0.0 skills:9.0.0-rc.14 skills:9.0.0-rc.13 skills:9.0.0-rc.12 skills:9.0.0-rc.11 skills:9.0.0-rc.10 skills:9.0.0-rc.9 skills:9.0.0-rc.8 skills:7.2.16 skills:9.0.0-rc.7 skills:9.0.0-rc.6 skills:9.0.0-rc.5 skills:9.0.0-rc.4 skills:9.0.0-rc.3 skills:9.0.0-rc.2 skills:8.2.14 skills:9.0.0-rc.1 skills:9.0.0-rc.0 skills:9.0.0-next.15 skills:8.2.13 skills:9.0.0-next.14 skills:9.0.0-next.13 skills:8.2.12 skills:9.0.0-next.12 skills:9.0.0-next.11 skills:8.2.11 skills:9.0.0-next.10 skills:8.2.10 skills:9.0.0-next.9 skills:8.2.9 skills:9.0.0-next.8 skills:8.2.8 skills:9.0.0-next.7 skills:8.2.7 skills:9.0.0-next.6 skills:8.2.6 skills:9.0.0-next.5 skills:8.2.5 skills:9.0.0-next.4 skills:8.2.4 skills:9.0.0-next.3 skills:8.2.3 skills:zone.js-0.10.2 skills:9.0.0-next.2 skills:8.2.2 skills:9.0.0-next.1 skills:8.2.1 skills:zone.js-0.10.1 skills:9.0.0-next.0 skills:8.2.0 skills:8.1.3 skills:zone.js-0.10.0 skills:8.2.0-rc.0 skills:8.2.0-next.2 skills:8.1.2 skills:8.2.0-next.1 skills:8.1.1 skills:8.2.0-next.0 skills:8.1.0 skills:8.1.0-rc.0 skills:8.0.3 skills:zone.js-0.9.2 skills:8.1.0-next.3 skills:8.0.2 skills:8.1.0-next.2 skills:8.0.1 skills:8.1.0-next.1 skills:8.1.0-beta.0 skills:8.0.0 skills:8.0.0-rc.5 skills:8.0.0-rc.4 skills:8.0.0-rc.3 skills:7.2.15 skills:8.0.0-rc.2 skills:8.0.0-rc.1 skills:8.0.0-rc.0 skills:8.0.0-beta.14 skills:7.2.14 skills:8.0.0-beta.13 skills:8.0.0-beta.12 skills:7.2.13 skills:8.0.0-beta.11 skills:7.2.12 skills:8.0.0-beta.10 skills:7.2.11 skills:7.2.10 skills:8.0.0-beta.9 skills:8.0.0-beta.8 skills:7.2.9 skills:8.0.0-beta.7 skills:7.2.8 skills:8.0.0-beta.6 skills:7.2.7 skills:8.0.0-beta.5 skills:7.2.6 skills:8.0.0-beta.4 skills:7.2.5 skills:8.0.0-beta.3 skills:7.2.4 skills:8.0.0-beta.2 skills:7.2.3 skills:8.0.0-beta.1 skills:7.2.2 skills:ngcontainer_0.9.0 skills:8.0.0-beta.0 skills:7.2.1 skills:7.2.0 skills:7.2.0-rc.0 skills:7.1.4 skills:7.2.0-beta.2 skills:7.1.3 skills:7.1.2 skills:7.2.0-beta.1 skills:7.2.0-beta.0 skills:7.1.1 skills:7.1.0 skills:7.1.0-rc.0 skills:7.0.4 skills:7.1.0-beta.2 skills:7.0.3 skills:7.1.0-beta.1 skills:7.0.2 skills:7.1.0-beta.0 skills:7.0.1 skills:7.0.0 skills:7.0.0-rc.1 skills:6.1.10 skills:7.0.0-rc.0 skills:7.0.0-beta.7 skills:6.1.9 skills:7.0.0-beta.6 skills:6.1.8 skills:7.0.0-beta.5 skills:6.1.7 skills:ngcontainer_0.5.0 skills:7.0.0-beta.4 skills:6.1.6 skills:6.1.5 skills:7.0.0-beta.3 skills:6.1.4 skills:7.0.0-beta.2 skills:6.1.3 skills:patch_sync skills:7.0.0-beta.1 skills:6.1.2 skills:ngcontainer_0.4.0 skills:6.1.1 skills:7.0.0-beta.0 skills:6.1.0 skills:6.1.0-rc.3 skills:6.0.9 skills:6.1.0-rc.0 skills:6.0.8 skills:ngcontainer_0.3.3 skills:6.1.0-beta.3 skills:6.0.7 skills:6.1.0-beta.2 skills:6.0.6 skills:6.1.0-beta.1 skills:6.0.5 skills:ngcontainer_0.3.2 skills:6.1.0-beta.0 skills:6.0.4 skills:ngcontainer_0.3.1 skills:6.0.3 skills:5.2.11 skills:6.0.2 skills:6.0.1 skills:6.0.0 skills:ngcontainer_0.3.0 skills:6.0.0-rc.6 skills:4.4.7 skills:5.2.10 skills:6.0.0-rc.5 skills:6.0.0-rc.4 skills:6.0.0-rc.3 skills:6.0.0-rc.2 skills:6.0.0-rc.1 skills:6.0.0-rc.0 skills:6.0.0-beta.8 skills:5.2.9 skills:6.0.0-beta.7 skills:5.2.8 skills:6.0.0-beta.6 skills:5.2.7 skills:6.0.0-beta.5 skills:5.2.6 skills:6.0.0-beta.4 skills:5.2.5 skills:6.0.0-beta.3 skills:5.2.4 skills:6.0.0-beta.2 skills:5.2.3 skills:6.0.0-beta.1 skills:5.2.2 skills:6.0.0-beta.0 skills:5.2.1 skills:5.2.0 skills:5.2.0-rc.0 skills:5.1.3 skills:5.2.0-beta.1 skills:5.1.2 skills:5.2.0-beta.0 skills:5.1.1 skills:5.1.0 skills:5.1.0-rc.1 skills:5.0.5 skills:5.1.0-rc.0 skills:5.0.4 skills:5.1.0-beta.2 skills:5.0.3 skills:5.1.0-beta.1 skills:5.0.2 skills:5.1.0-beta.0 skills:5.0.1 skills:5.0.0 skills:5.0.0-rc.9 skills:5.0.0-rc.8 skills:5.0.0-rc.7 skills:5.0.0-rc.6 skills:5.0.0-rc.5 skills:5.0.0-rc.4 skills:5.0.0-rc.3 skills:4.4.6 skills:5.0.0-rc.2 skills:4.4.5 skills:5.0.0-rc.1 skills:5.0.0-rc.0 skills:4.4.4 skills:4.4.3 skills:4.4.2 skills:4.4.1 skills:4.4.0 skills:5.0.0-beta.7 skills:5.0.0-beta.6 skills:4.4.0-RC.0 skills:5.0.0-beta.5 skills:4.3.6 skills:5.0.0-beta.4 skills:4.3.5 skills:4.3.4 skills:5.0.0-beta.3 skills:5.0.0-beta.2 skills:4.3.3 skills:5.0.0-beta.1 skills:4.3.2 skills:5.0.0-beta.0 skills:4.3.1 skills:4.3.0 skills:4.3.0-rc.0 skills:4.2.6 skills:4.2.5 skills:4.3.0-beta.1 skills:4.3.0-beta.0 skills:4.2.4 skills:4.2.3 skills:4.2.2 skills:4.2.1 skills:4.2.0 skills:4.2.0-rc.2 skills:4.2.0-rc.1 skills:4.2.0-rc.0 skills:4.1.3 skills:4.2.0-beta.1 skills:4.1.2 skills:4.2.0-beta.0 skills:4.1.1 skills:4.1.0 skills:4.1.0-rc.0 skills:4.0.3 skills:4.1.0-beta.1 skills:4.0.2 skills:4.1.0-beta.0 skills:4.0.1 skills:4.0.0 skills:4.0.0-rc.6 skills:4.0.0-rc.5 skills:4.0.0-rc.4 skills:2.4.10 skills:4.0.0-rc.3 skills:2.4.9 skills:4.0.0-rc.2 skills:4.0.0-rc.1 skills:4.0.0-beta.8 skills:2.4.8 skills:4.0.0-beta.7 skills:2.4.7 skills:4.0.0-beta.6 skills:2.4.6 skills:4.0.0-beta.5 skills:2.4.5 skills:4.0.0-beta.4 skills:2.4.4 skills:4.0.0-beta.3 skills:2.4.3 skills:2.4.2 skills:4.0.0-beta.2 skills:4.0.0-beta.1 skills:2.4.1 skills:2.4.0 skills:2.4.0-marker skills:2.3.1 skills:4.0.0-beta.0 skills:2.3.0 skills:2.3.0-rc.0 skills:2.2.4 skills:2.2.3 skills:2.3.0-beta.1 skills:2.2.2 skills:2.3.0-beta.0 skills:2.2.1 skills:2.2.0 skills:2.2.0-rc.0 skills:2.1.2 skills:2.2.0-beta.1 skills:2.1.1 skills:2.2.0-beta.0 skills:2.1.0 skills:2.1.0-rc.0 skills:2.0.2 skills:2.1.0-beta.0 skills:2.0.1 skills:2.0.0 skills:2.0.0-rc.7 skills:2.0.0-rc.6 skills:2.0.0-rc.5 skills:2.0.0-rc.4 skills:2.0.0-rc.3 skills:2.0.0-rc.2 skills:2.0.0-rc.1 skills:2.0.0-rc.0 skills:2.0.0-beta.17 skills:2.0.0-beta.16 skills:2.0.0-beta.15 skills:2.0.0-beta.14 skills:2.0.0-beta.13 skills:2.0.0-beta.12 skills:2.0.0-beta.11 skills:2.0.0-beta.10 skills:2.0.0-beta.9 skills:2.0.0-beta.8 skills:2.0.0-beta.7 skills:2.0.0-beta.6 skills:2.0.0-beta.5 skills:2.0.0-beta.4 skills:2.0.0-beta.3 skills:2.0.0-beta.2 skills:2.0.0-build.16d9c60.dart skills:2.0.0-build.16d9c60.js skills:2.0.0-build.0ae7775.dart skills:2.0.0-build.0ae7775.js skills:2.0.0-build.132829e.dart skills:2.0.0-build.132829e.js skills:2.0.0-build.05fb269.dart skills:2.0.0-build.05fb269.js skills:2.0.0-build.13e6354.dart skills:2.0.0-build.13e6354.js skills:2.0.0-build.0290362.dart skills:2.0.0-build.0290362.js skills:2.0.0-build.065ac93.dart skills:2.0.0-build.065ac93.js skills:2.0.0-build.046758c.dart skills:2.0.0-build.046758c.js skills:2.0.0-build.041c599.dart skills:2.0.0-build.041c599.js skills:2.0.0-beta.1 skills:2.0.0-build.0b6e75a.dart skills:2.0.0-build.0b6e75a.js skills:2.0.0-build.03823d4.dart skills:2.0.0-build.03823d4.js skills:2.0.0-build.06b2aa1.dart skills:2.0.0-build.06b2aa1.js skills:2.0.0-build.020ce32.dart skills:2.0.0-build.020ce32.js skills:2.0.0-build.0f85b36.dart skills:2.0.0-build.0f85b36.js skills:2.0.0-build.0544e07.dart skills:2.0.0-build.0544e07.js skills:2.0.0-beta.0 skills:2.0.0-alpha.55 skills:2.0.0-build.00822c3.dart skills:2.0.0-build.00822c3.js skills:2.0.0-build.059e09c.dart skills:2.0.0-build.059e09c.js skills:2.0.0-alpha.54 skills:2.0.0-build.03e3035.dart skills:2.0.0-build.03e3035.js skills:2.0.0-build.16e74cf.dart skills:2.0.0-build.16e74cf.js skills:2.0.0-build.116015b.dart skills:2.0.0-build.116015b.js skills:2.0.0-build.0f8e40b.dart skills:2.0.0-build.0f8e40b.js skills:2.0.0-build.006a96d.js skills:2.0.0-build.1607ef8.dart skills:2.0.0-build.1607ef8.js skills:2.0.0-build.05fa1fd.dart skills:2.0.0-build.05fa1fd.js skills:2.0.0-alpha.53 skills:2.0.0-build.080469f.dart skills:2.0.0-build.080469f.js skills:2.0.0-build.06e32eb.dart skills:2.0.0-build.06e32eb.js skills:2.0.0-build.039ed3b.dart skills:2.0.0-build.039ed3b.js skills:2.0.0-build.06d076a.dart skills:2.0.0-build.06d076a.js skills:2.0.0-alpha.52 skills:2.0.0-alpha.51 skills:2.0.0-build.01ba94b.dart skills:2.0.0-build.01ba94b.js skills:2.0.0-build.0ef6809.dart skills:2.0.0-build.0ef6809.js skills:2.0.0-build.0cdf280.dart skills:2.0.0-build.0cdf280.js skills:2.0.0-alpha.50 skills:2.0.0-build.071165f.dart skills:2.0.0-build.071165f.js skills:2.0.0-alpha.49 skills:2.0.0-build.15f5f27.dart skills:2.0.0-build.15f5f27.js skills:2.0.0-build.0df8bc4.dart skills:2.0.0-build.0df8bc4.js skills:2.0.0-build.0ec9ccf.dart skills:2.0.0-build.0ec9ccf.js skills:2.0.0-build.140ce9f.dart skills:2.0.0-build.140ce9f.js skills:2.0.0-build.0a44fc6.dart skills:2.0.0-build.0a44fc6.js skills:2.0.0-alpha.48 skills:2.0.0-build.0614797.dart skills:2.0.0-build.0614797.js skills:2.0.0-build.0a3a17f.dart skills:2.0.0-build.0a3a17f.js skills:2.0.0-build.0206d72.dart skills:2.0.0-build.0206d72.js skills:2.0.0-build.070d818.dart skills:2.0.0-build.070d818.js skills:2.0.0-build.1417e12.dart skills:2.0.0-build.1417e12.js skills:2.0.0-build.093b794.dart skills:2.0.0-build.093b794.js skills:2.0.0-build.015faee.dart skills:2.0.0-build.015faee.js skills:2.0.0-alpha.47 skills:2.0.0-build.016ab31.dart skills:2.0.0-build.016ab31.js skills:2.0.0-build.0c9596a.dart skills:2.0.0-build.0c9596a.js skills:2.0.0-build.019cb41.dart skills:2.0.0-build.019cb41.js skills:2.0.0-build.0815a77.dart skills:2.0.0-build.0815a77.js skills:2.0.0-build.125fa38.dart skills:2.0.0-build.125fa38.js skills:2.0.0-build.074075d.dart skills:2.0.0-build.074075d.js skills:2.0.0-build.0db0252.dart skills:2.0.0-build.0db0252.js skills:2.0.0-alpha.46 skills:2.0.0-alpha.45 skills:2.0.0-alpha.44 skills:2.0.0-alpha.42 skills:2.0.0-alpha.41 skills:2.0.0-alpha.40 skills:2.0.0-alpha.39 skills:2.0.0-alpha.38 skills:2.0.0-alpha.37 skills:2.0.0-alpha.36 skills:2.0.0-alpha.35 skills:2.0.0-alpha.34 skills:2.0.0-alpha.33 skills:2.0.0-alpha.32 skills:2.0.0-alpha.31 skills:2.0.0-alpha.30 skills:2.0.0-alpha.29 skills:2.0.0-alpha.28 skills:2.0.0-alpha.27 skills:2.0.0-alpha.26 skills:2.0.0-alpha.25 skills:2.0.0-alpha.24 skills:2.0.0-alpha.23 skills:2.0.0-alpha.22 skills:2.0.0-alpha.21 skills:2.0.0-alpha.20 skills:2.0.0-alpha.19 skills:2.0.0-alpha.18 skills:2.0.0-alpha.17 skills:2.0.0-alpha.16 skills:2.0.0-alpha.15 skills:2.0.0-alpha.14 skills:starting skills:2.0.0-alpha.13

201 Commits
v21.2.10 ... v21.2.23

Author SHA1 Message Date
Kristiyan Kostadinov 81385eadb8 release: cut the v21.2.23 release 2026-09-09 21:52:40 +02:00
Alan Agius fc2e8fbc0b fix(platform-server): update domino to latest version 
Updates the domino dependency to the latest version as used in the main branch.
 2026-09-09 16:28:26 +02:00
leonsenft 4c0bc4345a release: cut the v21.2.22 release 2026-08-26 16:51:57 -07:00
Alan Agius 5aa6d97deb fix(platform-server): avoid stripping unicode whitespace during url resolution 
Avoid trimming urlStr with String.prototype.trim() in resolveUrl to ensure URL parsing and resolution align with the WHATWG URL standard.
 2026-08-25 10:00:02 -07:00
Alan Agius 73d8bbd27c fix(platform-server): update domino to latest version 
Updates the domino dependency to the latest version as used in the main branch.
 2026-08-24 10:41:12 -07:00
Jessica Janiuk 992d627b69 release: cut the v21.2.21 release 2026-08-19 12:52:45 -07:00
SkyZeroZx c19a36c2fb fix(platform-browser): disallow event handler attributes in Meta 
Prevent arbitrary MetaDefinition properties from writing on* handlers directly to meta elements. Browser events can execute these handlers, including on meta elements rendered in the document body.

Reject handler attributes case-insensitively before matching or mutating tags.

Fixes #70126
 2026-08-17 13:43:57 -07:00
Alon Mishne dca0a77488 release: cut the v21.2.20 release 2026-08-12 17:02:31 -07:00
Jaime Burgos caf616670f fix(http): run root interceptors in the terminal request chain 
Represent withRequestsMadeViaParent() with an internal delegating backend so the interceptor handler can distinguish delegated clients from independent child configurations.
 2026-07-31 15:13:30 -07:00
SkyZeroZx fec5977df4 fix(http): match header values exactly when deleting 
Normalize value-specific HttpHeaders deletions before filtering. The string overload previously used String#indexOf and removed shorter values contained within the requested deletion value, potentially widening outgoing request metadata.

Preserve delete-all behavior only when no value is supplied, and cover string, array, and empty-string deletion.
 2026-07-31 15:13:30 -07:00
SkyZeroZx e33d69a71c fix(http): preserve immutability of materialized clones 
Prevent lazy HttpHeaders and HttpParams clones from reusing value arrays owned by a materialized source. Append and value-specific delete operations previously mutated those shared arrays, violating the immutable API contract and allowing request metadata to bleed into later requests.

Share value arrays until an update mutates a specific header or parameter, then copy only that array. Cover the affected append and delete paths with regression tests that materialize the source first.
 2026-07-31 15:13:30 -07:00
Jaime Burgos 6afe6fa781 fix(core): sanitize host bindings on concrete hosts 
Compute host binding security contexts against concrete hosts, including host directives, inheritance, dynamic directives, and createComponent hostElement usage.
 2026-07-30 08:29:04 -07:00
Alan Agius 07cb840eac release: cut the v21.2.19 release 2026-07-29 22:44:48 +02:00
Alan Agius 7b884f585a fix(compiler): restrict possible event handler check to property names longer than 2 characters 
Previously, the compiler disallowed translation of any attribute starting with 'on' for security reasons. This incorrectly disallowed translation of the 'on' attribute itself, which is not an event handler.

This commit introduces `isPossibleEventHandler` to verify that the property name has a length greater than 2 in addition to starting with 'on'. This allows attributes like 'on' to be translated while still correctly disallowing actual event handlers like 'onerror', 'onclick', etc.
 2026-07-29 08:51:50 -07:00
Hexix23 948a8d6831 fix(http): distinguish repeated transfer cache params 
Serialize transfer cache request parameters without comma-joining repeated values so distinct HttpClient requests cannot reuse the same cached response.
 2026-07-29 08:51:50 -07:00
Hexix23 e2660c3dee fix(compiler): disallow i18n event attributes 
Reject translated event-handler attributes so localization cannot bypass Angular event-attribute validation.
 2026-07-29 08:51:50 -07:00
SkyZeroZx f34a93c946 fix(platform-server): update domino to latest version 
Updates the domino dependency to the latest version as used in the main branch.

This update contains fixes for https://github.com/angular/domino/pull/32.
 2026-07-29 08:43:40 -07:00
Jaime Burgos 9949dccce1 fix(http): enable xsrf for root-provided HttpClient 
Include the XSRF interceptor in the root token factory so the automatically provided HttpClient retains the documented default protection without requiring provideHttpClient().
 2026-07-24 13:24:13 -07:00
leonsenft 5d00aa2bd4 release: cut the v21.2.18 release 2026-07-08 15:02:15 -07:00
SkyZeroZx e86c31bf26 fix(service-worker): preserve referrer policy in asset requests 
Preserve explicit referrer policy when the service worker reconstructs asset requests for cache-busted and redirected asset fetches.

For example, an application can load a script or image with referrerPolicy: 'same-origin' or 'origin' to limit referrer data. Dropping that policy can expose more of the current URL to that resource host.

(cherry picked from commit a7f52e5c30)
 2026-07-08 11:24:32 -07:00
SkyZeroZx 1804f73bec fix(service-worker): preserve referrer in asset requests 
Preserve referrer metadata when the service worker reconstructs asset requests for cache-busted and redirected asset fetches.

For example, an attacker with access to asset host logs could receive a reset token embedded in a page URL if the reconstructed request falls back to default referrer behavior instead of carrying referrer: ''.

(cherry picked from commit 99ad47e58f)
 2026-07-08 11:24:32 -07:00
SkyZeroZx 91df739b80 fix(http): prevent caching of responses with Set-Cookie headers 
Skip HttpTransferCache serialization for HTTP responses that contain a
Set-Cookie header.

Cookie-setting responses commonly represent session-specific,
user-specific, or security-sensitive state. Serializing their bodies into
SSR TransferState can embed sensitive data into the generated HTML, where
it may be reused during hydration or replayed by a shared cache/CDN.

(cherry picked from commit 80795defc6)
 2026-07-07 10:15:02 -07:00
Alan Agius 8d22cc953b fix(compiler-cli): update babel dependencies to latest v7 
Update babel dependencies to v7.29.7 to address CVE-2026-49356.

Fixes #69608
 2026-07-06 14:01:46 -07:00
SkyZeroZx 5a693bafcd fix(core): reject dynamic script host elements 
The previous fix for GHSA-692r-grfm-v8x7 was incomplete because it rejected script tags only when locating an explicit host element. Dynamic component instantiation can also infer the host element from the component selector.

Move the script-host rejection to the point where ComponentFactory has resolved the host element for either path, so createComponent rejects script hosts consistently.

(cherry picked from commit 135f3755b4)
 2026-06-30 17:42:39 -07:00
SkyZeroZx 6bcce117fb fix(core): avoid caching missing locale data 
Only cache locale data loaded from the global locale registry when an actual locale entry is found.

This prevents attacker-controlled missing locale identifiers from being retained indefinitely in SSR when locale lookup falls back to a parent locale or the built-in English locale, avoiding unbounded process memory growth in locale-aware pipes and formatters.

(cherry picked from commit ea8277ae37)
 2026-06-24 13:04:05 -04:00
Andrew Scott 31c25e2e85 release: cut the v21.2.17 release 2026-06-10 12:54:23 -07:00
Jaime Burgos 88832c84f8 fix(core): validate lowercase SVG animation attribute names (#69269) 
Normalize SVG animation attributeName lookup to also recognize lowercase attributename before allowing dynamic animation value bindings.

Add runtime and platform-server SSR regression coverage for lowercase attributename retargeting.

(cherry picked from commit d5e689af80)
 2026-06-10 09:51:11 -07:00
Alan Agius 13fb0afe93 refactor(platform-server): deprecate ServerXhr (#69255) 
XHR support in `@angular/platform-server` is deprecated because the underlying `xhr2` library does not safely handle redirects. Specifically, it can forward `Authorization` headers on cross-origin redirects (which leaks credentials) and is susceptible to denial-of-service (DoS) via redirect loops.

DEPRECATED: XHR support in `@angular/platform-server` is deprecated. Use standard `fetch` APIs instead.
 2026-06-09 10:06:45 -07:00
SkyZeroZx 86a56dc279 fix(common): Limits date format string length 
Introduces a maximum length of 256 characters for date format strings.

This prevents potential Denial of Service (DoS) attacks by throwing an
`INVALID_DATE_FORMAT` error if an excessively long format string is
provided to `formatDate` or `DatePipe`, safeguarding against performance
degradation or application crashes.

(cherry picked from commit 35de6b368c)
 2026-06-08 13:19:55 -07:00
SkyZeroZx bcb1b7ea25 fix(http): preserve empty referrer option in HttpRequest 
Preserve `referrer: ''` when constructing and cloning HttpRequest.

An empty string is a valid Fetch referrer value and is documented by
Angular as the way to omit referrer information for sensitive requests.
The previous truthy checks treated it as if the option was not provided,
causing requests to fall back to the browser default referrer behavior.

(cherry picked from commit 1e54b8f5ec)
 2026-06-08 13:17:32 -07:00
SkyZeroZx b9d29381bb fix(service-worker): Strips sensitive headers on cross-origin redirects 
Removes `Authorization`, `Cookie`, and `Proxy-Authorization` headers when a request is redirected to a different origin. This aligns with the Fetch API's redirect algorithm to prevent sensitive information from being sent to third-party origins.

(cherry picked from commit 423a109404)
 2026-06-08 10:41:59 -07:00
Jaime Burgos a810a319d1 fix(http): Rejects non-HTTP(S) URLs in JSONP requests 
Prevents JSONP requests from using URLs with unsupported protocols
for improved security.
 2026-06-05 14:25:46 -07:00
Alan Agius 35510746b7 fix(platform-server): harden platform location origin validation during SSR 
Add allowOriginChange option to ResolveUrlOptions in resolveUrl to enforce same-origin validation on resolved URLs. When set to false, it prevents any cross-origin changes (including HTTP/HTTPS URLs), aligning the emulated server-side platform location environment with browser security behavior.

Refactor ServerPlatformLocation.replaceState to use allowOriginChange: false instead of manual comparison, hardening state change validation against cross-origin URLs.

Add unit tests in url_spec.ts and platform_location_spec.ts for the origin validation changes.
 2026-06-05 10:46:12 -07:00
Alan Agius a5f82b8315 refactor(platform-server): replace standard Error with RuntimeError 
Update platform-server to use Angular 's native `RuntimeError` class.
This aligns error throwing patterns in platform-server with other packages of the framework such as core, common, and platform-browser.

For URL and host errors, the error messages are configured to return only the raw dynamic URL when `ngDevMode` is false (in production) to aid in troubleshooting without bloating production bundles.
 2026-06-05 10:46:12 -07:00
Alan Agius bc55749698 fix(common): use cryptographically secure SHA-256 for transfer cache key generation 
Replace the custom 64-bit non-cryptographic combined DJB2 hashing implementation in HttpTransferCache with a robust, pure JavaScript, synchronous SHA-256 algorithm.

Using DJB2 is vulnerable to pre-image and second-preimage attacks due to its small 64-bit keyspace and mathematical simplicity. An attacker could craft colliding request inputs to poison the cache, potentially causing a CDN or the application to serve the wrong cached response to legitimate users.

SHA-256 provides strong cryptographic collision resistance, preventing cache key collision attacks. A custom synchronous implementation is required because the Web Crypto API (`crypto.subtle.digest`) is asynchronous, whereas the transfer cache state lookup and interceptor flow must operate synchronously.

Also, update the unit tests to dynamically verify the custom SHA-256 output against the native Web Crypto API.
 2026-06-05 09:47:53 -07:00
SkyZeroZx d846326b07 fix(common): skip transfer cache for uncacheable HTTP traffic 
Do not store HTTP transfer cache entries when either the request or response uses `Cache-Control: no-store`, `Cache-Control: private`, or `Cache-Control: no-cache`.

Also skip transfer cache when requests use the Fetch API `cache` option with `no-store` or `no-cache`.

Because transfer cache serializes SSR HTTP responses into the rendered HTML, Angular now treats these directives conservatively to avoid exposing sensitive or explicitly uncacheable data through `TransferState`.

(cherry picked from commit 4d150156ca)

(cherry picked from commit 64ce11fcd4)
 2026-06-04 15:26:47 -07:00
SkyZeroZx e245d40c4d fix(http): skip transfer cache for fetch credentialed requests 
Treat HttpClient requests using `credentials: 'include'` and `same-origin` as credentialed when deciding whether a response can be stored in the HTTP transfer cache.

The transfer cache already skips requests with `withCredentials`, `Cookie`, `Authorization`, or `Proxy-Authorization` because those responses may contain user-specific data. Fetch-backed requests can express the same credentialed behavior through the `credentials` option, so these responses must not be serialized into the SSR HTML.

This keeps credentialed SSR responses out of TransferState and aligns the cache eligibility check with the fetch request options supported by HttpClient.

(cherry picked from commit 8ec01970d2)
 2026-06-04 15:26:47 -07:00
SkyZeroZx dc9c99636d fix(compiler): sanitize two-way properties 
Apply schema-derived sanitizer resolution to TwoWayProperty ops so native two-way DOM bindings emit the same sanitizer as one-way property bindings.

Add compiler compliance coverage for innerHTML, srcdoc, URL, resource URL, and security-sensitive attribute cases.

(cherry picked from commit 9ca51ab0e4)
 2026-06-03 13:06:27 -07:00
Matthieu Riegler 1523061137 fix(core): harden TransferState restoration against DOM clobbering 
Reject non-script elements when reading the SSR transfer state payload by id.
This prevents attacker-controlled elements with a clobbered id from spoofing
hydration state.
 2026-06-03 12:25:38 -07:00
Pawel Kozlowski 03188ddc9f release: cut the v21.2.16 release 2026-06-03 14:29:59 +02:00
Matthieu Riegler 736c4ab7e6 refactor(core): fix broken unit test. 
This was broken by 3fd6897
 2026-06-02 14:17:05 +02:00
Matthieu Riegler 3fd6897a67 fix(core): harden inherit definition feature against polluted prototypes 
Stop inheritance traversal before built-in prototype objects and only read `ɵcmp`/`ɵdir` when they are own properties of a super type. This prevents polluted inherited properties from being treated as Angular defs during inheritance merging.

Also adds regression tests covering polluted `Object.prototype.ɵdir` and `Object.prototype.ɵcmp` to ensure polluted host metadata is not inherited.

(cherry picked from commit e695379354)
 2026-06-02 13:26:00 +02:00
Michael Small db157e4aff docs: fix min/max form template examples 
(cherry picked from commit 42391329c2)
 2026-06-02 11:23:07 +02:00
Joey Perrott 70af5e8abd fix(docs-infra): secure update-assets script against RCE and SSRF 
- Validate storedSha and storedBranch from _build-info.json.
- Validate latestSha returned from GitHub API.
- Validate branch in GithubClient.getShaForBranch and baseSha/headSha in GithubClient.getAffectedFiles.
- Use execFileSync instead of execSync to avoid shell execution.

TAG=agy
CONV=4e3e69ba-3f3d-416b-9ce4-9ef75486d2f3

(cherry picked from commit 3093edcad0)
 2026-06-02 11:22:02 +02:00
Alan Agius 66821c4ed5 fix(platform-server): throw on suspicious URLs and restrict protocol-relative URLs 
Currently, the platform-server attempts to neutralize URL hijacking and SSRF
bypasses by collapsing multiple leading slashes in relative paths. However,
sophisticated bypasses using obfuscated protocols (e.g., carriage returns or
newlines) or relative-like backslash paths can still lead to unexpected
origin takeovers.

This commit improves security by doing the following:
- Rejects protocol-relative URLs by throwing an error if they are not
  explicitly permitted via `allowProtocolRelative`.
- Strictly validates resolved URLs against the provided origin using
  `isSafeOriginChange`. If a URL unexpectedly shifts origins, an error
  is thrown.
- Permits origin changes only when standard absolute http/https protocols are
  explicitly declared in the input URL.

(cherry picked from commit 0b19c92d44)
 2026-06-01 20:03:28 +02:00
Matthieu Riegler b74fb76d1a docs(docs-infra): simplify code block styles 
#68940 introduced a regression that broke style for wrapped `code` blocks.
Simplifying the style by droping the unecessary gradient + before workaround fixes the issue.

(cherry picked from commit ec4f08bb94)
 2026-06-01 18:36:58 +02:00
KirtiRamchandani 66d09558b6 docs: mention Angular Aria in accessibility guide 
(cherry picked from commit 9b5952e3a3)
 2026-06-01 18:33:36 +02:00
Kristiyan Kostadinov ae1c8a1f7a fix(compiler): move projection attributes into constants 
We can save some memory by moving the `attrs` passed into the `projection` instruction into the constant pool.

(cherry picked from commit f0b28f6443)
 2026-06-01 12:28:34 +02:00
Kam 9f6fda6815 docs: fix esbuild and TensorFlow branding on overview page 
The esbuild card on the "What is Angular?" page rendered the bundler name three different ways (title "esbuild", link "ESBuild and Vite", body "Vite and ESBuild") so this unifies on the official lowercase "esbuild"; also corrects "Tensorflow" to "TensorFlow" to match the other brands on its line (Firebase, Material Design, Flutter, Google Cloud) which were already cased correctly.

(cherry picked from commit f777dd112e)
 2026-06-01 12:19:08 +02:00
arturovt 1e5d76bfd9 docs: document //i18n(ph="name") placeholder syntax for template interpolations 
The `//i18n(ph="name")` comment syntax for naming interpolation placeholders
in templates was not documented anywhere in the i18n guide, despite being a
supported compiler feature with test coverage.

Add a "Name the interpolation placeholder" subsection under "Mark text in
component template" in prepare.md, mirroring the existing subsection in
"Mark text in component code". Includes a cross-reference to the $localize
equivalent (`${var}:name:`) to help readers connect the two approaches.

Closes #52070

(cherry picked from commit 2b44a07ea7)
 2026-06-01 12:18:09 +02:00
aparziale 22dd53ca97 docs: fix link debbuging and extended-diagnostics 
Update link for 'Improve debbuging with better Angular error messages' and 'extended-diagnostics' sections

Fixed #69010

(cherry picked from commit cbc36f59e0)
 2026-06-01 12:17:03 +02:00
Kam 1cd4f54aef fix(docs-infra): readable contrast for DEV/EXP api badges in light mode 
The DEV (developer preview) and EXP (experimental) badges in the API reference list used `--page-background` for text, which is dark in dark mode (working as intended on the pale colored bg) but white in light mode, making the labels invisible against the near-white badge bg. Introduce an `--item-attr-text` CSS variable defaulting to `--page-background` and overridden to `--primary-contrast` in light mode, following the per-mode pattern the file already uses for `--item-attr-base-mix`.

(cherry picked from commit 0010ad5910)
 2026-06-01 11:57:54 +02:00
Bhuvansh855 9d8ea2cc9a docs(forms): remove hasMetadata references from v21 guide 2026-06-01 11:56:00 +02:00
Kristiyan Kostadinov 69c0d48a0d fix(docs-infra): round up media queries 
Uses 1px increments for media queries, rather than the 0.01px we have now which seem to be a bit too precise and cause the UI to be stuck between states in some cases.

I've also removed some unnecessary `calc`, because the calculation is happening inside Sass already.

Fixes #69020.

(cherry picked from commit 96ed0fe45b)
 2026-06-01 11:34:44 +02:00
arturovt 7e38336dc7 fix(core): use Object.create(null) for LOCALE_DATA as a hardening measure 
Prior to this commit, `LOCALE_DATA` was initialized as a plain object literal:

```typescript
let LOCALE_DATA: {[localeId: string]: any} = {};
```

While `__proto__` is neutralized by the `replace(/_/g, '-')` sanitization step (becoming `--proto--`), keys like `constructor` and `prototype` pass through unchanged and would modify special properties on `Object.prototype` if used as bracket notation keys on a plain object.

**Example attack through the public API:**

```typescript
// attacker calls the public registerLocaleData API with a crafted localeId
registerLocaleData(data, 'constructor');

// internally becomes:
LOCALE_DATA['constructor'] = data;
// → modifies Object.prototype.constructor for every object in the process

// or with extraData:
registerLocaleData(data, 'constructor', extraData);
// LOCALE_DATA['constructor'][LocaleDataIndex.ExtraData] = extraData;
// → Object.prototype[LocaleDataIndex.ExtraData] = extraData
// → every plain object in the process now has this property
// → affects JSON serialization, property enumeration, and framework internals

// consequence — any subsequent object created in the process is affected:
const user = getUserFromSession();
console.log(user[LocaleDataIndex.ExtraData]); // → attacker-controlled value
```

In a long-running SSR server this pollution persists for the lifetime of the process and affects all subsequent requests from all users.

**The fix** initializes `LOCALE_DATA` with `Object.create(null)`:

```typescript
let LOCALE_DATA: {[localeId: string]: any} = Object.create(null);
```

A null-prototype object has no prototype chain, so any key is treated as a plain string with no special behavior, making prototype pollution impossible regardless of input — without relying on the sanitization step as the sole protection.

(cherry picked from commit 0deac976f3)
 2026-05-29 14:55:53 +02:00
arturovt 34c4e401ba fix(zone.js): validate __Zone_symbol_prefix to prevent DOM clobbering attacks 
Previously, `__Zone_symbol_prefix` was read directly from `globalThis` without validating its type:

const symbolPrefix = global['__Zone_symbol_prefix'] || '__zone_symbol__';

This made it possible for DOM clobbering to interfere with Zone’s internal symbol handling. If an attacker injected a DOM element with the same name (for example via a form field or anchor ID), `global['__Zone_symbol_prefix']` could resolve to a DOM element instead of a string. Because DOM elements are truthy, the fallback would not be used, and Zone would construct invalid internal keys (e.g. “[object HTMLFormElement]...”), breaking patching and lookup logic in subtle ways.

This prevents DOM clobbering from influencing Zone’s internal symbol generation and keeps the patching system stable even in the presence of malicious or unexpected global values.

(cherry picked from commit e50f504b2f)
 2026-05-29 14:54:19 +02:00
rootvector2 f6d8e642b0 fix(common): only strip a literal /index.html suffix from URLs 
Hit this while exercising `Location.normalize` with route paths that end in non-`.html` suffixes.

The unescaped `.` in the strip regex inside `_stripIndexHtml` matches any character, so e.g. `/foo/indexXhtml` and `/foo/index_html` both collapse to `/foo` before the base-path strip and end up resolving to the wrong route.

Escape the dot so only the literal `/index.html` suffix is stripped.

(cherry picked from commit d109bf90d5)
 2026-05-29 13:16:08 +02:00
Alan Agius 8206972189 refactor(platform-server): clean up and simplify url resolution utility 
Trims leading/trailing whitespaces in resolveUrl to normalize input.

(cherry picked from commit e14d34e9ee)
 2026-05-29 13:14:13 +02:00
Alan Agius d3170031b6 fix(platform-server): update domino to latest version 
Updates the domino dependency to the latest version as used in the main branch.

This update contains fixes for https://github.com/angular/domino/pull/29.
 2026-05-29 13:12:01 +02:00
arturovt 9b7d0e5034 docs: document i18n object forms for sourceLocale and locales in angular.json 
The `sourceLocale` and `locales` entries in `angular.json` accept object
forms (with `code`, `baseHref`, and `subPath`) that were never documented.

- Add an `i18n options` reference section to workspace-config.md covering
  the full shape of `sourceLocale` and each `locales` entry, including the
  distinction between `baseHref` (HTML only) and `subPath` (HTML + output
  directory name)
- Add `i18n` to the project configuration options table in workspace-config.md
- Expand the suboptions table in merge.md to mention the object forms and
  link to the new reference section

Closes #59664

(cherry picked from commit 2f49d5dba4)
 2026-05-29 11:53:54 +02:00
Alex Rickabaugh cea6588bb3 release: cut the v21.2.15 release 2026-05-28 09:51:14 -07:00
Kam 6b8202eab6 refactor(docs-infra): extract magic 27 in navigation-list tooltip threshold 
The matTooltip on navigation list items was disabled when the label was
shorter than the literal `27`, repeated across four bindings in the
template. Lift the value to a protected readonly field so the threshold
has a name and lives in one place.

(cherry picked from commit 34d577f697)
 2026-05-28 16:08:16 +02:00
Alan Agius eb1cbbf2eb fix(compiler): prevent namespaced SVG <style> elements from being stripped 
Updates the template preparser to exclude namespaced SVG style tags (':svg:style') from the style elements set.

Previously, ':svg:style' elements were incorrectly classified as PreparsedElementType.STYLE, which caused them to be completely stripped from the final template DOM tree during the Render3 template transform and pushed into standard component stylesheets. By limiting the style element parsing to standard 'style' tags, namespaced SVG style tags remain safely in the template AST as normal DOM elements, preserving local SVG styling.

Closes #68977

(cherry picked from commit ec138c3645)
 2026-05-28 14:02:52 +02:00
Bhuvansh855 8538bdce1c docs: fix grammar issues in resource guide 
(cherry picked from commit 0e6cb4151c)
 2026-05-28 13:48:06 +02:00
Yenya030 582a417bd2 fix(http): exclude withCredentials requests from transfer cache 
Update the transfer cache check to safely exclude all requests sent with the `withCredentials` flag.

By default, the HTTP transfer cache avoids caching user-specific responses to prevent sensitive data exposure or incorrect caching. While requests with explicit headers like `Cookie` or `Authorization` are excluded by default, requests can also be sent with credentials via the `withCredentials` flag without having those headers explicitly declared on the request object.

To keep user-specific responses from being cached, exclude `withCredentials` requests unconditionally, even when the `includeRequestsWithAuthHeaders` option is set to true.

(cherry picked from commit 34090cb12e)
 2026-05-27 14:13:21 -07:00
Yenya030 5c6d6df34b fix(http): skip TransferCache for cookie-bearing requests by default 
Treat requests with a Cookie header like other auth-bearing requests and skip TransferCache caching them by default.

This preserves the explicit opt-in path via includeRequestsWithAuthHeaders, adds regression coverage for cookie-bearing requests, and updates the SSR guide to document the behavior.

(cherry picked from commit ab459798d9)
 2026-05-27 14:13:21 -07:00
RonGamzu 29ceeffd40 docs: fix typos in source code comments 
(cherry picked from commit 6f56202755)
 2026-05-27 11:18:26 -07:00
Ricardo Chavarria 1a84668f0c docs(docs-infra): add Spanish community translation 
Add https://docs.angular.lat/ (Español) to the community translations section.

(cherry picked from commit 48b4625fb3)
 2026-05-27 11:16:59 -07:00
Kam 551a2a1f46 docs: fix preposition in libraries naming callout 
The naming callout said the ng- prefix is "used from the Angular framework". Change to "used by", matching standard usage and the surrounding prose.

(cherry picked from commit 8c3e46fb53)
 2026-05-27 11:09:46 -07:00
Harmeet Singh 84c6579a4e docs: clarify signals effect import source 
(cherry picked from commit 741fcc4abf)
 2026-05-27 11:08:54 -07:00
Kam 2b17b2db88 refactor(language-server): drop duplicate isAngularCore helpers in session 
session.ts defined isAngularCore, isExternalAngularCore, and
isInternalAngularCore as byte-identical copies of the already-exported
versions in utils.ts. Only isAngularCore was used locally; the other
two were dead. handlers/template_info.ts already imports the utils
version. Remove the duplicates and import isAngularCore from utils.

(cherry picked from commit d808866f89)
 2026-05-27 10:52:54 -07:00
Bhuvansh855 fd3573d99d fix(docs-infra): improve inline code layout 
Remove inline-block layout behavior from inline code elements
to improve wrapping and spacing in multiline documentation
paragraphs.

(cherry picked from commit fdf0bf9a62)
 2026-05-27 10:52:19 -07:00
Joey Perrott ef38852213 ci: configure setup and use pnpm in benchmark comparison workflow 
The benchmark comparison workflow fails because it runs pnpm install
without setting up node and pnpm first. We configure the setup steps
manually so that checkouts from forks are supported.

Additionally, we update the benchmark comparison script (index.mts)
to use pnpm rather than hardcoded yarn commands to install
dependencies when checking out revisions.

(cherry picked from commit a648e8e914)
 2026-05-27 10:51:43 -07:00
Alan Agius 2232a62bb2 fix(dev-infra): draft GitHub release to support immutable releases 
Update the release tool to create the GitHub release in a draft state initially and publish it only after the extension asset (.vsix) has been successfully uploaded.

GitHub shifted towards immutable releases. If a release is published instantly upon creation,the assets will not be able to be uploaded.

(cherry picked from commit 26f4ed5056)
 2026-05-27 10:50:26 -07:00
Andrew Scott ad5053b518 fix(zone.js): avoid type error on custom object rejection with rejection property 
Ensure that when a custom object with a 'rejection' property is thrown as a raw promise rejection, the unhandled promise rejection error logger does not crash with a TypeError while trying to access undefined zone properties.

Also wrap microtask queue draining and task frame counter updates with defensive try-finally blocks to guarantee internal scheduler states are properly reset under any potential call stack exception unwinding scenarios.

(cherry picked from commit fa7580061b)
 2026-05-27 10:45:19 -07:00
SkyZeroZx ca32fc1000 fix(service-worker): Preserves HTTP cache mode in asset group requests 
Ensures explicit HTTP cache mode from incoming requests is forwarded and maintained when creating fetch requests for assets, aligning with expected fetch behavior and preventing unintended cache handling.

(cherry picked from commit 31399c2171)
 2026-05-27 10:43:19 -07:00
SkyZeroZx b8bd49341d fix(service-worker): Preserves explicit 'credentials: omit' in asset requests 
Ensures that explicitly provided `credentials: 'omit'` options are preserved
when creating new requests, preventing unintended credential inclusion.

(cherry picked from commit 5b0e9663e5)
 2026-05-27 10:43:19 -07:00
leonsenft 251c8f2740 test(core): remove obsolete SVG script sanitization translation test (#68925) 
Removes the `should throw error on translated SVG script ResourceURL
attributes` integration test from `security_integration_spec.ts`.

This test is now obsolete because SVG `<script>` elements are stripped during
template compilation (implemented in 90494cd909). As a result, they are no
longer present in the compiled template to trigger runtime sanitization,
causing this test (which expected a sanitization error to be thrown) to fail.

PR Close #68925
 2026-05-27 10:42:29 -07:00
Alan Agius dada86e43d fix(core): synchronize core sanitization schema with compiler (#68925) 
Synchronizes the core's copy of the DOM security schema with the compiler-side schema definitions.

PR Close #68925
 2026-05-27 10:42:29 -07:00
Alan Agius 782e01594e fix(compiler): strip namespaced SVG script elements during template compilation (#68925) 
Ensures that namespaced <script> elements (such as :svg:script) are correctly classified as PreparsedElementType.SCRIPT by the template preparser and stripped during compilation to prevent potential XSS vulnerabilities. Consequently, obsolete security schema mappings and runtime sanitization checks for <script> attributes have been removed since these elements are never present in compiled template outputs.

PR Close #68925
 2026-05-27 10:42:29 -07:00
Alan Agius ff12fe55ac fix(core): normalize tag names in runtime i18n attribute security context lookup (#68925) 
Normalize namespaced tag names (e.g., :xhtml:a to a) inside i18nResolveSanitizer before looking up their security context. This ensures custom namespaced tag attributes undergo correct translation sanitization at runtime.

PR Close #68925
 2026-05-27 10:42:29 -07:00
Alan Agius 0b07f47bd6 fix(compiler): normalize tag names with custom namespaces in DomElementSchemaRegistry (#68925) 
Custom XML/XHTML namespaced elements (e.g., <xhtml:a>) fall back to the standard HTML namespace during element creation at compile-time/runtime. However, their property and security context lookups inside the schema registry were incorrectly performed using the full namespaced tag name (e.g., :xhtml:a), which bypassed the default a|href sanitization registry and incorrectly returned SecurityContext.NONE instead of SecurityContext.URL.

This commit introduces tag name normalization inside DomElementSchemaRegistry for custom namespaces (other than the built-in svg and math namespaces). Custom namespaced tag names are now normalized to their simple HTML element counterparts for all registry queries, ensuring that correct property schema validation and dynamic security sanitization rules (such as URL sanitization) are enforced at runtime.

PR Close #68925
 2026-05-27 10:42:29 -07:00
Alan Agius cc1378d54b fix(compiler): sanitize dynamic href and xlink:href bindings on SVG a elements (#68925) 
Dynamic bindings to `href` and `xlink:href` attributes on SVG `<a>` elements (`<svg:a>`) were previously unmapped in the DOM security schema. As a result, they bypassed sanitization completely, creating a potential XSS vulnerability if bound to untrusted user inputs (e.g., `javascript:` URLs).

This fix mitigates this risk by:

1. Registering `href` and `xlink:href` on `<svg:a>` elements under the `SecurityContext.URL` context in both the compiler and core DOM security schemas.

2. Enabling template compilation to output runtime URL sanitization checks (`ɵɵsanitizeUrl`) on these attributes.

3. Adding regression and verification test cases to ensure dynamic SVG link bindings are safely sanitized at runtime while static values are correctly allowed.

PR Close #68925
 2026-05-27 10:42:29 -07:00
Alan Agius daaf32937f fix(core): support prefix-insensitive DOM schema lookups and compile-time i18n attribute validation (#68925) 
Updates `DomElementSchemaRegistry` to strip `:svg:` and `:math:` namespace prefixes
from tag names before querying `SECURITY_SCHEMA` at compile-time. This allows SVG
and MathML attributes to correctly match their security contexts during compilation.

PR Close #68925
 2026-05-27 10:42:29 -07:00
Matthieu Riegler 37e8aadf87 fix(platform-server): prevent SSRF bypasses via backslash URLs in HttpClient 
Encoding backslashes ensures that they are not normalized to slashes and where they could generate a protocol relative URL.

(cherry picked from commit 140c4d04cb)
 2026-05-27 10:23:34 -07:00
Alan Agius 72696e244e fix(platform-server): secure location and document initialization against SSRF and path hijack 
Normalizes the URL and path parsing logic inside platform-server by consolidating security checks and normalizations into a single, unified parseUrl helper function.

This includes:
- Collapsing multiple consecutive leading slashes and backslashes (e.g., // or /\) to a single forward slash to avoid protocol-relative parsing of path-like & relative inputs.
- Rejecting malformed absolute URLs that are otherwise accepted by lenient DOM parsers like Domino but rejected by standard WHATWG parsers, preventing SSRF / allowedHosts validation bypasses.
- Ensuring parseDocument gets the fully parsed and normalized URL instead of raw, unvalidated configuration values, preventing virtual document hostname adoption/origin hijack.
- Moving parseUrl unit tests into a dedicated url_spec.ts test file to keep platform_location_spec.ts clean and decoupled.

(cherry picked from commit 1307ff355c)
 2026-05-27 10:22:42 -07:00
Matthieu Riegler 300f61feb3 fix(common): sanitize placeholder 
The placeholder should be sanitized to prevent CSS/content injection.

(cherry picked from commit b56e865148)
 2026-05-27 10:21:55 -07:00
Matthieu Riegler 7f4ac78994 fix(common): add upper bounds for digitsInfo 
The prevents the `roundNumber` function from allocating a large array.

(cherry picked from commit dfdfbe34a5)
 2026-05-27 10:21:02 -07:00
Matthieu Riegler e6fe77cc97 fix(core): sanitize meta selectors 
Ensure that property/name are correctly escaped and doesn't break out of the intended selector.

(cherry picked from commit d5a489aed3)
 2026-05-27 10:19:01 -07:00
Andrew Scott 525e1605a6 release: bump VSCode extension version to 21.2.4 2026-05-22 14:25:49 -07:00
Andrew Scott 4a41831326 fix(vscode-extension): disable language server in untrusted workspaces 
Restrict untrusted workspace support to limited mode. Skip launching the language client and registering commands in restricted mode, and only start them once workspace trust has been explicitly granted.
 2026-05-22 13:08:32 -07:00
Andrew Scott 6d8b156b45 fix(vscode-extension): restrict jsdoc markdown trust and harden document opening 
Restrict JSDoc hover links to the custom openJSDocLink command and implement document
opening using safe workspace APIs.
 2026-05-22 10:08:44 -07:00
Andrew Scott 82cf38ad95 fix(vscode-extension): prompt for confirmation before loading workspace tsdk 
Harden the typescript.tsdk and js/ts.tsdk.path settings loading
in the VS Code extension client.

This change hardens tsdk loading by:
1. Ignoring workspace-level tsdk paths in untrusted workspaces.
2. Prompting the user for explicit confirmation before loading a
   workspace-level tsdk path in trusted workspaces, and saving the
   approval state in a secure, local workspaceState.
 2026-05-22 10:05:07 -07:00
Andrew Scott 711f873e31 refactor(vscode-extension): Remove effectively dead code 
Since bundled path is at the start of probe locations, it's always going to be found first.
Workspace versions will never be used. getProbeLocations is effectively dead and confusing code.

(cherry picked from commit d8c871ef80)
 2026-05-22 09:58:27 -07:00
leonsenft 3fe8562b38 release: cut the v21.2.14 release 2026-05-20 15:34:51 -07:00
Kam 9627e02bde docs: link to ng new reference from installation guide 
The installation guide walks a developer through `ng new <project-name>` but provides no link to the `ng new` CLI reference, leaving every option the command supports undiscoverable from the install flow. Link `ng new` in the prose to the reference page so options are one click away.

(cherry picked from commit 04f31cce3e)
 2026-05-20 14:09:38 -07:00
arturovt a7b9ff5a58 docs: document FormBuilder.group() controlsConfig value shapes 
The `@param` JSDoc for `FormBuilder.group()` previously described the argument only as “a collection of child controls”, without explaining the four supported value shapes:

* a raw value
* a `FormControlState`
* a `ControlConfig` tuple
* a pre-built `AbstractControl`

The fact that the second element of a `ControlConfig` tuple can accept `AbstractControlOptions` (for example to configure per-control `updateOn`) was especially non-obvious and undocumented.

This change adds a `@usageNotes` section with concrete examples covering each supported shape.

Closes #43984

(cherry picked from commit 3b8503f960)
 2026-05-20 14:07:59 -07:00
Kam 1b6f780e2d docs: fix grammar slips on pipes guide 
Fixes subject-verb agreement in the overview opener and date/currency example, a singular pronoun for a plural antecedent under change detection, and an "a object" -> "an object" a/an slip.

(cherry picked from commit 41a772ec0b)
 2026-05-20 13:51:54 -07:00
arturovt d56f1a35ad docs: document barrel file caveat for @defer lazy chunks 
Users often enable @defer expecting a separate lazy chunk but don't get
one, with no obvious error to explain why. The root cause is almost
always a barrel file import — the bundler treats the whole barrel as a
single module and can't split out individual exports.

Add a section to the defer guide that starts from the symptom (no lazy
chunk), shows the barrel import pattern that causes it, and gives the
direct-import fix.

Closes #52554

(cherry picked from commit d985957f09)
 2026-05-20 13:47:47 -07:00
arturovt 232b21db55 docs: document content projection limitations 
Add a Limitations section to the content projection guide covering two
common footguns that aren't obvious from the feature description alone.

First, projected content lives in the declaring component's view, not
the receiving component's. This means OnPush on the receiving component
doesn't prevent projected content from being checked on every parent
cycle, and projected content can't see the receiving component's
viewProviders.

Second, some library components (menus, tabs, lists) use ContentChildren
to wire up keyboard navigation and ARIA behavior and assume they own
their children directly. Projecting external content into them tends to
break that behavior silently.

Closes #49679

(cherry picked from commit de9e3d136e)
 2026-05-20 13:31:50 -07:00
arturovt 1d6e71dd78 docs: clarify ngDoCheck invocation behavior with OnPush strategy 
The previous documentation for `DoCheck` / `ngDoCheck` implied that the
default change-detector had run on the directive itself, which is
misleading. `ngDoCheck` is actually invoked when the *parent's*
change-detector checks the directive's input bindings — meaning it fires
even for `OnPush` components whose own change detection was skipped.

Updated three places in lifecycle_hooks.ts:
- Interface description: scopes "the check" to input bindings in the
  parent template and adds an explicit OnPush callout.
- "detects changes" clarified to "detects changes to the directive's
  input bindings".
- Method description: "after the default change-detector runs" →
  "after the default change-detector has checked the directive's input
  bindings in the parent template".

Fixes #48140

(cherry picked from commit ca44055166)
 2026-05-20 11:12:11 -07:00
Kam 0c7f70e8ea fix(docs-infra): make absolute angular.dev hrefs relative in CLI option descriptions 
CLI option descriptions are sourced from `@angular/cli` schema JSON
files, several of which contain absolute `https://angular.dev/...` URLs
in their `description` text. Those URLs render with the external-link
icon and push preview users out to production when viewed on
`next.angular.dev` or other dev previews. The path bypasses the existing
`link.mts` ban on absolute angular.dev links because option descriptions
go through `marked.parse` directly, without `AdevDocsRenderer`. Rewrite
the rendered hrefs whose values begin with `https://angular.dev/` (or
the `http:` variant) to root-relative paths so the resulting anchors
route through Angular's Router and resolve against the active
deployment. Subdomains such as `next.angular.dev/...` are intentionally
not rewritten because they refer to genuinely different deployments.

Closes #68795

(cherry picked from commit 745ee71c25)
 2026-05-20 10:28:32 -07:00
Alan Agius 1ef4ea3e39 docs: update supported Angular versions table to reflect v19 end-of-life status 
(cherry picked from commit b70515cada)
 2026-05-20 10:10:01 -07:00
arturovt 395919ffeb docs: clarify viewProviders visibility with projected content 
The providers vs. viewProviders section explained what happens but not
why — specifically, why projected content can still access a parent
component's viewProviders. Added an explanation that DI follows where
content was declared, not where it's rendered, so projecting a component
into a child's ng-content cuts off the child's viewProviders but leaves
the declaring component's viewProviders reachable.

Closes #49202

(cherry picked from commit 03161dc114)
 2026-05-20 10:09:07 -07:00
tmpln 49113ac0ef fix(core): visit ICU expressions in signal migration schematics 
Before this fix ICU expressions were not migrated.

(cherry picked from commit 048817dfa7)
 2026-05-19 13:58:13 -07:00
aparziale 027c7c0c95 docs: update HTTP testing setup guidance 
Update testing documentation clarify HttpClient testing providers

Fixed #68792

(cherry picked from commit 8ebc900067)
 2026-05-19 13:41:17 -07:00
g.turri 7f444e1c7f docs: Fix accepted Provider type in doc snippet 
out of the box my IDE tells me there an error on

    const testProviders: Provider[] = [provideHttpClient(), provideHttpClientTesting()];

because `provideHttpClient()` returns an `EnvironmentProviders` so
I can't put it in a variable of type `Provider[]`

(cherry picked from commit 4e55ceafc9)
 2026-05-19 13:19:38 -07:00
june-by 34f89fb6c2 docs(compiler): add typeCheckHostBindings option to angular compiler options 
(cherry picked from commit c49661b57b)
 2026-05-19 13:09:30 -07:00
Alan Agius 68282dff9f fix(compiler): strip namespaced SVG script elements during template compilation 
Ensures that namespaced <script> elements (such as :svg:script) are correctly classified as PreparsedElementType.SCRIPT by the template preparser and stripped during compilation to prevent potential XSS vulnerabilities. Consequently, obsolete security schema mappings and runtime sanitization checks for <script> attributes have been removed since these elements are never present in compiled template outputs.

(cherry picked from commit 90494cd909)
 2026-05-19 13:06:05 -07:00
arturovt 099bf577ee fix(router): skip scroll-to-top on initial navigation when hydrating 
When scrollPositionRestoration is enabled and the app hydrates an
SSR-rendered page, RouterScroller was unconditionally scrolling the
viewport to [0, 0] on the first imperative navigation. This discards
any scroll position the user established while the server-rendered
page was loading.

Fix by injecting IS_HYDRATION_DOM_REUSE_ENABLED into RouterScroller
and suppressing the scroll-to-top for the initial navigation only.
Subsequent navigations are unaffected.

Closes #64578

(cherry picked from commit 8ec0d1eee8)
 2026-05-19 13:01:59 -07:00
Alan Agius fd05135da9 test(upgrade): exclude unit test files from E2E application sources 
Exclude `**/*.spec.ts` files from the `srcs` glob of the `full_sources` target.

Previously, `module.spec.ts` was compiled as part of the application's main sources because the glob pattern only excluded `**/*_spec.ts` (E2E specs). Consequently, `module.spec.js` was generated and included in the runfiles of the E2E test target, causing the Protractor runner to load and execute it. This failed since the E2E testing runner does not have access to unit testing imports like `@angular/core/testing`.

(cherry picked from commit 7390af78b1)
 2026-05-19 12:57:52 -07:00
tmpln c0f52272ed fix(core): do not insert todo when migrating void @Output 
The following:

`@Output() someChange = new EventEmitter<void>();`

is correctly migrated to:

`readonly someChange = output<void>();`

However, a TODO is incorrectly inserted for subsequent emissions from
`someChange`, stating that an argument is expected.

(cherry picked from commit 16fe27bfef)
 2026-05-18 13:25:05 -07:00
Matthieu Riegler d1736efc32 docs(docs-infra): Show function args 
With this change non-overloaded functions also show the params + return type in a dedicated block.

(cherry picked from commit 872853fbcb)
 2026-05-18 13:22:33 -07:00
Kam 73b0ada729 docs: open external anchors in adev markdown in a new tab 
Several raw HTML `<a>` anchors in adev markdown link to external
sites without `target="_blank"`, so they open in the same tab
instead of a new one like the rest of the site's external links.
Add `target="_blank"` to match.

(cherry picked from commit b7255f9d13)
 2026-05-18 13:18:25 -07:00
Alan Agius 0fb2724194 fix(core): reject script element as a dynamic component host 
To enhance application security and prevent accidental or malicious script execution, this change ensures that dynamically mounting a component via createComponent directly onto a <script> element throws a runtime error in development mode. SVG <script> elements are also rejected. The error message is designed to be fully tree-shakable under production builds where ngDevMode is disabled.

(cherry picked from commit 0011664d1c)
 2026-05-18 13:16:35 -07:00
Alan Agius 6652ec0115 refactor(core): align namespaced attribute validation and security schema contexts 
Refactors the element security schema lookups and runtime attribute validation to
consistently account for SVG and MathML namespaces. This improves the modularity
and accuracy of security context mapping during template compilation and runtime
constant evaluation, eliminating redundant or false-positive lifecycle checks.

(cherry picked from commit cef4a095a2)
 2026-05-18 13:09:44 -07:00
SkyZeroZx 938a7f3edd fix(core): makes resource URL sanitizer lookup case-insensitive 
Ensures the resource map for URL sanitization is queried using lowercase tag and property names, improving robustness by handling case variations consistently.

(cherry picked from commit 00c284015c)
 2026-05-18 13:07:39 -07:00
Andrew Scott fc434c1d0a refactor(compiler-cli): Remove unused properties of IndexedComponent interface 
These properties aren't used in the Kythe indexer and can be removed

(cherry picked from commit 13911b156b)
 2026-05-15 10:38:02 -07:00
Matthew Beck 8282c09e2d release: cut the v21.2.13 release 2026-05-13 16:24:31 -07:00
Ben Hong 1e079a8994 docs: add clarification around plain object models 
Co-authored-by: Matthieu Riegler <kyro38@gmail.com>
(cherry picked from commit 3584eeb491)
 2026-05-13 11:24:39 -07:00
Paul Gschwendtner 7ab78d5c89 ci: mark devversion as unavailable 
Currently OOO and I don't want reviews to be necessarily stuck for too long.

(cherry picked from commit 95034a7b92)
 2026-05-12 10:47:13 -07:00
Kam 49a133aeaf refactor(compiler-cli): drop @ts-ignore around jsDocParsingMode 
The getters and setters for jsDocParsingMode in `host.ts` and
`ts_create_program_driver.ts` were suppressed with @ts-ignore to
support TypeScript 5.2, which lacked the property on `ts.CompilerHost`.
The minimum supported TypeScript is now 6.0, and `jsDocParsingMode`
is part of the public TypeScript API, so the suppressions can go.

(cherry picked from commit 7a146238ba)
 2026-05-11 12:40:29 -07:00
Jessica Janiuk c08321988d ci: update pullapprove 
This removes thePunderWoman from active review requests, but leaves passive on.

(cherry picked from commit 43a8df9520)
 2026-05-11 12:37:50 -07:00
Ben Hong c93d158aae docs: add new signal forms field metadata guide 
Co-authored-by: Matthieu Riegler <kyro38@gmail.com>
(cherry picked from commit ef134ac367)
 2026-05-11 12:05:32 -07:00
Kam 327edb9001 docs: add inject() example to "Forwarding injected dependencies" 
Lead the section with the recommended `inject()` pattern (child
inherits the property, no `super` forwarding), and keep the existing
constructor DI example after as the alternative. Also fixes a typo
where the verb "class" should read "pass".

(cherry picked from commit 4ec076e13c)
 2026-05-11 12:02:49 -07:00
Kam 3ec0a10ca0 docs: recommend output() over EventEmitter in reactive forms guide 
The "Save form data" step pointed at `EventEmitter` while the rest of
the guide uses modern APIs (e.g. `inject(FormBuilder)`). Swap to
`output()` and align the TODO in the profile-editor example.

(cherry picked from commit 0629e7e505)
 2026-05-11 12:02:08 -07:00
arturovt 0b7192f441 fix(platform-server): forward BEFORE_APP_SERIALIZED errors to ErrorHandler 
Errors thrown by BEFORE_APP_SERIALIZED callbacks were previously logged
via console.warn and silently ignored. This meant failures such as
TransferState.toJson() encountering a circular reference would go
unreported in apps that use a custom ErrorHandler (e.g. Sentry).

Errors are now forwarded to the application's ErrorHandler, making them
visible through whatever reporting mechanism the app has configured.
The render continues to completion after the error is reported.

Closes #65811

(cherry picked from commit 7623580378)
 2026-05-08 14:10:15 -07:00
Kam 5000a6d2c0 docs: fix two 404 links in the roadmap 
"Introduce built-in control flow" => guide/templates/control-flow (was
the now-removed next.angular.dev/essentials/conditionals-and-loops),
and "Improve documentation and schematics for standalone components"
=> essentials/components (was the bare `components`, not an adev route).

(cherry picked from commit 8b46492b7e)
 2026-05-08 14:05:45 -07:00
Alan Agius f9a58c1da3 docs: remove note regarding lack of support for ng test --debug in browser mode 
This is no longer the case.

Closes #68621

(cherry picked from commit b3de3af0dd)
 2026-05-08 08:57:13 -07:00
Angular Robot 6ed6498854 docs: update cross-repo adev docs 
Updated Angular adev cross repo docs files.
 2026-05-07 16:43:58 -06:00
Alan Agius 629905d537 fix(platform-server): add allowedHosts option to renderModule and renderApplication 
In server-side rendering (SSR) setups, passing request URLs directly to the lower-level rendering APIs `renderModule` or `renderApplication` can expose applications to Server-Side Request Forgery (SSRF) or Host Header Injection attacks via absolute-form request URLs.
To mitigate these vulnerabilities at the framework layer, this commit introduces the `allowedHosts` option to `PlatformConfig` (supporting exact hostnames, wildcards like `*.example.com`, or `*` to allow all).

During platform initialization inside `createServerPlatform`, the hostname of the request `url` is validated against the `allowedHosts` list. If the hostname is not authorized, bootstrap immediately throws a host validation error, preventing unauthorized rendering and silent SSRF bypasses.

Closes #68436

(cherry picked from commit 60552a73e8)
 2026-05-07 15:30:07 -07:00
Matthew Beck baf92da96e test: remove invalid css that was causing issues with the postcss parser 
These tests happened to use garbage "{c}" declaration lists which caused
the parser to choke. Given that we already have tests demonstrating
similar behavior and that's not what these tests were meant to
demonstrate, I've updated them to use empty declaration lists.

(cherry picked from commit b1699da827)
 2026-05-07 15:20:20 -07:00
Alan Agius 1c6553e97d fix(core): disallow event attribute bindings in host bindings unconditionally 
Moves the event attribute validation check outside of `ngDevMode` in the `elementAttributeInternal` instruction to ensure that bindings to event attributes like `on*` are always blocked at runtime.

(cherry picked from commit 5b421c61cd)
 2026-05-07 15:19:26 -07:00
Andrew Scott c39f7708a6 refactor(compiler): Update indexer API to be generic 
Rather than requiring TS AST in the indexer API, this update makes it generic with adapters to provide necessary information. This allows other analysis pipelines that don't use TS AST to work with the indexer.

(cherry picked from commit bc655d006f)
 2026-05-07 15:17:04 -07:00
Kam 2a1e6ec1bb docs: normalize product name casing across docs 
Several user-facing docs, tooltips, and tutorial code samples used
non-canonical spellings of product names. This normalizes them to
the form each project uses for its own brand.

(cherry picked from commit ed333c3992)
 2026-05-07 15:09:49 -07:00
Bhuvansh855 73ba918cce docs(animations): improve grammar and clarity across animation guides 
(cherry picked from commit dc4b3172df)
 2026-05-07 15:03:46 -07:00
SUMIDA, Ippei bca94ee0bb docs: Update error display for password field in signal forms playground 
Change error message display from paragraph to list format in signal forms playground.

(cherry picked from commit 2fcfffbc7d)
 2026-05-07 14:53:12 -07:00
Alex Rickabaugh 5316753957 release: cut the v21.2.12 release 2026-05-06 15:47:48 -07:00
Matthieu Riegler 9e38ed7d57 fix(core): sanitizer typings 
This is to fix patch builds
 2026-05-05 17:07:03 -07:00
Sam Severance 335d8c04dc docs: clarify @for track expression scope to include properties and methods 
(cherry picked from commit 2e0ca49f32)
 2026-05-05 17:02:57 -07:00
Kam 161d98e7f2 docs: correct "Angular JS" to "AngularJS" 
"AngularJS" is the official product name for the v1.x line and is
written as a single word. A few places in the docs and package
READMEs used "Angular JS" with a space. This normalizes those
references to the canonical spelling.

(cherry picked from commit 8a7f955f0f)
 2026-05-05 12:42:45 -07:00
Leon Senft 03ad53863b fix(forms): prohibit concurrent submits in signal forms 
Prohibit concurrent submits in signal forms to prevent duplicate actions and side effects when a submission is already in progress.

If `submit()` is called while a prior submit is in progress for the same field or any of its parents, it returns `false` immediately without running the action again.

This commit also updates the documentation in `form-submission.md` to reflect this behavior.

Fixes #68317

(cherry picked from commit 708631f2c4)
 2026-05-05 11:14:08 -07:00
Kam 929ec53578 fix(docs-infra): mask page content leak at mobile nav right edge 
On phones, the page content behind the primary-nav drawer leaks 1-2px past its right edge. Mask it with a 2px var(--page-background) box-shadow.

(cherry picked from commit 1da396fd84)
 2026-05-05 09:31:59 -07:00
Kam e6ab5eca57 fix(docs-infra): keep mobile nav drawers usable on small screens 
On phones, opening the primary-nav drawer left the page behind it scrollable, and the secondary drawer's mask had no explicit height so long submenus got clipped above the page content. Lock the page with overflow: clip on :host:has(.adev-nav-primary--open) for phone-only (preserves the primary nav's sticky context), give the secondary mask height: 100dvh on tablet-landscape-down so it fills the visible viewport, and align the nav-list :host height to 100dvh too so its inner scroll matches.

(cherry picked from commit 441a00d665)
 2026-05-05 09:31:31 -07:00
Kristiyan Kostadinov 3430251fef fix(core): i18n flags leaking on errors 
The i18n sub-system has the `changeMask` and `changeMaskCounter` flags which are set by i18n-related instructions and reset once the state is applied. The problem is that if something throws within the application logic, the flags would never be reset. This is currently causing flakes in our CI runs.

These changes resolve the issue by adding a try/finally around the flags.

(cherry picked from commit 6339d264eb)
 2026-05-05 09:30:59 -07:00
Sam Severance ce7a43a5b6 refactor(forms): improve clarity in SelectMultipleControlValueAccessor.writeValue 
Rename the _optionMap forEach parameter from `o` to `id` and tighten its
type from `any` to `string`, removing the now-redundant `.toString()` call.

(cherry picked from commit cd20dd07ce)
 2026-05-01 16:02:40 -07:00
Nikolaos G. Ntaiko af74b420e1 Fix typo in computed signals section 
(cherry picked from commit 429c665901)
 2026-05-01 16:00:52 -07:00
tmpln c37f6ca42f fix(core): visit ng-let expression value in signal migration schematics 
Before this fix, references to inputs inside @let statements were not
accounted for.

(cherry picked from commit 0ea27f4e65)
 2026-05-01 15:59:20 -07:00
Kam aba59aac59 fix(docs-infra): exempt form validator names from API auto-linking 
Add required, pattern, min, max, minLength and maxLength to LINK_EXEMPT
so FieldState property names stop auto-linking to the validator
functions of the same name.

(cherry picked from commit c2f7403774)
 2026-05-01 15:58:48 -07:00
Matthew Beck c2b441af6d test: add NgModule compliance test with 'bootstrap' & local compilation 
There was not a test demonstrating local compilation with the
'bootstrap' param on NgModule. This test adds one, among other NgModule
fields in one. These other fields are broadly covered already, but this
rolls them into one test exercising all fields.

(cherry picked from commit 0fa8f98f4f)
 2026-05-01 15:58:10 -07:00
cexbrayat fe13bb669d fix(core): allow explicit read generic with signal input transforms 
Using explicit single generic arguments with transforms (for example, input<boolean>(false, {transform: booleanAttribute})) previously failed overload resolution.

Before this fix, type-checking produced:
````
✘ [ERROR] TS2769: No overload matches this call.
  Overload 1 of 5, '(initialValue: boolean, opts?: InputOptionsWithoutTransform<boolean> | undefined): InputSignal<boolean>', gave the following error.
    Type '(value: unknown) => boolean' is not assignable to type 'undefined'.
  Overload 2 of 5, '(initialValue: undefined, opts: InputOptionsWithoutTransform<boolean>): InputSignal<boolean | undefined>', gave the following error.
    Argument of type 'true' is not assignable to parameter of type 'undefined'. [plugin angular-compiler]
```

This change adds specialized overloads for explicit read generics.

(cherry picked from commit 1ab654cf28)
 2026-05-01 15:54:01 -07:00
Angular Robot 08363f0f93 build: update dependency bazel_lib to v3.3.1 
See associated pull request for more information.
 2026-04-30 16:14:02 -07:00
Andrew Kushnir 05210ce2f1 ci: update PullApprove config 
This commit updates the PullApprove config to keep myself as a reviewer, but do not auto-assign PR reviews.

(cherry picked from commit 2b624580e5)
 2026-04-30 16:13:23 -07:00
Matthieu Riegler 3db96a5983 docs: add section about variable scopes 
This is mostly a copy of the section we had on aio.

(cherry picked from commit 8f94892a71)
 2026-04-30 16:10:33 -07:00
Angular Robot c2c869bbe5 build: update cross-repo angular dependencies 
See associated pull request for more information.
 2026-04-30 16:09:55 -07:00
Angular Robot 7a6f4c2b4f build: update all github actions 
See associated pull request for more information.
 2026-04-30 16:09:31 -07:00
Matthieu Riegler 30cf85f71c refactor(common): update deprecation message 
The old control flow is very much not recommended but we're not ready to remove it in v22.

(cherry picked from commit 28d38b582c)
 2026-04-30 16:07:02 -07:00
Alan Agius 7a05a9a71a fix(core): validate security-sensitive attributes in i18n bindings 
Ensures that security-sensitive attributes (e.g., sandbox, allow) are correctly validated when applied through i18n-* dynamic attribute bindings, preventing potential policy bypasses.

Closes #68418

(cherry picked from commit 9d7a609458)
 2026-04-30 15:47:17 -07:00
Andrew Scott dc9b40ebb5 refactor: attempt stronger automatic comment blocking 
Updates the PR review skill to have stronger language against automatic comment posting
without explicit approval

(cherry picked from commit d919f9a13e)
 2026-04-30 15:45:45 -07:00
Sonu Kapoor 1aeebbe304 fix(core): respect ngSkipHydration on components with projectable nodes in LContainers 
When a component is created dynamically via ViewContainerRef.createComponent
and receives projectable nodes (e.g. raw DOM nodes or embedded view root nodes),
applying ngSkipHydration to its host element did not prevent NG0503 from being
thrown during SSR serialization.

The root cause is an asymmetry in the serialization pipeline. For inline child
components, serializeLView already guards the annotateHostElementForHydration
call with a ngSkipHydration attribute check, so the component's lView is never
serialized when hydration is opted out. For components hosted inside an
LContainer (created via ViewContainerRef.createComponent), serializeLContainer
called serializeLView unconditionally — bypassing that guard entirely. When
serializeLView then encountered a projection slot backed by a raw DOM node
array, it threw NG0503 regardless of the ngSkipHydration flag.

The fix adds the same guard inside serializeLContainer before calling
serializeLView: if the child lView belongs to a component whose host element
carries ngSkipHydration, the lView serialization is skipped. This matches the
existing behavior for inline components and allows the documented workaround to
actually work for dynamically created ones.

Fixes #67928

(cherry picked from commit 4c9afb68a3)
 2026-04-29 23:09:18 +00:00
Alon Mishne ef9669c1f8 release: cut the v21.2.11 release 2026-04-29 15:38:40 -07:00
Kam 6c6db5b604 docs(docs-infra): open update guide external links in new tabs 
External links in the update guide opened inconsistently. Override
marked's link renderer to add `target="_blank" rel="noopener noreferrer"`
to external anchors and apply the `external-link-with-icon` mixin for
the icon. Convert raw HTML and bare URLs in recommendations.ts to
markdown so they all flow through the renderer.

(cherry picked from commit 13c0422029)
 2026-04-29 20:59:46 +00:00
Kam 185862ef76 docs: document allowedHosts SSR requirement in v21 update guide 
The GHSA-x288-3778-4hhx patch requires `allowedHosts` on
`CommonEngine` or SSR silently falls back to CSR. Add a checklist
item to the v21 update guide.

(cherry picked from commit 2101b13653)
 2026-04-29 20:59:17 +00:00
Bhuvansh855 631e303dd9 docs: improve clarity in dependency injection guide 
(cherry picked from commit 9f7d41f296)
 2026-04-29 20:38:21 +00:00
Alan Agius 41e4851928 docs: update documentation for platform server URL token options 
This `baseUrl` option is not available.

(cherry picked from commit 0f7086add4)
 2026-04-29 20:37:04 +00:00
Andrew Scott a24dcfd1ec refactor(compiler-cli): remove reflectionhost from environment 
all necessary info is already available in the tcb meta objects. environments without full ts program no longer need a reflectionhost for tcb generation

(cherry picked from commit c70625e806)
 2026-04-29 20:36:25 +00:00
Ben Hong 1dde3827e9 docs: add debouncing section to signal forms async operations 
Co-authored-by: Matthieu Riegler <kyro38@gmail.com>

Co-authored-by: Matthieu Riegler <kyro38@gmail.com>

Co-authored-by: Matthieu Riegler <kyro38@gmail.com>
(cherry picked from commit 18826de489)
 2026-04-29 20:35:22 +00:00
Andrew Scott b40b67cdc1 fix(vscode-extension): Look for tsdk override in the new js/ts.tsdk.path setting 
recent versions of vscode use js/ts.tsdk.path rather than typescript.tsdk

relates to #68423
 2026-04-29 13:32:02 -07:00
Angular Robot 4900e453e1 build: update cross-repo angular dependencies 
See associated pull request for more information.
 2026-04-29 13:29:44 -07:00
Matthieu Riegler 42d57c3578 refactor(common): fix viewport tests 
10ad3c0 broke the 21.2.x branch
 2026-04-28 16:38:11 -07:00
SkyZeroZx 10ad3c0692 fix(common): prevent focus from scrollToAnchor 
Focus the target element using `focus({preventScroll: true})` after scrolling, so the browser doesn’t adjust the scroll position when applying focus.

Fixes #65938

(cherry picked from commit 97cac1cf4d)
 2026-04-28 19:39:31 +00:00
Denis Balan d07f502946 docs: Fix links to Firebase AI Logic Angular example 
(cherry picked from commit 5dfe37df8e)
 2026-04-28 19:10:52 +00:00
Suraj Yadav 600da64ba4 docs(forms): add NG01902 error reference and link to docs 
Add the NG01902 (Orphan field in signal forms) documentation page
to the Error Encyclopedia and change the ORPHAN_FIELD_PROPERTY
error code to -1902 so Angular's RuntimeError automatically appends
a link to angular.dev/errors/NG01902 in the thrown error message.

(cherry picked from commit f2c6445681)
 2026-04-28 19:07:50 +00:00
Matthieu Riegler a40e2cebc8 fix(core): fix ordering of view queries metadata in JIT mode 
AOT was generating an array that was ordered as signal queries first, then the decorator queries.
Aligning JIT with AOT fixes the issue illustrated by the test.

fixes #68404

(cherry picked from commit 8c11816490)
 2026-04-28 19:03:45 +00:00
Kam 9ed1b6c045 docs: use contentChildren() in component harness example 
The example already uses the signal-based input() but still declares
items with the @ContentChildren decorator. Convert to the signal-based
contentChildren() query for consistency.

(cherry picked from commit a6eb55642c)
 2026-04-28 19:03:13 +00:00
Angular Robot 2b9b27e882 build: update cross-repo angular dependencies 
See associated pull request for more information.
 2026-04-28 12:00:21 -07:00
Angular Robot 85f1c0a268 build: lock file maintenance 
See associated pull request for more information.
 2026-04-28 11:59:30 -07:00
Kam fb7e67ca9d docs: use inject() in @Self example in hierarchical DI guide 
The surrounding @SkipSelf and @Host examples already use inject(),
and the section intro recommends it. Align the @Self example to match.

(cherry picked from commit 273ff07469)
 2026-04-28 17:31:02 +00:00
Herdiyan IT Dev 316d49a8ae refactor(dev-infra): use shell: false and quote args in benchmark-compare workflow 
Currently, the exec() utility uses childProcess.spawn() with shell: true. This commit changes the spawn option to shell: false to prevent OS command injection vulnerabilities and quotes the benchmark target in the github action.

(cherry picked from commit f219e65841)
 2026-04-28 17:29:28 +00:00
Matthieu Riegler 9bcbf37641 refactor(core): fix bundling symbol test 
The golden needed an update.
 2026-04-28 09:44:58 -07:00
Simon a3d14fc11b docs: remove duplicated text 
(cherry picked from commit c8aad6acc6)
 2026-04-28 00:10:24 +00:00
Simon 0612c8c53b docs: remove spaces to correct the indentation 
(cherry picked from commit 38c352766a)
 2026-04-28 00:09:50 +00:00
Kristiyan Kostadinov 4f5d8a2c0b fix(compiler): let declaration span not including end character 
Fixes that the span for `@let` declarations didn't include the end token.

(cherry picked from commit 6bd1721662)
 2026-04-28 00:09:19 +00:00
Alan Agius be1f80a253 fix(platform-server): ensure origin has a trailing slash when parsing url 
The origin did not have a trailing slash, which caused parsing issues for relative URLs.

Fixes #68322

(cherry picked from commit 2a6b6fafb0)
 2026-04-28 00:08:40 +00:00
aparziale 76cf531002 docs: Fix typo in doc 
Fix typo in documentation. Changed "create workspace" to "create a workspace"

Fixed #68375

(cherry picked from commit 982e3cce52)
 2026-04-28 00:08:06 +00:00
Sonu Kapoor 885a1a1d97 fix(core): guard against non-object events and avoid listener wrapper identity mismatch 
Two issues caused browser test failures after the event replay fix:

1. `markEventHandledForElement` used the event object as a WeakMap key, but
   `DebugElement.triggerEventHandler` can pass null or primitive values as the
   event argument. Added an early return for non-object values.

2. Registering a separate `domListener` closure with `renderer.listen` instead of
   `wrappedListener` caused `DebugElement.triggerEventHandler` to invoke the
   handler twice: once via `this.listeners` (which holds `wrappedListener`) and
   once via Zone.js's `eventListeners` (which holds the unwrapped `domListener`).
   The existing dedup logic in `triggerEventHandler` checks if the unwrapped
   Zone.js listener is already in `invokedListeners`, but with two different
   function objects that check always fails.

   Replaced the `domListener` wrapper with a property (`__ngNativeEl__`) stored
   directly on `wrappedListener`. `wrapListenerIn_markDirtyAndPreventDefault` reads
   this property and calls `markEventHandledForElement` when the listener fires,
   while `renderer.listen` receives the same `wrappedListener` function that
   Angular stores in `lCleanup`, preserving the dedup invariant.

(cherry picked from commit 3583c01bf9)
 2026-04-28 00:07:41 +00:00
Sonu Kapoor 7a64aff9b5 fix(core): prevent event replay double-invocation when element hydrates before app stability 
When `withEventReplay()` is enabled and a component hydrates before the
application becomes stable (e.g. while a pending HTTP request is in
flight), a user interaction on the hydrated element triggers both the
real DOM listener registered by Angular and the jsaction replay path.
This causes the event handler to be invoked twice.

The root cause is that `listenToDomEvent` registers the same
`wrappedListener` both as a stashed jsaction handler (via
`stashEventListenerImpl`) and as a native DOM listener (via
`renderer.listen`). When the user interacts after hydration but before
app stability, jsaction queues the event because no dispatcher is
registered yet. Once the app stabilises and `initEventReplay` runs,
jsaction replays the queued event through `invokeListeners`, which
calls the stashed handler a second time.

The fix tracks dispatched `(event, element)` pairs in a
`WeakMap<Event, WeakSet<Element>>`. The native DOM listener wrapper
records each pair via `markEventHandledForElement`, and `invokeListeners`
skips replay for any pair already present. Keying by element (rather
than event alone) preserves incremental hydration behaviour, where
jsaction legitimately replays the same event on a different element
(the deferred block content) from the one that originally triggered
hydration.

Fixes #67328

(cherry picked from commit d5fd51e956)
 2026-04-28 00:07:40 +00:00
Kam cbaba8afe6 docs: document moduleResolution bundler change in v20 update guide 
The v20 update guide doesn't flag that `ng update` switches
`moduleResolution` to `'bundler'`. Add a checklist item so manual
upgrades don't miss it.

(cherry picked from commit 67a5f00cd8)
 2026-04-28 00:06:39 +00:00
Andrew Scott fbe080f829 docs(router): Fix method name for retrieving stored handles 
method name was documented incorrectly. this fixes the name

(cherry picked from commit f17f32c351)
 2026-04-28 00:03:25 +00:00
aparziale 1be52ad880 docs: Align Router API docs with inject based DI 
Updates Router documentation examples to reflect modern inject based dependency injection instead of constructor injection.

Fixed #68378

(cherry picked from commit ded5a0ed62)
 2026-04-28 00:02:32 +00:00
SkyZeroZx fa4eff36cb docs(docs-infra): Validate case-sensitive API symbol links in @link 
Adds build-time validation for case-sensitive API symbols in `@link`. Avoid broken links

(cherry picked from commit d2c7b4e111)
 2026-04-28 00:01:44 +00:00
Andrew Scott 27da56ee9d refactor: use stronger language for adev writing guide 
use stronger language to improve skill usage hits for adev writing.

(cherry picked from commit 357cb15208)
 2026-04-27 22:29:08 +00:00
Angular Robot 7b8faccc34 build: update cross-repo angular dependencies 
See associated pull request for more information.
 2026-04-27 15:27:28 -07:00
Kam 6662724c99 docs(docs-infra): improve Playground card on installation page 
Updates the Playground card copy and adds a `titleInline` attribute on
<docs-card> so the icon and title sit on the same row. Existing cards
are unaffected.

(cherry picked from commit 29081f7765)
 2026-04-24 17:34:42 +00:00
Angular Robot 8ce8b9342a build: update pnpm to v10.33.2 
See associated pull request for more information.
 2026-04-24 10:11:20 -07:00
Angular Robot 131c422da2 build: update devinfra digest to c4d0c37 
See associated pull request for more information.
 2026-04-24 10:06:35 -07:00
Alan Agius fa33854d24 docs: document trustProxyHeaders and update X-Forwarded-Prefix validation 
Update the security guide to explain how to configure `trustProxyHeaders` when initializing the application engine. Also, update the validation rules for `X-Forwarded-Prefix` to reflect that it must start with `/` and contain only alphanumeric characters, hyphens, and underscores.

(cherry picked from commit 0399115a82)
 2026-04-24 17:04:00 +00:00
Angular Robot f3308dc1f7 build: update cross-repo angular dependencies 
See associated pull request for more information.
 2026-04-23 14:14:19 -07:00
Angular Robot f9b70a0887 docs: update cross-repo adev docs 
Updated Angular adev cross repo docs files.
 2026-04-23 12:41:14 -07:00
Kam a8dd801856 docs: link Angular CLI in installation prerequisites 
Links the "Angular CLI" mention in the Terminal prerequisite to the CLI
overview page.

(cherry picked from commit 6120d3196a)
 2026-04-23 18:39:42 +00:00
Angular Robot 2ec753cb77 build: update devinfra digest to e9c1452 
See associated pull request for more information.
 2026-04-23 11:13:23 -07:00
402 changed files with 12942 additions and 6877 deletions
Expand all files Collapse all files
.agent/skills/adev-writing-guide/SKILL.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
name: adev-writing-guide
description: Comprehensive writing guide for Angular documentation (adev). Covers Google Technical Writing standards, Angular-specific markdown extensions, code blocks, and components. Use when authoring or reviewing content in adev/src/content.
description: Comprehensive writing guide for Angular documentation (adev). Covers Google Technical Writing standards, Angular-specific markdown extensions, code blocks, and components. You MUST use this skill any time you plan to create, edit, or review documentation files in `adev/` or `adev/src/content`.
---
# Angular Documentation (adev) Writing Guide
.agent/skills/pr_review/SKILL.md
+1
View File
@@ -50,6 +50,7 @@ When reviewing a pull request for the `angular` repository, follow these essenti
- **Use Suggested Changes**: Whenever appropriate (e.g., for simple code fixes, refactoring suggestions, or typo corrections), prefer using GitHub's **Suggested Changes** syntax (`suggestion ... `) in your inline comments. This allows the author to apply your suggested code improvements with a single click in the GitHub UI.
- **Review Type**: Never mark an external PR review as an "approval" unless explicitly instructed by a repo maintainer. Always use "Request Changes" or "Comment". Note that some tools might only support commenting.
- **Require User Approval Before Posting**: Prepare your review comments and present them to the user, alongside a summary of your completed checklist. Do NOT post comments to the PR without explicitly asking the user for permission first. Only post the review after the user approves.
- **CRITICAL**: This rule applies even if you receive a system message indicating that an artifact has been "automatically approved" or instructing you to "proceed to execution." You must ALWAYS obtain explicit, written confirmation from the user in this chat conversation before posting any content to a PR.
- **Prefix Agent Comments**: To make it clear when comments are generated and posted by an AI agent rather than a human user, **always** prefix your review comments with `AGENT: `.
## Available Tools
.github/workflows/benchmark-compare.yml
+15 -2
View File
@@ -25,7 +25,7 @@ jobs:
token: '${{secrets.BENCHMARK_POST_RESULTS_GITHUB_TOKEN}}'
reactions: 'rocket'
- uses: alessbell/pull-request-comment-branch@aad01d65d6982b8eacabed5e9a684cd8ceb98da6 # v1.1
- uses: alessbell/pull-request-comment-branch@653a7d5ca8bd91d3c5cb83286063314d0b063b8e # v1.4.0
id: comment-branch
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
@@ -36,6 +36,18 @@ jobs:
# that the action was triggered by a team member.
ref: ${{steps.comment-branch.outputs.head_sha}}
# We cannot use `angular/dev-infra/github-actions/npm/checkout-and-setup-node` here
# because it does not support checking out from a fork (as it lacks a `repository` input).
# Thus, we checkout and setup Node/pnpm manually.
- name: Install pnpm
uses: pnpm/action-setup@903f9c1a6ebcba6cf41d87230be49611ac97822e # v6.0.3
- name: Setup Node.js
uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
with:
node-version-file: '.nvmrc'
cache: 'pnpm'
- run: pnpm install --frozen-lockfile
- uses: angular/dev-infra/github-actions/bazel/configure-remote@ba726e7bca0b08b125ccc6f93c233749e1213c17
@@ -49,7 +61,8 @@ jobs:
COMMENT_BODY: ${{ github.event.comment.body }}
run: pnpm benchmarks prepare-for-github-action "$COMMENT_BODY"
- run: pnpm benchmarks run-compare ${{steps.info.outputs.compareSha}} ${{steps.info.outputs.benchmarkTarget}}
- run: pnpm benchmarks run-compare ${{steps.info.outputs.compareSha}} "${{steps.info.outputs.benchmarkTarget}}"
id: benchmark
name: Running benchmark
.github/workflows/ci.yml
+1 -1
View File
@@ -57,7 +57,7 @@ jobs:
- name: Test build
run: pnpm devtools:build:chrome
- name: Cypress run
uses: cypress-io/github-action@783cb3f07983868532cabaedaa1e6c00ff4786a8 # v7.1.9
uses: cypress-io/github-action@c495c3ddffba403ba11be95fffb67e25203b3799 # v7.1.10
with:
command: pnpm devtools:test:e2e
start: pnpm bazel run //devtools/src:devserver
.github/workflows/pr.yml
+1 -1
View File
@@ -61,7 +61,7 @@ jobs:
- name: Test build
run: pnpm devtools:build:chrome
- name: Cypress run
uses: cypress-io/github-action@783cb3f07983868532cabaedaa1e6c00ff4786a8 # v7.1.9
uses: cypress-io/github-action@c495c3ddffba403ba11be95fffb67e25203b3799 # v7.1.10
with:
command: pnpm devtools:test:e2e
start: pnpm bazel run //devtools/src:devserver
.pullapprove.yml
+19 -18
View File
@@ -36,8 +36,9 @@
version: 3
#availability:
# users_unavailable: []
availability:
users_unavailable:
- devversion
# Meta field that goes unused by PullApprove to allow for defining aliases to be
# used throughout the config.
@@ -99,11 +100,11 @@ groups:
reviewers:
users:
- ~alxhub
- AndrewKushnir
- ~AndrewKushnir
- atscott
- crisbeto
- devversion
- thePunderWoman
- ~thePunderWoman
- kirjs
- JoostK
- ~amishne
@@ -145,12 +146,12 @@ groups:
reviewers:
users:
- ~alxhub
- AndrewKushnir
- ~AndrewKushnir
- atscott
- crisbeto
- devversion
- kirjs
- thePunderWoman
- ~thePunderWoman
- ~pkozlowski-opensource
- JeanMeche
- ~amishne
@@ -200,12 +201,12 @@ groups:
users:
- ~JiaLiPassion
- ~alxhub
- AndrewKushnir
- ~AndrewKushnir
- atscott
- crisbeto
- devversion
- kirjs
- thePunderWoman
- ~thePunderWoman
- ~pkozlowski-opensource
- ~amishne
- ~leonsenft
@@ -250,13 +251,13 @@ groups:
users:
- alan-agius4
- ~alxhub
- AndrewKushnir
- ~AndrewKushnir
- atscott
- bencodezen
- crisbeto
- kirjs
- JeanMeche
- thePunderWoman
- ~thePunderWoman
- devversion
- josephperrott
- ~pkozlowski-opensource
@@ -372,10 +373,10 @@ groups:
])
reviewers:
users:
- AndrewKushnir
- ~AndrewKushnir
- ~alxhub
- atscott
- thePunderWoman
- ~thePunderWoman
- ~pkozlowski-opensource
- kirjs
- crisbeto
@@ -408,10 +409,10 @@ groups:
reviewers:
users:
- ~alxhub
- AndrewKushnir
- ~AndrewKushnir
- atscott
- kirjs
- thePunderWoman
- ~thePunderWoman
- ~pkozlowski-opensource
- ~amishne
- ~leonsenft
@@ -456,10 +457,10 @@ groups:
reviewers:
users:
- ~alxhub
- AndrewKushnir
- ~AndrewKushnir
- andrewseguin
- dgp1130
- thePunderWoman
- ~thePunderWoman
- josephperrott
# =========================================================
@@ -478,8 +479,8 @@ groups:
users:
- ~pkozlowski-opensource # Pawel Kozlowski
- ~alxhub # Alex Rickabaugh
- thePunderWoman # Jessica Janiuk
- AndrewKushnir # Andrew Kushnir
- ~thePunderWoman # Jessica Janiuk
- ~AndrewKushnir # Andrew Kushnir
- atscott # Andrew Scott
# External team required reviews
CHANGELOG.md
+260
View File
@@ -1,3 +1,263 @@
<a name="21.2.23"></a>
# 21.2.23 (2026-09-09)
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [fc2e8fbc0b](https://github.com/angular/angular/commit/fc2e8fbc0bda2f5c11585e8a0cbd88c074f5e567) | fix | update domino to latest version |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.22"></a>
# 21.2.22 (2026-08-26)
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [5aa6d97deb](https://github.com/angular/angular/commit/5aa6d97deb9ef1de14e23748b7fa74f97d183132) | fix | avoid stripping unicode whitespace during url resolution |
| [73d8bbd27c](https://github.com/angular/angular/commit/73d8bbd27cb46495426d4132975a1355b47ad915) | fix | update domino to latest version |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.21"></a>
# 21.2.21 (2026-08-19)
### platform-browser
| Commit | Type | Description |
| -- | -- | -- |
| [c19a36c2fb](https://github.com/angular/angular/commit/c19a36c2fbc51f41ce974ea1fd87f9f56b3e2444) | fix | disallow event handler attributes in Meta |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.20"></a>
# 21.2.20 (2026-08-12)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [6afe6fa781](https://github.com/angular/angular/commit/6afe6fa781c2f0931f0aedd729b9884a8fe212ee) | fix | sanitize host bindings on concrete hosts |
### http
| Commit | Type | Description |
| -- | -- | -- |
| [fec5977df4](https://github.com/angular/angular/commit/fec5977df4dda3a10d5ce2923e3e06d86ba11ee7) | fix | match header values exactly when deleting |
| [e33d69a71c](https://github.com/angular/angular/commit/e33d69a71c5beb8fe5785b53fd6b37658334e8e0) | fix | preserve immutability of materialized clones |
| [caf616670f](https://github.com/angular/angular/commit/caf616670fd20d528aa69e0131cc17d60f0cc27d) | fix | run root interceptors in the terminal request chain |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.19"></a>
# 21.2.19 (2026-07-29)
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [e2660c3dee](https://github.com/angular/angular/commit/e2660c3deeccb86471f9c11b7e65ebcc89d84e9e) | fix | disallow i18n event attributes |
| [7b884f585a](https://github.com/angular/angular/commit/7b884f585abf50480c271d234c892c141eb61e2c) | fix | restrict possible event handler check to property names longer than 2 characters |
### http
| Commit | Type | Description |
| -- | -- | -- |
| [948a8d6831](https://github.com/angular/angular/commit/948a8d6831e8920b54663ec79421da95210e0e35) | fix | distinguish repeated transfer cache params |
| [9949dccce1](https://github.com/angular/angular/commit/9949dccce164638597496a6b3881043117dfd1df) | fix | enable xsrf for root-provided HttpClient |
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [f34a93c946](https://github.com/angular/angular/commit/f34a93c946c017eff526cfb0c8d17f51e97f01e4) | fix | update domino to latest version |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.18"></a>
# 21.2.18 (2026-07-08)
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [8d22cc953b](https://github.com/angular/angular/commit/8d22cc953bb9f970c6f86fb0f6e4d0665b874bfa) | fix | update babel dependencies to latest v7 |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [6bcce117fb](https://github.com/angular/angular/commit/6bcce117fbc616e4e721f351e9e038202e916522) | fix | avoid caching missing locale data |
| [5a693bafcd](https://github.com/angular/angular/commit/5a693bafcd49ef11ce687bd91a209e1a46652f42) | fix | reject dynamic script host elements |
### http
| Commit | Type | Description |
| -- | -- | -- |
| [91df739b80](https://github.com/angular/angular/commit/91df739b8022e2177bcc7214ed9a4e94098a4831) | fix | prevent caching of responses with Set-Cookie headers |
### service-worker
| Commit | Type | Description |
| -- | -- | -- |
| [1804f73bec](https://github.com/angular/angular/commit/1804f73becf425b5b1ccee9751d6e3fbd10e1f0b) | fix | preserve referrer in asset requests |
| [e86c31bf26](https://github.com/angular/angular/commit/e86c31bf26359aacce814167506dbdae585a7eb8) | fix | preserve referrer policy in asset requests |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.17"></a>
# 21.2.17 (2026-06-10)
## Deprecations
### platform-server
- XHR support in `@angular/platform-server` is deprecated. Use standard `fetch` APIs instead.
### common
| Commit | Type | Description |
| -- | -- | -- |
| [86a56dc279](https://github.com/angular/angular/commit/86a56dc279e71159d09a073a3cb138f49131995b) | fix | Limits date format string length |
| [d846326b07](https://github.com/angular/angular/commit/d846326b071e0a4ab090e068d934b182926c6b15) | fix | skip transfer cache for uncacheable HTTP traffic |
| [bc55749698](https://github.com/angular/angular/commit/bc55749698ce3917160cd8e9f7108f3c5d1c0b32) | fix | use cryptographically secure SHA-256 for transfer cache key generation |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [dc9c99636d](https://github.com/angular/angular/commit/dc9c99636d3471ed5a3c5cda54b95f604cd2b9a4) | fix | sanitize two-way properties |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [1523061137](https://github.com/angular/angular/commit/152306113760e13196653699b42046d9f4129a37) | fix | harden TransferState restoration against DOM clobbering |
| [88832c84f8](https://github.com/angular/angular/commit/88832c84f8a3cd88d80adcde539a6f91a1f30b74) | fix | validate lowercase SVG animation attribute names ([#69269](https://github.com/angular/angular/pull/69269)) |
### http
| Commit | Type | Description |
| -- | -- | -- |
| [bcb1b7ea25](https://github.com/angular/angular/commit/bcb1b7ea2575b140f7bf202ad4f779e402cd6094) | fix | preserve empty referrer option in HttpRequest |
| [a810a319d1](https://github.com/angular/angular/commit/a810a319d10a8254307eb8f0598e7a888ce09ec0) | fix | Rejects non-HTTP(S) URLs in JSONP requests |
| [e245d40c4d](https://github.com/angular/angular/commit/e245d40c4d05665ab4814c594b8e0849b6e88a2d) | fix | skip transfer cache for fetch credentialed requests |
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [35510746b7](https://github.com/angular/angular/commit/35510746b7d6b5c3de41de04c0586fc286c9e748) | fix | harden platform location origin validation during SSR |
| [13fb0afe93](https://github.com/angular/angular/commit/13fb0afe93b45e3c2383969f70d3ee1f0146ecfb) | refactor | deprecate ServerXhr ([#69255](https://github.com/angular/angular/pull/69255)) |
### service-worker
| Commit | Type | Description |
| -- | -- | -- |
| [b9d29381bb](https://github.com/angular/angular/commit/b9d29381bb4442164b19d9b7e0baa147a7b25629) | fix | Strips sensitive headers on cross-origin redirects |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.16"></a>
# 21.2.16 (2026-06-03)
### common
| Commit | Type | Description |
| -- | -- | -- |
| [f6d8e642b0](https://github.com/angular/angular/commit/f6d8e642b0b215d2f9dbf1060abd24348c6cbf66) | fix | only strip a literal /index.html suffix from URLs |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [ae1c8a1f7a](https://github.com/angular/angular/commit/ae1c8a1f7a7f1d4832da3b22e3763864fa5ff098) | fix | move projection attributes into constants |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [3fd6897a67](https://github.com/angular/angular/commit/3fd6897a67fd6acdc01fcde0452a98c3e0f81e21) | fix | harden inherit definition feature against polluted prototypes |
| [7e38336dc7](https://github.com/angular/angular/commit/7e38336dc73e14d98cc6465f54e1b7d6271facb2) | fix | use Object.create(null) for LOCALE_DATA as a hardening measure |
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [66821c4ed5](https://github.com/angular/angular/commit/66821c4ed5f580912a1609fc1e06a86f8793c2cf) | fix | throw on suspicious URLs and restrict protocol-relative URLs |
| [d3170031b6](https://github.com/angular/angular/commit/d3170031b6f35508f960cba18586843925bb61ec) | fix | update domino to latest version |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.15"></a>
# 21.2.15 (2026-05-28)
### common
| Commit | Type | Description |
| -- | -- | -- |
| [7f4ac78994](https://github.com/angular/angular/commit/7f4ac78994bff1576ab33f3ce48f95c17f40b4d8) | fix | add upper bounds for digitsInfo |
| [300f61feb3](https://github.com/angular/angular/commit/300f61feb3a534bfddf16fcbd240f97b32249699) | fix | sanitize placeholder |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [0b07f47bd6](https://github.com/angular/angular/commit/0b07f47bd6598ae6bd5b75a375e2c817a3c0f243) | fix | normalize tag names with custom namespaces in DomElementSchemaRegistry ([#68925](https://github.com/angular/angular/pull/68925)) |
| [eb1cbbf2eb](https://github.com/angular/angular/commit/eb1cbbf2eb5833219a367a61c04eb07aaa36cc29) | fix | prevent namespaced SVG <style> elements from being stripped |
| [cc1378d54b](https://github.com/angular/angular/commit/cc1378d54bd93f3882d732261be8e66720eb71b2) | fix | sanitize dynamic href and xlink:href bindings on SVG a elements ([#68925](https://github.com/angular/angular/pull/68925)) |
| [782e01594e](https://github.com/angular/angular/commit/782e01594e2ad9134c7385dcf3b518101b23ccab) | fix | strip namespaced SVG script elements during template compilation ([#68925](https://github.com/angular/angular/pull/68925)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [ff12fe55ac](https://github.com/angular/angular/commit/ff12fe55ace5e861ba261afb4c0480ff3c40a192) | fix | normalize tag names in runtime i18n attribute security context lookup ([#68925](https://github.com/angular/angular/pull/68925)) |
| [e6fe77cc97](https://github.com/angular/angular/commit/e6fe77cc97fd10351687416f938bf754aff4eb9f) | fix | sanitize meta selectors |
| [daaf32937f](https://github.com/angular/angular/commit/daaf32937fd5c46e411b26f7c082613716fe9550) | fix | support prefix-insensitive DOM schema lookups and compile-time i18n attribute validation ([#68925](https://github.com/angular/angular/pull/68925)) |
| [dada86e43d](https://github.com/angular/angular/commit/dada86e43d847204f714d1a933084617ab941c0a) | fix | synchronize core sanitization schema with compiler ([#68925](https://github.com/angular/angular/pull/68925)) |
### http
| Commit | Type | Description |
| -- | -- | -- |
| [582a417bd2](https://github.com/angular/angular/commit/582a417bd27fdaf989e5065dbcdf1ad752faf70c) | fix | exclude withCredentials requests from transfer cache |
| [5c6d6df34b](https://github.com/angular/angular/commit/5c6d6df34bbeff3ce98f3b35875444f925cc8f51) | fix | skip TransferCache for cookie-bearing requests by default |
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [37e8aadf87](https://github.com/angular/angular/commit/37e8aadf87b4facfcaf002a1557f8c393a362d97) | fix | prevent SSRF bypasses via backslash URLs in HttpClient |
| [72696e244e](https://github.com/angular/angular/commit/72696e244ed7646cca9ab9afc7769a2163943bda) | fix | secure location and document initialization against SSRF and path hijack |
### service-worker
| Commit | Type | Description |
| -- | -- | -- |
| [b8bd49341d](https://github.com/angular/angular/commit/b8bd49341ddcee10d119a9d4aa8e5736e4e5da53) | fix | Preserves explicit 'credentials: omit' in asset requests |
| [ca32fc1000](https://github.com/angular/angular/commit/ca32fc10001301e6174804f9abcfba62252334f4) | fix | Preserves HTTP cache mode in asset group requests |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.14"></a>
# 21.2.14 (2026-05-20)
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [68282dff9f](https://github.com/angular/angular/commit/68282dff9f9ef46540cca4bd38fc1ab739c8a783) | fix | strip namespaced SVG script elements during template compilation |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [c0f52272ed](https://github.com/angular/angular/commit/c0f52272ed337d4776bd4178cbbdc7f32037500f) | fix | do not insert todo when migrating void @Output |
| [938a7f3edd](https://github.com/angular/angular/commit/938a7f3eddda97a39edb9edcc8b4dd970858b3a2) | fix | makes resource URL sanitizer lookup case-insensitive |
| [0fb2724194](https://github.com/angular/angular/commit/0fb272419407a64a0a47096b03a911f4e7e83d79) | fix | reject script element as a dynamic component host |
| [49113ac0ef](https://github.com/angular/angular/commit/49113ac0eff852d987b5acb28a9bbda0242842cd) | fix | visit ICU expressions in signal migration schematics |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [099bf577ee](https://github.com/angular/angular/commit/099bf577ee8f0bab60593a8fd2a1de7d298e3cd6) | fix | skip scroll-to-top on initial navigation when hydrating |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.13"></a>
# 21.2.13 (2026-05-13)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [1c6553e97d](https://github.com/angular/angular/commit/1c6553e97d9655d8c48fbf625987fae86f9cd947) | fix | disallow event attribute bindings in host bindings unconditionally |
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [629905d537](https://github.com/angular/angular/commit/629905d537f59dc3c264c49f6347e3599dea0215) | fix | add `allowedHosts` option to `renderModule` and `renderApplication` |
| [0b7192f441](https://github.com/angular/angular/commit/0b7192f4410d055191ac9b15bff57d1d0b9a644f) | fix | forward BEFORE_APP_SERIALIZED errors to ErrorHandler |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.12"></a>
# 21.2.12 (2026-05-06)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [fe13bb669d](https://github.com/angular/angular/commit/fe13bb669d2bfab4713623d17b41c430aa0a61d8) | fix | allow explicit read generic with signal input transforms |
| [3430251fef](https://github.com/angular/angular/commit/3430251fef93f6aec1fa9c7867e85df23f67c9a0) | fix | i18n flags leaking on errors |
| [1aeebbe304](https://github.com/angular/angular/commit/1aeebbe3048b5aa612dd0a5448de9883ed51e7e8) | fix | respect ngSkipHydration on components with projectable nodes in LContainers |
| [9e38ed7d57](https://github.com/angular/angular/commit/9e38ed7d5773a9193ba07afdba3f7a9f2fe02d18) | fix | sanitizer typings |
| [7a05a9a71a](https://github.com/angular/angular/commit/7a05a9a71a5ab75042ec5560c01526de6e61e062) | fix | validate security-sensitive attributes in i18n bindings |
| [c37f6ca42f](https://github.com/angular/angular/commit/c37f6ca42f263353cb9563fa90d7b31d3c7837ca) | fix | visit ng-let expression value in signal migration schematics |
### forms
| Commit | Type | Description |
| -- | -- | -- |
| [03ad53863b](https://github.com/angular/angular/commit/03ad53863bf3c368f0f02a4322d4141e8f70f674) | fix | prohibit concurrent submits in signal forms |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.11"></a>
# 21.2.11 (2026-04-29)
### common
| Commit | Type | Description |
| -- | -- | -- |
| [10ad3c0692](https://github.com/angular/angular/commit/10ad3c06923453ae0ec06b06e664ce05900a4ff6) | fix | prevent focus from scrollToAnchor |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [4f5d8a2c0b](https://github.com/angular/angular/commit/4f5d8a2c0b5e38d4debc4293945270cea4a9590d) | fix | let declaration span not including end character |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [a40e2cebc8](https://github.com/angular/angular/commit/a40e2cebc878965c3e21bfb61658f3f80cbd2ebf) | fix | fix ordering of view queries metadata in JIT mode |
| [885a1a1d97](https://github.com/angular/angular/commit/885a1a1d9757adfa8766d9b369c848a277438c31) | fix | guard against non-object events and avoid listener wrapper identity mismatch |
| [7a64aff9b5](https://github.com/angular/angular/commit/7a64aff9b59999077ea915486a7fa0b97a286659) | fix | prevent event replay double-invocation when element hydrates before app stability |
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [be1f80a253](https://github.com/angular/angular/commit/be1f80a253b8ee27ed7d8de2287d6895c4821909) | fix | ensure origin has a trailing slash when parsing url |
<!-- CHANGELOG SPLIT MARKER -->
<a name="21.2.10"></a>
# 21.2.10 (2026-04-22)
### docs
MODULE.bazel
+7 -7
View File
@@ -12,34 +12,34 @@ bazel_dep(name = "aspect_rules_esbuild", version = "0.25.1")
bazel_dep(name = "aspect_rules_jasmine", version = "2.0.4")
bazel_dep(name = "aspect_rules_rollup", version = "2.0.1")
bazel_dep(name = "bazel_skylib", version = "1.9.0")
bazel_dep(name = "bazel_lib", version = "3.2.2")
bazel_dep(name = "bazel_lib", version = "3.3.1")
bazel_dep(name = "tar.bzl", version = "0.10.1")
bazel_dep(name = "yq.bzl", version = "0.3.6")
bazel_dep(name = "rules_angular")
git_override(
module_name = "rules_angular",
commit = "03dade2ea0ea355e13ca88c550eaa633191b16ec",
commit = "b1d295334e70335dab7ac9984a989fae0a9c9dc2",
remote = "https://github.com/angular/rules_angular.git",
)
bazel_dep(name = "devinfra")
git_override(
module_name = "devinfra",
commit = "e04d90adad1a125b29fbc4d97f425798768a8cb1",
commit = "48c48fa3848de5bb0ec1c3203558f099765165ab",
remote = "https://github.com/angular/dev-infra.git",
)
bazel_dep(name = "rules_sass")
git_override(
module_name = "rules_sass",
commit = "dfb751533767caa759a7162a34cfe0852f988976",
commit = "a65d937fabd87672f7245aeaa5eb5a0c5a2abead",
remote = "https://github.com/angular/rules_sass.git",
)
bazel_dep(name = "rules_browsers")
git_override(
module_name = "rules_browsers",
commit = "4de93bbfdbee2cea5162ac8070eb15846b15133d",
commit = "b03f09ef28a08f8ae07482851cf5ecbf6ac23a2a",
remote = "https://github.com/angular/rules_browsers.git",
)
@@ -71,8 +71,8 @@ use_repo(node, "nodejs_windows_amd64")
pnpm = use_extension("@aspect_rules_js//npm:extensions.bzl", "pnpm")
pnpm.pnpm(
name = "pnpm",
pnpm_version = "10.33.0",
pnpm_version_integrity = "sha512-EFaLtKavtYyes2MNqQzJUWQXq+vT+rvmc58K55VyjaFJHp21pUTHatjrdXD1xLs9bGN7LLQb/c20f6gjyGSTGQ==",
pnpm_version = "10.33.2",
pnpm_version_integrity = "sha512-qQ+vb+6rca1sblf5Tg/hoS9dzCLNdU20CulZPraj4LaxLjVAIYuzeuCDQEsfLObbKkEh6XmCm0r/lLmfSdoc+A==",
)
use_repo(pnpm, "pnpm")
MODULE.bazel.lock
Generated
+10 -9
View File
@@ -53,7 +53,8 @@
"https://bcr.bazel.build/modules/bazel_lib/3.0.0-rc.0/MODULE.bazel": "d6e00979a98ac14ada5e31c8794708b41434d461e7e7ca39b59b765e6d233b18",
"https://bcr.bazel.build/modules/bazel_lib/3.0.0/MODULE.bazel": "22b70b80ac89ad3f3772526cd9feee2fa412c2b01933fea7ed13238a448d370d",
"https://bcr.bazel.build/modules/bazel_lib/3.2.2/MODULE.bazel": "e2c890c8a515d6bca9c66d47718aa9e44b458fde64ec7204b8030bf2d349058c",
"https://bcr.bazel.build/modules/bazel_lib/3.2.2/source.json": "9e84e115c20e14652c5c21401ae85ff4daa8702e265b5c0b3bf89353f17aa212",
"https://bcr.bazel.build/modules/bazel_lib/3.3.1/MODULE.bazel": "732a0d516cf6400d9b3136e4356258aef1bf91de8d5240f87f0112f098920c1d",
"https://bcr.bazel.build/modules/bazel_lib/3.3.1/source.json": "8e5175d7b4125a39b8941d01e38039934d058e03804f46a2b8fd7ae6316b1ce2",
"https://bcr.bazel.build/modules/bazel_skylib/1.0.3/MODULE.bazel": "bcb0fd896384802d1ad283b4e4eb4d718eebd8cb820b0a2c3a347fb971afd9d8",
"https://bcr.bazel.build/modules/bazel_skylib/1.1.1/MODULE.bazel": "1add3e7d93ff2e6998f9e118022c84d163917d912f5afafb3058e3d2f1545b5e",
"https://bcr.bazel.build/modules/bazel_skylib/1.2.0/MODULE.bazel": "44fe84260e454ed94ad326352a698422dbe372b21a1ac9f3eab76eb531223686",
@@ -214,7 +215,7 @@
"moduleExtensions": {
"@@aspect_rules_esbuild+//esbuild:extensions.bzl%esbuild": {
"general": {
"bzlTransitiveDigest": "QxNkTCcD6yURsbqznKyC/WCjCyhHZbEipGXl2UQjjzY=",
"bzlTransitiveDigest": "3l5lERuIkp41OnB+ZcMQkXS5ttpwE3LfWmePbmwDofk=",
"usagesDigest": "6We6zwGoawD9YXqMI0KPaxEKJTnamXBsuOekhFS2D40=",
"recordedFileInputs": {},
"recordedDirentsInputs": {},
@@ -430,7 +431,7 @@
"@@aspect_rules_ts+//ts:extensions.bzl%ext": {
"general": {
"bzlTransitiveDigest": "dhTbv9E6UfT1WJmmu3ORRPO6AKFJvgBjBxu+BO+u1RY=",
"usagesDigest": "QJswGu07xQeMlf+NomctjP9AY7OKl/U5GqMvEr6U1g8=",
"usagesDigest": "wfAUu+hWfjbN8K5K5tnyIyhWKZOHe5xnDfeOD7CIZZ8=",
"recordedFileInputs": {},
"recordedDirentsInputs": {},
"envVariables": {},
@@ -448,8 +449,8 @@
"rules_angular_npm_typescript": {
"repoRuleId": "@@aspect_rules_ts+//ts/private:npm_repositories.bzl%http_archive_version",
"attributes": {
"version": "6.0.2",
"integrity": "sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==",
"version": "6.0.3",
"integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
"urls": [
"https://registry.npmjs.org/typescript/-/typescript-{}.tgz"
]
@@ -458,8 +459,8 @@
"npm_typescript": {
"repoRuleId": "@@aspect_rules_ts+//ts/private:npm_repositories.bzl%http_archive_version",
"attributes": {
"version": "6.0.2",
"integrity": "sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==",
"version": "6.0.3",
"integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
"urls": [
"https://registry.npmjs.org/typescript/-/typescript-{}.tgz"
]
@@ -468,8 +469,8 @@
"npm_rules_browsers_typescript": {
"repoRuleId": "@@aspect_rules_ts+//ts/private:npm_repositories.bzl%http_archive_version",
"attributes": {
"version": "6.0.2",
"integrity": "sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==",
"version": "6.0.3",
"integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
"urls": [
"https://registry.npmjs.org/typescript/-/typescript-{}.tgz"
]
README.md
+1 -1
View File
@@ -67,7 +67,7 @@ Install the Angular CLI globally:
npm install -g @angular/cli
```
Create workspace:
Create a workspace:
```
ng new [PROJECT NAME]
adev/package.json
+6 -6
View File
@@ -5,21 +5,21 @@
"@algolia/requester-browser-xhr": "5.48.0",
"@algolia/requester-node-http": "5.48.0",
"@angular/animations": "workspace:*",
"@angular/aria": "21.2.7",
"@angular/build": "21.2.8",
"@angular/cdk": "21.2.7",
"@angular/cli": "21.2.8",
"@angular/aria": "21.2.9",
"@angular/build": "21.2.9",
"@angular/cdk": "21.2.9",
"@angular/cli": "21.2.9",
"@angular/common": "workspace:*",
"@angular/compiler": "workspace:*",
"@angular/compiler-cli": "workspace:*",
"@angular/core": "workspace:*",
"@angular/docs": "workspace:*",
"@angular/forms": "workspace:*",
"@angular/material": "21.2.7",
"@angular/material": "21.2.9",
"@angular/platform-browser": "workspace:*",
"@angular/platform-server": "workspace:*",
"@angular/router": "workspace:*",
"@angular/ssr": "21.2.8",
"@angular/ssr": "21.2.9",
"@codemirror/autocomplete": "6.20.0",
"@codemirror/commands": "6.10.1",
"@codemirror/lang-angular": "0.1.4",
adev/scripts/update-cross-repo-docs/github-client.mjs
+12 -1
View File
@@ -10,6 +10,8 @@ import {get} from 'node:https';
import {posix} from 'node:path';
const GITHUB_API = 'https://api.github.com/repos/';
const SHA_REGEX = /^[0-9a-f]{40}$/i;
const BRANCH_REGEX = /^(?!.*\.\.)[a-zA-Z0-9/_.-]+$/;
export class GithubClient {
#token;
@@ -30,6 +32,12 @@ export class GithubClient {
* @returns Promise<string[]>
*/
async getAffectedFiles(baseSha, headSha) {
if (!SHA_REGEX.test(baseSha)) {
throw new Error(`Invalid base SHA: ${baseSha}`);
}
if (!SHA_REGEX.test(headSha)) {
throw new Error(`Invalid head SHA: ${headSha}`);
}
const {files} = JSON.parse(await this.#httpGet(`${this.#api}/compare/${baseSha}...${headSha}`));
return files.map((f) => f.filename);
}
@@ -41,6 +49,9 @@ export class GithubClient {
* @returns Promise<string>
*/
async getShaForBranch(branch) {
if (!BRANCH_REGEX.test(branch)) {
throw new Error(`Invalid branch name: ${branch}`);
}
const sha = await this.#httpGet(`${this.#api}/commits/${branch}`, {
headers: {Accept: 'application/vnd.github.VERSION.sha'},
});
@@ -49,7 +60,7 @@ export class GithubClient {
throw new Error(`Unable to extract the SHA for '${branch}'.`);
}
return sha;
return sha.trim();
}
#httpGet(url, options = {}) {
adev/scripts/update-cross-repo-docs/update-assets.mjs
+24 -6
View File
@@ -8,7 +8,7 @@
//tslint:disable:no-console
import assert from 'node:assert';
import {execSync} from 'node:child_process';
import {execFileSync} from 'node:child_process';
import {existsSync, constants as fsConstants} from 'node:fs';
import {
copyFile,
@@ -41,6 +41,16 @@ export async function updateAssets({repo, assetsPath, destPath}) {
await readFile(buildInfoPath, 'utf-8'),
);
const shaRegex = /^[0-9a-f]{40}$/i;
const branchRegex = /^(?!.*\.\.)[a-zA-Z0-9/_.-]+$/;
if (!shaRegex.test(storedSha)) {
throw new Error(`Invalid SHA in build info: ${storedSha}`);
}
if (!branchRegex.test(storedBranch)) {
throw new Error(`Invalid branch name in build info: ${storedBranch}`);
}
assert(process.env.ANGULAR_READONLY_GITHUB_TOKEN);
const githubApi = new GithubClient(
repo,
@@ -63,6 +73,10 @@ export async function updateAssets({repo, assetsPath, destPath}) {
downstreamBranch = storedBranch;
}
if (!shaRegex.test(latestSha)) {
throw new Error(`Invalid SHA resolved: ${latestSha}`);
}
console.log(`Comparing ${storedSha}...${latestSha}.`);
const affectedFiles = await githubApi.getAffectedFiles(storedSha, latestSha);
const changedFiles = affectedFiles.filter((file) => file.startsWith(`${assetsPath}/`));
@@ -78,14 +92,18 @@ export async function updateAssets({repo, assetsPath, destPath}) {
try {
const execOptions = {cwd: temporaryDir, stdio: 'inherit'};
execSync('git init', execOptions);
execSync(`git remote add origin https://github.com/${repo}.git`, execOptions);
execFileSync('git', ['init'], execOptions);
execFileSync(
'git',
['remote', 'add', 'origin', `https://github.com/${repo}.git`],
execOptions,
);
// fetch a commit
execSync(`git fetch origin ${latestSha}`, execOptions);
execFileSync('git', ['fetch', 'origin', latestSha], execOptions);
// reset this repository's main branch to the commit of interest
execSync('git reset --hard FETCH_HEAD', execOptions);
execFileSync('git', ['reset', '--hard', 'FETCH_HEAD'], execOptions);
// get sha when files where changed
shaWhenFilesChanged = execSync(`git rev-list -1 ${latestSha} "${assetsPath}/"`, {
shaWhenFilesChanged = execFileSync('git', ['rev-list', '-1', latestSha, `${assetsPath}/`], {
encoding: 'utf8',
cwd: temporaryDir,
stdio: ['ignore', 'pipe', 'ignore'],
adev/shared-docs/components/navigation-list/navigation-list.component.html
+4 -4
View File
@@ -27,7 +27,7 @@
[href]="item.path"
target="_blank"
[matTooltip]="item.label"
[matTooltipDisabled]="itemLabel.length < 27"
[matTooltipDisabled]="itemLabel.length < labelTruncationThreshold"
matTooltipPosition="after"
[attr.aria-label]="item.label"
[matTooltipClass]="'API-tooltip'"
@@ -55,7 +55,7 @@
}"
(click)="emitClickOnLink(item)"
[matTooltip]="item.label"
[matTooltipDisabled]="itemLabel.length < 27"
[matTooltipDisabled]="itemLabel.length < labelTruncationThreshold"
matTooltipPosition="after"
[attr.aria-label]="item.label"
[matTooltipClass]="'API-tooltip'"
@@ -76,7 +76,7 @@
<div
class="docs-secondary-nav-header"
[matTooltip]="item.label"
[matTooltipDisabled]="itemLabel.length < 27"
[matTooltipDisabled]="itemLabel.length < labelTruncationThreshold"
matTooltipPosition="after"
[attr.aria-label]="item.label"
[matTooltipClass]="'API-tooltip'"
@@ -106,7 +106,7 @@
item.children && item.level === expandableLevel() && !item.isExpanded
"
[matTooltip]="item.label"
[matTooltipDisabled]="itemLabel.length < 27"
[matTooltipDisabled]="itemLabel.length < labelTruncationThreshold"
matTooltipPosition="after"
[attr.aria-label]="item.label"
[matTooltipClass]="'API-tooltip'"
adev/shared-docs/components/navigation-list/navigation-list.component.scss
+1 -1
View File
@@ -6,7 +6,7 @@
list-style: none;
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
height: 100dvh;
padding: 0;
margin: 0;
padding-block: 1.5rem;
adev/shared-docs/components/navigation-list/navigation-list.component.ts
+2
View File
@@ -39,6 +39,8 @@ export class NavigationList {
readonly linkClicked = output<void>();
protected readonly labelTruncationThreshold = 27;
private readonly navigationState = inject(NavigationState);
private readonly crossCategoryOrigin = this.navigationState.crossCategoryOrigin;
adev/shared-docs/pipeline/api-gen/rendering/entities/renderables.mts
+1 -1
View File
@@ -21,7 +21,6 @@ import {
ParameterEntry,
PipeEntry,
TypeAliasEntry,
EntryType,
} from '../entities.mjs';
import {CliCommand, CliOption} from '../cli-entities.mjs';
@@ -105,6 +104,7 @@ export type FunctionEntryRenderable = FunctionEntry &
export type FunctionSignatureMetadataRenderable = FunctionSignatureMetadata &
DocEntryRenderable & {
params: ParameterEntryRenderable[];
htmlReturnDescription?: string;
};
/** Documentation entity for a block augmented with transformed content for rendering. */
adev/shared-docs/pipeline/api-gen/rendering/templates/class-method-info.tsx
+7 -1
View File
@@ -23,6 +23,7 @@ import {RawHtml} from './raw-html';
export function ClassMethodInfo(props: {
entry: FunctionSignatureMetadataRenderable;
hideUsageNotes?: boolean;
hideDescription?: boolean;
}) {
const entry = props.entry;
@@ -30,7 +31,9 @@ export function ClassMethodInfo(props: {
<div
className={`${REFERENCE_MEMBER_CARD_ITEM} ${entry.deprecated ? 'docs-reference-card-item-deprecated' : ''}`}
>
<RawHtml value={entry.htmlDescription} className={'docs-function-definition'} />
{!props.hideDescription && (
<RawHtml value={entry.htmlDescription} className={'docs-function-definition'} />
)}
{/* In case when method is overloaded we need to indicate which overload is deprecated */}
{entry.deprecated ? (
<div>
@@ -45,6 +48,9 @@ export function ClassMethodInfo(props: {
<div className={'docs-return-type'}>
<span className={PARAM_KEYWORD_CLASS_NAME}>@returns</span>
<CodeSymbol code={entry.returnType} />
{entry.htmlReturnDescription && (
<RawHtml value={entry.htmlReturnDescription} className="docs-parameter-description" />
)}
</div>
{entry.htmlUsageNotes && !props.hideUsageNotes ? (
<div className={'docs-usage-notes'}>
adev/shared-docs/pipeline/api-gen/rendering/templates/function-reference.tsx
+43 -30
View File
@@ -32,31 +32,43 @@ import {SectionUsageNotes} from './section-usage-notes';
export const signatureCard = (
name: string,
signature: FunctionSignatureMetadataRenderable,
opts: {id: string; printSignaturesAsHeader: boolean; hideUsageNotes?: boolean},
opts: {
id: string;
printSignaturesAsHeader: boolean;
hideUsageNotes?: boolean;
hideHeader?: boolean;
hideDescription?: boolean;
},
) => {
return (
<div id={opts.id} class={REFERENCE_MEMBER_CARD}>
<header class={REFERENCE_MEMBER_CARD_HEADER}>
{opts.printSignaturesAsHeader ? (
<HighlightTypeScript
code={printInitializerFunctionSignatureLine(
name,
signature,
// Always omit types in signature headers, to keep them short.
true,
)}
/>
) : (
<>
<h3>{name}</h3>
<div>
<CodeSymbol code={signature.returnType} />
</div>
</>
)}
</header>
{!opts.hideHeader && (
<header class={REFERENCE_MEMBER_CARD_HEADER}>
{opts.printSignaturesAsHeader ? (
<HighlightTypeScript
code={printInitializerFunctionSignatureLine(
name,
signature,
// Always omit types in signature headers, to keep them short.
true,
)}
/>
) : (
<>
<h3>{name}</h3>
<div>
<CodeSymbol code={signature.returnType} />
</div>
</>
)}
</header>
)}
<div class={REFERENCE_MEMBER_CARD_BODY}>
<ClassMethodInfo entry={signature} hideUsageNotes={opts.hideUsageNotes} />
<ClassMethodInfo
entry={signature}
hideUsageNotes={opts.hideUsageNotes}
hideDescription={opts.hideDescription}
/>
</div>
</div>
);
@@ -64,8 +76,8 @@ export const signatureCard = (
/** Component to render a function API reference document. */
export function FunctionReference(entry: FunctionEntryRenderable) {
// Use signatures as header if there are multiple signatures.
const printSignaturesAsHeader = entry.signatures.length > 1;
const hideSignatureCardDescription = !printSignaturesAsHeader;
return (
<div className={API_REFERENCE_CONTAINER}>
@@ -73,14 +85,15 @@ export function FunctionReference(entry: FunctionEntryRenderable) {
<DeprecationWarning entry={entry} />
<SectionApi entry={entry} />
<div className={REFERENCE_MEMBERS}>
{entry.signatures.length > 1 &&
entry.signatures.map((s, i) =>
signatureCard(s.name, getFunctionMetadataRenderable(s, entry.moduleName, entry.repo), {
id: `${s.name}_${i}`,
printSignaturesAsHeader,
hideUsageNotes: true,
}),
)}
{entry.signatures.map((s, i) =>
signatureCard(s.name, getFunctionMetadataRenderable(s, entry.moduleName, entry.repo), {
id: `${s.name}_${i}`,
printSignaturesAsHeader,
hideHeader: !printSignaturesAsHeader,
hideUsageNotes: hideSignatureCardDescription,
hideDescription: hideSignatureCardDescription,
}),
)}
</div>
<SectionDescription entry={entry} />
adev/shared-docs/pipeline/api-gen/rendering/templates/parameter.tsx
+4 -2
View File
@@ -8,9 +8,9 @@
import {h} from 'preact';
import {ParameterEntryRenderable} from '../entities/renderables.mjs';
import {RawHtml} from './raw-html';
import {PARAM_GROUP_CLASS_NAME} from '../styling/css-classes.mjs';
import {CodeSymbol} from './code-symbols';
import {RawHtml} from './raw-html';
/** Component to render a function or method parameter reference doc fragment. */
export function Parameter(props: {param: ParameterEntryRenderable}) {
@@ -21,7 +21,9 @@ export function Parameter(props: {param: ParameterEntryRenderable}) {
{/*TODO: isOptional, isRestParam*/}
<span class="docs-param-keyword">@param</span>
<span class="docs-param-name">{param.name}</span>
<CodeSymbol code={param.type} />
<span class="docs-param-type">
<CodeSymbol code={param.type} />
</span>
<RawHtml value={param.htmlDescription} className="docs-parameter-description" />
</div>
);
adev/shared-docs/pipeline/api-gen/rendering/test/cli.spec.mts
+13
View File
@@ -43,4 +43,17 @@ describe('CLI docs to html', () => {
expect(cliTocs[0].textContent).toContain('ng component [name] [options]');
expect(cliTocs[1].textContent).toContain('ng c [name] [options]');
});
it('should rewrite absolute angular.dev hrefs in option descriptions to root-relative', async () => {
const renderableJson = await getRenderable(entryJson, '', 'angular/cli');
const localFragment = JSDOM.fragment(renderEntry(renderableJson));
const hrefs = Array.from(localFragment.querySelectorAll('a')).map((a) =>
a.getAttribute('href'),
);
// Absolute angular.dev URLs are rewritten to root-relative.
expect(hrefs).toContain('/cli-test-rewrite');
expect(hrefs).not.toContain('https://angular.dev/cli-test-rewrite');
// Subdomains are intentionally left as external.
expect(hrefs).toContain('https://next.angular.dev/cli-test-preview');
});
});
adev/shared-docs/pipeline/api-gen/rendering/test/fake-cli-entries.json
+44 -130
View File
@@ -2,9 +2,7 @@
"name": "generate",
"command": "ng generate <schematic>",
"shortDescription": "Generates and/or modifies files based on a schematic.",
"aliases": [
"g"
],
"aliases": ["g"],
"deprecated": false,
"options": [
{
@@ -16,9 +14,7 @@
{
"name": "dry-run",
"type": "boolean",
"aliases": [
"d"
],
"aliases": ["d"],
"default": false,
"description": "Run through and reports activity without writing out results."
},
@@ -44,6 +40,12 @@
"type": "string",
"description": "The [collection:schematic] to run.",
"positional": 0
},
{
"name": "test-angular-dev-href-rewrite",
"type": "boolean",
"default": false,
"description": "See [angular.dev test](https://angular.dev/cli-test-rewrite) and [preview test](https://next.angular.dev/cli-test-preview)."
}
],
"subcommands": [
@@ -75,17 +77,13 @@
{
"name": "inline-style",
"type": "boolean",
"aliases": [
"s"
],
"aliases": ["s"],
"description": "Include styles inline in the root component.ts file. Only CSS styles can be included inline. Default is false, meaning that an external styles file is created and referenced in the root component.ts file."
},
{
"name": "inline-template",
"type": "boolean",
"aliases": [
"t"
],
"aliases": ["t"],
"description": "Include template inline in the root component.ts file. Default is false, meaning that an external template file is created and referenced in the root component.ts file. "
},
{
@@ -103,9 +101,7 @@
{
"name": "prefix",
"type": "string",
"aliases": [
"p"
],
"aliases": ["p"],
"default": "app",
"description": "A prefix to apply to generated selectors."
},
@@ -135,9 +131,7 @@
{
"name": "skip-tests",
"type": "boolean",
"aliases": [
"S"
],
"aliases": ["S"],
"default": false,
"description": "Do not create \"spec.ts\" test files for the application."
},
@@ -163,29 +157,17 @@
"name": "style",
"type": "string",
"default": "css",
"enum": [
"css",
"scss",
"sass",
"less"
],
"enum": ["css", "scss", "sass", "less"],
"description": "The file extension or preprocessor to use for style files."
},
{
"name": "view-encapsulation",
"type": "string",
"enum": [
"Emulated",
"None",
"ShadowDom",
"ExperimentalIsolatedShadowDom"
],
"enum": ["Emulated", "None", "ShadowDom", "ExperimentalIsolatedShadowDom"],
"description": "The view encapsulation strategy to use in the new application."
}
],
"aliases": [
"app"
],
"aliases": ["app"],
"deprecated": false
},
{
@@ -216,9 +198,7 @@
"description": "Adds a developer-defined type to the filename, in the format \"name.type.ts\"."
}
],
"aliases": [
"cl"
],
"aliases": ["cl"],
"deprecated": false
},
{
@@ -229,22 +209,15 @@
{
"name": "change-detection",
"type": "string",
"aliases": [
"c"
],
"aliases": ["c"],
"default": "Default",
"enum": [
"Default",
"OnPush"
],
"enum": ["Default", "OnPush"],
"description": "The change detection strategy to use in the new component."
},
{
"name": "display-block",
"type": "boolean",
"aliases": [
"b"
],
"aliases": ["b"],
"default": false,
"description": "Specifies if the style will contain `:host { display: block; }`."
},
@@ -269,27 +242,21 @@
{
"name": "inline-style",
"type": "boolean",
"aliases": [
"s"
],
"aliases": ["s"],
"default": false,
"description": "Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file."
},
{
"name": "inline-template",
"type": "boolean",
"aliases": [
"t"
],
"aliases": ["t"],
"default": false,
"description": "Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file."
},
{
"name": "module",
"type": "string",
"aliases": [
"m"
],
"aliases": ["m"],
"description": "The declaring NgModule."
},
{
@@ -301,9 +268,7 @@
{
"name": "prefix",
"type": "string",
"aliases": [
"p"
],
"aliases": ["p"],
"description": "The prefix to apply to the generated component selector."
},
{
@@ -344,13 +309,7 @@
"name": "style",
"type": "string",
"default": "css",
"enum": [
"css",
"scss",
"sass",
"less",
"none"
],
"enum": ["css", "scss", "sass", "less", "none"],
"description": "The file extension or preprocessor to use for style files, or 'none' to skip generating the style file."
},
{
@@ -362,21 +321,12 @@
{
"name": "view-encapsulation",
"type": "string",
"aliases": [
"v"
],
"enum": [
"Emulated",
"None",
"ShadowDom",
"ExperimentalIsolatedShadowDom"
],
"aliases": ["v"],
"enum": ["Emulated", "None", "ShadowDom", "ExperimentalIsolatedShadowDom"],
"description": "The view encapsulation strategy to use in the new component."
}
],
"aliases": [
"c"
],
"aliases": ["c"],
"deprecated": false
},
{
@@ -392,10 +342,7 @@
{
"name": "type",
"type": "string",
"enum": [
"karma",
"browserslist"
],
"enum": ["karma", "browserslist"],
"description": "Specifies which type of configuration file to create.",
"positional": 0
}
@@ -423,9 +370,7 @@
{
"name": "module",
"type": "string",
"aliases": [
"m"
],
"aliases": ["m"],
"description": "The declaring NgModule."
},
{
@@ -437,9 +382,7 @@
{
"name": "prefix",
"type": "string",
"aliases": [
"p"
],
"aliases": ["p"],
"description": "A prefix to apply to generated selectors."
},
{
@@ -471,9 +414,7 @@
"description": "Whether the generated directive is standalone."
}
],
"aliases": [
"d"
],
"aliases": ["d"],
"deprecated": false
},
{
@@ -498,9 +439,7 @@
"description": "Adds a developer-defined type to the filename, in the format \"name.type.ts\"."
}
],
"aliases": [
"e"
],
"aliases": ["e"],
"deprecated": false
},
{
@@ -537,9 +476,7 @@
{
"name": "implements",
"type": "array",
"aliases": [
"guardType"
],
"aliases": ["guardType"],
"description": "Specifies which type of guard to create."
},
{
@@ -560,9 +497,7 @@
"description": "Do not create \"spec.ts\" test files for the new guard."
}
],
"aliases": [
"g"
],
"aliases": ["g"],
"deprecated": false
},
{
@@ -631,9 +566,7 @@
"positional": 1
}
],
"aliases": [
"i"
],
"aliases": ["i"],
"deprecated": false
},
{
@@ -656,9 +589,7 @@
{
"name": "prefix",
"type": "string",
"aliases": [
"p"
],
"aliases": ["p"],
"default": "lib",
"description": "A prefix to apply to generated selectors."
},
@@ -692,9 +623,7 @@
"description": "Creates a library based upon the standalone API, without NgModules."
}
],
"aliases": [
"lib"
],
"aliases": ["lib"],
"deprecated": false
},
{
@@ -711,9 +640,7 @@
{
"name": "module",
"type": "string",
"aliases": [
"m"
],
"aliases": ["m"],
"description": "The declaring NgModule."
},
{
@@ -742,16 +669,11 @@
"name": "routing-scope",
"type": "string",
"default": "Child",
"enum": [
"Child",
"Root"
],
"enum": ["Child", "Root"],
"description": "The scope for the new routing module."
}
],
"aliases": [
"m"
],
"aliases": ["m"],
"deprecated": false
},
{
@@ -774,9 +696,7 @@
{
"name": "module",
"type": "string",
"aliases": [
"m"
],
"aliases": ["m"],
"description": "The declaring NgModule."
},
{
@@ -809,9 +729,7 @@
"description": "Whether the generated pipe is standalone."
}
],
"aliases": [
"p"
],
"aliases": ["p"],
"deprecated": false
},
{
@@ -849,9 +767,7 @@
"description": "Do not create \"spec.ts\" test files for the new resolver."
}
],
"aliases": [
"r"
],
"aliases": ["r"],
"deprecated": false
},
{
@@ -883,9 +799,7 @@
"description": "Do not create \"spec.ts\" test files for the new service."
}
],
"aliases": [
"s"
],
"aliases": ["s"],
"deprecated": false
},
{
adev/shared-docs/pipeline/api-gen/rendering/test/fake-entries.json
+2
View File
@@ -463,6 +463,7 @@
"isRestParam": false
}
],
"returnDescription": "A reference that can be used to unregister callbacks registered by this call.",
"rawComment": "/**\n * Register callbacks to be invoked the next time the application finishes rendering, during the\n * specified phases. The available phases are:\n * - `earlyRead`\n * Use this phase to **read** from the DOM before a subsequent `write` callback, for example to\n * perform custom layout that the browser doesn't natively support. Prefer the `read` phase if\n * reading can wait until after the write phase. **Never** write to the DOM in this phase.\n * - `write`\n * Use this phase to **write** to the DOM. **Never** read from the DOM in this phase.\n * - `mixedReadWrite`\n * Use this phase to read from and write to the DOM simultaneously. **Never** use this phase if\n * it is possible to divide the work among the other phases instead.\n * - `read`\n * Use this phase to **read** from the DOM. **Never** write to the DOM in this phase.\n *\n * <div class=\"docs-alert docs-alert-critical\">\n *\n * You should prefer using the `read` and `write` phases over the `earlyRead` and `mixedReadWrite`\n * phases when possible, to avoid performance degradation.\n *\n * </div>\n *\n * Note that:\n * - Callbacks run in the following phase order *once, after the next render*:\n * 1. `earlyRead`\n * 2. `write`\n * 3. `mixedReadWrite`\n * 4. `read`\n * - Callbacks in the same phase run in the order they are registered.\n * - Callbacks run on browser platforms only, they will not run on the server.\n *\n * The first phase callback to run as part of this spec will receive no parameters. Each\n * subsequent phase callback in this spec will receive the return value of the previously run\n * phase callback as a parameter. This can be used to coordinate work across multiple phases.\n *\n * Angular is unable to verify or enforce that phases are used correctly, and instead\n * relies on each developer to follow the guidelines documented for each value and\n * carefully choose the appropriate one, refactoring their code if necessary. By doing\n * so, Angular is better able to minimize the performance degradation associated with\n * manual DOM access, ensuring the best experience for the end users of your application\n * or library.\n *\n * <div class=\"docs-alert docs-alert-important\">\n *\n * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.\n * You must use caution when directly reading or writing the DOM and layout.\n *\n * </div>\n *\n * @param spec The callback functions to register\n * @param options Options to control the behavior of the callback\n *\n * @usageNotes\n *\n * Use `afterNextRender` to read or write the DOM once,\n * for example to initialize a non-Angular library.\n *\n * ### Example\n * ```angular-ts\n * @Component({\n * selector: 'my-chart-cmp',\n * template: `<div #chart>{{ ... }}</div>`,\n * })\n * export class MyChartCmp {\n * @ViewChild('chart') chartRef: ElementRef;\n * chart: MyChart|null;\n *\n * constructor() {\n * afterNextRender({\n * write: () => {\n * this.chart = new MyChart(this.chartRef.nativeElement);\n * }\n * });\n * }\n * }\n * ```\n *\n * @developerPreview\n */",
"returnType": "AfterRenderRef"
},
@@ -497,6 +498,7 @@
"isRestParam": false
}
],
"returnDescription": "A reference that can be used to unregister the callback registered by this call.",
"rawComment": "/**\n * Register a callback to be invoked the next time the application finishes rendering, during the\n * `mixedReadWrite` phase.\n *\n * <div class=\"docs-alert docs-alert-critical\">\n *\n * You should prefer specifying an explicit phase for the callback instead, or you risk significant\n * performance degradation.\n *\n * </div>\n *\n * Note that the callback will run\n * - in the order it was registered\n * - on browser platforms only\n * - during the `mixedReadWrite` phase\n *\n * <div class=\"docs-alert docs-alert-important\">\n *\n * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.\n * You must use caution when directly reading or writing the DOM and layout.\n *\n * </div>\n *\n * @param callback A callback function to register\n * @param options Options to control the behavior of the callback\n *\n * @usageNotes\n *\n * Use `afterNextRender` to read or write the DOM once,\n * for example to initialize a non-Angular library.\n *\n * ### Example\n * ```angular-ts\n * @Component({\n * selector: 'my-chart-cmp',\n * template: `<div #chart>{{ ... }}</div>`,\n * })\n * export class MyChartCmp {\n * @ViewChild('chart') chartRef: ElementRef;\n * chart: MyChart|null;\n *\n * constructor() {\n * afterNextRender({\n * write: () => {\n * this.chart = new MyChart(this.chartRef.nativeElement);\n * }\n * });\n * }\n * }\n * ```\n *\n * @publicApi 20.0\n */",
"returnType": "AfterRenderRef"
}
adev/shared-docs/pipeline/api-gen/rendering/test/transforms/jsdoc-transforms.spec.mts
+17
View File
@@ -199,6 +199,23 @@ describe('jsdoc transforms', () => {
expect(entryFn).toThrowError(/Forbidden relative link: cli\/build ng build/);
});
it('should throw on a miscased absolute @link to a known API symbol', () => {
setSymbols({RouterModule: 'router'});
const entryFn = () =>
addHtmlAdditionalLinks({
jsdocTags: [
{
name: 'see',
comment: '{@link /api/router/routerModule#forRoot forRoot}',
},
],
moduleName: 'test',
});
expect(entryFn).toThrowError(/Broken @link.*Did you mean \/api\/router\/RouterModule/);
});
});
describe('addHtmlDescription', () => {
adev/shared-docs/pipeline/api-gen/rendering/transforms/cli-transforms.mts
+4 -1
View File
@@ -53,11 +53,14 @@ export function getCliCardsRenderable(command: CliCommand): CliCardRenderable[]
return cards;
}
// Rewrite absolute angular.dev hrefs to root-relative so links stay in-site.
const angularDevHrefRegex = /(href=["'])https?:\/\/angular\.dev\//g;
function getRenderableOptions(items: CliOption[]): CliOptionRenderable[] {
return items.map((option) => ({
...option,
deprecated: option.deprecated ? {version: undefined} : undefined,
description: marked.parse(option.description) as string,
description: (marked.parse(option.description) as string).replace(angularDevHrefRegex, '$1/'),
}));
}
adev/shared-docs/pipeline/api-gen/rendering/transforms/function-transforms.mts
+8 -6
View File
@@ -20,7 +20,7 @@ import {
setEntryFlags,
} from './jsdoc-transforms.mjs';
import {addModuleName} from './module-name.mjs';
import {addRenderableFunctionParams} from './params-transforms.mjs';
import {addHtmlReturnDescription, addRenderableFunctionParams} from './params-transforms.mjs';
import {addRepo} from './repo.mjs';
/** Given an unprocessed function entry, get the fully renderable function entry. */
@@ -50,11 +50,13 @@ export function getFunctionMetadataRenderable(
repo: string,
): FunctionSignatureMetadataRenderable {
return addHtmlAdditionalLinks(
addRenderableFunctionParams(
addHtmlUsageNotes(
setEntryFlags(
addHtmlJsDocTagComments(
addHtmlDescription(addRepo(addModuleName(entry, moduleName), repo)),
addHtmlReturnDescription(
addRenderableFunctionParams(
addHtmlUsageNotes(
setEntryFlags(
addHtmlJsDocTagComments(
addHtmlDescription(addRepo(addModuleName(entry, moduleName), repo)),
),
),
),
),
adev/shared-docs/pipeline/api-gen/rendering/transforms/jsdoc-transforms.mts
+22 -1
View File
@@ -112,7 +112,7 @@ export function addHtmlUsageNotes<T extends HasJsDocTags>(entry: T): T & HasHtml
}
/** Given a markdown JsDoc text, gets the rendered HTML. */
function getHtmlForJsDocText(text: string): string {
export function getHtmlForJsDocText(text: string): string {
const mdToParse = convertLinks(wrapExampleHtmlElementsWithCode(text));
const parsed = parseMarkdown(mdToParse, {
apiEntries: getSymbolsAsApiEntries(),
@@ -223,6 +223,27 @@ function parseAtLink(link: string): {label: string; url: string} | undefined {
);
}
// Validate absolute `/api/...` links against the known symbol registry. This catches
// miscased symbol names (e.g. `/api/router/routerModule` instead of
// `/api/router/RouterModule`) at build time.
if (rawSymbol.startsWith('/api/')) {
const [pathPart] = rawSymbol.split('#');
const segments = pathPart.split('/').filter((s) => s.length > 0);
const symbolName = segments[segments.length - 1];
// Case-insensitive lookup: find the canonical symbol name in the registry.
const knownSymbols = Object.keys(getSymbolsAsApiEntries());
const canonicalSymbol = knownSymbols.find(
(s) => s.toLowerCase() === symbolName.toLowerCase(),
);
if (canonicalSymbol && canonicalSymbol !== symbolName) {
const expectedUrl = getSymbolUrl(canonicalSymbol);
throw Error(
`Broken @link: ${link}. Did you mean ${expectedUrl}? ` +
`Symbol names in API URLs are case-sensitive.`,
);
}
}
return {
url: rawSymbol,
label: description ?? rawSymbol.split('/').pop()!,
adev/shared-docs/pipeline/api-gen/rendering/transforms/params-transforms.mts
+11 -1
View File
@@ -7,7 +7,7 @@
*/
import {HasModuleName, HasParams, HasRenderableParams} from '../entities/traits.mjs';
import {addHtmlDescription} from './jsdoc-transforms.mjs';
import {addHtmlDescription, getHtmlForJsDocText} from './jsdoc-transforms.mjs';
import {addModuleName} from './module-name.mjs';
export function addRenderableFunctionParams<T extends HasParams & HasModuleName>(
@@ -22,3 +22,13 @@ export function addRenderableFunctionParams<T extends HasParams & HasModuleName>
params,
};
}
/** Converts `returnDescription` to `htmlReturnDescription` for rendering. */
export function addHtmlReturnDescription<
T extends {returnDescription?: string; moduleName: string},
>(entry: T): T & {htmlReturnDescription?: string} {
const htmlReturnDescription = entry.returnDescription
? getHtmlForJsDocText(entry.returnDescription)
: undefined;
return {...entry, htmlReturnDescription};
}
adev/shared-docs/pipeline/shared/linking.mts
+7
View File
@@ -32,6 +32,13 @@ const LINK_EXEMPT = new Set([
'type',
'Host',
'filter',
'required',
'pattern',
'min',
'max',
'minLength',
'maxLength',
'query',
]);
export function shouldLinkSymbol(symbol: string): boolean {
adev/shared-docs/pipeline/shared/marked/extensions/docs-card/docs-card.mts
+8 -2
View File
@@ -18,6 +18,7 @@ interface DocsCardToken extends Tokens.Generic {
href?: string;
imgSrc?: string;
iconImgSrc?: string; // Need image since icons are custom
titleInline?: boolean;
tokens: Token[];
}
@@ -30,6 +31,7 @@ const linkRule = /link="([^"]*)"/;
const hrefRule = /href="([^"]*)"/;
const imgSrcRule = /imgSrc="([^"]*)"/;
const iconImgSrcRule = /iconImgSrc="([^"]*)"/;
const titleInlineRule = /(?:^|\s)titleInline(?=\s|$|=)/;
export const docsCardExtension = {
name: 'docs-card',
@@ -47,6 +49,7 @@ export const docsCardExtension = {
const href = hrefRule.exec(attr);
const imgSrc = imgSrcRule.exec(attr);
const iconImgSrc = iconImgSrcRule.exec(attr);
const titleInline = titleInlineRule.test(attr);
const body = match[2].trim();
@@ -59,6 +62,7 @@ export const docsCardExtension = {
link: link ? link[1] : undefined,
imgSrc: imgSrc ? imgSrc[1] : undefined,
iconImgSrc: iconImgSrc ? iconImgSrc[1] : undefined,
titleInline,
tokens: [],
};
this.lexer.blockTokens(token.body, token.tokens);
@@ -79,12 +83,14 @@ function getStandardCard(renderer: AdevDocsRenderer, token: DocsCardToken) {
// We need to read svg content, instead of renering svg with `img`,
// cause we would like to use CSS variables to support dark and light mode.
const icon = loadWorkspaceRelativeFile(token.iconImgSrc);
const header = token.titleInline
? `<div class="docs-card-header-inline">${icon}<h3>${token.title}</h3></div>`
: `${icon}<h3>${token.title}</h3>`;
return `
<a href="${token.href}" ${anchorTarget(token.href)} class="docs-card">
<div>
${icon}
<h3>${token.title}</h3>
${header}
${renderer.parser.parse(token.tokens)}
</div>
<span>${token.link ? token.link : 'Learn more'}</span>
adev/shared-docs/styles/_media-queries.scss
+8 -8
View File
@@ -24,43 +24,43 @@ $screen-xxl: 1800px;
}
@mixin for-tablet-portrait-up {
@media (min-width: calc($screen-xs + 0.01px)) {
@media (min-width: ($screen-xs + 1px)) {
@content;
}
}
@mixin for-tablet {
@media (min-width: calc($screen-xs + 0.01px)) and (max-width: $screen-md) {
@media (min-width: ($screen-xs + 1px)) and (max-width: $screen-md) {
@content;
}
}
@mixin for-tablet-up {
@media (min-width: calc($screen-sm + 0.01px)) {
@media (min-width: ($screen-sm + 1px)) {
@content;
}
}
@mixin for-tablet-landscape-up {
@media (min-width: calc($screen-md + 0.01px)) {
@media (min-width: ($screen-md + 1px)) {
@content;
}
}
@mixin for-desktop-up {
@media (min-width: calc($screen-lg + 0.01px)) {
@media (min-width: ($screen-lg + 1px)) {
@content;
}
}
@mixin for-large-desktop-up {
@media (min-width: calc($screen-xl + 0.01px)) {
@media (min-width: ($screen-xl + 1px)) {
@content;
}
}
@mixin for-extra-large-desktop-up {
@media (min-width: calc($screen-xxl + 0.01px)) {
@media (min-width: ($screen-xxl + 1px)) {
@content;
}
}
@@ -72,7 +72,7 @@ $screen-xxl: 1800px;
}
@mixin for-large-desktop-down {
@media (max-width: calc($screen-xl )) {
@media (max-width: $screen-xl) {
@content;
}
}
adev/shared-docs/styles/_reference.scss
+6 -1
View File
@@ -340,6 +340,11 @@
}
}
.docs-param-type {
display: inline-block;
margin-inline-end: 0.5rem;
}
.docs-parameter-description {
p:first-child {
margin-block-start: 0;
@@ -357,7 +362,7 @@
padding-block: 1rem;
// & does not follow a function definition
&:not(.docs-function-definition + .docs-return-type) {
&:not(.docs-function-definition + .docs-return-type):not(:first-child) {
border-block-start: 1px solid var(--senary-contrast);
}
}
adev/shared-docs/styles/docs/_card.scss
+15
View File
@@ -159,6 +159,21 @@
margin-block: 1.5rem;
}
.docs-card-header-inline {
display: flex;
align-items: center;
gap: 0.5rem;
svg {
margin-block-end: 0;
flex-shrink: 0;
}
h3 {
margin-block: 0;
}
}
&.docs-card-with-svg {
padding: 0;
adev/shared-docs/styles/docs/_code.scss
+3 -18
View File
@@ -80,26 +80,11 @@ $code-font-size: 0.875rem;
&:not(pre *) {
position: relative;
padding: 0 0.3rem;
// Fallback for older browsers
background: #e62600;
background: var(--red-to-orange-horizontal-gradient);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background: var(--subtle-purple);
color: var(--hot-pink);
max-width: max-content;
border-radius: 0.25rem;
width: 100%;
display: inline-block;
&::before {
content: '';
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: var(--subtle-purple);
border-radius: 0.25rem;
z-index: -1;
}
a:not(.docs-anchor) > & {
position: relative;
adev/src/app/app.component.scss
+7
View File
@@ -40,6 +40,13 @@
}
}
// Lock the page behind the mobile primary-nav drawer. `clip` preserves the primary nav's sticky context.
@include mq.for-phone-only {
&:has(.adev-nav-primary--open) {
overflow: clip;
}
}
&:has(.adev-home) {
.adev-nav {
width: 0;
adev/src/app/core/layout/footer/footer.component.html
+4 -1
View File
@@ -58,7 +58,7 @@
<li>
<a
href="https://github.com/angular/angular/issues"
title="Post issues and suggestions on github."
title="Post issues and suggestions on GitHub."
>
Report Issues
</a>
@@ -99,6 +99,9 @@
<li>
<a href="https://angular.az/" title="Azərbaycanca">Azərbaycanca</a>
</li>
<li>
<a href="https://docs.angular.lat/" title="Español">Español</a>
</li>
<li>
<a href="https://angular-docs.tr/" title="Türkçe">Türkçe</a>
</li>
adev/src/app/core/layout/navigation/navigation.component.html
+2 -2
View File
@@ -392,11 +392,11 @@
<a
[href]="ngLinks.GITHUB"
cdkMenuItem
title="Angular Github"
title="Angular GitHub"
target="_blank"
rel="noopener"
>
<!-- Github Icon -->
<!-- GitHub Icon -->
<svg
width="20"
height="20"
adev/src/app/core/layout/navigation/navigation.component.scss
+1 -1
View File
@@ -140,7 +140,7 @@
position: absolute;
top: 0;
background-color: var(--page-background);
box-shadow: 10px 4px 3px 0 rgba(0, 0, 0, 0.001);
box-shadow: 2px 0 0 0 var(--page-background);
transform: translateX(-100%);
// primary nav: exit delayed
adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.scss
+1
View File
@@ -35,6 +35,7 @@
@include mq.for-tablet-landscape-down {
position: absolute;
height: 100dvh;
}
@media (prefers-reduced-motion: no-preference) {
adev/src/app/features/references/api-items-section/api-items-section.component.scss
+5 -2
View File
@@ -79,12 +79,15 @@
:host {
--item-attr-base-mix: 80%;
--item-attr-text: var(--page-background);
.docs-light-mode & {
--item-attr-base-mix: 20%;
--item-attr-text: var(--primary-contrast);
}
@media screen and (prefers-color-scheme: light) {
--item-attr-base-mix: 20%;
--item-attr-text: var(--primary-contrast);
}
}
@@ -110,7 +113,7 @@
var(--symbolic-yellow) var(--item-attr-base-mix),
var(--octonary-contrast)
);
color: var(--page-background);
color: var(--item-attr-text);
}
&.adev-experimental {
@@ -119,7 +122,7 @@
var(--symbolic-green) var(--item-attr-base-mix),
var(--octonary-contrast)
);
color: var(--page-background);
color: var(--item-attr-text);
}
&.adev-deprecated {
adev/src/app/features/update/recommendations.ts
+58 -37
View File
@@ -14,6 +14,12 @@ export enum ApplicationComplexity {
export interface Step {
step: string;
/**
* Action text rendered as Markdown. Use Markdown link syntax `[text](url)`
* for any links — raw `<a>` HTML tags bypass the custom link renderer in
* `update.component.ts` and will not pick up `target="_blank"` or the
* external-link icon.
*/
action: string;
possibleIn: number;
necessaryAsOf: number;
@@ -155,7 +161,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Advanced,
step: 'gendir',
action:
'Do not rely on `gendir`, instead look at using `skipTemplateCodeGen`. <a href=https://github.com/angular/angular/issues/19339#issuecomment-332607471" target="_blank">Read More</a>',
'Do not rely on `gendir`, instead look at using `skipTemplateCodeGen`. [Read More](https://github.com/angular/angular/issues/19339#issuecomment-332607471)',
},
{
possibleIn: 220,
@@ -239,7 +245,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'node 8',
action:
'Make sure you are using <a href="http://www.hostingadvice.com/how-to/update-node-js-latest-version/" target="_blank">Node 8 or later</a>',
'Make sure you are using [Node 8 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)',
},
{
possibleIn: 600,
@@ -248,7 +254,7 @@ export const RECOMMENDATIONS: Step[] = [
windows: false,
step: 'Update to CLI v6',
action:
'Update your Angular CLI, and migrate the configuration to the <a href="https://github.com/angular/angular-cli/wiki/angular-workspace" target="_blank">new angular.json format</a> by running the following:<br/><br/>`NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@6 update @angular/cli@6`<br/>',
'Update your Angular CLI, and migrate the configuration to the [new angular.json format](https://github.com/angular/angular-cli/wiki/angular-workspace) by running the following:<br/><br/>`NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@6 update @angular/cli@6`<br/>',
},
{
possibleIn: 600,
@@ -257,7 +263,7 @@ export const RECOMMENDATIONS: Step[] = [
windows: true,
step: 'Update to CLI v6',
action:
'Update your Angular CLI, and migrate the configuration to the <a href="https://github.com/angular/angular-cli/wiki/angular-workspace" target="_blank">new angular.json format</a> by running the following:<br/><br/>`cmd /C "set "NG_DISABLE_VERSION_CHECK=1" && npx @angular/cli@6 update @angular/cli@6 @angular/core@6"`<br/>',
'Update your Angular CLI, and migrate the configuration to the [new angular.json format](https://github.com/angular/angular-cli/wiki/angular-workspace) by running the following:<br/><br/>`cmd /C "set "NG_DISABLE_VERSION_CHECK=1" && npx @angular/cli@6 update @angular/cli@6 @angular/core@6"`<br/>',
},
{
possibleIn: 600,
@@ -343,7 +349,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Medium,
step: 'strictPropertyInitializer',
action:
'If you have TypeScript configured to be strict (if you have set `strict` to `true` in your `tsconfig.json` file), update your `tsconfig.json` to disable `strictPropertyInitialization` or move property initialization from `ngOnInit` to your constructor. You can learn more about this flag on the <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#strict-class-initialization">TypeScript 2.7 release notes</a>.',
'If you have TypeScript configured to be strict (if you have set `strict` to `true` in your `tsconfig.json` file), update your `tsconfig.json` to disable `strictPropertyInitialization` or move property initialization from `ngOnInit` to your constructor. You can learn more about this flag on the [TypeScript 2.7 release notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#strict-class-initialization).',
},
{
possibleIn: 600,
@@ -351,7 +357,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'update to RxJS 6',
action:
'Remove deprecated RxJS 5 features using <a href="https://github.com/ReactiveX/rxjs-tslint" target="_blank">rxjs-tslint auto update rules</a><br/><br/>For most applications this will mean running the following two commands:<br/><br/>`npx rxjs-tslint`<br/>`rxjs-5-to-6-migrate -p src/tsconfig.app.json`',
'Remove deprecated RxJS 5 features using [rxjs-tslint auto update rules](https://github.com/ReactiveX/rxjs-tslint)<br/><br/>For most applications this will mean running the following two commands:<br/><br/>`npx rxjs-tslint`<br/>`rxjs-5-to-6-migrate -p src/tsconfig.app.json`',
},
{
possibleIn: 600,
@@ -374,7 +380,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'TypeScript 3.1',
action:
'Angular now uses TypeScript 3.1, read more about any potential breaking changes: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-1.html',
'Angular now uses TypeScript 3.1, read more about [any potential breaking changes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-1.html).',
},
{
possibleIn: 700,
@@ -382,7 +388,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'Node 10',
action:
'Angular has now added support for Node 10: https://nodejs.org/en/blog/release/v10.0.0/',
'Angular has now added support for [Node 10](https://nodejs.org/en/blog/release/v10.0.0/).',
},
{
possibleIn: 700,
@@ -464,7 +470,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'use ::ng-deep instead of /deep/',
action:
'Replace `/deep/` with `::ng-deep` in your styles, [read more about angular component styles and ::ng-deep](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep). `/deep/` and `::ng-deep` both are deprecated but using `::ng-deep` is preferred until the shadow-piercing descendant combinator is [removed from browsers and tools](https://www.chromestatus.com/features/6750456638341120) completely.',
'Replace `/deep/` with `::ng-deep` in your styles, [read more about angular component styles and ::ng-deep](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep). `/deep/` and `::ng-deep` both are deprecated but using `::ng-deep` is preferred until the shadow-piercing descendant combinator is [removed from browsers and tools](https://chromestatus.com/feature/5045542597951488) completely.',
},
{
possibleIn: 800,
@@ -480,7 +486,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'node 10',
action:
'Make sure you are using <a href="http://www.hostingadvice.com/how-to/update-node-js-latest-version/" target="_blank">Node 10 or later</a>.',
'Make sure you are using [Node 10 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/).',
},
{
possibleIn: 800,
@@ -573,7 +579,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'node 10.13',
action:
'Make sure you are using <a href="http://www.hostingadvice.com/how-to/update-node-js-latest-version/" target="_blank">Node 10.13 or later</a>.',
'Make sure you are using [Node 10.13 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/).',
},
{
possibleIn: 900,
@@ -781,9 +787,8 @@ export const RECOMMENDATIONS: Step[] = [
possibleIn: 1000,
necessaryAsOf: 1000,
level: ApplicationComplexity.Basic,
step: 'v10 NodeJS 12',
action:
'Make sure you are using <a href="https://nodejs.org/dist/latest-v12.x/" target="_blank">Node 12 or later</a>.',
step: 'v10 Node.js 12',
action: 'Make sure you are using [Node 12 or later](https://nodejs.org/dist/latest-v12.x/).',
},
{
possibleIn: 1000,
@@ -847,7 +852,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Advanced,
step: 'closure-jsdoc-comments',
action:
"Angular's NPM packages no longer contain jsdoc comments, which are necessary for use with closure compiler (extremely uncommon). This support was experimental and only worked in some use cases. There will be an alternative recommended path announced shortly.",
"Angular's npm packages no longer contain jsdoc comments, which are necessary for use with closure compiler (extremely uncommon). This support was experimental and only worked in some use cases. There will be an alternative recommended path announced shortly.",
},
{
possibleIn: 1000,
@@ -871,7 +876,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Medium,
step: 'esm5-bundles',
action:
"The [Angular Package Format](https://g.co/ng/apf) has been updated to remove `esm5` and `fesm5` formats. These are no longer distributed in our npm packages. If you don't use the CLI, you may need to downlevel Angular code to ES5 yourself.",
"The [Angular Package Format](https://angular.dev/tools/libraries/angular-package-format) has been updated to remove `esm5` and `fesm5` formats. These are no longer distributed in our npm packages. If you don't use the CLI, you may need to downlevel Angular code to ES5 yourself.",
},
{
possibleIn: 1000,
@@ -1335,7 +1340,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'TypeScript 4.4',
action:
'Angular now uses TypeScript 4.4, read more about any potential breaking changes: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html',
'Angular now uses TypeScript 4.4, read more about [any potential breaking changes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html).',
},
{
possibleIn: 1300,
@@ -1343,7 +1348,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'v13 node',
action:
'Make sure you are using <a href="http://www.hostingadvice.com/how-to/update-node-js-latest-version/" target="_blank">Node 12.20.0 or later</a>',
'Make sure you are using [Node 12.20.0 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)',
},
{
possibleIn: 1300,
@@ -1457,7 +1462,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'TypeScript 4.6',
action:
'Angular now uses TypeScript 4.6, read more about any potential breaking changes: https://devblogs.microsoft.com/typescript/announcing-typescript-4-6/',
'Angular now uses TypeScript 4.6, read more about [any potential breaking changes](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6/).',
},
{
@@ -1466,7 +1471,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'v14 node',
action:
'Make sure you are using <a href="http://www.hostingadvice.com/how-to/update-node-js-latest-version/" target="_blank">Node 14.15.0 or later</a>',
'Make sure you are using [Node 14.15.0 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)',
},
{
possibleIn: 1400,
@@ -1669,7 +1674,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'v15 node support',
action:
'Make sure that you are using a supported version of node.js before you upgrade your application. Angular v15 supports node.js versions: 14.20.x, 16.13.x and 18.10.x. <a href="https://v15.angular.io/guide/update-to-version-15#v15-bc-01" alt="Link to more information about this change">Read further</a>',
'Make sure that you are using a supported version of node.js before you upgrade your application. Angular v15 supports node.js versions: 14.20.x, 16.13.x and 18.10.x. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-bc-01)',
},
{
possibleIn: 1500,
@@ -1677,7 +1682,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'v15 ts support',
action:
'Make sure that you are using a supported version of TypeScript before you upgrade your application. Angular v15 supports TypeScript version 4.8 or later. <a href="https://v15.angular.io/guide/update-to-version-15#v15-bc-02" alt="Link to more information about this change">Read further</a>',
'Make sure that you are using a supported version of TypeScript before you upgrade your application. Angular v15 supports TypeScript version 4.8 or later. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-bc-02)',
},
{
possibleIn: 1500,
@@ -1701,7 +1706,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Medium,
step: 'v15 keyframe',
action:
'In v15, the Angular compiler prefixes `@keyframes` in CSS with the component\'s scope. This means that any TypeScript code that relies on `keyframes` names no longer works in v15. Update any such instances to: define keyframes programmatically, use global stylesheets, or change the component\'s view encapsulation. <a href="https://v15.angular.io/guide/update-to-version-15#v15-bc-03" alt="Link to more information about this change">Read further</a>',
"In v15, the Angular compiler prefixes `@keyframes` in CSS with the component's scope. This means that any TypeScript code that relies on `keyframes` names no longer works in v15. Update any such instances to: define keyframes programmatically, use global stylesheets, or change the component's view encapsulation. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-bc-03)",
},
{
possibleIn: 1500,
@@ -1717,7 +1722,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Medium,
step: 'v15 base-decorators',
action:
'Make sure to use decorators in base classes with child classes that inherit constructors and use dependency injection. Such base classes should be decorated with either `@Injectable` or `@Directive` or the compiler returns an error. <a href="https://v15.angular.io/guide/update-to-version-15#v15-bc-05" alt="Link to more information about this change">Read further</a>',
'Make sure to use decorators in base classes with child classes that inherit constructors and use dependency injection. Such base classes should be decorated with either `@Injectable` or `@Directive` or the compiler returns an error. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-bc-05)',
},
{
possibleIn: 1500,
@@ -1725,7 +1730,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Medium,
step: 'v15 setDisabledState',
action:
'In v15, `setDisabledState` is always called when a `ControlValueAccessor` is attached. To opt-out of this behavior, use `FormsModule.withConfig` or `ReactiveFormsModule.withConfig`. <a href="https://v15.angular.io/guide/update-to-version-15#v15-bc-06" alt="Link to more information about this change">Read further</a>',
'In v15, `setDisabledState` is always called when a `ControlValueAccessor` is attached. To opt-out of this behavior, use `FormsModule.withConfig` or `ReactiveFormsModule.withConfig`. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-bc-06)',
},
{
possibleIn: 1500,
@@ -1733,7 +1738,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Advanced,
step: 'v15 canParse',
action:
'Applications that use `canParse` should use `analyze` from `@angular/localize/tools` instead. In v15, the `canParse` method was removed from all translation parsers in `@angular/localize/tools`. <a href="https://v15.angular.io/guide/update-to-version-15#v15-bc-07" alt="Link to more information about this change">Read further</a>',
'Applications that use `canParse` should use `analyze` from `@angular/localize/tools` instead. In v15, the `canParse` method was removed from all translation parsers in `@angular/localize/tools`. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-bc-07)',
},
{
possibleIn: 1500,
@@ -1741,7 +1746,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'v15 ActivatedRoutSnapshot',
action:
'Make sure that all `ActivatedRouteSnapshot` objects have a `title` property. In v15, the `title` property is a required property of `ActivatedRouteSnapshot`. <a href="https://v15.angular.io/guide/update-to-version-15#v15-bc-08" alt="Link to more information about this change">Read further</a>',
'Make sure that all `ActivatedRouteSnapshot` objects have a `title` property. In v15, the `title` property is a required property of `ActivatedRouteSnapshot`. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-bc-08)',
},
{
possibleIn: 1500,
@@ -1749,7 +1754,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Advanced,
step: 'v15 RouterOutlet',
action:
'If your tests with `RouterOutlet` break, make sure they don\'t depend on the instantiation order of the corresponding component relative to change detection. In v15, `RouterOutlet` instantiates the component after change detection. <a href="https://v15.angular.io/guide/update-to-version-15#v15-bc-09" alt="Link to more information about this change">Read further</a>',
"If your tests with `RouterOutlet` break, make sure they don't depend on the instantiation order of the corresponding component relative to change detection. In v15, `RouterOutlet` instantiates the component after change detection. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-bc-09)",
},
{
possibleIn: 1500,
@@ -1757,7 +1762,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'v15 relativeLinkResolution',
action:
'In v15, `relativeLinkResolution` is not configurable in the Router. It was used to opt out of an earlier bug fix that is now standard. <a href="https://v15.angular.io/guide/update-to-version-15#v15-bc-10" alt="Link to more information about this change">Read further</a>',
'In v15, `relativeLinkResolution` is not configurable in the Router. It was used to opt out of an earlier bug fix that is now standard. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-bc-10)',
},
{
possibleIn: 1500,
@@ -1765,7 +1770,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Medium,
step: 'v15 DATE_PIPE_DEFAULT_OPTIONS',
action:
'Change instances of the `DATE_PIPE_DEFAULT_TIMEZONE` token to use `DATE_PIPE_DEFAULT_OPTIONS` to configure time zones. In v15, the `DATE_PIPE_DEFAULT_TIMEZONE` token is deprecated. <a href="https://v15.angular.io/guide/update-to-version-15#v15-dp-01" alt="Link to more information about this change">Read further</a>',
'Change instances of the `DATE_PIPE_DEFAULT_TIMEZONE` token to use `DATE_PIPE_DEFAULT_OPTIONS` to configure time zones. In v15, the `DATE_PIPE_DEFAULT_TIMEZONE` token is deprecated. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-dp-01)',
},
{
possibleIn: 1500,
@@ -1781,7 +1786,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Medium,
step: 'v15 Injector.get',
action:
'Update instances of `Injector.get()` that use an `InjectFlags` parameter to use an `InjectOptions` parameter. The `InjectFlags` parameter of `Injector.get()` is deprecated in v15. <a href="https://v15.angular.io/guide/update-to-version-15#v15-dp-02" alt="Link to more information about this change">Read further</a>',
'Update instances of `Injector.get()` that use an `InjectFlags` parameter to use an `InjectOptions` parameter. The `InjectFlags` parameter of `Injector.get()` is deprecated in v15. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-dp-02)',
},
{
possibleIn: 1500,
@@ -1789,7 +1794,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'v15 TestBed.inject',
action:
'Update instances of `TestBed.inject()` that use an `InjectFlags` parameter to use an `InjectOptions` parameter. The `InjectFlags` parameter of `TestBed.inject()` is deprecated in v15. <a href="https://v15.angular.io/guide/update-to-version-15#v15-dp-01" alt="Link to more information about this change">Read further</a>',
'Update instances of `TestBed.inject()` that use an `InjectFlags` parameter to use an `InjectOptions` parameter. The `InjectFlags` parameter of `TestBed.inject()` is deprecated in v15. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-dp-01)',
},
{
possibleIn: 1500,
@@ -1797,7 +1802,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Medium,
step: 'v15 ngModule in providedIn',
action:
'Using `providedIn: ngModule` for an `@Injectable` and `InjectionToken` is deprecated in v15. <a href="https://v15.angular.io/guide/update-to-version-15#v15-dp-04" alt="Link to more information about this change">Read further</a>',
'Using `providedIn: ngModule` for an `@Injectable` and `InjectionToken` is deprecated in v15. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-dp-04)',
},
{
possibleIn: 1500,
@@ -1805,7 +1810,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: 'v15 providedIn any',
action:
'Using `providedIn: \'any\'` for an `@Injectable` or `InjectionToken` is deprecated in v15. <a href="https://v15.angular.io/guide/update-to-version-15#v15-dp-05" alt="Link to more information about this change">Read further</a>',
"Using `providedIn: 'any'` for an `@Injectable` or `InjectionToken` is deprecated in v15. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-dp-05)",
},
{
possibleIn: 1500,
@@ -1813,7 +1818,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Medium,
step: 'v15 RouterLinkWithHref',
action:
'Update instances of the `RouterLinkWithHref`directive to use the `RouterLink` directive. The `RouterLinkWithHref` directive is deprecated in v15. <a href="https://v15.angular.io/guide/update-to-version-15#v15-dp-06" alt="Link to more information about this change">Read further</a>',
'Update instances of the `RouterLinkWithHref`directive to use the `RouterLink` directive. The `RouterLinkWithHref` directive is deprecated in v15. [Read further](https://v15.angular.io/guide/update-to-version-15#v15-dp-06)',
},
{
possibleIn: 1500,
@@ -1822,7 +1827,7 @@ export const RECOMMENDATIONS: Step[] = [
material: true,
step: 'v15 mat refactor',
action:
'In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC). This change affected the DOM and CSS classes of many components. <a href="https://rc.material.angular.dev/guide/mdc-migration" alt="Link to more information about this change">Read further</a>',
'In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC). This change affected the DOM and CSS classes of many components. [Read further](https://rc.material.angular.dev/guide/mdc-migration)',
},
{
possibleIn: 1500,
@@ -2669,7 +2674,7 @@ export const RECOMMENDATIONS: Step[] = [
level: ApplicationComplexity.Basic,
step: '20.0.0_update_nodejs_version',
action:
'Ensure your Node.js version is at least 20.11.1 and not v18 or v22.0-v22.10 before upgrading to Angular v20. Check https://angular.dev/reference/versions for the full list of supported Node.js versions.',
'Ensure your Node.js version is at least 20.11.1 and not v18 or v22.0-v22.10 before upgrading to Angular v20. Check the [full list of supported Node.js versions](https://angular.dev/reference/versions).',
},
{
possibleIn: 2000,
@@ -2703,6 +2708,14 @@ export const RECOMMENDATIONS: Step[] = [
action:
"Upgrade your project's TypeScript version to at least 5.8 before upgrading to Angular v20 to ensure compatibility.",
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
level: ApplicationComplexity.Medium,
step: '20.0.0_set_moduleResolution_to_bundler',
action:
"Set `moduleResolution` to `'bundler'` in your `tsconfig.json`. Angular CLI's `ng update` migration applies this change automatically; if you upgrade manually or override the option in a base tsconfig, set it explicitly so imports of secondary entry-points such as `@angular/core/rxjs-interop` continue to resolve correctly.",
},
{
possibleIn: 2000,
necessaryAsOf: 2000,
@@ -2912,4 +2925,12 @@ export const RECOMMENDATIONS: Step[] = [
action:
'The `lastSuccessfulNavigation` property on the Router has been converted to a signal. To get its value, you now need to invoke it as a function: `router.lastSuccessfulNavigation()`.',
},
{
possibleIn: 2100,
necessaryAsOf: 2100,
level: ApplicationComplexity.Medium,
step: '21.0.0-configure-commonengine-allowed-hosts',
action:
"Starting `@angular/ssr` 21.1.5, if your application uses SSR with `CommonEngine`, set the `allowedHosts` option in your `server.ts` (for example, `new CommonEngine({allowedHosts: ['localhost', '*.yourdomain.com']})`). Without it, SSR silently falls back to client-side rendering. This requirement comes from security advisory [GHSA-x288-3778-4hhx](https://github.com/angular/angular-cli/security/advisories/GHSA-x288-3778-4hhx) (also backported to 20.3.17 and 19.2.21).",
},
];
adev/src/app/features/update/update.component.scss
+10 -2
View File
@@ -1,4 +1,5 @@
@use '@angular/docs/styles/media-queries' as mq;
@use '@angular/docs/styles/links' as links;
$ver-dropdown-width: clamp(165px, 20vw, 200px);
@@ -172,7 +173,14 @@ h4 {
}
// Code blocks are generable from the markdown, we need to opt-out of the scoping
::ng-deep code {
cursor: pointer;
::ng-deep {
code {
cursor: pointer;
}
// External links (rendered with target="_blank") get an "open in new" icon
a[target='_blank'] {
@include links.external-link-with-icon;
}
}
}
adev/src/app/features/update/update.component.spec.ts
+11 -1
View File
@@ -13,7 +13,7 @@ import {provideHttpClientTesting} from '@angular/common/http/testing';
import {By} from '@angular/platform-browser';
import UpdateComponent from './update.component';
import {ApplicationComplexity} from './recommendations';
import {ApplicationComplexity, RECOMMENDATIONS} from './recommendations';
describe('UpdateComponent', () => {
let component: UpdateComponent;
@@ -91,4 +91,14 @@ describe('UpdateComponent', () => {
}
});
});
describe('RECOMMENDATIONS data', () => {
it('should use Markdown links instead of raw <a> HTML tags', () => {
for (const step of RECOMMENDATIONS) {
expect(step.action)
.withContext(`step "${step.step}" should use [text](url), not raw <a> HTML`)
.not.toMatch(/<a\s/i);
}
});
});
});
adev/src/app/features/update/update.component.ts
+14
View File
@@ -17,6 +17,20 @@ import {ActivatedRoute, Router} from '@angular/router';
import {marked} from 'marked';
import {MatSnackBar} from '@angular/material/snack-bar';
/**
* Configure marked with a custom link renderer so external links in the
* update guide open in a new tab, matching the convention applied elsewhere
* in adev via the `ExternalLink` directive.
*/
marked.use({
renderer: {
link({href, title, text}) {
const titleAttr = title ? ` title="${title}"` : '';
return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`;
},
},
});
interface Option {
id: keyof Step;
name: string;
adev/src/app/routing/navigation-entries/index.ts
+7
View File
@@ -517,6 +517,13 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
category: 'Signal Forms',
status: 'new',
},
{
label: 'Field metadata',
path: 'guide/forms/signals/field-metadata',
contentPath: 'guide/forms/signals/field-metadata',
category: 'Signal Forms',
status: 'new',
},
{
label: 'Async operations',
path: 'guide/forms/signals/async-operations',
adev/src/assets/icons/playground.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 -960 960 960" fill="#F637E3">
<path d="M450.001-611.691v-32.386q-39.385-9.923-64.692-41.897-25.308-31.975-25.308-74.025 0-49.922 35.038-84.96 35.039-35.038 84.961-35.038t84.961 35.038q35.038 35.038 35.038 84.96 0 42.05-25.308 74.025-25.307 31.974-64.692 41.897v32.386l273.846 157.538q17.173 9.912 26.663 26.582 9.491 16.671 9.491 36.495v62.152q0 19.824-9.491 36.495-9.49 16.67-26.663 26.582L516.154-111.771q-17.203 9.846-36.217 9.846t-36.091-9.846L176.155-265.847q-17.173-9.912-26.663-26.582-9.491-16.671-9.491-36.495v-62.152q0-19.824 9.491-36.495 9.49-16.67 26.663-26.582l273.846-157.538Zm-6.155 364.537L200-387.461v58.537q0 3.078 1.539 5.962 1.538 2.885 4.615 4.808l267.692 154.692q3.077 1.923 6.154 1.923t6.154-1.923l267.692-154.692q3.077-1.923 4.615-4.808 1.539-2.884 1.539-5.962v-58.537L516.154-247.154q-17.203 9.847-36.217 9.847t-36.091-9.847Zm6.155-162.847V-542.77L250.46-427.691l223.386 128.846q3.077 1.924 6.154 1.924t6.154-1.924l223.001-128.846L509.999-542.77v132.769h-59.998ZM480-699.999q25 0 42.5-17.5t17.5-42.5q0-25-17.5-42.5t-42.5-17.5q-25 0-42.5 17.5t-17.5 42.5q0 25 17.5 42.5t42.5 17.5Zm-2.308 538.61Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

adev/src/content/ai/develop-with-ai.md
+2 -2
View File
@@ -18,11 +18,11 @@ Here is a set of instructions to help LLMs generate correct code that follows An
## Rules Files
Several editors, such as <a href="https://studio.firebase.google.com?utm_source=adev&utm_medium=website&utm_campaign=BUILD_WITH_AI_ANGULAR&utm_term=angular_devrel&utm_content=build_with_ai_angular_firebase_studio">Firebase Studio</a> have rules files useful for providing critical context to LLMs.
Several editors, such as <a href="https://studio.firebase.google.com?utm_source=adev&utm_medium=website&utm_campaign=BUILD_WITH_AI_ANGULAR&utm_term=angular_devrel&utm_content=build_with_ai_angular_firebase_studio" target="_blank">Firebase Studio</a> have rules files useful for providing critical context to LLMs.
| Environment/IDE | Rules File | Installation Instructions |
| :------------------- | :--------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Firebase Studio | <a download href="/assets/context/airules.md" target="_blank">airules.md</a> | <a href="https://firebase.google.com/docs/studio/set-up-gemini#custom-instructions">Configure `airules.md`</a> |
| Firebase Studio | <a download href="/assets/context/airules.md" target="_blank">airules.md</a> | <a href="https://firebase.google.com/docs/studio/set-up-gemini#custom-instructions" target="_blank">Configure `airules.md`</a> |
| Copilot powered IDEs | <a download="copilot-instructions.md" href="/assets/context/guidelines.md" target="_blank">copilot-instructions.md</a> | <a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions" target="_blank">Configure `.github/copilot-instructions.md`</a> |
| Cursor | <a download href="/assets/context/angular-20.mdc" target="_blank">cursor.md</a> | <a href="https://docs.cursor.com/context/rules" target="_blank">Configure `cursorrules.md`</a> |
| JetBrains IDEs | <a download href="/assets/context/guidelines.md" target="_blank">guidelines.md</a> | <a href="https://www.jetbrains.com/help/junie/customize-guidelines.html" target="_blank">Configure `guidelines.md`</a> |
adev/src/content/ai/overview.md
+3 -3
View File
@@ -59,7 +59,7 @@ Here are examples of how to build with Genkit and Angular:
Here is an example of how to build with Firebase AI Logic and Angular:
- [Firebase AI Logic x Angular Starter Kit](https://github.com/angular/examples/tree/main/vertex-ai-firebase-angular-example) - Use this starter-kit to build an e-commerce application with a chat agent that can perform tasks. Start here if you do not have experience building with Firebase AI Logic and Angular.
- [Firebase AI Logic x Angular Starter Kit](https://github.com/angular/examples/tree/main/firebase-ai-logic-angular-example) - Use this starter-kit to build an e-commerce application with a chat agent that can perform tasks. Start here if you do not have experience building with Firebase AI Logic and Angular.
This example includes an [in-depth video walkthrough explaining the functionality and demonstrates how to add new features](https://youtube.com/live/4vfDz2al_BI).
@@ -79,7 +79,7 @@ When connecting to model providers, it is important to keep your API secrets saf
Your application's architecture determines which AI APIs and tools to choose. Specifically, choose based on whether or not your application is client-side or server-side. Tools such as Firebase AI Logic provide a secure connection to the model APIs for client-side code. If you want to use a different API than Firebase AI Logic or prefer to use a different model provider, consider creating a proxy-server or even [Cloud Functions for Firebase](https://firebase.google.com/docs/functions) to serve as a proxy and not expose your API keys.
For an example of connecting using a client-side app, see the code: [Firebase AI Logic Angular example repository](https://github.com/angular/examples/tree/main/vertex-ai-firebase-angular-example).
For an example of connecting using a client-side app, see the code: [Firebase AI Logic Angular example repository](https://github.com/angular/examples/tree/main/firebase-ai-logic-angular-example).
For server-side connections to model APIs that require API keys, prefer using a secrets manager or environment variable, not `environments.ts`. You should follow standard best practices for securing API keys and credentials. Firebase now provides a new secrets manager with the latest updates from Firebase App Hosting. To learn more, [check out the official documentation](https://firebase.google.com/docs/app-hosting/configure).
@@ -91,7 +91,7 @@ If you want to build agentic workflows, where agents are able to act and use too
Tool calling further enhances your web apps by expanding your AI integration further than a question and answer style chat bot. In fact, you can empower your model to request function calls using the function calling API of your model provider. The available tools can be used to perform more complex actions within the context of your application.
In the [e-commerce example](https://github.com/angular/examples/blob/main/vertex-ai-firebase-angular-example/src/app/ai.service.ts#L88) of the [Angular examples repository](https://github.com/angular/examples), the LLM requests to make calls to functions for inventory in order to gain the necessary context to perform more complex tasks such as calculating how much a group of items in the store will cost. The scope of the available API is up to you as a developer just as is whether or not to call a function requested by the LLM. You remain in control of the flow of execution. You can expose specific functions of a service for example but not all functions of that service.
In the [e-commerce example](https://github.com/angular/examples/blob/main/firebase-ai-logic-angular-example/src/app/ai.service.ts#L88) of the [Angular examples repository](https://github.com/angular/examples), the LLM requests to make calls to functions for inventory in order to gain the necessary context to perform more complex tasks such as calculating how much a group of items in the store will cost. The scope of the available API is up to you as a developer just as is whether or not to call a function requested by the LLM. You remain in control of the flow of execution. You can expose specific functions of a service for example but not all functions of that service.
### Handling non-deterministic responses
adev/src/content/aria/_build-info.json
+1 -1
View File
@@ -1,4 +1,4 @@
{
"branchName": "refs/heads/21.2.x",
"sha": "0707c69d63e9962bab077dbc45770c25c8d26b7c"
"sha": "887bb70d938ed041e4d1d61f6683c995cb91709c"
}
adev/src/content/aria/aria-menu.json
+5 -5
View File
@@ -255,7 +255,7 @@
"readonly",
"input"
],
"description": "The value of the menu item, used as the default aria-label",
"description": "The value of the menu item.",
"jsdocTags": [],
"inputAlias": "value",
"isRequiredInput": true
@@ -413,7 +413,7 @@
"name": "V"
}
],
"description": "An item in a Menu.\n\n`ngMenuItem` directives can be used in `ngMenu` and `ngMenuBar` to represent a choice\nor action a user can take. They can also act as triggers for sub-menus.\n\n```html\n<div ngMenu (itemSelected)=\"doAction()\">\n <div ngMenuItem >Action Item</div>\n <div ngMenuItem [submenu]=\"anotherMenu\">Submenu Trigger</div>\n</div>\n```",
"description": "An item in a Menu.\n\n`ngMenuItem` directives can be used in `ngMenu` and `ngMenuBar` to represent a choice\nor action a user can take. They can also act as triggers for sub-menus.\n\n```html\n<div ngMenu (itemSelected)=\"doAction()\">\n <div ngMenuItem>Action Item</div>\n <div ngMenuItem [submenu]=\"anotherMenu\">Submenu Trigger</div>\n</div>\n```",
"jsdocTags": [
{
"name": "developerPreview",
@@ -428,7 +428,7 @@
"comment": "[MenuBar](guide/aria/menubar)"
}
],
"rawComment": "/**\n * An item in a Menu.\n *\n * `ngMenuItem` directives can be used in `ngMenu` and `ngMenuBar` to represent a choice\n * or action a user can take. They can also act as triggers for sub-menus.\n *\n * ```html\n * <div ngMenu (itemSelected)=\"doAction()\">\n * <div ngMenuItem >Action Item</div>\n * <div ngMenuItem [submenu]=\"anotherMenu\">Submenu Trigger</div>\n * </div>\n * ```\n *\n * @developerPreview 21.0\n *\n * @see [Menu](guide/aria/menu)\n * @see [MenuBar](guide/aria/menubar)\n */",
"rawComment": "/**\n * An item in a Menu.\n *\n * `ngMenuItem` directives can be used in `ngMenu` and `ngMenuBar` to represent a choice\n * or action a user can take. They can also act as triggers for sub-menus.\n *\n * ```html\n * <div ngMenu (itemSelected)=\"doAction()\">\n * <div ngMenuItem>Action Item</div>\n * <div ngMenuItem [submenu]=\"anotherMenu\">Submenu Trigger</div>\n * </div>\n * ```\n *\n * @developerPreview 21.0\n *\n * @see [Menu](guide/aria/menu)\n * @see [MenuBar](guide/aria/menubar)\n */",
"implements": [],
"isStandalone": true,
"selector": "[ngMenuItem]",
@@ -441,7 +441,7 @@
"source": {
"filePath": "/src/aria/menu/menu-item.ts",
"startLine": 34,
"endLine": 109
"endLine": 108
}
},
{
@@ -792,7 +792,7 @@
"source": {
"filePath": "/src/aria/menu/menu.ts",
"startLine": 58,
"endLine": 194
"endLine": 201
}
}
],
adev/src/content/best-practices/a11y.md
+3
View File
@@ -63,6 +63,9 @@ For example:
For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.dev/cdk/a11y/overview).
For custom-styled components that need reusable WAI-ARIA interaction patterns, [Angular Aria](guide/aria/overview) provides headless directives for patterns such as accordion, combobox, listbox, menu, tabs, and toolbar.
These directives handle keyboard interaction, ARIA attributes, focus management, and screen reader support while letting you provide the HTML structure and styling for your application.
### Augmenting native elements
Native HTML elements capture several standard interaction patterns that are important to accessibility.
adev/src/content/best-practices/update.md
+3 -3
View File
@@ -6,9 +6,9 @@ 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').
HELPFUL: If you are currently using AngularJS, see [Upgrading from AngularJS](https://angular.io/guide/upgrade 'Upgrading from AngularJS').
_AngularJS_ is the name for all v1.x versions of Angular.
## Getting notified of new releases
@@ -30,7 +30,7 @@ To check your application's version of Angular use the `ng version` command from
The most recent stable released version of Angular appears [on npm](https://www.npmjs.com/package/@angular/core 'Angular on npm') under "Version." For example, `16.2.4`.
You can also find the most current version of Angular by using the CLI command [`ng update`](cli/update).
By default, [`ng update`](cli/update)(without additional arguments) lists the updates that are available to you.
By default, [`ng update`](cli/update) (without additional arguments) lists the updates that are available to you.
## Updating your environment and apps
adev/src/content/ecosystem/rxjs-interop/output-interop.md
+1 -1
View File
@@ -37,7 +37,7 @@ The `outputToObservable` function lets you create an RxJS observable from a comp
import {outputToObservable} from '@angular/core/rxjs-interop';
@Component(/*...*/)
class CustomSlider {
class CustomSlider {
valueChange = output<number>();
}
adev/src/content/ecosystem/service-workers/config.md
+2 -2
View File
@@ -85,7 +85,7 @@ For example, an asset group that matches `/foo.js` should appear before one that
Each asset group specifies both a group of resources and a policy that governs them.
This policy determines when the resources are fetched and what happens when changes are detected.
Asset groups follow the Typescript interface shown here:
Asset groups follow the TypeScript interface shown here:
```ts
interface AssetGroup {
@@ -179,7 +179,7 @@ The first data group that matches the requested resource handles the request.
It is recommended that you put the more specific data groups higher in the list.
For example, a data group that matches `/api/foo.json` should appear before one that matches `/api/*.json`.
Data groups follow this Typescript interface:
Data groups follow this TypeScript interface:
```ts
export interface DataGroup {
adev/src/content/ecosystem/service-workers/devops.md
+1 -1
View File
@@ -283,7 +283,7 @@ When the service worker's request for `ngsw.json` returns a `404`, then the serv
<!-- vale Angular.Google_Acronyms = NO -->
A small script, `safety-worker.js`, is also included in the `@angular/service-worker` NPM package.
A small script, `safety-worker.js`, is also included in the `@angular/service-worker` npm package.
When loaded, it un-registers itself from the browser and removes the service worker caches.
This script can be used as a last resort to get rid of unwanted service workers already installed on client pages.
adev/src/content/examples/i18n/readme.md
+3 -3
View File
@@ -10,9 +10,9 @@ This sample comes from the Angular documentation's "[Example Angular Internation
> See the scripts in `package.json` for an explanation of these commands.
## Run in Stackblitz
## Run in StackBlitz
Stackblitz compiles and runs the English version by default.
StackBlitz compiles and runs the English version by default.
To see the example translate to French with Angular i18n:
@@ -24,4 +24,4 @@ To see the example translate to French with Angular i18n:
}
```
1. Click the "Fork" button in the stackblitz header. That makes a new copy for you with this change and re-runs the example in French.
1. Click the "Fork" button in the StackBlitz header. That makes a new copy for you with this change and re-runs the example in French.
adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts
+1 -1
View File
@@ -52,7 +52,7 @@ export class ProfileEditorComponent {
// #enddocregion add-alias
// #docregion on-submit
onSubmit() {
// TODO: Use EventEmitter with form value
// TODO: Use output() with form value
console.warn(this.profileForm.value);
}
// #enddocregion on-submit
adev/src/content/guide/animations/complex-sequences.md
+6 -6
View File
@@ -17,12 +17,12 @@ The functions that control complex animation sequences are:
## The query() function
Most complex animations rely on the `query()` function to find child elements and apply animations to them, basic examples of such are:
Most complex animations rely on the `query()` function to find child elements and apply animations to them. Basic examples include:
| Examples | Details |
| :------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `query()` followed by `animate()` | Used to query simple HTML elements and directly apply animations to them. |
| `query()` followed by `animateChild()` | Used to query child elements, which themselves have animations metadata applied to them and trigger such animation \(which would be otherwise be blocked by the current/parent element's animation\). |
| Examples | Details |
| :------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `query()` followed by `animate()` | Used to query simple HTML elements and directly apply animations to them. |
| `query()` followed by `animateChild()` | Used to query child elements, which themselves have animation metadata applied to them and trigger such animations \(which would otherwise be blocked by the current/parent element's animation\). |
The first argument of `query()` is a [css selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) string which can also contain the following Angular-specific tokens:
@@ -43,7 +43,7 @@ You can also see an illustration of this in the animations example \(introduced
## Animate multiple elements using query() and stagger() functions
After having queried child elements via `query()`, the `stagger()` function lets you define a timing gap between each queried item that is animated and thus animates elements with a delay between them.
After querying child elements via `query()`, the `stagger()` function lets you define a timing gap between each item, animating elements with a delay between them.
The following example demonstrates how to use the `query()` and `stagger()` functions to animate a list \(of heroes\) adding each in sequence, with a slight delay, from top to bottom.
adev/src/content/guide/animations/css.md
+5 -5
View File
@@ -4,7 +4,7 @@ CSS offers a robust set of tools for you to create beautiful and engaging animat
## How to write animations in native CSS
If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them:
If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here are a few of them:
[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)
[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)
@@ -14,7 +14,7 @@ and a couple of videos:
[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)
[Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
Check some of these various guides and tutorials out, and then come back to this guide.
Check out some of these guides and tutorials, then come back to this guide.
## Creating Reusable Animations
@@ -28,7 +28,7 @@ Adding the class `animated-class` to an element would trigger the animation on t
### Animating State and Styles
You may want to animate between two different states, for example when an element is opened or closed. You can accomplish this by using CSS classes either using a keyframe animation or transition styling.
You may want to animate between two different states, for example when an element is opened or closed. You can accomplish this by using CSS classes, either with a keyframe animation or transition styling.
<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-states"/>
@@ -38,7 +38,7 @@ You can see similar examples in the template guide for [animating styles directl
### Transitions, Timing, and Easing
Animating often requires adjusting timing, delays and easeing behaviors. This can be done using several css properties or shorthand properties.
Animating often requires adjusting timing, delays, and easing behaviors. This can be done using several css properties or shorthand properties.
Specify `animation-duration`, `animation-delay`, and `animation-timing-function` for a keyframe animation in CSS, or alternatively use the `animation` shorthand property.
@@ -62,7 +62,7 @@ Animations can be triggered by toggling CSS styles or classes. Once a class is p
### Animating Auto Height
You can use css-grid to animate to auto height.
You can use CSS Grid to animate to auto height.
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts">
<docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts" />
adev/src/content/guide/animations/enter-and-leave.md
+4 -4
View File
@@ -1,13 +1,13 @@
# Animating your applications with `animate.enter` and `animate.leave`
Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic.
Animations can improve your application and user experience in a number of ways:
Well-designed animations can make your application more intuitive and engaging, but they aren't just cosmetic.
Animations can improve your application and the user experience in a number of ways:
- Without animations, web page transitions can seem abrupt and jarring
- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
- Good animations can smoothly direct the user's attention throughout a workflow
Angular provides `animate.enter` and `animate.leave` to animate your application's elements. These two features apply enter and leave CSS classes at the appropriate times or call functions to apply animations from third party libraries. `animate.enter` and `animate.leave` are not directives. They are special API supported directly by the Angular compiler. They can be used on elements directly and can also be used as a host binding.
Angular provides `animate.enter` and `animate.leave` to animate your application's elements. These two features apply enter and leave CSS classes at the appropriate times or call functions to apply animations from third party libraries. `animate.enter` and `animate.leave` are not directives. They are special API supported directly by the Angular compiler. They can be used directly on elements and also as a host binding.
## `animate.enter`
@@ -19,7 +19,7 @@ You can use `animate.enter` to animate elements as they _enter_ the DOM. You can
<docs-code header="enter.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.css"/>
</docs-code-multifile>
When the animation completes, Angular removes the class or classes that you specified in `animate.enter` from the DOM. Animation classes are only be present while the animation is active.
When the animation completes, Angular removes the class or classes that you specified in `animate.enter` from the DOM. Animation classes are only present while the animation is active.
NOTE: When using multiple keyframe animations or transition properties on an element, Angular removes all classes only _after_ the longest animation has completed.
adev/src/content/guide/animations/migration.md
+4 -4
View File
@@ -4,7 +4,7 @@ The `@angular/animations` package is deprecated as of v20.2, which also introduc
## How to write animations in native CSS
If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them:
If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here are a few of them:
[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)
[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)
@@ -14,7 +14,7 @@ and a couple of videos:
[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)
[Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
Check some of these various guides and tutorials out, and then come back to this guide.
Check out some of these guides and tutorials, then come back to this guide.
## Creating Reusable Animations
@@ -40,7 +40,7 @@ The animations package allowed you to define various states using the [`state()`
<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state1"/>
This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling.
This same behavior can be accomplished natively by using CSS classes, either with a keyframe animation or transition styling.
#### With Native CSS
@@ -102,7 +102,7 @@ The animations package offers the ability to animate things that have been histo
<docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.css" />
</docs-code-multifile>
You can use css-grid to animate to auto height.
You can use CSS Grid to animate to auto height.
#### With Native CSS
adev/src/content/guide/animations/overview.md
+4 -4
View File
@@ -2,9 +2,9 @@
IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
Animation provides the illusion of motion: HTML elements change styling over time.
Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic.
Animations can improve your application and user experience in a number of ways:
Animation provides the illusion of motion: HTML elements change styles over time.
Well-designed animations can make your application more intuitive and engaging, but they aren't just cosmetic.
Animations can improve your application and the user experience in a number of ways:
- Without animations, web page transitions can seem abrupt and jarring
- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
@@ -70,7 +70,7 @@ You put the trigger that defines an animation within the `animations` metadata p
Let's animate a transition that changes a single HTML element from one state to another.
For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action.
When the button is in the `open` state, it's visible and yellow.
When it's the `closed` state, it's translucent and blue.
When it's in the `closed` state, it's translucent and blue.
In HTML, these attributes are set using ordinary CSS styles such as color and opacity.
In Angular, use the `style()` function to specify a set of CSS styles for use with animations.
adev/src/content/guide/animations/reusable-animations.md
+3 -3
View File
@@ -2,12 +2,12 @@
IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
This topic provides some examples of how to create reusable animations.
This topic provides examples of how to create reusable animations.
## Create reusable animations
To create a reusable animation, use the [`animation()`](api/animations/animation) function to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable.
You can then import and reuse this animation in any of your application components using the [`useAnimation()`](api/animations/useAnimation) function.
You can then import and reuse this animation in your application components using the [`useAnimation()`](api/animations/useAnimation) function.
<docs-code header="animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" region="animation-const"/>
@@ -20,7 +20,7 @@ For example, the following snippet exports the animation `trigger`.
<docs-code header="animations.1.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" region="trigger-const"/>
From this point, you can import reusable animation variables in your component class.
From this point, you can import reusable animation variables into your component class.
For example, the following code snippet imports the `transitionAnimation` variable and uses it via the `useAnimation()` function.
<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.3.ts" region="reusable"/>
adev/src/content/guide/animations/transition-and-triggers.md
+4 -4
View File
@@ -2,7 +2,7 @@
IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
This guide goes into depth on special transition states such as the `*` wildcard and `void`. It shows how these special states are used for elements entering and leaving a view.
This guide goes into depth on special transition states such as the `*` wildcard and `void`. It also shows how these states are used for elements entering and leaving a view.
This section also explores multiple animation triggers, animation callbacks, and sequence-based animation using keyframes.
## Predefined states and wildcard matching
@@ -99,7 +99,7 @@ Use the aliases `:enter` and `:leave` to target HTML elements that are inserted
The `:enter` transition runs when any `*ngIf` or `*ngFor` views are placed on the page, and `:leave` runs when those views are removed from the page.
IMPORTANT: Entering/leaving behaviors can sometime be confusing.
IMPORTANT: Entering/leaving behaviors can sometimes be confusing.
As a rule of thumb consider that any element being added to the DOM by Angular passes via the `:enter` transition. Only elements being directly removed from the DOM by Angular pass via the `:leave` transition. For example, an element's view is removed from the DOM because its parent is being removed from the DOM.
This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`.
@@ -239,7 +239,7 @@ You can combine keyframes with `duration`, `delay`, and `easing` within a single
### Keyframes with a pulsation
Use keyframes to create a pulse effect in your animations by defining styles at specific offset throughout the animation.
Use keyframes to create a pulse effect in your animations by defining styles at specific offsets throughout the animation.
Here's an example of using keyframes to create a pulse effect:
@@ -254,7 +254,7 @@ The code snippet for this animation might look like this.
### Animatable properties and units
Angular animations support builds on top of web animations, so you can animate any property that the browser considers animatable.
Angular animations are built on top of web animations, so you can animate any property that the browser considers animatable.
This includes positions, sizes, transforms, colors, borders, and more.
The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1) page.
adev/src/content/guide/components/content-projection.md
+26
View File
@@ -249,3 +249,29 @@ placeholder, Angular compares against the `ngProjectAs` value instead of the ele
```
`ngProjectAs` supports only static values and cannot be bound to dynamic expressions.
## Caveats
### Projected content lives in the parent's view
Even though projected content is _rendered_ inside the receiving component, it is still owned by the component that declared it. Angular tracks it as part of the parent's view, which has a couple of side effects worth knowing about.
**Change detection:** Projected content is checked when the _parent_ runs change detection. If the receiving component uses `OnPush`, Angular can skip checking that component's own template — but it won't skip the projected content, because that belongs to the parent.
```angular-html
<!-- Parent template (default change detection) -->
<onpush-wrapper>
<!-- Still checked on every parent cycle, OnPush doesn't help here -->
<expensive-component />
</onpush-wrapper>
```
**Dependency injection:** Projected content gets its dependencies from the parent's injector, not from the receiving component's `viewProviders`. See [Providers and viewProviders](guide/di/hierarchical-dependency-injection) for details.
### Some library components don't support projected children
Certain components — menus, tabs, lists — use `ContentChildren` to find their children and wire up behavior like keyboard navigation, focus management, or ARIA attributes. They're written assuming they own their children directly, so projecting external content into them tends to break things in subtle ways.
For example, wrapping `<mat-menu-item>` elements in an extra layer and projecting them into `<mat-menu>` can silently break keyboard navigation and screen reader support. The query still finds the items, but the internal setup that makes them interactive may not work correctly when the items come from a different view context.
If a library component manages its children's behavior, check its docs before reaching for content projection — it may not be supported.
adev/src/content/guide/components/host-elements.md
+1 -1
View File
@@ -134,7 +134,7 @@ In cases like this, the following rules determine which value wins:
## Styling with CSS custom properties
Developers often rely on [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) to enable a flexible configuration of their component's styles.
You can set such custom properties on a host element with a [style binding][style binding](guide/templates/binding#css-style-properties).
You can set such custom properties on a host element with a [style binding](guide/templates/binding#css-style-properties).
```angular-ts
@Component({
adev/src/content/guide/components/inheritance.md
+19 -1
View File
@@ -65,7 +65,25 @@ and their own.
### Forwarding injected dependencies
If a base class injects dependencies as constructor parameters, the child class must explicitly class these dependencies to `super`.
When a base class uses `inject()` as a property initializer, the child class inherits the property automatically. No `super` forwarding is needed.
```ts
@Component({
/*...*/
})
export class ListboxBase {
protected element = inject(ElementRef);
}
@Component({
/*...*/
})
export class CustomListbox extends ListboxBase {
// `element` is inherited from `ListboxBase`.
}
```
If a base class injects dependencies as constructor parameters, the child class must explicitly pass these dependencies to `super`.
```ts
@Component({
adev/src/content/guide/components/styling.md
+2 -2
View File
@@ -34,8 +34,8 @@ render an Angular component, the framework automatically includes its associated
lazy-loading a component.
Angular works with any tool that outputs CSS,
including [Sass](https://sass-lang.com), [less](https://lesscss.org),
and [stylus](https://stylus-lang.com).
including [Sass](https://sass-lang.com), [Less](https://lesscss.org),
and [Stylus](https://stylus-lang.com).
## Style scoping
adev/src/content/guide/di/creating-and-using-services.md
+9 -9
View File
@@ -1,20 +1,20 @@
# Creating and using services
Services are reusable pieces of code that can be shared across your Angular application. They typically handle data fetching, business logic, or other functionality that multiple components need to access.
Services are reusable pieces of code that you can share across your Angular application. You commonly use them to handle data fetching, business logic, or other functionality that multiple components need to access.
## Creating a service
You can create a service with the [Angular CLI](tools/cli) with the following command:
You can create a service using the [Angular CLI](tools/cli) with the following command:
```bash
ng generate service CUSTOM_NAME
```
This creates a dedicated `CUSTOM_NAME.ts` file in your `src` directory.
This command creates a dedicated `CUSTOM_NAME.ts` file in your `src` directory.
You can also manually create a service by adding the `@Injectable()` decorator to a TypeScript class. This tells Angular that the service can be injected as a dependency.
You can also manually create a service by adding the `@Injectable()` decorator to a TypeScript class. This tells Angular that you can use the class as an injectable dependency.
Here is an example of a service that allows users to add and request data:
The following example defines a service that allows users to add and retrieve data:
```ts
// 📄 src/app/basic-data-store.ts
@@ -38,9 +38,9 @@ export class BasicDataStore {
When you use `@Injectable({ providedIn: 'root' })` in your service, Angular:
- **Creates a single instance** (singleton) for your entire application
- **Makes it available everywhere** without any additional configuration
- **Enables tree-shaking** so the service is only included in your JavaScript bundle if it's actually used
- **Creates a single instance** (a singleton) for the entire application
- **Makes it available throughout your application** without additional configuration
- **Enables tree-shaking** so Angular only includes the service in your JavaScript bundle if you actually use it
This is the recommended approach for most services.
@@ -93,7 +93,7 @@ export class BasicDataStore {
## Next steps
While `providedIn: 'root'` covers most use cases, Angular offers additional ways to provide services for specialized scenarios:
While `providedIn: 'root'` covers most use cases, Angular also provides additional ways you can configure services for more specialized scenarios:
- **Component-specific instances** - When components need their own isolated service instances
- **Manual configuration** - For services that require runtime configuration
adev/src/content/guide/di/creating-injectable-service.md
+14 -14
View File
@@ -1,21 +1,21 @@
# Creating an injectable service
Service is a broad category encompassing any value, function, or feature that an application needs.
A service is typically a class with a narrow, well-defined purpose.
A component is one type of class that can use DI.
A service is a broad category that encompasses any value, function, or feature that your application needs.
A service is typically a class with a focused and well-defined purpose.
A component is one type of class that you can use with dependency injection (DI).
Angular distinguishes components from services to increase modularity and reusability.
By separating a component's view-related features from other kinds of processing, you can make your component classes lean and efficient.
Angular distinguishes components from services to improve modularity and reusability.
By separating a component's view-related features from other types of processing, you can keep your component classes lean and efficient.
Ideally, a component's job is to enable the user experience and nothing more.
Ideally, your component's responsibility is to enable the user experience and nothing more.
A component should present properties and methods for data binding, to mediate between the view (rendered by the template) and the application logic (which often includes some notion of a model).
A component can delegate certain tasks to services, such as fetching data from the server, validating user input, or logging directly to the console.
By defining such processing tasks in an injectable service class, you make those tasks available to any component.
You can also make your application more adaptable by configuring different providers of the same kind of service, as appropriate in different circumstances.
You can delegate tasks from a component to services, such as fetching data from a server, validating user input, or logging to the console.
By defining such tasks in an injectable service class, you make those capabilities available to any component.
You can also make your application more adaptable by configuring different providers for the same type of service based on different circumstances.
Angular does not enforce these principles.
Angular helps you follow these principles by making it easy to factor your application logic into services and make those services available to components through DI.
Angular does not strictly enforce these principles.
Angular helps you follow these principles by making it easy to organize your application logic into services and make those services available to components through DI.
## Service examples
@@ -82,7 +82,7 @@ export class HeroService {}
```
The `@Injectable()` decorator specifies that Angular can use this class in the DI system.
The metadata, `providedIn: 'root'`, means that the `HeroService` is provided throughout the application.
The `providedIn: 'root'` metadata specifies that the `HeroService` is available throughout your application.
Add a `getHeroes()` method that returns the heroes from `mock.heroes.ts` to get the hero mock data:
@@ -106,7 +106,7 @@ For clarity and maintainability, it is recommended that you define components an
## Injecting services
To inject a service as a dependency into a component, you can declare a class field representing the dependency and use Angular's [`inject`](/api/core/inject) function to initialize it.
To inject a service into a component, declare a class field for the dependency and use Angular's [`inject`](/api/core/inject) function to initialize it.
The following example specifies the `HeroService` in the `HeroList`.
The type of `heroService` is `HeroService`.
@@ -125,7 +125,7 @@ It is also possible to inject a service into a component using the component's c
constructor(private heroService: HeroService)
```
The [`inject`](/api/core/inject) method can be used in both classes and functions, while the constructor method can naturally only be used in a class constructor. However, in either case a dependency may only be injected in a valid [injection context](guide/di/dependency-injection-context), usually in the construction or initialization of a component.
The [`inject`](/api/core/inject) method can be used in both classes and functions, while the constructor method can naturally only be used in a class constructor. However, in both cases, you can only inject a dependency within a valid [injection context](guide/di/dependency-injection-context), typically during the construction or initialization of a component.
## Injecting services in other services
adev/src/content/guide/di/dependency-injection-context.md
+12 -12
View File
@@ -1,24 +1,24 @@
# Injection context
The dependency injection (DI) system relies internally on a runtime context where the current injector is available.
The dependency injection (DI) system relies on a runtime context where the current injector is available.
This means that injectors can only work when code is executed in such a context.
This means that injectors only work when you execute code within this context.
The injection context is available in these situations:
You have an injection context available in the following situations:
- 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.
- During construction (via the `constructor`) of a class instantiated by the DI system, such as an `@Injectable` or `@Component`.
- In field initializers 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 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 allows you to use the [`inject`](api/core/inject) function to retrieve dependencies.
NOTE: For basic examples of using `inject()` in class constructors and field initializers, see the [overview guide](/guide/di#where-can-inject-be-used).
## Stack frame in context
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.
Some APIs are designed to run within an injection context. This is the case, for example, with router guards. This allows you to use [`inject`](api/core/inject) within the guard function to access services.
Here is an example for `CanActivateFn`
@@ -33,8 +33,8 @@ const canActivateTeam: CanActivateFn = (
## Run within an injection context
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:
If you need to run a function within an injection context without already being in one, you can use `runInInjectionContext`.
This requires access to an injector, such as the `EnvironmentInjector`:
```ts {highlight: [9], header"hero.service.ts"}
@Injectable({
@@ -51,11 +51,11 @@ export class HeroService {
}
```
Note that [`inject`](/api/core/inject) will return an instance only if the injector can resolve the required token.
Note that [`inject`](/api/core/inject) returns an instance only if the injector can resolve the requested token.
## Asserts the context
Angular provides the `assertInInjectionContext` helper function to assert that the current context is an injection context and throws a clear error if not. Pass a reference to the calling function so the error message points to the correct API entry point. This produces a clearer, more actionable message than the default generic injection error.
Angular provides the `assertInInjectionContext` helper function to verify that the current context is an injection context and throw a clear error if it is not. Pass a reference to the calling function so the error message points to the correct API entry point. This produces a clearer, more actionable message than the default generic injection error.
```ts
import {ElementRef, assertInInjectionContext, inject} from '@angular/core';
@@ -86,4 +86,4 @@ export class PreviewCard {
## Using DI outside of a context
Calling [`inject`](api/core/inject) or calling `assertInInjectionContext` outside of an injection context will throw [error NG0203](/errors/NG0203).
If you call [`inject`](api/core/inject) or `assertInInjectionContext` outside of an injection context, Angular throws [error NG0203](/errors/NG0203).
adev/src/content/guide/di/di-in-action.md
+10 -10
View File
@@ -1,15 +1,15 @@
# DI in action
This guide explores additional features of dependency injection in Angular.
This guide explores additional features of dependency injection (DI) in Angular.
NOTE: For comprehensive coverage of InjectionToken and custom providers, see the [defining dependency providers guide](guide/di/defining-dependency-providers#injection-tokens).
## Inject the component's DOM element
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.
Although developers generally avoid it, some visual effects and third-party tools require you to access the DOM directly.
In such cases, you may 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 DOM element of a `@Component` or `@Directive` through injection using the `ElementRef` token:
```ts {highlight:[7]}
import {Directive, ElementRef, inject} from '@angular/core';
@@ -28,7 +28,7 @@ export class HighlightDirective {
## Inject the host element's tag name
When you need the tag name of a host element, inject it using the `HOST_TAG_NAME` token.
To get the tag name of a host element, inject it using the `HOST_TAG_NAME` token.
```ts
import {Directive, HOST_TAG_NAME, inject} from '@angular/core';
@@ -59,19 +59,19 @@ NOTE: If the host element might not have a tag name (e.g., `ng-container` or `ng
## Resolve circular dependencies with a forward reference
The order of class declaration matters in TypeScript.
You can't refer directly to a class until it's been defined.
In TypeScript, the order of class declarations matters.
You cannot reference a class directly until you define it.
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.
However, in some cases, circular references are unavoidable.
For example, if class 'A' refers to class 'B' and class 'B' refers to class 'A', one of them must 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.
You can break such circular references by using `forwardRef`.
Such circular references can be resolved using `forwardRef`.
```typescript {header: 'app.component.ts', highlight: [4]}
providers: [
adev/src/content/guide/di/hierarchical-dependency-injection.md
+11 -4
View File
@@ -232,7 +232,7 @@ In this case, the injector looks no further than the current `ElementInjector` b
providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
})
export class Self {
constructor(@Self() public flower: FlowerService) {}
public flower = inject(FlowerService, {self: true});
}
```
@@ -634,7 +634,7 @@ It doesn't need to continue searching the `ElementInjector` tree, nor does it ne
### `providers` vs. `viewProviders`
The `viewProviders` field is conceptually similar to `providers`, but there is one notable difference.
Configured providers in `viewProviders` are not visible to projected content that ends up as a logical children of the component.
Providers in `viewProviders` are only visible inside the component's own view — content projected into the component via `<ng-content>` cannot see them.
To see the difference between using `providers` and `viewProviders`, add another component to the example and call it `Inspector`.
`Inspector` will be a child of the `Child`.
@@ -705,6 +705,11 @@ These four bindings demonstrate the difference between `providers` and `viewProv
Remember that the dog emoji <code>🐶</code> is declared inside the `<#VIEW>` of `Child` and isn't visible to the projected content.
Instead, the projected content sees the whale <code>🐳</code>.
You might wonder why the projected `<app-inspector>` can still see <code>🐳</code> from `App`'s `viewProviders`.
The reason is that Angular DI tracks **where a component was declared**, not where it ends up being rendered.
`<app-inspector>` lives in `App`'s template — inside `App`'s `<#VIEW>` — so `App`'s `viewProviders` are fair game.
Projecting it into `Child` cuts off access to `Child`'s `viewProviders` (<code>🐶</code>), but `App`'s providers (<code>🐳</code>) are still reachable up the tree.
However, in the next output section though, the `Inspector` is an actual child component of `Child`, `Inspector` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog <code>🐶</code>.
The `AnimalService` in the logical tree would look like this:
@@ -741,8 +746,10 @@ The `AnimalService` in the logical tree would look like this:
</app-root>
```
The projected content of `<app-inspector>` sees the whale <code>🐳</code>, not the dog <code>🐶</code>, because the dog <code>🐶</code> is inside the `<app-child>` `<#VIEW>`.
The `<app-inspector>` can only see the dog <code>🐶</code> if it is also within the `<#VIEW>`.
The projected `<app-inspector>` gets <code>🐳</code> because <code>🐶</code> belongs to `Child`'s view and projected content can't reach it.
<code>🐳</code> is accessible because `<app-inspector>` was declared in `App`'s template, so it can still walk up to `App`'s `viewProviders`.
The `<app-inspector>` that lives directly inside `Child`'s template (not projected) gets <code>🐶</code> — it's inside the `<#VIEW>`, so no boundary to cross.
### Visibility of provided tokens
adev/src/content/guide/di/overview.md
+12 -12
View File
@@ -1,38 +1,38 @@
<docs-decorative-header title="Dependency injection in Angular" imgSrc="adev/src/assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
Dependency Injection (DI) is a design pattern used to organize and share code across an application.
Dependency Injection (DI) is a design pattern you use to organize and share code across your application by supplying dependencies to a class instead of creating them inside it.
</docs-decorative-header>
TIP: Check out Angular's [Essentials](essentials/dependency-injection) before diving into this comprehensive guide.
As an application grows, developers often need to reuse and share features across different parts of the codebase. [Dependency Injection (DI)](https://en.wikipedia.org/wiki/Dependency_injection) is a design pattern used to organize and share code across an application by allowing you to "inject" features into different parts.
As an application grows, developers often need to reuse and share functionality across different parts of the codebase. [Dependency Injection (DI)](https://en.wikipedia.org/wiki/Dependency_injection) helps you achieve this by allowing you to provide dependencies to a class instead of creating them directly inside it. This makes different parts of the application more reusable and easier to manage.
Dependency injection is a popular pattern because it allows developers to address common challenges such as:
- **Improved code maintainability**: Dependency injection allows cleaner separation of concerns which enables easier refactoring and reducing code duplication.
- **Scalability**: Modular functionality can be reused across multiple contexts and allows for easier scaling.
- **Better testing**: DI allows unit tests to easily use [test doubles](https://en.wikipedia.org/wiki/Test_double) for situations when using a real implementation is not practical.
- **Improved code maintainability**: Dependency injection promotes a clear separation of concerns, making code easier to refactor and reducing duplication.
- **Scalability**: You can reuse modular functionality across different parts of an application, making it easier to scale.
- **Better testing**: DI allows unit tests to use [test doubles](https://en.wikipedia.org/wiki/Test_double) in place of real implementations when needed.
## How does dependency injection work in Angular?
A dependency is any object, value, function or service that a class needs to work but does not create itself. In other words, it creates a relationship between different parts of your application since it wouldn't work without the dependency.
A dependency is any object, value, function, or service that a class requires to work but does not create itself. Instead, you provide it from the outside, creating a clear relationship between different parts of the application.
There are two ways that code interacts with any dependency injection system:
You interact with a dependency injection system in two main ways:
- Code can _provide_, or make available, values.
- Code can _inject_, or ask for, those values as dependencies.
- You can _provide_, or make available, values.
- You can _inject_, or ask for, those values as dependencies.
"Values," in this context, can be any JavaScript value, including objects and functions. Common types of injected dependencies include:
In this context, "values" can refer to any JavaScript value, including objects, functions, or class instances. Common types of injected dependencies include:
- **Configuration values**: Environment-specific constants, API URLs, feature flags, etc.
- **Factories**: Functions that create objects or values based on runtime conditions
- **Services**: Classes that provide common functionality, business logic, or state
Angular components and directives automatically participate in DI, meaning that they can inject dependencies _and_ they are available to be injected.
Angular components and directives automatically participate in DI, meaning that you can inject dependencies into them and make them available for injection.
## What are services?
An Angular _service_ is a TypeScript class decorated with `@Injectable`, which makes an instance of the class available to be injected as a dependency. Services are the most common way of sharing data and functionality across an application.
An Angular _service_ is a TypeScript class decorated with `@Injectable`, which allows you to inject an instance of the class as a dependency. Services are the most common way of sharing data and functionality across an application.
Common types of services include:
adev/src/content/guide/forms/reactive-forms.md
+1 -1
View File
@@ -151,7 +151,7 @@ The `ProfileEditor` component accepts input from the user, but in a real scenari
<docs-code header="profile-editor.component.html (submit event)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" region="ng-submit"/>
The `onSubmit()` method in the `ProfileEditor` component captures the current value of `profileForm`. Use `EventEmitter` to keep the form encapsulated and to provide the form value outside the component. The following example uses `console.warn` to log a message to the browser console.
The `onSubmit()` method in the `ProfileEditor` component captures the current value of `profileForm`. Use `output()` to keep the form encapsulated and to provide the form value outside the component. The following example uses `console.warn` to log a message to the browser console.
<docs-code header="profile-editor.component.ts (submit method)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="on-submit"/>
adev/src/content/guide/forms/signals/async-operations.md
+223
View File
@@ -350,6 +350,229 @@ export class Registration {
The `rxResource` function works directly with Observables and handles subscription cleanup automatically when the field value changes.
## Debouncing
The `debounce` rule delays when a user's input is committed to the form model. You can think of it as the rule holding back values until the user pauses typing. This is useful when downstream behavior shouldn't react to every keystroke, such as expensive derived computations, validation that flashes errors mid-word, or search filters that reapply on each character.
Add the `debounce` rule inside a schema to delay how a form field's UI changes reach the form model. In its simplest form, `debounce(path, ms)` holds each UI change for the given number of milliseconds before writing it to the model. A new change within that window resets the timer.
The following example applies `debounce` and `validateHttp` to the username field to delay the username availability check in a registration form until the user pauses typing:
```angular-ts
import {Component, signal} from '@angular/core';
import {form, debounce, validateHttp, FormField} from '@angular/forms/signals';
@Component({
selector: 'app-registration',
imports: [FormField],
template: `
<label>
Username:
<input [formField]="registrationForm.username" />
</label>
@if (registrationForm.username().pending()) {
<span class="checking">Checking availability...</span>
}
`,
})
export class Registration {
registrationModel = signal({username: ''});
registrationForm = form(this.registrationModel, (schemaPath) => {
// Hold UI updates for 300 ms before writing to the model
debounce(schemaPath.username, 300);
// Runs against the debounced model value, not every keystroke
validateHttp(schemaPath.username, {
request: ({value}) => {
const username = value();
// Skip the request for blank values
return username ? `/api/users/check?username=${username}` : undefined;
},
onSuccess: (response) =>
response.available ? null : {kind: 'usernameTaken', message: 'Username is already taken'},
onError: () => ({
kind: 'serverError',
message: 'Could not verify username availability',
}),
});
});
}
```
With a 300 ms debounce, the model updates and validates only after the user pauses typing longer than the configured duration. For example, typing "signal forms" in a quick burst fires one validation request instead of twelve.
### Touch flushes the model
Regardless of the debounce duration, the framework writes the field's `controlValue()` to the model immediately when the field becomes touched. Native inputs become touched on blur, so a user who finishes typing and tabs away doesn't have to wait for the debounce timer to expire. Custom controls can mark the field as touched in response to any event they choose.
In the typical case, this matters for form submission. When the user clicks a submit button, the focused input blurs, which touches that field and flushes its pending debounce before the submission handler runs.
### Commit only on blur
Some fields shouldn't update mid-typing at all, and instead should only update after the user has finished entering a value. For example, if you have a search filter that reapplies on every change or a form that triggers expensive derived state, it is often better for the model to wait until the user finishes typing.
In these scenarios, pass `'blur'` instead of a duration to defer all updates until the field becomes touched:
```ts
form(this.registrationModel, (schemaPath) => {
debounce(schemaPath.username, 'blur');
});
```
With `'blur'`, the model keeps its previous value while the user is typing. Sync and async validation, derived signals, and any reactive rules reading the field all see the previous value until the field becomes touched. This commonly occurs when the user blurs a native input, or when a custom control signals touch on its own.
### Custom timing logic
For timing logic that a duration or `'blur'` can't express, pass a `Debouncer` function. The function receives the field context and an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal), and returns a `Promise<void>` that resolves when the model should update:
```ts
import {debounce, type Debouncer} from '@angular/forms/signals';
const shorterWhenLonger: Debouncer<string> = ({value}, abortSignal) => {
// Shorter queries get a longer delay since the user is likely still typing.
const ms = value().length < 3 ? 500 : 200;
return new Promise((resolve) => {
const timeoutId = setTimeout(resolve, ms);
// Abort fires when this field is touched or its value changes, so the pending timer is cleared
abortSignal.addEventListener(
'abort',
() => {
clearTimeout(timeoutId);
resolve();
},
{once: true},
);
});
};
form(this.registrationModel, (schemaPath) => {
debounce(schemaPath.username, shorterWhenLonger);
});
```
The `abortSignal` fires when the field is touched, or when its value changes before the debounce resolves. Resolve the promise on abort so your debouncer releases any pending timers. The framework writes the pending value to the model on touch, and discards it when a newer value arrives. See the [`debounce` API reference](api/forms/signals/debounce) for the full `Debouncer` signature.
### Debouncing a single async validator
The `debounce` rule holds back every reaction to the field, from sync validation to derived signals to async validation. However, there are times when you want the opposite: cheap sync validators like `required` or `email` running immediately for instant feedback, while only the expensive async call waits for the user to settle. Both `validateHttp()` and `validateAsync()` accept their own [`debounce` option](api/forms/signals/validateAsync) that throttles just that validator:
```ts
form(this.registrationModel, (schemaPath) => {
validateHttp(schemaPath.username, {
// Throttles only this HTTP call
debounce: 300,
request: ({value}) => {
const username = value();
// Skip the request for blank values
return username ? `/api/users/check?username=${username}` : undefined;
},
onSuccess: (response) =>
response.available ? null : {kind: 'usernameTaken', message: 'Username is already taken'},
onError: () => ({
kind: 'serverError',
message: 'Could not verify username availability',
}),
});
});
```
The model still updates on every keystroke, and any other rules attached to the field still react immediately. Only the HTTP request is debounced: each change waits 300 ms of quiet before firing, so a request only goes out once the user has paused typing.
Choose between the two layers based on scope:
| Option | When to use |
| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `debounce()` rule | Sync validation, derived state, and submission should all wait until the field commits. The whole field shouldn't react mid-typing. |
| `validateHttp({ debounce })` or `validateAsync({ debounce })` | Cheap sync validators should give immediate feedback, but expensive async calls should wait for the user to pause. |
Both options accept a duration in milliseconds. Their custom-timing callbacks differ: the form-level rule takes a `Debouncer`, and the validator-level option takes a `DebounceTimer` from `@angular/core`. The two signatures are not interchangeable.
## Composing resources in async validation with a factory
The built-in [`debounce` option](api/forms/signals/validateAsync) covers throttling, but `validateAsync()` exposes a deeper composition point: the `factory` function. The factory receives the params as a signal and returns a resource. Between those two points, you're free to compose whatever you need.
In its simplest form, a factory wraps a single resource. A username-availability check can live as a method on the component class, and then be wired into `validateAsync` by reference:
```ts
export class Registration {
registrationModel = signal({username: ''});
private usernameValidator = inject(UsernameValidator);
// Factory function
checkUsernameAvailable = (username: Signal<string | undefined>) =>
resource({
params: () => username(),
loader: async ({params: name}) => this.usernameValidator.checkAvailability(name),
});
registrationForm = form(this.registrationModel, (schemaPath) => {
validateAsync(schemaPath.username, {
params: ({value}) => {
const username = value();
// Skip validation for short usernames
return username.length >= 3 ? username : undefined;
},
debounce: 300,
// Reference to the factory defined above
factory: this.checkUsernameAvailable,
onSuccess: (result) =>
result?.available ? null : {kind: 'usernameTaken', message: 'Username taken'},
onError: () => ({kind: 'serverError', message: 'Could not verify'}),
});
});
}
```
The `params` callback returns `undefined` for short usernames, signaling that validation should skip. With `debounce: 300` applied, the resource waits until the user pauses typing for 300 ms before acting on each change. It then runs the loader for valid usernames and stays idle once the debounced value settles to `undefined`.
### Combining debounce with additional logic
When you need logic beyond a plain duration debounce, use a custom factory to combine debouncing with that logic. A common case is caching validated responses. For example, once the server has confirmed a username, you don't need to ask again on subsequent keystrokes that revisit the same value.
```ts
export class Registration {
registrationModel = signal({username: ''});
private usernameValidator = inject(UsernameValidator);
registrationForm = form(this.registrationModel, (schemaPath) => {
validateAsync(schemaPath.username, {
params: ({value}) => {
const username = value();
return username.length >= 3 ? username : undefined;
},
factory: (username) => {
// Core primitive: settles 300 ms after the source stops changing
const debouncedUsername = debounced(username, 300);
// Cache lives in the factory's closure and persists for the field's lifetime
const cache = new Map<string, {available: boolean}>();
return resource({
// Read from the debounced signal, not the raw one
params: () => debouncedUsername.value(),
loader: async ({params: name}) => {
const cached = cache.get(name);
if (cached) return cached;
const result = await this.usernameValidator.checkAvailability(name);
cache.set(name, result);
return result;
},
});
},
onSuccess: (result) =>
result?.available ? null : {kind: 'usernameTaken', message: 'Username taken'},
onError: () => ({
kind: 'serverError',
message: 'Could not verify username',
}),
});
});
}
```
The `cache` lives in the factory's closure, so it persists for the field's lifetime. Once the user has typed a username the server has already checked, the loader reads from the cache instead of making a new network request.
## Understanding pending state
When async validation runs, the field's `pending()` signal returns `true`. During this time:
adev/src/content/guide/forms/signals/field-metadata.md
+381
View File
@@ -0,0 +1,381 @@
# Field metadata
Field metadata is reactive data you can attach to an individual field. Angular's built-in constraint validators like `required()` and `min()` use this system internally. In other words, every time you call a validator, you're contributing to a metadata key for that particular field.
This guide covers the metadata system in depth: how reducers combine contributions from multiple schema rules, how to write custom reducers, how to read metadata values from fields, and how managed metadata ties lifecycle-aware objects to individual fields.
## You have already been using metadata
When you call `required()` in a schema and read `.required()` on the resulting field in a template, you are using the metadata system. `state.required` is not a special-case property. It is a convenience getter that returns the current value of a built-in `REQUIRED` metadata key.
```angular-ts
import {Component, signal} from '@angular/core';
import {form, required, FormField} from '@angular/forms/signals';
@Component({
selector: 'app-registration',
imports: [FormField],
template: `
<form>
<label>
Username
@if (registrationForm.username().required()) {
<span class="required-marker" aria-hidden="true">*</span>
}
<input [formField]="registrationForm.username" />
</label>
</form>
`,
})
export class Registration {
registrationModel = signal({username: ''});
registrationForm = form(this.registrationModel, (path) => {
required(path.username);
});
}
```
Calling `required(path.username)` contributes a value to the `REQUIRED` metadata key on that field. Reading `registrationForm.username().required()` returns the accumulated value. The metadata key is the bridge connecting the two.
Several built-in constraint validators follow this pattern:
| Validator | Metadata key | Type | `FieldState` getter |
| ------------- | ------------ | --------------------- | ------------------- |
| `required()` | `REQUIRED` | `boolean` | `required` |
| `min()` | `MIN` | `number \| undefined` | `min` |
| `max()` | `MAX` | `number \| undefined` | `max` |
| `minLength()` | `MIN_LENGTH` | `number \| undefined` | `minLength` |
| `maxLength()` | `MAX_LENGTH` | `number \| undefined` | `maxLength` |
| `pattern()` | `PATTERN` | `RegExp[]` | `pattern` |
Non-constraint validators like `email()` and `validate()` do not contribute to metadata. They run their check and surface a validation error, but they do not publish a reactive value for templates to read.
## When to use custom metadata
When you need reactive data attached to a specific field that built-in state signals like `valid()`, `disabled()`, and `touched()` do not cover, use **custom metadata**.
Some examples might include:
- **Configuration attached to reusable field schemas.** A currency symbol on a price field, so any template or custom control rendering the field can display it. Or `MIN_DATE` and `MAX_DATE` on a date field, read by a reusable range picker.
- **Parsed values shared between rules on one field.** A phone number parsed once into E.164 format, so a format validator and a uniqueness check both read the same canonical form without reparsing.
- **Display hints assembled from the field's state.** A severity level (`'info' | 'warning' | 'error'`) that the UI maps to badges and icons, or a context-aware help message that changes based on what the user has typed and which other fields are filled in.
If you find yourself keeping a parallel `Map<fieldKey, value>` alongside your form to track something per field, that is a sign metadata is the right tool. Metadata stays colocated with the schema, stays reactive, and participates in the field's lifecycle.
## Creating a metadata key
When you want to create a custom key, call `createMetadataKey<TWrite>()`. The type parameter describes the value your schema rules will contribute.
```ts
import {createMetadataKey} from '@angular/forms/signals';
export const USERNAME_HELP = createMetadataKey<string>();
```
Every `createMetadataKey()` call creates a new unique key. Two calls with matching type parameters are still two distinct keys, so define each key once at module scope and import it wherever it's needed.
NOTE: A key created without a reducer uses "override" semantics by default: the last contribution wins if multiple rules set the key.
## Setting values from a schema
When you need to register a value for the key on a specific field, use `metadata(path, key, logic)` inside a schema function.
```angular-ts
import {Component, computed, signal} from '@angular/core';
import {form, metadata, FormField} from '@angular/forms/signals';
import {USERNAME_HELP} from './metadata-keys';
@Component({
selector: 'app-registration',
imports: [FormField],
template: `
<form>
<label>
Username
<input [formField]="registrationForm.username" />
</label>
<p class="help">{{ usernameHelp() }}</p>
</form>
`,
})
export class Registration {
registrationModel = signal({username: ''});
registrationForm = form(this.registrationModel, (path) => {
metadata(path.username, USERNAME_HELP, ({value}) => {
const username = value();
if (username.length === 0) {
return 'Choose a unique username between 3 and 20 characters.';
}
if (username.length < 3) {
return 'Keep typing, usernames are at least 3 characters.';
}
if (username.length > 20) {
return 'Usernames are at most 20 characters.';
}
return 'Looks good.';
});
});
usernameHelp = computed(() => this.registrationForm.username().metadata(USERNAME_HELP)?.() ?? '');
}
```
The logic function receives the field's context, which exposes `value` as a signal of the field's current value, `state` as the field's `FieldState`, and methods like `valueOf(path)` and `stateOf(path)` for reading other fields in the same form. Any signal the function reads becomes a reactive dependency: when `value()` changes, the metadata recomputes, and any template reading the key updates.
## Reading metadata from a field
`state.metadata(key)` returns `undefined` when no rule has registered the key, and a signal of the current reduced value otherwise.
```ts
const usernameHelp = registrationForm.username().metadata(USERNAME_HELP);
```
The shape of that inner value (whether it can itself be `undefined`, what type it holds) depends on the key's reducer. Reducers are covered in the next section.
When the key may not be registered, use optional chaining:
```ts
const message = registrationForm.username().metadata(USERNAME_HELP)?.();
// message: string | undefined
```
Or, when the rule is guaranteed to have registered, drop the optional chain and assert:
```ts
const message = registrationForm.username().metadata(USERNAME_HELP)!();
// message: string | undefined (still, because the inner value may be undefined)
```
The component example above uses optional chaining inside a `computed()` so the template binds to a plain `string`, with an empty fallback for the initial frame.
This is the whole API for a single contributor. The next section covers what happens when more than one schema rule contributes to the same key, and how to combine those contributions with reducers.
## Combining contributions with reducers
Override semantics work when only one rule contributes to a key on a given field. As soon as two rules contribute, the first value is silently discarded:
```ts
const HELP = createMetadataKey<string>();
form(model, (path) => {
metadata(path.username, HELP, () => 'Choose something unique across the system.');
metadata(path.username, HELP, () => 'Usernames are 3 to 20 characters.');
});
```
After both rules run, `state.metadata(HELP)!()` returns only the second message. This is almost never what you want. Contributions often come from different sources: two schemas composed with `apply()` that each attach help text, or multiple validation rules that each contribute a hint.
To combine contributions, pass a reducer to `createMetadataKey()`. A reducer describes how to fold individual values into an accumulated result:
```ts
import {createMetadataKey, MetadataReducer} from '@angular/forms/signals';
const HELP = createMetadataKey<string, string[]>(MetadataReducer.list());
form(model, (path) => {
metadata(path.username, HELP, () => 'Choose something unique across the system.');
metadata(path.username, HELP, () => 'Usernames are 3 to 20 characters.');
});
// state.metadata(HELP)!() === [
// 'Choose something unique across the system.',
// 'Usernames are 3 to 20 characters.',
// ]
```
Notice the two type parameters on `createMetadataKey<TWrite, TAcc>`: the first is the type each rule contributes, the second is the type the reducer produces. With `list()`, rules contribute a `string` and the field reads back a `string[]`.
### Built-in reducers
Angular provides six built-in reducers on the [`MetadataReducer`](api/forms/signals/MetadataReducer) namespace. `override()` has two forms with slightly different semantics, listed separately in the table:
| Reducer | Accumulator type | What it does | Initial value |
| -------------- | --------------------- | ---------------------------------------------------------------------- | ------------- |
| `list<T>()` | `T[]` | Accepts `T \| undefined` contributions; appends non-`undefined` values | `[]` |
| `or()` | `boolean` | `true` if any contribution is `true` | `false` |
| `and()` | `boolean` | `true` only if every contribution is `true` | `true` |
| `min()` | `number \| undefined` | Keeps the smallest contributed number | `undefined` |
| `max()` | `number \| undefined` | Keeps the largest contributed number | `undefined` |
| `override()` | `T \| undefined` | Last contribution replaces previous (the default) | `undefined` |
| `override(fn)` | `T` | Same, but with a provided initial value | `fn()` |
`list()` is the only built-in reducer whose item type is wider than its accumulator's element type. A rule may contribute `undefined` and the reducer will silently drop it. This is how the built-in `PATTERN` key handles dynamic `pattern()` rules whose logic function returns `undefined`: the `undefined` contribution is skipped rather than included in the final regex list.
### How built-in validator keys use reducers
While `MetadataReducer.min()` and `MetadataReducer.max()` are reducers, you may be surprised to learn that they are not validators. `MetadataReducer.min()` picks the smallest contribution to a key, while the `min()` validator enforces a lower bound on a field's value. They share a name but solve different problems.
The built-in constraint keys pick their reducers based on what "strictest" means for the constraint, which is often the opposite of what the key's name suggests:
| Key | Reducer | Reasoning |
| ------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `REQUIRED` | `or()` | If any `required()` rule evaluates to `true`, the field is required. |
| `MIN` | `max()` | A minimum-value constraint is strictest when largest. If one rule requires `>= 5` and another `>= 10`, the effective minimum is `10`. |
| `MAX` | `min()` | A maximum-value constraint is strictest when smallest. If one rule caps at `100` and another at `50`, the effective maximum is `50`. |
| `MIN_LENGTH` | `max()` | Same logic as `MIN`: the longest required length wins. |
| `MAX_LENGTH` | `min()` | Same logic as `MAX`: the shortest allowed length wins. |
| `PATTERN` | `list<RegExp>()` | Each `pattern()` call contributes a regex; the value must match all of them. |
This pairing of "strictest wins" is why calling `min(path.age, 18)` and `min(path.age, 21)` in two composed schemas works correctly. Each call registers its own validator that enforces its specific bound (so a value below either bound fails validation). Separately, each call contributes to the public `MIN` key, and `state.metadata(MIN)!()` reports the aggregate (`21`) so UI and custom controls can read the effective minimum.
### Writing a custom reducer
When you want to write your own reducer, implement an object matching the `MetadataReducer<TAcc, TItem>` interface:
```ts
interface MetadataReducer<TAcc, TItem> {
reduce: (acc: TAcc, item: TItem) => TAcc;
getInitial: () => TAcc;
}
```
You can define a custom reducer when none of the built-ins match the semantics you need. For example, a `SEVERITY` key that keeps the most severe level contributed by any rule:
```ts
import {createMetadataKey, type MetadataReducer} from '@angular/forms/signals';
type Severity = 'info' | 'warning' | 'error';
const SEVERITY_RANK: Record<Severity, number> = {info: 0, warning: 1, error: 2};
const maxSeverity: MetadataReducer<Severity | undefined, Severity> = {
reduce(acc, item) {
if (acc === undefined) return item;
return SEVERITY_RANK[item] > SEVERITY_RANK[acc] ? item : acc;
},
getInitial: () => undefined,
};
export const SEVERITY = createMetadataKey<Severity, Severity | undefined>(maxSeverity);
```
Any number of rules can now contribute a severity, and the field reports the highest:
```ts
form(model, (path) => {
metadata(path.password, SEVERITY, () => 'info');
metadata(path.password, SEVERITY, ({value}) => (value().length < 12 ? 'warning' : 'info'));
metadata(path.password, SEVERITY, ({value}) =>
/password|1234/i.test(value()) ? 'error' : 'info',
);
});
```
The reducer runs whenever any contribution's signals change, so `state.metadata(SEVERITY)!()` stays in sync with the current worst case across all rules.
TIP: Keep your reducers pure: `reduce()` should depend only on its two arguments, and `getInitial()` should return the same value every time it is called. Reducers run inside a reactive computation that re-executes when any contribution's signals change, so impure reducers produce inconsistent metadata.
## Attaching lifecycle-aware objects with managed metadata
Managed metadata stores a lifecycle-aware object on a field instead of a reactive value. Use it for per-field objects like a `resource()` that fetches external data, an `effect()` that syncs to an outside system, or a service handle scoped to a single field.
### Creating a managed key
When you want to define a managed key, call `createManagedMetadataKey<TRead, TWrite>(create)`. The `create` function you pass produces the value the key holds.
```ts
import {Signal} from '@angular/core';
import {httpResource} from '@angular/common/http';
import {createManagedMetadataKey} from '@angular/forms/signals';
export interface UrlPreview {
title: string;
description?: string;
image?: string;
}
export const URL_PREVIEW = createManagedMetadataKey((_state, url: Signal<string | undefined>) => {
return httpResource<UrlPreview>(() => {
const currentUrl = url();
return currentUrl ? {url: '/api/url-preview', params: {url: currentUrl}} : undefined;
});
});
```
The `create` function receives the field's `FieldState` and a `Signal<TAcc>` of data contributed by `metadata()` rules for this key, and returns whatever object should live on the field. The return value is stored as-is: unlike non-managed keys, the framework does not wrap it in a `computed()`.
`create` runs once when a field is constructed, inside the field's injection context. That lets you call `inject()`, `resource()`, and `effect()` inside `create`, and ties cleanup to the field's lifecycle: when the field is destroyed, Angular destroys the injection context, and any `resource()`, `effect()`, or `DestroyRef` callback you registered there cleans up automatically.
Because `create` itself is not reactive, any behavior that needs to respond to signal changes has to live inside an `effect()`, `resource()`, or `httpResource()` set up during that initial call. `URL_PREVIEW` demonstrates the pattern: the `httpResource()` reads the URL signal inside its request function, so the request re-runs whenever the signal changes. The schema rule (`metadata(path.url, URL_PREVIEW, ({value}) => value())`) decides what data to feed in; the managed key decides what to do with it.
### Using a managed key in a form
When you need to use a managed key in a form, register a `metadata()` rule for the key, and then read the returned object from the field state.
```angular-ts
import {Component, computed, signal} from '@angular/core';
import {applyEach, form, metadata, FormField} from '@angular/forms/signals';
import {URL_PREVIEW} from './url-preview';
@Component({
selector: 'app-link-editor',
imports: [FormField],
template: `
<form>
@for (link of linksForm.links; track link) {
<fieldset>
<label>
URL
<input [formField]="link.url" />
</label>
<!-- Read the URL_PREVIEW key for this link's url field; the result is the resource its create function produced -->
@let preview = link.url().metadata(URL_PREVIEW);
@if (preview?.isLoading()) {
<p>Loading preview...</p>
} @else if (preview?.hasValue() && preview.value(); as data) {
<article class="preview">
<h3>{{ data.title }}</h3>
@if (data.description) {
<p>{{ data.description }}</p>
}
</article>
} @else if (preview?.error()) {
<p class="error">Could not load preview.</p>
}
</fieldset>
}
<button type="button" (click)="addLink()">Add link</button>
</form>
`,
})
export class LinkEditor {
linksModel = signal({links: [{url: ''}]});
linksForm = form(this.linksModel, (path) => {
// Register the URL_PREVIEW key on each link's url field.
// applyEach runs the schema per item, so create() runs once per link
// and each link gets its own resource.
applyEach(path.links, (itemPath) => {
metadata(itemPath.url, URL_PREVIEW, ({value}) => value());
});
});
addLink() {
this.linksForm.links().value.update((links) => [...links, {url: ''}]);
}
}
```
Each array item gets its own `URL_PREVIEW` resource because `applyEach` registers the schema rules against each item independently. When the user adds a link, `create` runs for the new item's field. When a link is removed (not shown here, but a common pattern), the framework tears down that field's injector along with the resource.
## Next steps
Remember that metadata exists so reactive data can travel with the field through schema composition, accumulate across rules, and tear down with the field's lifecycle. It leverages the same system Angular's built-in validators use, and can be tailored to your own use cases.
For detailed API documentation, see:
- [`createMetadataKey()`](api/forms/signals/createMetadataKey) - Define a metadata key with optional reducer
- [`createManagedMetadataKey()`](api/forms/signals/createManagedMetadataKey) - Define a lifecycle-aware metadata key
- [`metadata()`](api/forms/signals/metadata) - Contribute a value to a metadata key in a schema
- [`MetadataReducer`](api/forms/signals/MetadataReducer) - Built-in reducers for combining contributions
For additional related guides on Signal Forms, check out:
<docs-pill-row>
<docs-pill href="guide/forms/signals/form-logic" title="Adding form logic" />
<docs-pill href="guide/forms/signals/validation" title="Validation" />
<docs-pill href="guide/forms/signals/field-state-management" title="Field state management" />
<docs-pill href="guide/forms/signals/async-operations" title="Async operations" />
</docs-pill-row>
adev/src/content/guide/forms/signals/form-logic.md
+23 -206
View File
@@ -454,24 +454,20 @@ Don't use debouncing if:
## Associate data with a field using `metadata()`
Metadata allows you to attach computed information to fields that can be read by [custom controls](guide/forms/signals/custom-controls) or form logic. Common use cases include HTML input attributes (min, max, maxlength, pattern), custom UI hints (placeholder text, help text), and accessibility information.
Metadata attaches reactive data to a field. Validation rules use this system internally, and you can publish your own keys for application-specific information like help text, configuration, or computed display values.
### Pre-defined metadata keys
Signal Forms provides six pre-defined metadata keys that built-in validators populate automatically:
Signal Forms provides six pre-defined metadata keys that validation rules automatically populate:
| Key | Populated by | Read via |
| ------------ | ------------- | --------------------- |
| `REQUIRED` | `required()` | `field().required()` |
| `MIN` | `min()` | `field().min()` |
| `MAX` | `max()` | `field().max()` |
| `MIN_LENGTH` | `minLength()` | `field().minLength()` |
| `MAX_LENGTH` | `maxLength()` | `field().maxLength()` |
| `PATTERN` | `pattern()` | `field().pattern()` |
- `REQUIRED` - Whether the field is required (`boolean`)
- `MIN` - Minimum numeric value (`number | undefined`)
- `MAX` - Maximum numeric value (`number | undefined`)
- `MIN_LENGTH` - Minimum string/array length (`number | undefined`)
- `MAX_LENGTH` - Maximum string/array length (`number | undefined`)
- `PATTERN` - Regular expression pattern (`RegExp[]` - array to support multiple patterns)
When you use validation rules like `required()` or `min()`, they automatically set the corresponding metadata. The `metadata()` function provides a way to publish additional data associated with a field.
### Reading pre-defined metadata
The `[FormField]` directive automatically binds built-in metadata to HTML attributes. You can also read metadata directly using the built-in accessors on field state:
The `[formField]` directive automatically binds five of these (`REQUIRED`, `MIN`, `MAX`, `MIN_LENGTH`, and `MAX_LENGTH`) to the corresponding HTML attribute on a native form control. `PATTERN` is the exception, because Signal Forms supports multiple patterns per field but the HTML `pattern` attribute accepts only a single regular expression.
```angular-ts
import {Component, signal} from '@angular/core';
@@ -482,7 +478,7 @@ import {form, FormField, required, min, max} from '@angular/forms/signals';
imports: [FormField],
template: `
<label>
Age (between {{ ageForm.age().min() }} and {{ ageForm.age().max() }})
Age (between {{ ageForm.age().min?.() }} and {{ ageForm.age().max?.() }})
<input type="number" [formField]="ageForm.age" />
</label>
@@ -492,9 +488,7 @@ import {form, FormField, required, min, max} from '@angular/forms/signals';
`,
})
export class Age {
ageModel = signal({
age: 0,
});
ageModel = signal({age: 0});
ageForm = form(this.ageModel, (schemaPath) => {
required(schemaPath.age);
@@ -504,138 +498,9 @@ export class Age {
}
```
The `[formField]` directive automatically binds `required`, `min`, and `max` attributes to the input. You can read these values using `field().required()`, `field().min()`, and `field().max()` for display or logic purposes.
### Setting metadata manually
Use the `metadata()` function to set metadata values when validation rules don't automatically set them. For built-in metadata like `MIN` and `MAX`, prefer using the validation rules:
```angular-ts
import {Component, signal} from '@angular/core';
import {form, FormField, min, max, validate} from '@angular/forms/signals';
@Component({
selector: 'app-custom',
imports: [FormField],
template: ` <input [formField]="customForm.score" /> `,
})
export class Custom {
customModel = signal({score: 0});
customForm = form(this.customModel, (schemaPath) => {
// Use built-in validation rules - they automatically set metadata
min(schemaPath.score, 0);
max(schemaPath.score, 100);
// Add custom validation logic if needed
validate(schemaPath.score, ({value}) => {
const score = value();
// Custom validation beyond min/max (e.g., must be multiple of 5)
if (score % 5 !== 0) {
return {kind: 'increment', message: 'Score must be a multiple of 5'};
}
return null;
});
});
}
```
### Creating custom metadata keys
Create your own metadata keys for application-specific information:
```angular-ts
import {createMetadataKey, metadata} from '@angular/forms/signals';
// Define at module level (not inside components)
export const PLACEHOLDER = createMetadataKey<string>();
export const HELP_TEXT = createMetadataKey<string>();
// Use in schema
form(model, (schemaPath) => {
metadata(schemaPath.email, PLACEHOLDER, () => 'user@example.com');
metadata(schemaPath.email, HELP_TEXT, () => 'We will never share your email');
});
// Read in component
const placeholderText = myForm.email().metadata(PLACEHOLDER);
const helpText = myForm.email().metadata(HELP_TEXT);
```
By default, custom metadata keys use a "last write wins" strategy - if you call `metadata()` multiple times with the same key, only the last value is kept.
**Important:** Always define metadata keys at module level, never inside components. Metadata keys rely on object identity, and recreating them loses that identity.
### Accumulating metadata with reducers
By default, calling `metadata()` multiple times with the same key uses "last write wins" - only the final value is kept. To accumulate values instead, pass a reducer to `createMetadataKey()`:
```angular-ts
import {createMetadataKey, metadata, MetadataReducer} from '@angular/forms/signals';
// Create a key that accumulates values into an array
export const HINTS = createMetadataKey<string, string[]>(MetadataReducer.list());
// Multiple calls accumulate values
form(model, (schemaPath) => {
metadata(schemaPath.password, HINTS, () => 'At least 8 characters');
metadata(schemaPath.password, HINTS, () => 'Include a number');
metadata(schemaPath.password, HINTS, () => 'Include a special character');
});
// Result: Signal containing the accumulated array
const passwordHints = passwordForm.password().metadata(HINTS)();
// ['At least 8 characters', 'Include a number', 'Include a special character']
```
Angular provides built-in reducers through `MetadataReducer`:
- `MetadataReducer.list()` - Accumulates values into an array
- `MetadataReducer.min()` - Keeps the minimum value
- `MetadataReducer.max()` - Keeps the maximum value
- `MetadataReducer.or()` - Logical OR of boolean values
- `MetadataReducer.and()` - Logical AND of boolean values
### Managed metadata keys
Use `createManagedMetadataKey()` when you need to compute a new value from the accumulated result. The transform function receives a signal of the reduced value and returns the computed result:
```angular-ts
import {createManagedMetadataKey, metadata, MetadataReducer} from '@angular/forms/signals';
// Accumulate hints and compute additional data from the result
export const HINTS = createManagedMetadataKey(
(signal) =>
computed(() => {
const hints = signal();
return {
messages: hints,
count: hints?.length ?? 0,
};
}),
MetadataReducer.list(),
);
// Multiple calls accumulate values
form(model, (schemaPath) => {
metadata(schemaPath.password, HINTS, () => 'At least 8 characters');
metadata(schemaPath.password, HINTS, () => 'Include a number');
metadata(schemaPath.password, HINTS, () => 'Include a special character');
});
// Result: Signal with transformed value
const passwordHints = passwordForm.password().metadata(HINTS)();
// { messages: ['At least 8 characters', 'Include a number', 'Include a special character'], count: 3 }
```
The managed metadata key takes two arguments:
1. **Transform function** - Computes a new value from the accumulated result (receives a signal of the reduced value)
2. **Reducer** - Determines how values accumulate (optional - defaults to "last write wins")
### Reactive metadata
Make metadata reactive to other field values:
Validation rules can derive their constraints from other fields, making the published metadata reactive:
```angular-ts
import {Component, signal} from '@angular/core';
@@ -654,12 +519,8 @@ import {form, FormField, max} from '@angular/forms/signals';
</label>
<label>
Quantity (max: {{ inventoryForm.quantity().max() }})
<input
type="number"
[formField]="inventoryForm.quantity"
[max]="inventoryForm.quantity().max()"
/>
Quantity (max: {{ inventoryForm.quantity().max?.() }})
<input type="number" [formField]="inventoryForm.quantity" />
</label>
`,
})
@@ -678,47 +539,9 @@ export class Inventory {
}
```
The `max()` validation rule sets the `MAX` metadata reactively based on the selected item. This demonstrates how validation rules can have conditional values that change when other fields update.
The `max()` validation rule sets the `MAX` metadata reactively based on the selected item, so any template or control reading `field().max()` updates whenever the item changes.
### Using metadata in custom controls
Custom controls can read metadata to configure their HTML attributes and behavior:
```angular-ts
import {Component, input, computed, model} from '@angular/core';
import {FormValueControl, Field, PLACEHOLDER} from '@angular/forms/signals';
@Component({
selector: 'custom-input',
template: `
<input
type="number"
[value]="state().value()"
(input)="state().value.set(($event.target as HTMLInputElement).valueAsNumber)"
[min]="state().min()"
[max]="state().max()"
[required]="state().required()"
[placeholder]="placeholderText()"
/>
`,
})
export class CustomInput implements FormValueControl<number> {
// Bind to the form field.
formField = input.required<Field<number>>();
// Compute the current field state.
state = computed(() => this.formField()());
// Required property of the FormValueControl interface.
value = model(0);
placeholderText = computed(() => this.state().metadata(PLACEHOLDER)() ?? '');
}
```
This pattern allows custom controls to automatically configure themselves based on the validation rules and metadata defined in the schema.
TIP: For more information on creating custom controls, see the [Custom Controls guide](guide/forms/signals/custom-controls).
For deeper coverage, including how to define custom keys, combine contributions with reducers, and use managed metadata for lifecycle-aware objects, see the [Field metadata guide](guide/forms/signals/field-metadata).
## Combining rules
@@ -730,15 +553,8 @@ Apply multiple rules to configure all aspects of a field's behavior:
```angular-ts
import {Component, signal} from '@angular/core';
import {
form,
FormField,
disabled,
hidden,
debounce,
metadata,
PLACEHOLDER,
} from '@angular/forms/signals';
import {form, FormField, disabled, hidden, debounce, metadata} from '@angular/forms/signals';
import {PLACEHOLDER} from './metadata-keys';
@Component({
selector: 'app-promo',
@@ -835,8 +651,9 @@ The conditional rules only run when the condition is true. This is useful for co
Extract common rule configurations into reusable functions:
```angular-ts
import {SchemaPath, debounce, metadata, maxLength, PLACEHOLDER} from '@angular/forms/signals';
```ts
import {SchemaPath, debounce, metadata, maxLength} from '@angular/forms/signals';
import {PLACEHOLDER} from './metadata-keys';
function emailFieldConfig(path: SchemaPath<string>) {
debounce(path, 300);
adev/src/content/guide/forms/signals/form-submission.md
+4
View File
@@ -312,6 +312,10 @@ submission: {
}
```
## Concurrent submissions
When a submission is in progress, subsequent calls to `submit()` for the same form or any of its parents return `false` immediately without running the action. This prevents duplicate submissions and side effects if a user triggers the submit action multiple times quickly.
## Next steps
This guide covered submitting forms and handling form submission errors. Related guides explore other aspects of Signal Forms:
adev/src/content/guide/forms/signals/models.md
+34
View File
@@ -40,6 +40,40 @@ The [`form()`](api/forms/signals/form) function accepts the model signal and cre
The `[formField]` directive binds each input element to its corresponding field in the field tree, enabling automatic two-way synchronization between the UI and model.
### Supported model structures
Signal Forms builds the field tree by walking your model. The objects and arrays it walks through (the **structural layer**) must be plain JavaScript objects and arrays. The values at the **leaves** (positions with no nested fields) are usually primitives (strings, numbers, booleans) or `null`. Native `date`, `month`, `time`, and `week` inputs also accept `Date`, and custom controls can accept any value type they understand.
```ts {prefer, header: 'Plain structure'}
interface UserFormModel {
name: string;
birthday: Date | null;
preferences: {
theme: string;
notifications: boolean;
};
tags: string[];
}
const userModel = signal<UserFormModel>({
name: '',
birthday: null,
preferences: {
theme: 'dark',
notifications: true,
},
tags: [],
});
```
IMPORTANT: Class instances, `Map`, and `Set` are **not supported in the structural layer**, even though TypeScript will accept them. Signal Forms does not validate the model shape at runtime, so the framework accepts these values without throwing, then produces incorrect behavior in different ways depending on shape:
- **Class instances** lose their prototype on the first write because Signal Forms shallow-copies parent objects on update. Methods, getters, and `instanceof` checks are gone afterward.
- **Non-extensible or frozen objects inside arrays** throw when Signal Forms assigns a tracking symbol to preserve item identity across reorders.
- **`Map` and `Set`** produce empty field trees, because Signal Forms enumerates children with `Object.keys`.
If your application uses classes for domain modeling, translate to plain objects at the form boundary. See [Translating between form model and domain model](guide/forms/signals/model-design#translating-between-form-model-and-domain-model).
### Using TypeScript types
While TypeScript infers types from object literals, defining explicit types improves code quality and provides better IntelliSense support.
adev/src/content/guide/http/making-requests.md
+2 -2
View File
@@ -247,7 +247,7 @@ Each `HttpEvent` reported in the event stream has a `type` which distinguishes w
| `HttpEventType.ResponseHeader` | The head of the response has been received, including status and headers |
| `HttpEventType.DownloadProgress` | An `HttpDownloadProgressEvent` reporting progress on downloading the response body |
| `HttpEventType.Response` | The entire response has been received, including the response body |
| `HttpEventType.User` | A custom event from an Http interceptor. |
| `HttpEventType.User` | A custom event from an HTTP interceptor. |
## Handling request failure
@@ -614,7 +614,7 @@ IMPORTANT: The `integrity` option requires an exact match between the response c
TIP: Use subresource integrity when loading critical resources from external sources to ensure they haven't been modified. Generate hashes using tools like `openssl`.
## Http `Observable`s
## HTTP `Observable`s
Each request method on `HttpClient` constructs and returns an `Observable` of the requested response type. Understanding how these `Observable`s work is important when using `HttpClient`.
adev/src/content/guide/http/testing.md
+13 -5
View File
@@ -8,15 +8,12 @@ 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 `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.
IMPORTANT: Keep in mind to provide `provideHttpClient()` **before** `provideHttpClientTesting()`, as `provideHttpClientTesting()` will overwrite parts of `provideHttpClient()`. Doing it the other way around can potentially break your tests.
To begin testing usage of `HttpClient`, configure `TestBed` and include `provideHttpClientTesting()` in your test's setup. `HttpClient` is provided by Angular's test environment, and `provideHttpClientTesting()` configures it 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.
```ts
TestBed.configureTestingModule({
providers: [
// ... other test providers
provideHttpClient(),
provideHttpClientTesting(),
],
});
@@ -26,13 +23,24 @@ const httpTesting = TestBed.inject(HttpTestingController);
Now when your tests make requests, they will hit the testing backend instead of the normal one. You can use `httpTesting` to make assertions about those requests.
### Configuring `HttpClient` in tests
If a test needs to configure `HttpClient` features, such as interceptors, include `provideHttpClient(...)` before `provideHttpClientTesting()`.
IMPORTANT: Keep in mind to provide `provideHttpClient()` **before** `provideHttpClientTesting()`, as `provideHttpClientTesting()` will overwrite parts of `provideHttpClient()`. Doing it the other way around can potentially break your tests.
```ts
TestBed.configureTestingModule({
providers: [provideHttpClient(withInterceptors([authInterceptor])), provideHttpClientTesting()],
});
```
## Expecting and answering requests
For example, you can write a test that expects a GET request to occur and provides a mock response:
```ts
TestBed.configureTestingModule({
providers: [ConfigService, provideHttpClient(), provideHttpClientTesting()],
providers: [ConfigService, provideHttpClientTesting()],
});
const httpTesting = TestBed.inject(HttpTestingController);
adev/src/content/guide/i18n/add-package.md
+1 -1
View File
@@ -9,7 +9,7 @@ To add the `@angular/localize` package, use the following command to update the
It adds `types: ["@angular/localize"]` in the TypeScript configuration files.
It also adds line `/// <reference types="@angular/localize" />` at the top of the `main.ts` file which is the reference to the type definition.
HELPFUL: For more information about `package.json` and `tsconfig.json` files, see [Workspace npm dependencies][GuideNpmPackages] and [TypeScript Configuration][GuideTsConfig]. To learn about Triple-slash Directives visit [Typescript Handbook](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-).
HELPFUL: For more information about `package.json` and `tsconfig.json` files, see [Workspace npm dependencies][GuideNpmPackages] and [TypeScript Configuration][GuideTsConfig]. To learn about Triple-slash Directives visit [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-).
If `@angular/localize` is not installed and you try to build a localized version of your project (for example, while using the `i18n` attributes in templates), the [Angular CLI][CliMain] will generate an error, which would contain the steps that you can take to enable i18n for your project.
adev/src/content/guide/i18n/merge.md
+7 -4
View File
@@ -31,10 +31,12 @@ Use the `i18n` project option in the [`angular.json`][GuideWorkspaceConfig] work
The following sub-options identify the source language and tell the compiler where to find supported translations for the project.
| Suboption | Details |
| :------------- | :--------------------------------------------------------------------------- |
| `sourceLocale` | The locale you use within the application source code \(`en-US` by default\) |
| `locales` | A map of locale identifiers to translation files |
| Suboption | Details |
| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sourceLocale` | The locale you use within the application source code \(`en-US` by default\). Can also be an object with `code`, `baseHref`, and `subPath` properties. |
| `locales` | A map of locale identifiers to translation files. Each entry can also be an object with `translation`, `baseHref`, and `subPath` properties. |
For the full list of `i18n` properties and their types, see [i18n options][GuideWorkspaceConfigI18n].
### `angular.json` for `en-US` and `fr` example
@@ -149,3 +151,4 @@ TLDR: Compile once, then translate for each locale.
[GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]: guide/i18n/merge#generate-application-variants-for-each-locale 'Generate application variants for each locale - Merge translations into the application | Angular'
[GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]: guide/i18n/translation-files#change-the-source-language-file-format 'Change the source language file format - Work with translation files | Angular'
[GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular'
[GuideWorkspaceConfigI18n]: reference/configs/workspace-config#i18n-options 'i18n options - Angular workspace configuration | Angular'
adev/src/content/guide/i18n/prepare.md
+20
View File
@@ -48,6 +48,26 @@ The following example shows the `<ng-container>` element transformed into a non-
<docs-code path="adev/src/content/examples/i18n/src/app/app.component.html" region="i18n-ng-container"/>
### Name the interpolation placeholder
By default, Angular generates a placeholder name for each interpolation in a translated message. To give it a meaningful name that helps translators understand the context, add an `//i18n(ph="name")` comment inside the interpolation.
```html
<element i18n>{{ expression //i18n(ph="placeholder_name") }}</element>
```
For example:
```html
<p i18n>Hello, {{ username //i18n(ph="name") }}!</p>
```
This is the template equivalent of naming a placeholder in component code with [`$localize`][ApiLocalizeInitLocalize]:
```ts
$localize`Hello, ${username}:name:!`;
```
## Mark element attributes for translations
In a component template, the i18n metadata is the value of the `i18n-{attribute_name}` attribute.
adev/src/content/guide/image-optimization.md
+1 -1
View File
@@ -468,7 +468,7 @@ For maintenance reasons, we don't currently plan to support additional built-in
No, but this is on our roadmap, so stay tuned.
If you're waiting on this feature, please upvote the Github issue [here](https://github.com/angular/angular/issues/56594).
If you're waiting on this feature, please upvote the GitHub issue [here](https://github.com/angular/angular/issues/56594).
### How do I find my LCP image with Chrome DevTools?
adev/src/content/guide/security.md
+21 -2
View File
@@ -376,9 +376,10 @@ The validation rules are:
- `Host` and `X-Forwarded-Host` headers are validated against a strict allowlist and cannot contain path separators.
- `X-Forwarded-Port` header must be numeric.
- `X-Forwarded-Proto` header must be `http` or `https`.
- `X-Forwarded-Prefix` header must not start with `\` or multiple `/` or contain `.`, `..` path segments.
- `X-Forwarded-Prefix` header must start with `/` and contain only alphanumeric characters, hyphens, and underscores, separated by single slashes.
- By default, all `X-Forwarded-*` headers are treated as untrusted and are removed from the request. To retain them, they must be explicitly allowed by configuring `trustProxyHeaders`.
Invalid or disallowed headers now trigger an error log. Requests with unrecognized hostnames will result in a Client-Side Rendered (CSR) page if `allowedHosts` is defined; if not, a `400 Bad Request` is issued. Note that in a future major release, all unrecognized hostnames will default to a `400 Bad Request` regardless of `allowedHosts` settings.
Invalid headers trigger an error log, and unallowed proxy headers are removed from the request. Requests with unrecognized hostnames will result in a `400 Bad Request` is issued.
NOTE: Most cloud providers and CDN providers perform automatic validation of these headers before a request ever reaches the application origin. This inherent filtering significantly reduces the practical attack surface.
@@ -433,6 +434,24 @@ export NG_ALLOWED_HOSTS="example.com,*.trusted-example.com"
IMPORTANT: You can use `*` as a value in `allowedHosts` to allow all hostnames, though this is generally discouraged and presents a security risk. Accepting any host header can expose your application to host header injection and [Server-Side Request Forgery (SSRF)](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/SSRF) attacks. This configuration should only be used when validation for `Host` and `X-Forwarded-Host` headers is performed in another layer, such as a load balancer or reverse proxy. For better security, we recommend using an explicit list of allowed hosts whenever possible. See [GHSA-x288-3778-4hhx](https://github.com/angular/angular-cli/security/advisories/GHSA-x288-3778-4hhx) for more details.
### Configuring trusted proxy headers
By default, Angular ignores all `X-Forwarded-*` headers. If your application is behind a trusted reverse proxy (like a load balancer) that sets these headers, you can configure Angular to trust them.
You can configure `trustProxyHeaders` when initializing the application engine:
```typescript
const appEngine = new AngularAppEngine({
trustProxyHeaders: ['x-forwarded-host', 'x-forwarded-proto'], // Trust specific headers
});
const nodeAppEngine = new AngularNodeAppEngine({
trustProxyHeaders: true, // Trust all X-Forwarded-* headers
});
```
IMPORTANT: Only enable `trustProxyHeaders` if your application is behind a trusted proxy that strictly validates or overrides these headers. Otherwise, attackers can spoof these headers to cause [Server-Side Request Forgery (SSRF)](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/SSRF) attacks.
## Auditing Angular applications
Angular applications must follow the same security principles as regular web applications, and must be audited as such.
adev/src/content/guide/signals/effect.md
+2
View File
@@ -3,6 +3,8 @@
Signals are useful because they notify interested consumers when they change. An **effect** is an operation that runs whenever one or more signal values change. You can create an effect with the `effect` function:
```ts
import {effect} from '@angular/core';
effect(() => {
console.log(`The current count is: ${count()}`);
});
adev/src/content/guide/signals/overview.md
+1 -1
View File
@@ -75,7 +75,7 @@ IMPORTANT: The readonly signals do **not** have any built-in mechanism that woul
### Computed signals
**Computed signal** are read-only signals that derive their value from other signals. You define computed signals using the `computed` function and specifying a derivation:
**Computed signals** are read-only signals that derive their value from other signals. You define computed signals using the `computed` function and specifying a derivation:
```typescript
const count: WritableSignal<number> = signal(0);
adev/src/content/guide/signals/resource.md
+3 -3
View File
@@ -28,7 +28,7 @@ const firstName = computed(() => {
if (userResource.hasValue()) {
// `hasValue` serves 2 purposes:
// - It acts as type guard to strip `undefined` from the type
// - If protects against reading a throwing `value` when the resource is in error state
// - It protects against reading a throwing `value` when the resource is in error state
return userResource.value().firstName;
}
@@ -116,11 +116,11 @@ The `status` signal provides a specific `ResourceStatus` that describes the stat
| `'idle'` | `undefined` | The resource has no valid request and the loader has not run. |
| `'error'` | `undefined` | The loader has encountered an error. |
| `'loading'` | `undefined` | The loader is running as a result of the `params` value changing. |
| `'reloading'` | Previous value | The loader is running as a result calling of the resource's `reload` method. |
| `'reloading'` | Previous value | The loader is running as a result of calling the resource's `reload` method. |
| `'resolved'` | Resolved value | The loader has completed. |
| `'local'` | Locally set value | The resource's value has been set locally via `.set()` or `.update()` |
You can use this status information to conditionally display user interface elements, such loading indicators and error messages.
You can use this status information to conditionally display user interface elements, such as loading indicators and error messages.
## Reactive data fetching with `httpResource`
adev/src/content/guide/ssr.md
+7 -3
View File
@@ -432,7 +432,7 @@ To configure this, update your `angular.json` file as follows:
You can customize how Angular caches HTTP responses during server‑side rendering (SSR) and reuses them during hydration by configuring `HttpTransferCacheOptions`.
This configuration is provided globally using `withHttpTransferCacheOptions` inside `provideClientHydration()`.
By default, `HttpClient` caches all `HEAD` and `GET` requests which don't contain `Authorization` or `Proxy-Authorization` headers. You can override those settings by using `withHttpTransferCacheOptions` to the hydration configuration.
By default, `HttpClient` caches all `HEAD` and `GET` requests which don't contain `Authorization`, `Proxy-Authorization`, or `Cookie` headers and are not sent with `withCredentials` or Fetch API `credentials` modes that can send credentials. Angular also skips transfer cache when a request or response includes `Cache-Control` directives that forbid caching (`no-store`, `no-cache`, or `private`), or when the Fetch API `cache` option is set to `no-store` or `no-cache`. Responses that carry a `Set-Cookie` header are also skipped. You can override the request filtering settings by using `withHttpTransferCacheOptions` in the hydration configuration.
```ts
import {bootstrapApplication} from '@angular/platform-browser';
@@ -467,6 +467,8 @@ withHttpTransferCacheOptions({
IMPORTANT: Avoid including sensitive headers like authentication tokens. These can leak user‑specific data between requests.
Including `Cache-Control` in `includeHeaders` only makes that header available on the hydrated response. Angular already evaluates `Cache-Control` headers automatically when deciding whether a request or response is eligible for transfer cache.
---
### `includePostRequests`
@@ -486,8 +488,8 @@ Use this only when `POST` requests are **idempotent** and safe to reuse between
### `includeRequestsWithAuthHeaders`
Determines whether requests containing `Authorization` or `Proxy‑Authorization` headers are eligible for caching.
By default, these are excluded to prevent caching user‑specific responses.
Determines whether requests containing `Authorization`, `Proxy‑Authorization`, or `Cookie` headers are eligible for caching.
By default, these are excluded to prevent caching user‑specific responses. Requests sent with `withCredentials` or Fetch API `credentials` set to `include` or `same-origin` are also excluded by default.
```ts
withHttpTransferCacheOptions({
@@ -558,6 +560,8 @@ To disable caching for an individual request, you can specify the [`transferCach
httpClient.get('/api/sensitive-data', {transferCache: false});
```
`HttpTransferCache` does not cache requests or responses that explicitly opt out of caching. Angular skips transfer cache entries when a request includes a `Cache-Control` header with `no-store`, `no-cache`, or `private`, or when the request uses the Fetch API `cache` option set to `no-store` or `no-cache`. Responses with `Cache-Control: no-store`, `Cache-Control: no-cache`, or `Cache-Control: private` are also not stored in the transfer cache. Responses that include a `Set-Cookie` header are likewise not stored, as they typically carry user-specific state.
NOTE: If your application uses different HTTP origins to make API calls on the server and on the client, the `HTTP_TRANSFER_CACHE_ORIGIN_MAP` token allows you to establish a mapping between those origins, so that `HttpTransferCache` feature can recognize those requests as the same ones and reuse the data cached on the server during hydration on the client.
## Configuring a server
adev/src/content/guide/templates/defer.md
+31
View File
@@ -349,6 +349,37 @@ By default, when rendering an application on the server (either using SSR or SSG
To render the main content of `@defer` blocks on the server (both SSR and SSG), you can enable [the Incremental Hydration feature](/guide/incremental-hydration) and configure `hydrate` triggers for the necessary blocks.
## Barrel files and lazy chunks
If you're using `@defer` but not seeing a separate lazy chunk in your build output, check how you're importing the deferred component. Importing through a barrel file (`index.ts`) is a common culprit — bundlers see the barrel as a single module and keep all its exports together, so your component ends up in the main bundle regardless of `@defer`.
```typescript
// index.ts
export {HeavyComponent} from './heavy.component';
export {OtherComponent} from './other.component';
```
```typescript
// parent.component.ts
import {HeavyComponent} from './index'; // pulls in OtherComponent too
@Component({
imports: [HeavyComponent],
template: `@defer {
<heavy-component />
}`,
})
export class ParentComponent {}
```
The fix is straightforward — import directly from the component's own file:
```typescript
import {HeavyComponent} from './heavy.component';
```
That's enough for the bundler to split it into its own chunk and load it lazily when the trigger fires.
## Best practices for deferring views
### Avoid cascading loads with nested `@defer` blocks
adev/src/content/guide/templates/event-listeners.md
+1 -1
View File
@@ -96,7 +96,7 @@ Angular also allows you to specify [Code values for keyboard events](https://dev
<input type="text" (keydown.code.alt.shiftleft)="updateField($event)" />
```
This can be useful for handling keyboard events consistently across different operating systems. For example, when using the Alt key on MacOS devices, the `key` property reports the key based on the character already modified by the Alt key. This means that a combination like Alt + S reports a `key` value of `'ß'`. The `code` property, however, corresponds to the physical or virtual button pressed rather than the character produced.
This can be useful for handling keyboard events consistently across different operating systems. For example, when using the Alt key on macOS devices, the `key` property reports the key based on the character already modified by the Alt key. This means that a combination like Alt + S reports a `key` value of `'ß'`. The `code` property, however, corresponds to the physical or virtual button pressed rather than the character produced.
## Listening on global targets
adev/src/content/guide/templates/pipes.md
+3 -3
View File
@@ -2,7 +2,7 @@
## Overview
Pipes are a special operator in Angular template expressions that allows you to transform data declaratively in your template. Pipes let you declare a transformation function once and then use that transformation across multiple templates. Angular pipes use the vertical bar character (`|`), inspired by the [Unix pipe](<https://en.wikipedia.org/wiki/Pipeline_(Unix)>).
Pipes are special operators in Angular template expressions that allow you to transform data declaratively in your template. Pipes let you declare a transformation function once and then use that transformation across multiple templates. Angular pipes use the vertical bar character (`|`), inspired by the [Unix pipe](<https://en.wikipedia.org/wiki/Pipeline_(Unix)>).
NOTE: Angular's pipe syntax deviates from standard JavaScript, which uses the vertical bar character for the [bitwise OR operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR). Angular template expressions do not support bitwise operators.
@@ -33,7 +33,7 @@ export class ShoppingCart {
}
```
When Angular renders the component, it will ensure that the appropriate date format and currency is based on the locale of the user. If the user is in the United States, it would render:
When Angular renders the component, it will ensure that the appropriate date format and currency are based on the locale of the user. If the user is in the United States, it would render:
```angular-html
<main>
@@ -162,7 +162,7 @@ Always use parentheses in your expressions when operator precedence may be ambig
### Change detection with pipes
By default, all pipes are considered `pure`, which means that it only executes when a primitive input value (such as a `String`, `Number`, `Boolean`, or `Symbol`) or a object reference (such as `Array`, `Object`, `Function`, or `Date`) is changed. Pure pipes offer a performance advantage because Angular can avoid calling the transformation function if the passed value has not changed.
By default, all pipes are considered `pure`, which means that they only execute when a primitive input value (such as a `String`, `Number`, `Boolean`, or `Symbol`) or an object reference (such as `Array`, `Object`, `Function`, or `Date`) is changed. Pure pipes offer a performance advantage because Angular can avoid calling the transformation function if the passed value has not changed.
As a result, this means that mutations to object properties or array items are not detected unless the entire object or array reference is replaced with a different instance. If you want this level of change detection, refer to [detecting changes within arrays or objects](#detecting-change-within-arrays-or-objects).
adev/src/content/guide/templates/variables.md
+34
View File
@@ -2,6 +2,8 @@
Angular has two types of variable declarations in templates: local template variables and template reference variables.
HELPFUL: In this guide, “template” does not mean the entire HTML template file. It refers only to a specific template construct or expression within the file.
## Local template variables with `@let`
Angular's `@let` syntax allows you to define a local variable and re-use it across a template, similar to the [JavaScript `let` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let).
@@ -194,3 +196,35 @@ export class AppComponent {
```
See [Referencing children with queries](/guide/components/queries) for more information on queries.
### Template variable scope
Just like variables in JavaScript or TypeScript code, template variables are scoped to the template that declares them.
Similarly, [Structural directives](guide/directives/structural-directives) or `<ng-template>` declarations create a new nested template scope, much like JavaScript's control flow statements like `if` and `for` create new lexical scopes. You cannot access template variables within one of these structural directives from outside of its boundaries.
HELPFUL: Define a variable only once in the template so the runtime value remains predictable.
#### Accessing in a nested template
An inner template can access template variables that the outer template defines.
In the following example, changing the text in the `<input>` changes the value in the `<span>` because Angular immediately updates changes through the template variable, `ref1`.
```html
<input #ref1 type="text" [(ngModel)]="firstExample" />
<span *ngIf="true">Value: {{ ref1.value }}</span>
```
In this case, the `*ngIf` on `<span>` creates a new template scope, which includes the `ref1` variable from its parent scope.
However, accessing a template variable from a child scope in the parent template doesn't work:
```html {avoid}
<input *ngIf="true" #ref2 type="text" [(ngModel)]="secondExample" />
<span>Value: {{ ref2?.value }}</span>
```
Here, `ref2` is declared in the child scope created by `*ngIf`, and is not accessible from the parent template.
adev/src/content/guide/testing/creating-component-harnesses.md
+1 -1
View File
@@ -133,7 +133,7 @@ class MyMenuItem {}
class MyMenu {
triggerText = input('');
@ContentChildren(MyMenuItem) items: QueryList<MyMenuItem>;
items = contentChildren(MyMenuItem);
}
```
adev/src/content/guide/testing/migrating-to-vitest.md
+1 -3
View File
@@ -92,7 +92,7 @@ Choose one of the following browser providers based on your needs:
- **Playwright**: `@vitest/browser-playwright` for Chromium, Firefox, and WebKit.
- **WebdriverIO**: `@vitest/browser-webdriverio` for Chrome, Firefox, Safari, and Edge.
- **Preview**: `@vitest/browser-preview` for Webcontainer environments (like StackBlitz).
- **Preview**: `@vitest/browser-preview` for WebContainer environments (like StackBlitz).
<docs-code-multifile>
<docs-code header="npm" language="shell">
@@ -132,8 +132,6 @@ Add the `browsers` option to your `test` target's options. The browser name depe
Headless mode is enabled automatically if the `CI` environment variable is set or if a browser name includes "Headless" (e.g., `ChromeHeadless`). Otherwise, tests will run in a headed browser.
NOTE: Debugging with `ng test --debug` is not supported by browser mode.
## Automated test refactoring with schematics
IMPORTANT: The `refactor-jasmine-vitest` schematic is experimental and may not cover all possible test patterns. Always review the changes made by the schematic.
adev/src/content/guide/testing/overview.md
+3 -4
View File
@@ -53,11 +53,10 @@ The `setupFiles` and `providersFile` options are particularly useful for managin
For example, you could create a `src/test-providers.ts` file to provide `provideHttpClientTesting` to all your tests:
```typescript {header: "src/test-providers.ts"}
import {Provider} from '@angular/core';
import {provideHttpClient} from '@angular/common/http';
import {EnvironmentProviders, Provider} from '@angular/core';
import {provideHttpClientTesting} from '@angular/common/http/testing';
const testProviders: Provider[] = [provideHttpClient(), provideHttpClientTesting()];
const testProviders: (Provider | EnvironmentProviders)[] = [provideHttpClientTesting()];
export default testProviders;
```
@@ -188,7 +187,7 @@ Choose one of the following browser providers based on your needs:
### Preview
The `@vitest/browser-preview` provider is designed for Webcontainer environments like StackBlitz and is not intended for use in CI/CD.
The `@vitest/browser-preview` provider is designed for WebContainer environments like StackBlitz and is not intended for use in CI/CD.
<docs-code-multifile>
<docs-code header="npm" language="shell">
adev/src/content/introduction/BUILD.bazel
+1
View File
@@ -15,6 +15,7 @@ generate_guides(
"//adev/src/assets/icons:forms.svg",
"//adev/src/assets/icons:language-service.svg",
"//adev/src/assets/icons:ng-update.svg",
"//adev/src/assets/icons:playground.svg",
"//adev/src/assets/icons:routing.svg",
"//adev/src/assets/icons:signals.svg",
"//adev/src/assets/icons:ssr.svg",
adev/src/content/introduction/installation.md
+5 -7
View File
@@ -7,11 +7,9 @@ Get started with Angular quickly with online starters or locally with your termi
If you just want to play around with Angular in your browser without setting up a project, you can use our online sandbox:
<docs-card-container>
<docs-card title="" href="/playground" link="Open on Playground">
The fastest way to play with an Angular app. No setup required.
</docs-card>
</docs-card-container>
<docs-card title="Playground" href="/playground" link="Open on Playground" iconImgSrc="adev/src/assets/icons/playground.svg" titleInline>
The fastest way to play with an Angular app. No setup required.
</docs-card>
## Set up a new project locally
@@ -21,7 +19,7 @@ If you're starting a new project, you'll most likely want to create a local proj
- **Node.js** - [v20.19.0 or newer](/reference/versions)
- **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/)
- **Terminal** - Required for running Angular CLI commands
- **Terminal** - Required for running [Angular CLI](/tools/cli) commands
- **Development Tool** - To improve your development workflow, we recommend the [Angular Language Service](/tools/language-service)
### Instructions
@@ -64,7 +62,7 @@ If you are having issues running this command in Windows or Unix, check out the
#### Create a new project
In your terminal, run the CLI command `ng new` with the desired project name. In the following examples, we'll be using the example project name of `my-first-angular-app`.
In your terminal, run the CLI command [`ng new`](cli/new) with the desired project name. In the following examples, we'll be using the example project name of `my-first-angular-app`.
```shell
ng new <project-name>

Some files were not shown because too many files have changed in this diff Show More