Compare commits

..

1 Commits

Author SHA1 Message Date
cf4edbce40 feat(compiler-cli): expose ngtsc as a TscPlugin
This lets us run ngtsc under the tsc_wrapped custom compiler (Used in Bazel)
It also allows others to simply wire ngtsc into an existing typescript compilation binary
2019-01-28 14:52:06 -08:00
711 changed files with 9557 additions and 20124 deletions

View File

@ -2,4 +2,3 @@ node_modules
dist
aio/node_modules
aio/tools/examples/shared/node_modules
integration/bazel

View File

@ -22,18 +22,12 @@ test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test
# Filesystem interactions #
###############################
# Create symlinks in the project:
# - dist/bin for outputs
# - dist/testlogs, dist/genfiles
# - bazel-out
# NB: bazel-out should be excluded from the editor configuration.
# The checked-in /.vscode/settings.json does this for VSCode.
# Other editors may require manual config to ignore this directory.
# In the past, we say a problem where VSCode traversed a massive tree, opening file handles and
# Don't create symlinks like bazel-out in the project.
# These cause VSCode to traverse a massive tree, opening file handles and
# eventually a surprising failure with auto-discovery of the C++ toolchain in
# MacOS High Sierra.
# See https://github.com/bazelbuild/bazel/issues/4603
build --symlink_prefix=dist/
build --symlink_prefix=/
# Performance: avoid stat'ing input files
build --watchfs
@ -42,16 +36,6 @@ build --watchfs
run --nolegacy_external_runfiles
test --nolegacy_external_runfiles
# Turn on --incompatible_strict_action_env which was on by default
# in Bazel 0.21.0 but turned off again in 0.22.0. Follow
# https://github.com/bazelbuild/bazel/issues/7026 for more details.
# This flag is needed to so that the bazel cache is not invalidated
# when running bazel via `yarn bazel`.
# See https://github.com/angular/angular/issues/27514.
build --incompatible_strict_action_env
run --incompatible_strict_action_env
test --incompatible_strict_action_env
###############################
# Release support #
# Turn on these settings with #

View File

@ -2,10 +2,6 @@
# We do this by copying this file to /etc/bazel.bazelrc at the start of the build.
# See documentation in /docs/BAZEL.md
# Save downloaded repositories in a location that can be cached by CircleCI. This helps us
# speeding up the analysis time significantly with Bazel managed node dependencies on the CI.
build --repository_cache=/home/circleci/bazel_repository_cache
# Don't be spammy in the logs
# TODO(gmagolan): Hide progress again once build performance improves
# Presently, CircleCI can timeout during bazel test ... with the following

View File

@ -11,19 +11,10 @@
# needed for jobs that run tests without Bazel. Bazel runs tests with browsers that will be
# fetched by the Webtesting rules. Therefore for jobs that run tests with Bazel, we don't need a
# docker image with browsers pre-installed.
# **NOTE 1**: If you change the version of the `*-browsers` docker image, make sure the
# `CI_CHROMEDRIVER_VERSION_ARG` env var (in `.circleci/env.sh`) points to a ChromeDriver
# version that is compatible with the Chrome version in the image.
# **NOTE 2**: If you change the version of the docker images, also change the `cache_key` suffix.
# **NOTE**: If you change the version of the docker images, also change the `cache_key` suffix.
var_1: &default_docker_image circleci/node:10.12
var_2: &browsers_docker_image circleci/node:10.12-browsers
# We don't want to include the current branch name in the cache key because that would prevent
# PRs from being able to restore the cache since the branch names are always different for PRs.
# The cache key should only consist of dynamic values that change whenever something in the
# cache changes. For example:
# 1) yarn lock file changes --> cached "node_modules" are different.
# 2) bazel repository definitions change --> cached bazel repositories are different.
var_3: &cache_key v2-angular-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "packages/bazel/package.bzl" }}-node-10.12
var_3: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-node-10.12
# Define common ENV vars
var_4: &define_env_vars
@ -54,30 +45,13 @@ var_7: &post_checkout
var_8: &yarn_install
run:
name: Running Yarn install
command: |
# Yarn's requests sometimes take more than 10mins to complete.
# Print something to stdout, to prevent CircleCI from failing due to not output.
while true; do sleep 60; echo "[`date`] Keeping alive..."; done &
KEEP_ALIVE_PID=$!
yarn install --frozen-lockfile --non-interactive
kill $KEEP_ALIVE_PID
command: yarn install --frozen-lockfile --non-interactive
var_9: &setup_circleci_bazel_config
run:
name: Setting up CircleCI bazel configuration
command: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
# Sets up Yarn by downloading it and installing it globally. We don't use Yarn from the
# docker image because this means that we can only use the Yarn version that comes with
# a specific version of NodeJS. We want to be able to update Yarn without having to
# update the docker image that comes with NodeJS.
var_10: &download_yarn
run:
name: Downloading Yarn
command: |
echo "Attempting to install $CI_YARN_VERSION from https://yarnpkg.com" |
curl -o- -L https://yarnpkg.com/install.sh | PROFILE=$BASH_ENV bash -s -- --version "$CI_YARN_VERSION"
version: 2
jobs:
lint:
@ -88,7 +62,6 @@ jobs:
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
- *yarn_install
- run: 'yarn bazel:format -mode=check ||
@ -109,7 +82,6 @@ jobs:
key: *cache_key
- *define_env_vars
- *setup_circleci_bazel_config
- *download_yarn
- *yarn_install
# Setup remote execution and run RBE-compatible tests.
@ -136,7 +108,6 @@ jobs:
key: *cache_key
- *define_env_vars
- *setup_circleci_bazel_config
- *download_yarn
- *yarn_install
- *setup_bazel_remote_execution
@ -175,7 +146,6 @@ jobs:
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
# Build aio
- run: yarn --cwd aio build --progress=false
# Lint the code
@ -187,9 +157,9 @@ jobs:
# (Run before unit and e2e tests, which destroy the `dist/` directory.)
- run: yarn --cwd aio payload-size
# Run unit tests
- run: yarn --cwd aio test --progress=false --watch=false
- run: yarn --cwd aio test --watch=false
# Run e2e tests
- run: yarn --cwd aio e2e --configuration=ci
- run: yarn --cwd aio e2e
# Run unit tests for Firebase redirects
- run: yarn --cwd aio redirects-test
@ -204,7 +174,6 @@ jobs:
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
# Deploy angular.io to production (if necessary)
- run: setPublicVar CI_STABLE_BRANCH "$(npm info @angular/core dist-tags.latest | sed -r 's/^\s*([0-9]+\.[0-9]+)\.[0-9]+.*$/\1.x/')"
- run: yarn --cwd aio deploy-production
@ -222,30 +191,15 @@ jobs:
- attach_workspace:
at: dist
- *define_env_vars
- *download_yarn
# Build aio (with local Angular packages)
- run: yarn --cwd aio build-local --progress=false
# Run PWA-score tests
# (Run before unit and e2e tests, which destroy the `dist/` directory.)
- run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
# Run unit tests
- run: yarn --cwd aio test --progress=false --watch=false
- run: yarn --cwd aio test --watch=false
# Run e2e tests
- run: yarn --cwd aio e2e --configuration=ci
test_aio_local_ivy:
<<: *job_defaults
steps:
- checkout:
<<: *post_checkout
- restore_cache:
key: *cache_key
- attach_workspace:
at: dist
- *define_env_vars
- *download_yarn
# Build aio with Ivy (using local Angular packages)
- run: yarn --cwd aio build-with-ivy --progress=false
- run: yarn --cwd aio e2e
test_aio_tools:
<<: *job_defaults
@ -257,7 +211,6 @@ jobs:
- attach_workspace:
at: dist
- *define_env_vars
- *download_yarn
# Install
- run: yarn --cwd aio install --frozen-lockfile --non-interactive
- run: yarn --cwd aio extract-cli-command-docs
@ -279,7 +232,6 @@ jobs:
- attach_workspace:
at: dist
- *define_env_vars
- *download_yarn
# Install root
- *yarn_install
# Install aio
@ -300,7 +252,6 @@ jobs:
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
- *yarn_install
- run: ./aio/scripts/build-artifacts.sh $AIO_SNAPSHOT_ARTIFACT_PATH $CI_PULL_REQUEST $CI_COMMIT
- store_artifacts:
@ -322,22 +273,19 @@ jobs:
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
- run: yarn install --cwd aio --frozen-lockfile --non-interactive
- run:
name: Wait for preview and run tests
command: node aio/scripts/test-preview.js $CI_PULL_REQUEST $CI_COMMIT $CI_AIO_MIN_PWA_SCORE
# The `build-npm-packages` tasks exist for backwards-compatibility with old scripts and
# tests that rely on the pre-Bazel `dist/packages-dist` output structure (build.sh).
# Having multiple jobs that independently build in this manner duplicates some work; we build
# the bazel packages more than once. Even though we have a remote cache, these jobs will
# typically run in parallel so up-to-date outputs will not be available at the time the build
# This job exists only for backwards-compatibility with old scripts and tests
# that rely on the pre-Bazel dist/packages-dist layout.
# It duplicates some work with the job above: we build the bazel packages
# twice. Even though we have a remote cache, these jobs will typically run in
# parallel so up-to-date outputs will not be available at the time the build
# starts.
# Build the view engine npm packages. No new jobs should depend on this.
build-npm-packages:
# No new jobs should depend on this one.
build-packages-dist:
<<: *job_defaults
resource_class: xlarge
steps:
@ -346,9 +294,8 @@ jobs:
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
- *yarn_install
- *setup_circleci_bazel_config
- *yarn_install
- *setup_bazel_remote_execution
- run: scripts/build-packages-dist.sh
@ -359,30 +306,6 @@ jobs:
root: dist
paths:
- packages-dist
# Build the ivy npm packages.
build-ivy-npm-packages:
<<: *job_defaults
resource_class: xlarge
steps:
- checkout:
<<: *post_checkout
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
- *yarn_install
- *setup_circleci_bazel_config
- *setup_bazel_remote_execution
- run: scripts/build-ivy-npm-packages.sh
# Save the npm packages from //packages/... for other workflow jobs to read
# https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
- persist_to_workspace:
root: dist
paths:
- packages-dist-ivy-aot
# We run the integration tests outside of Bazel for now.
@ -409,7 +332,6 @@ jobs:
- attach_workspace:
at: dist
- *define_env_vars
- *download_yarn
# Runs the integration tests in parallel across multiple CircleCI container instances. The
# amount of container nodes for this job is controlled by the "parallelism" option.
- run: ./integration/run_tests.sh ${CIRCLE_NODE_INDEX} ${CIRCLE_NODE_TOTAL}
@ -454,7 +376,6 @@ jobs:
<<: *post_checkout
- restore_cache:
key: *cache_key
- *download_yarn
- *define_env_vars
- run:
name: Run tests against the deployed apps
@ -474,9 +395,9 @@ jobs:
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
- *yarn_install
- run: yarn tsc -p packages
- run: yarn tsc -p packages/examples
- run: yarn tsc -p modules
- run: yarn karma start ./karma-js.conf.js --single-run --browsers=ChromeNoSandbox
@ -492,7 +413,6 @@ jobs:
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
- *yarn_install
- run:
name: Preparing environment for running tests on Saucelabs.
@ -504,6 +424,7 @@ jobs:
command: ./scripts/saucelabs/start-tunnel.sh
background: true
- run: yarn tsc -p packages
- run: yarn tsc -p packages/examples
- run: yarn tsc -p modules
# Waits for the Saucelabs tunnel to be ready. This ensures that we don't run tests
# too early without Saucelabs not being ready.
@ -521,9 +442,8 @@ jobs:
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
- *yarn_install
- *setup_circleci_bazel_config
- *yarn_install
- *setup_bazel_remote_execution
- attach_workspace:
at: dist
@ -532,9 +452,10 @@ jobs:
- run: ./scripts/build-e2e-tests.sh --use-existing-packages-dist
- run:
name: Starting servers for e2e tests
command: yarn gulp serve
command: yarn gulp serve serve-examples
background: true
- run: NODE_PATH=$NODE_PATH:./dist/all yarn protractor ./protractor-e2e.conf.js --bundles=true
- run: NODE_PATH=$NODE_PATH:./dist/all yarn protractor ./protractor-examples-e2e.conf.js --bundles=true
- run: NODE_PATH=$NODE_PATH:./dist/all yarn protractor ./protractor-perf.conf.js --bundles=true --dryrun
legacy-misc-tests:
@ -545,7 +466,6 @@ jobs:
- restore_cache:
key: *cache_key
- *define_env_vars
- *download_yarn
- *yarn_install
- attach_workspace:
at: dist
@ -554,22 +474,6 @@ jobs:
# the ESM5/ES2015 output. See: https://github.com/angular/angular/issues/27966
# - run: yarn gulp source-map-test
# Job to run unit tests from angular/material2. Needs a browser since all
# component unit tests assume they're running in the browser environment.
material-unit-tests:
<<: *job_defaults
resource_class: xlarge
docker:
- image: *browsers_docker_image
steps:
- checkout:
<<: *post_checkout
- *define_env_vars
- *download_yarn
- attach_workspace:
at: dist
- run: ./scripts/ci/run_angular_material_unit_tests.sh
workflows:
version: 2
default_workflow:
@ -577,8 +481,7 @@ workflows:
- lint
- test
- test_ivy_aot
- build-npm-packages
- build-ivy-npm-packages
- build-packages-dist
- test_aio
- legacy-unit-tests-local
- legacy-unit-tests-saucelabs
@ -587,22 +490,19 @@ workflows:
- test_aio
- legacy-e2e-tests:
requires:
- build-npm-packages
- build-packages-dist
- legacy-misc-tests:
requires:
- build-npm-packages
- build-packages-dist
- test_aio_local:
requires:
- build-npm-packages
- test_aio_local_ivy:
requires:
- build-npm-packages
- build-packages-dist
- test_aio_tools:
requires:
- build-npm-packages
- build-packages-dist
- test_docs_examples:
requires:
- build-npm-packages
- build-packages-dist
- aio_preview:
# Only run on PR builds. (There can be no previews for non-PR builds.)
filters:
@ -613,7 +513,7 @@ workflows:
- aio_preview
- integration_test:
requires:
- build-npm-packages
- build-packages-dist
- publish_snapshot:
# Note: no filters on this job because we want it to run for all upstream branches
# We'd really like to filter out pull requests here, but not yet available:
@ -626,19 +526,14 @@ workflows:
- integration_test
# Only publish if `aio`/`docs` tests using the locally built Angular packages pass
- test_aio_local
- test_aio_local_ivy
- test_docs_examples
# Get the artifacts to publish from the build-npm-packages job
# Get the artifacts to publish from the build-packages-dist job
# since the publishing script expects the legacy outputs layout.
- build-npm-packages
- build-ivy-npm-packages
- build-packages-dist
- legacy-e2e-tests
- legacy-misc-tests
- legacy-unit-tests-local
- legacy-unit-tests-saucelabs
- material-unit-tests:
requires:
- build-ivy-npm-packages
aio_monitoring:

View File

@ -15,7 +15,7 @@
#
# Usage: `setPublicVar <name> <value>`
function setPublicVar() {
setSecretVar $1 "$2";
setSecretVar $1 $2;
echo "$1=$2";
}

View File

@ -18,12 +18,6 @@ setPublicVar PROJECT_ROOT "$(pwd)";
setPublicVar CI_AIO_MIN_PWA_SCORE "95";
# This is the branch being built; e.g. `pull/12345` for PR builds.
setPublicVar CI_BRANCH "$CIRCLE_BRANCH";
setPublicVar CI_YARN_VERSION "1.13.0"
# ChromeDriver version compatible with the Chrome version included in the docker image used in
# `.circleci/config.yml`. See http://chromedriver.chromium.org/downloads for a list of versions.
# This variable is intended to be passed as an arg to the `webdriver-manager update` command (e.g.
# `"postinstall": "webdriver-manager update $CI_CHROMEDRIVER_VERSION_ARG"`).
setPublicVar CI_CHROMEDRIVER_VERSION_ARG "--versions.chrome 2.45";
setPublicVar CI_COMMIT "$CIRCLE_SHA1";
# `CI_COMMIT_RANGE` will only be available when `CIRCLE_COMPARE_URL` is also available (or can be
# retrieved via `get-compare-url.js`), i.e. on push builds (a.k.a. non-PR, non-scheduled builds and

8
.github/CODEOWNERS vendored
View File

@ -54,7 +54,6 @@
# kara - Kara Erickson
# kyliau - Keen Yee Liau
# matsko - Matias Niemelä
# mgechev - Minko Gechev
# mhevery - Misko Hevery
# ocombe - Olivier Combe
# petebacondarwin - Pete Bacon Darwin
@ -114,7 +113,6 @@
# - alexeagle
# - kyliau
# - IgorMinar
# - mgechev
# ===========================================================
@ -124,7 +122,6 @@
# - alexeagle
# - filipesilva
# - hansl
# - mgechev
# ===========================================================
@ -749,11 +746,6 @@ testing/** @angular/fw-test
/tools/** @angular/fw-dev-infra
*.bzl @angular/fw-dev-infra
# ================================================
# Material CI
# ================================================
/tools/material-ci/** @angular/fw-core @angular/fw-dev-infra
# ================================================

5
.gitignore vendored
View File

@ -1,10 +1,11 @@
.DS_STORE
/dist/
/bazel-out
/bazel-*
/integration/bazel/bazel-*
e2e_test.*
node_modules
bower_components
tools/gulp-tasks/cldr/cldr-data/
# Include when developing application packages.
@ -12,9 +13,9 @@ pubspec.lock
.c9
.idea/
.settings/
.vscode/launch.json
*.swo
modules/.settings
.vscode
modules/.vscode
# Don't check in secret files

18
.vscode/settings.json vendored
View File

@ -1,18 +0,0 @@
{
"editor.formatOnSave": true,
// Please install http://clang.llvm.org/docs/ClangFormat.html in VSCode to take advantage of clang-format
"clang-format.executable": "${workspaceRoot}/node_modules/.bin/clang-format",
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/**": true,
"**/bazel-out/**": true,
"**/dist/**": true,
},
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/bazel-out": true,
"**/dist": true,
},
}

View File

@ -1,117 +1,3 @@
<a name="8.0.0-beta.3"></a>
# [8.0.0-beta.3](https://github.com/angular/angular/compare/8.0.0-beta.2...8.0.0-beta.3) (2019-02-06)
### Bug Fixes
* **bazel:** Bazel builder resolves with require.resolve() ([#28478](https://github.com/angular/angular/issues/28478)) ([36902e2](https://github.com/angular/angular/commit/36902e2))
* **bazel:** fix integration test for bazel-schematics ([#28460](https://github.com/angular/angular/issues/28460)) ([b1e099b](https://github.com/angular/angular/commit/b1e099b))
* **compiler-cli:** base synthetic filepaths on input filepath ([#28453](https://github.com/angular/angular/issues/28453)) ([7219639](https://github.com/angular/angular/commit/7219639))
* **compiler-cli:** diagnostics should respect "newLine" compiler option ([#28352](https://github.com/angular/angular/issues/28352)) ([4aa189d](https://github.com/angular/angular/commit/4aa189d))
* **core:** remove createInjector() from public API ([#28509](https://github.com/angular/angular/issues/28509)) ([f2621db](https://github.com/angular/angular/commit/f2621db))
### Performance Improvements
* pngcrush all pngs ([#28479](https://github.com/angular/angular/issues/28479)) ([ec6e730](https://github.com/angular/angular/commit/ec6e730)), closes [#18243](https://github.com/angular/angular/issues/18243)
<a name="7.2.4"></a>
## [7.2.4](https://github.com/angular/angular/compare/7.2.3...7.2.4) (2019-02-06)
### Bug Fixes
* **bazel:** Bazel builder resolves with require.resolve() ([#28478](https://github.com/angular/angular/issues/28478)) ([d85d396](https://github.com/angular/angular/commit/d85d396))
* **bazel:** fix integration test for bazel-schematics ([#28460](https://github.com/angular/angular/issues/28460)) ([449da8c](https://github.com/angular/angular/commit/449da8c))
### Performance Improvements
* pngcrush all pngs ([#28479](https://github.com/angular/angular/issues/28479)) ([1a25144](https://github.com/angular/angular/commit/1a25144)), closes [#18243](https://github.com/angular/angular/issues/18243)
<a name="8.0.0-beta.2"></a>
# [8.0.0-beta.2](https://github.com/angular/angular/compare/8.0.0-beta.1...8.0.0-beta.2) (2019-01-30)
### Bug Fixes
* **bazel:** also pass afterDeclarations transformers to emitWithTsickle ([#28342](https://github.com/angular/angular/issues/28342)) ([70e426b](https://github.com/angular/angular/commit/70e426b))
* **forms:** don't override form group's dirty state when disabling controls ([#24591](https://github.com/angular/angular/issues/24591)) ([ef67282](https://github.com/angular/angular/commit/ef67282))
### Features
* **compiler-cli:** expose ngtsc as a TscPlugin ([#28435](https://github.com/angular/angular/issues/28435)) ([a227c52](https://github.com/angular/angular/commit/a227c52))
### Performance Improvements
* **core:** be more consistent about typeof checks ([#28400](https://github.com/angular/angular/issues/28400)) ([9af18c2](https://github.com/angular/angular/commit/9af18c2))
<a name="7.2.3"></a>
## [7.2.3](https://github.com/angular/angular/compare/7.2.2...7.2.3) (2019-01-30)
### Bug Fixes
* **bazel:** add [@npm](https://github.com/npm)//tslib dep to e2e ts_library target in bazel-workspace schematic ([#28358](https://github.com/angular/angular/issues/28358)) ([8cee56e](https://github.com/angular/angular/commit/8cee56e))
* **bazel:** Bazel-workspace schematics should run in ScopedTree ([#28349](https://github.com/angular/angular/issues/28349)) ([260ac20](https://github.com/angular/angular/commit/260ac20))
* **bazel:** Builder should invoke local bazel/iblaze ([#28303](https://github.com/angular/angular/issues/28303)) ([12b8a6e](https://github.com/angular/angular/commit/12b8a6e))
* **bazel:** ng-new should run yarn install ([#28381](https://github.com/angular/angular/issues/28381)) ([a9d46e4](https://github.com/angular/angular/commit/a9d46e4))
### Performance Improvements
* yarn version upgrade ([#28360](https://github.com/angular/angular/issues/28360)) ([cc1b2a5](https://github.com/angular/angular/commit/cc1b2a5))
<a name="8.0.0-beta.1"></a>
# [8.0.0-beta.1](https://github.com/angular/angular/compare/8.0.0-beta.0...8.0.0-beta.1) (2019-01-22)
### Bug Fixes
* **bazel:** increase node memory limit for ng_module rule to prevent OOM for big modules ([#28237](https://github.com/angular/angular/issues/28237)) ([73616ab](https://github.com/angular/angular/commit/73616ab))
* **router:** `skipLocationChange` with named outlets ([#28300](https://github.com/angular/angular/issues/28300)) ([50df897](https://github.com/angular/angular/commit/50df897)), closes [#27680](https://github.com/angular/angular/issues/27680) [#28200](https://github.com/angular/angular/issues/28200)
### Features
* **bazel:** Add support for SASS ([#28167](https://github.com/angular/angular/issues/28167)) ([f59f18c](https://github.com/angular/angular/commit/f59f18c))
* **compiler-cli:** resolve generated Sass/Less files to .css inputs ([#28166](https://github.com/angular/angular/issues/28166)) ([a58fd21](https://github.com/angular/angular/commit/a58fd21))
* **forms:** add `markAllAsTouched()` to `AbstractControl` ([#26812](https://github.com/angular/angular/issues/26812)) ([45bf911](https://github.com/angular/angular/commit/45bf911)), closes [#19400](https://github.com/angular/angular/issues/19400)
### Reverts
* "ci: use image based cache for windows BuildKite ([#27990](https://github.com/angular/angular/issues/27990))" ([#28160](https://github.com/angular/angular/issues/28160)) ([7bdf3fe](https://github.com/angular/angular/commit/7bdf3fe))
<a name="7.2.2"></a>
## [7.2.2](https://github.com/angular/angular/compare/7.2.1...7.2.2) (2019-01-22)
### Bug Fixes
* **bazel:** Fix integration test after v8 bump ([#28194](https://github.com/angular/angular/issues/28194)) ([7b772e9](https://github.com/angular/angular/commit/7b772e9)), closes [#28142](https://github.com/angular/angular/issues/28142)
* **router:** `skipLocationChange` with named outlets ([#28301](https://github.com/angular/angular/issues/28301)) ([32737a6](https://github.com/angular/angular/commit/32737a6)), closes [#27680](https://github.com/angular/angular/issues/27680) [#28200](https://github.com/angular/angular/issues/28200)
### Features
* **bazel:** Add support for SASS ([#28167](https://github.com/angular/angular/issues/28167)) ([a4d9192](https://github.com/angular/angular/commit/a4d9192))
* **compiler-cli:** resolve generated Sass/Less files to .css inputs ([#28166](https://github.com/angular/angular/issues/28166)) ([4c00059](https://github.com/angular/angular/commit/4c00059))
<a name="8.0.0-beta.0"></a>
# [8.0.0-beta.0](https://github.com/angular/angular/compare/7.2.0...8.0.0-beta.0) (2019-01-16)

View File

@ -1,6 +1,17 @@
workspace(name = "angular")
load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
load(
"//packages/bazel:package.bzl",
"rules_angular_dependencies",
"rules_angular_dev_dependencies",
)
http_archive(
name = "io_bazel_rules_go",
sha256 = "b7a62250a3a73277ade0ce306d22f122365b513f5402222403e507f2f997d421",
url = "https://github.com/bazelbuild/rules_go/releases/download/0.16.3/rules_go-0.16.3.tar.gz",
)
# Uncomment for local bazel rules development
#local_repository(
@ -12,15 +23,25 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
# path = "../rules_typescript",
#)
# Fetch rules_nodejs so we can install our npm dependencies
http_archive(
name = "build_bazel_rules_nodejs",
strip_prefix = "rules_nodejs-0.16.8",
urls = ["https://github.com/bazelbuild/rules_nodejs/archive/0.16.8.zip"],
)
# Angular Bazel users will call this function
rules_angular_dependencies()
# Fetch the rxjs repository since we build rxjs from source
# TODO(gregmagolan): use rxjs bundles in the bazel build
# Install transitive deps of rules_nodejs
load("@build_bazel_rules_nodejs//:package.bzl", "rules_nodejs_dependencies")
rules_nodejs_dependencies()
# These are the dependencies only for us
rules_angular_dev_dependencies()
# Install transitive deps of rules_typescript
load("@build_bazel_rules_typescript//:package.bzl", "rules_typescript_dependencies")
rules_typescript_dependencies()
#
# Point Bazel to WORKSPACEs that live in subdirectories
#
http_archive(
name = "rxjs",
sha256 = "72b0b4e517f43358f554c125e40e39f67688cd2738a8998b4a266981ed32f403",
@ -28,22 +49,21 @@ http_archive(
url = "https://registry.yarnpkg.com/rxjs/-/rxjs-6.3.3.tgz",
)
# Use a mock @npm repository while we are building angular from source
# downstream. Angular will get its npm dependencies with in @ngdeps which
# is setup in ng_setup_workspace().
# TODO(gregmagolan): remove @ngdeps once angular is no longer build from source
# downstream and have build use @npm for npm dependencies
# Point to the integration test workspace just so that Bazel doesn't descend into it
# when expanding the //... pattern
local_repository(
name = "npm",
path = "tools/npm_workspace",
name = "bazel_integration_test",
path = "integration/bazel",
)
# Check the bazel version and download npm dependencies
load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
#
# Load and install our dependencies downloaded above.
#
load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
# Bazel version must be at least v0.21.0 because:
# - 0.21.0 Using --incompatible_strict_action_env flag fixes cache when running `yarn bazel`
# (see https://github.com/angular/angular/issues/27514#issuecomment-451438271)
# - 0.21.0 --experimental_strict_action_env flag turned on by default which fixes cache when
# running `yarn bazel` (see https://github.com/angular/angular/issues/27514#issuecomment-451438271)
check_bazel_version("0.21.0", """
You no longer need to install Bazel on your machine.
Angular has a dependency on the @bazel/bazel package which supplies it.
@ -52,7 +72,6 @@ Try running `yarn bazel` instead.
""")
# Setup the Node.js toolchain
node_repositories(
node_version = "10.9.0",
package_json = ["//:package.json"],
@ -60,27 +79,17 @@ node_repositories(
yarn_version = "1.12.1",
)
# Setup the angular toolchain which installs npm dependencies into @ngdeps
load("//tools:ng_setup_workspace.bzl", "ng_setup_workspace")
local_repository(
name = "npm",
path = "tools/npm_workspace",
)
ng_setup_workspace()
load("@io_bazel_rules_go//go:def.bzl", "go_register_toolchains", "go_rules_dependencies")
# Install all bazel dependencies of the @ngdeps npm packages
load("@ngdeps//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
go_rules_dependencies()
install_bazel_dependencies()
go_register_toolchains()
# Load angular dependencies
load("//packages/bazel:package.bzl", "rules_angular_dev_dependencies")
rules_angular_dev_dependencies()
# Load karma dependencies
load("@build_bazel_rules_karma//:package.bzl", "rules_karma_dependencies")
rules_karma_dependencies()
# Setup the rules_webtesting toolchain
load("@io_bazel_rules_webtesting//web:repositories.bzl", "browser_repositories", "web_test_repositories")
web_test_repositories()
@ -90,17 +99,21 @@ browser_repositories(
firefox = True,
)
# Setup the rules_typescript tooolchain
load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
ts_setup_workspace()
# Setup the rules_sass toolchain
load("@angular//:index.bzl", "ng_setup_workspace")
ng_setup_workspace()
##################################
# Skylark documentation generation
load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
sass_repositories()
# Setup the skydoc toolchain
load("@io_bazel_skydoc//skylark:skylark.bzl", "skydoc_repositories")
skydoc_repositories()

View File

@ -104,9 +104,6 @@
},
"archive": {
"browserTarget": "site:build:archive"
},
"ci": {
"progress": false
}
}
},
@ -169,11 +166,6 @@
"options": {
"protractorConfig": "tests/e2e/protractor.conf.js",
"devServerTarget": "site:serve"
},
"configurations": {
"ci": {
"devServerTarget": "site:serve:ci"
}
}
},
"lint": {

View File

@ -1,71 +0,0 @@
'use strict'; // necessary for es6 output in node
import { browser, element, by, protractor } from 'protractor';
describe('Event binding example', function () {
beforeEach(function () {
browser.get('');
});
let saveButton = element.all(by.css('button')).get(0);
let onSaveButton = element.all(by.css('button')).get(1);
let myClick = element.all(by.css('button')).get(2);
let deleteButton = element.all(by.css('button')).get(3);
let saveNoProp = element.all(by.css('button')).get(4);
let saveProp = element.all(by.css('button')).get(5);
it('should display Event Binding with Angular', function () {
expect(element(by.css('h1')).getText()).toEqual('Event Binding');
});
it('should display 6 buttons', function() {
expect(saveButton.getText()).toBe('Save');
expect(onSaveButton.getText()).toBe('on-click Save');
expect(myClick.getText()).toBe('click with myClick');
expect(deleteButton.getText()).toBe('Delete');
expect(saveNoProp.getText()).toBe('Save, no propagation');
expect(saveProp.getText()).toBe('Save with propagation');
});
it('should support user input', function () {
let input = element(by.css('input'));
let bindingResult = element.all(by.css('h4')).get(1);
expect(bindingResult.getText()).toEqual('Result: teapot');
input.sendKeys('abc');
expect(bindingResult.getText()).toEqual('Result: teapotabc');
});
it('should hide the item img', async () => {
let deleteButton = element.all(by.css('button')).get(3);
await deleteButton.click();
browser.switchTo().alert().accept();
expect(element.all(by.css('img')).get(0).getCssValue('display')).toEqual('none');
});
it('should show two alerts', async () => {
let parentDiv = element.all(by.css('.parent-div'));
let childDiv = element.all(by.css('div > div')).get(1);
await parentDiv.click();
browser.switchTo().alert().accept();
expect(childDiv.getText()).toEqual('Click me too! (child)');
await childDiv.click();
expect(browser.switchTo().alert().getText()).toEqual('Click me. Event target class is child-div');
browser.switchTo().alert().accept();
});
it('should show 1 alert from Save, no prop, button', async () => {
await saveNoProp.click();
expect(browser.switchTo().alert().getText()).toEqual('Saved. Event target is Save, no propagation');
browser.switchTo().alert().accept();
});
it('should show 2 alerts from Save w/prop button', async () => {
await saveProp.click();
expect(browser.switchTo().alert().getText()).toEqual('Saved.');
browser.switchTo().alert().accept();
expect(browser.switchTo().alert().getText()).toEqual('Saved.');
browser.switchTo().alert().accept();
});
});

View File

@ -1,25 +0,0 @@
.group {
background-color: #dae8f9;
padding: 1rem;
margin: 1rem 0;
}
.parent-div {
background-color: #bdd1f7;
border: solid 1px rgb(25, 118, 210);
padding: 1rem;
}
.parent-div:hover {
background-color: #8fb4f9;
}
.child-div {
margin-top: 1rem;
background-color: #fff;
padding: 1rem;
}
.child-div:hover {
background-color: #eee;
}

View File

@ -1,53 +0,0 @@
<h1 id="event-binding">Event Binding</h1>
<div class="group">
<h3>Target event</h3>
<!-- #docregion event-binding-1 -->
<button (click)="onSave($event)">Save</button>
<!-- #enddocregion event-binding-1 -->
<!-- #docregion event-binding-2 -->
<button on-click="onSave($event)">on-click Save</button>
<!-- #enddocregion event-binding-2 -->
<!-- #docregion custom-directive -->
<h4>myClick is an event on the custom ClickDirective:</h4>
<button (myClick)="clickMessage=$event" clickable>click with myClick</button>
{{clickMessage}}
<!-- #enddocregion custom-directive -->
</div>
<div class="group">
<h3>$event and event handling statements</h3>
<h4>Result: {{currentItem.name}}</h4>
<!-- #docregion event-binding-3-->
<input [value]="currentItem.name"
(input)="currentItem.name=$event.target.value" >
without NgModel
<!-- #enddocregion event-binding-3-->
</div>
<div class="group">
<h3>Binding to a nested component</h3>
<h4>Custom events with EventEmitter</h4>
<!-- #docregion event-binding-to-component -->
<app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
<!-- #enddocregion event-binding-to-component -->
<h4>Click to see event target class:</h4>
<div class="parent-div" (click)="onClickMe($event)" clickable>Click me (parent)
<div class="child-div">Click me too! (child) </div>
</div>
<h3>Saves only once:</h3>
<div (click)="onSave()" clickable>
<button (click)="onSave($event)">Save, no propagation</button>
</div>
<h3>Saves twice:</h3>
<div (click)="onSave()" clickable>
<button (click)="onSave()">Save with propagation</button>
</div>

View File

@ -1,27 +0,0 @@
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'Featured product:'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('Featured product:');
}));
it('should render title in a p tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('p').textContent).toContain('Featured product:');
}));
});

View File

@ -1,29 +0,0 @@
import { Component } from '@angular/core';
import { Item } from './item';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
currentItem = { name: 'teapot'} ;
clickMessage = '';
onSave(event: KeyboardEvent) {
const evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).textContent : '';
alert('Saved.' + evtMsg);
if (event) { event.stopPropagation(); }
}
deleteItem(item: Item) {
alert(`Delete the ${item}.`);
}
onClickMe(event: KeyboardEvent) {
const evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className : '';
alert('Click me.' + evtMsg);
}
}

View File

@ -1,22 +0,0 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ItemDetailComponent } from './item-detail/item-detail.component';
import { ClickDirective } from './click.directive';
@NgModule({
declarations: [
AppComponent,
ItemDetailComponent,
ClickDirective
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

View File

@ -1,18 +0,0 @@
/* tslint:disable use-output-property-decorator directive-class-suffix */
import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
@Directive({selector: '[myClick]'})
export class ClickDirective {
@Output('myClick') clicks = new EventEmitter<string>(); // @Output(alias) propertyName = ...
toggle = false;
constructor(el: ElementRef) {
el.nativeElement
.addEventListener('click', (event: Event) => {
this.toggle = !this.toggle;
this.clicks.emit(this.toggle ? 'Click!' : '');
});
}
}

View File

@ -1,11 +0,0 @@
.detail {
border: 1px solid rgb(25, 118, 210);
padding: 1rem;
margin: 1rem 0;
}
img {
max-width: 100px;
display: block;
padding: 1rem 0;
}

View File

@ -1,9 +0,0 @@
<div class="detail">
<p>This is the ItemDetailComponent</p>
<!-- #docregion line-through -->
<img src="{{itemImageUrl}}" [style.display]="displayNone">
<span [style.text-decoration]="lineThrough">{{ item.name }}
</span>
<button (click)="delete()">Delete</button>
<!-- #enddocregion line-through -->
</div>

View File

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ItemDetailComponent } from './item-detail.component';
describe('ItemDetailComponent', () => {
let component: ItemDetailComponent;
let fixture: ComponentFixture<ItemDetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ItemDetailComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ItemDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -1,30 +0,0 @@
/* tslint:disable use-input-property-decorator use-output-property-decorator */
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Item } from '../item';
@Component({
selector: 'app-item-detail',
styleUrls: ['./item-detail.component.css'],
templateUrl: './item-detail.component.html'
})
export class ItemDetailComponent {
@Input() item;
itemImageUrl = 'assets/teapot.svg';
lineThrough = '';
displayNone = '';
@Input() prefix = '';
// #docregion deleteRequest
// This component makes a request but it can't actually delete a hero.
@Output() deleteRequest = new EventEmitter<Item>();
delete() {
this.deleteRequest.emit(this.item.name);
this.displayNone = this.displayNone ? '' : 'none';
this.lineThrough = this.lineThrough ? '' : 'line-through';
}
// #enddocregion deleteRequest
}

View File

@ -1,4 +0,0 @@
export class Item {
name: '';
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 23 KiB

View File

@ -1,12 +0,0 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

View File

@ -1,10 +0,0 @@
{
"description": "Event Binding",
"files": [
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1,2].*"
],
"file": "src/app/app.component.ts",
"tags": ["Event Binding"]
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -42,7 +42,7 @@ export class HeroService {
// #enddocregion getHeroes-2
tap(_ => this.log('fetched heroes')),
// #docregion getHeroes-2
catchError(this.handleError<Hero[]>('getHeroes', []))
catchError(this.handleError('getHeroes', []))
);
// #docregion getHeroes-1
}
@ -97,7 +97,7 @@ export class HeroService {
/** POST: add a new hero to the server */
addHero (hero: Hero): Observable<Hero> {
return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
catchError(this.handleError<Hero>('addHero'))
);
}

View File

@ -453,7 +453,7 @@ The compiler understands all syntax forms that the _collector_ supports, but it
The compiler can only reference _exported symbols_.
Decorated component class members must be public. You cannot make an `@Input()` property private or protected.
Decorated component class members must be public. You cannot make an `@Input()` property private or internal.
Data bound properties must also be public.
@ -1508,7 +1508,7 @@ done manually.
When `true`, this option tells the compiler not to check the TypeScript version.
The compiler will skip checking and will not error out when an unsupported version of TypeScript is used.
Setting this option to `true` is not recommended because unsupported versions of TypeScript might have undefined behavior.
Setting this option to `true` is not recommended because unsupported versions of TypeScript might have undefined behaviour.
This option is `false` by default.

View File

@ -73,7 +73,7 @@ Angular provides predefined pipes for common transformations, and you can also d
## Services and dependency injection
For data or logic that isn't associated with a specific view, and that you want to share across components, you create a *service* class. A service class definition is immediately preceded by the `@Injectable()` decorator. The decorator provides the metadata that allows other providers to be **injected** as dependencies into your class.
For data or logic that isn't associated with a specific view, and that you want to share across components, you create a *service* class. A service class definition is immediately preceded by the `@Injectable()` decorator. The decorator provides the metadata that allows your service to be *injected* into client components as a dependency.
*Dependency injection* (DI) lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.

View File

@ -273,8 +273,8 @@ The CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure c
You may find it necessary to target specific browsers or exclude certain browser versions from your build.
Internally, Autoprefixer relies on a library called [Browserslist](https://github.com/browserslist/browserslist) to figure out which browsers to support with prefixing.
Browserlist looks for configuration options in a `browserslist` property of the package configuration file, or in a configuration file named `.browserslistrc`.
Autoprefixer looks for the `browserslist` configuration when it prefixes your CSS.
Browserlist looks for configuration options in a `browserlist` property of the package configuration file, or in a configuration file named `.browserslistrc`.
Autoprefixer looks for the Browserlist configuration when it prefixes your CSS.
* You can tell Autoprefixer what browsers to target by adding a browserslist property to the package configuration file, `package.json`:
```

View File

@ -53,7 +53,7 @@ Workspace-wide `node_modules` dependencies are visible to this project.
| `app/` | Contains the component files in which your app logic and data are defined. See details in [App source folder](#app-src) below. |
| `assets/` | Contains image files and other asset files to be copied as-is when you build your application. |
| `environments/` | Contains build configuration options for particular target environments. By default there is an unnamed standard development environment and a production ("prod") environment. You can define additional target environment configurations. |
| `browserslist` | Configures sharing of target browsers and Node.js versions among various front-end tools. See [Browserslist on GitHub](https://github.com/browserslist/browserslist) for more information. |
| `browserlist` | Configures sharing of target browsers and Node.js versions among various front-end tools. See [Browserlist on GitHub](https://github.com/browserslist/browserslist) for more information. |
| `favicon.ico` | An icon to use for this app in the bookmark bar. |
| `index.html` | The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any `<script>` or` <link>` tags here manually. |
| `main.ts` | The main entry point for your app. Compiles the application with the [JIT compiler](https://angular.io/guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](https://angular.io/guide/aot-compiler) without changing any code by appending the `--aot` flag to the CLI `build` and `serve` commands. |

View File

@ -124,7 +124,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
Respond after Angular checks the component's views and child views / the view that a directive is in.
Called after the `ngAfterViewInit()` and every subsequent `ngAfterContentChecked()`.
Called after the `ngAfterViewInit` and every subsequent `ngAfterContentChecked()`.
</td>
</tr>

View File

@ -1055,7 +1055,7 @@ The default route should redirect to the `HeroListComponent` _only_ when the _en
Remember to restore the redirect to `pathMatch = 'full'`.
Learn more in Victor Savkin's
[post on redirects](http://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes).
[post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
</div>
@ -3796,7 +3796,7 @@ The relevant *Crisis Center* code for this milestone follows.
</code-pane>
<code-pane header="crisis-detail.component.ts" path="router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts">
<code-pane header="crisis-detail.component.html" path="router/src/app/crisis-center/crisis-detail/crisis-detail.component.html">
</code-pane>

View File

@ -797,6 +797,7 @@ content harmlessly.
<hr/>
{@a other-bindings}
## Attribute, class, and style bindings
@ -943,44 +944,56 @@ Note that a _style property_ name can be written in either
{@a event-binding}
## Event binding `(event)`
## Event binding ( <span class="syntax">(event)</span> )
Event binding allows you to listen for certain events such as
keystrokes, mouse movements, clicks, and touches. For an example
demonstrating all of the points in this section, see the <live-example name="event-binding">event binding example</live-example>.
The bindings directives you've met so far flow data in one direction: **from a component to an element**.
Angular event binding syntax consists of a **target event** name
Users don't just stare at the screen. They enter text into input boxes. They pick items from lists.
They click buttons. Such user actions may result in a flow of data in the opposite direction:
**from an element to a component**.
The only way to know about a user action is to listen for certain events such as
keystrokes, mouse movements, clicks, and touches.
You declare your interest in user actions through Angular event binding.
Event binding syntax consists of a **target event** name
within parentheses on the left of an equal sign, and a quoted
template statement on the right.
[template statement](guide/template-syntax#template-statements) on the right.
The following event binding listens for the button's click events, calling
the component's `onSave()` method whenever a click occurs:
<figure>
<img src='generated/images/guide/event-binding/syntax-diagram.svg' alt="Syntax diagram">
</figure>
<code-example path="template-syntax/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html" linenums="false">
</code-example>
### Target event
As above, the target is the button's click event.
A **name between parentheses** &mdash; for example, `(click)` &mdash;
identifies the target event. In the following example, the target is the button's click event.
<code-example path="event-binding/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html" linenums="false">
<code-example path="template-syntax/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html" linenums="false">
</code-example>
Alternatively, use the `on-` prefix, known as the canonical form:
Some people prefer the `on-` prefix alternative, known as the **canonical form**:
<code-example path="event-binding/src/app/app.component.html" region="event-binding-2" header="src/app/app.component.html" linenums="false">
<code-example path="template-syntax/src/app/app.component.html" region="event-binding-2" header="src/app/app.component.html" linenums="false">
</code-example>
Element events may be the more common targets, but Angular looks first to see if the name matches an event property
of a known directive, as it does in the following example:
<code-example path="event-binding/src/app/app.component.html" region="custom-directive" header="src/app/app.component.html" linenums="false">
<code-example path="template-syntax/src/app/app.component.html" region="event-binding-3" header="src/app/app.component.html" linenums="false">
</code-example>
<div class="alert is-helpful">
The `myClick` directive is further described in the section
on [aliasing input/output properties](guide/template-syntax#aliasing-io).
</div>
If the name fails to match an element event or an output property of a known directive,
Angular reports an “unknown directive” error.
### *$event* and event handling statements
In an event binding, Angular sets up an event handler for the target event.
@ -990,73 +1003,72 @@ The template statement typically involves a receiver, which performs an action
in response to the event, such as storing a value from the HTML control
into a model.
The binding conveys information about the event. This information can include data values such as an event object, string, or number named `$event`.
The binding conveys information about the event, including data values, through
an **event object named `$event`**.
The target event determines the shape of the `$event` object.
The shape of the event object is determined by the target event.
If the target event is a native DOM element event, then `$event` is a
[DOM event object](https://developer.mozilla.org/en-US/docs/Web/Events),
with properties such as `target` and `target.value`.
Consider this example:
<code-example path="event-binding/src/app/app.component.html" region="event-binding-3" header="src/app/app.component.html" linenums="false">
<code-example path="template-syntax/src/app/app.component.html" region="without-NgModel" header="src/app/app.component.html" linenums="false">
</code-example>
This code sets the `<input>` `value` property by binding to the `name` property.
To listen for changes to the value, the code binds to the `input`
event of the `<input>` element.
This code sets the input box `value` property by binding to the `name` property.
To listen for changes to the value, the code binds to the input box's `input` event.
When the user makes changes, the `input` event is raised, and the binding executes
the statement within a context that includes the DOM event object, `$event`.
To update the `name` property, the changed text is retrieved by following the path `$event.target.value`.
If the event belongs to a directive&mdash;recall that components
are directives&mdash;`$event` has whatever shape the directive produces.
If the event belongs to a directive (recall that components are directives),
`$event` has whatever shape the directive decides to produce.
{@a eventemitter}
### Custom events with `EventEmitter`
{@a custom-event}
### Custom events with <span class="syntax">EventEmitter</span>
Directives typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter).
The directive creates an `EventEmitter` and exposes it as a property.
The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
Consider an `ItemDetailComponent` that presents item information and responds to user actions.
Although the `ItemDetailComponent` has a delete button, it doesn't know how to delete the hero. It can only raise an event reporting the user's delete request.
Consider a `HeroDetailComponent` that presents hero information and responds to user actions.
Although the `HeroDetailComponent` has a delete button it doesn't know how to delete the hero itself.
The best it can do is raise an event reporting the user's delete request.
Here are the pertinent excerpts from that `ItemDetailComponent`:
Here are the pertinent excerpts from that `HeroDetailComponent`:
<code-example path="event-binding/src/app/item-detail/item-detail.component.html" linenums="false" header="src/app/item-detail/item-detail.component.ts (template)" region="line-through">
<code-example path="template-syntax/src/app/hero-detail.component.ts" linenums="false" header="src/app/hero-detail.component.ts (template)" region="template-1">
</code-example>
<code-example path="event-binding/src/app/item-detail/item-detail.component.ts" linenums="false" header="src/app/item-detail/item-detail.component.ts (deleteRequest)" region="deleteRequest">
<code-example path="template-syntax/src/app/hero-detail.component.ts" linenums="false" header="src/app/hero-detail.component.ts (deleteRequest)" region="deleteRequest">
</code-example>
The component defines a `deleteRequest` property that returns an `EventEmitter`.
When the user clicks *delete*, the component invokes the `delete()` method,
telling the `EventEmitter` to emit an `Item` object.
telling the `EventEmitter` to emit a `Hero` object.
Now imagine a hosting parent component that binds to the `deleteRequest` event
of the `ItemDetailComponent`.
Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s `deleteRequest` event.
<code-example path="event-binding/src/app/app.component.html" linenums="false" header="src/app/app.component.html (event-binding-to-component)" region="event-binding-to-component">
<code-example path="template-syntax/src/app/app.component.html" linenums="false" header="src/app/app.component.html (event-binding-to-component)" region="event-binding-to-component">
</code-example>
When the `deleteRequest` event fires, Angular calls the parent component's
`deleteItem()` method, passing the *item-to-delete* (emitted by `ItemDetail`)
in the `$event` variable.
When the `deleteRequest` event fires, Angular calls the parent component's `deleteHero` method,
passing the *hero-to-delete* (emitted by `HeroDetail`) in the `$event` variable.
### Template statements have side effects
Though [template expressions](guide/template-syntax#template-expressions) shouldn't have [side effects](guide/template-syntax#avoid-side-effects), template
statements usually do. The `deleteItem()` method does have
a side effect: it deletes an item.
The `deleteHero` method has a side effect: it deletes a hero.
Template statement side effects are not just OK, but expected.
Deleting an item updates the model, and depending on your code, triggers
other changes including queries and saving to a remote server.
These changes propagate through the system and ultimately display in this and other views.
Deleting the hero updates the model, perhaps triggering other changes
including queries and saves to a remote server.
These changes percolate through the system and are ultimately displayed in this and other views.
<hr/>

View File

@ -2398,7 +2398,7 @@ So when you call `createComponent()`, the `TestBed` compiles implicitly.
That's not a problem when the source code is in memory.
But the `BannerComponent` requires external files
that the compiler must read from the file system,
that the compile must read from the file system,
an inherently _asynchronous_ operation.
If the `TestBed` were allowed to continue, the tests would run and fail mysteriously

Binary file not shown.

Before

Width:  |  Height:  |  Size: 343 KiB

After

Width:  |  Height:  |  Size: 350 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 154 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 82 KiB

View File

@ -1 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 600 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(0.469484,0,0,0.469925,-158.685,-184.211)"><text x="374px" y="472px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;">&lt;button</text><text x="607.094px" y="472px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#df002d;">(click)</text><text x="774.156px" y="472px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;">=&quot;</text><text x="834.25px" y="472px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#0022be;">onSave()</text><text x="1093.94px" y="472px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;">&quot;&gt;Save&lt;/button&gt;</text></g><path d="M142.827,95.824l-6.663,-3.032l17.828,-39.26l-6.187,-2.815l13.842,-5.191l5.195,13.852l-6.187,-2.815l-17.828,39.261Z" style="fill:#df002d;"/><path d="M337.08,93.548l-6.915,2.399l-13.342,-38.531l-6.422,2.228l6.458,-13.308l13.3,6.453l-6.421,2.228l13.342,38.531Z" style="fill:#3345cc;"/><g><rect x="23.005" y="76.128" width="197.653" height="31.485" style="fill:#fff;stroke:#000;stroke-width:0.7px;"/><text x="31.989px" y="98.214px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:22.556px;fill:#df002d;">target even<tspan x="144.743px " y="98.214px ">t</tspan> name</text></g><g><rect x="275.117" y="76.128" width="228.169" height="31.955" style="fill:#fff;stroke:#000;stroke-width:0.7px;"/><text x="293.078px" y="98.214px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:22.556px;fill:#3345cc;">template st<tspan x="403.3px " y="98.214px ">a</tspan>tement</text></g></svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 28 KiB

View File

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

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