Compare commits
150 Commits
9.0.0-rc.2
...
8.2.5
Author | SHA1 | Date | |
---|---|---|---|
2b7116a4f3 | |||
8be20f3a3e | |||
5112669d29 | |||
3d453fe6df | |||
32a6972cdc | |||
2cd5d4c64b | |||
3248fe865f | |||
b3ea6981cd | |||
f698a6bd73 | |||
97d2673eae | |||
4e93c4f87a | |||
b5f85638f7 | |||
efd13d31fc | |||
3a45bef0e7 | |||
5b105544fc | |||
4c5cfecc56 | |||
9d2348b9af | |||
e7bca0751c | |||
45c909a237 | |||
5b76b939af | |||
261593aab1 | |||
c9ce735675 | |||
b7f95bec04 | |||
d02573d05f | |||
8ff6ed6aa3 | |||
6aaf4eac89 | |||
1d0c93622d | |||
acd6c195a0 | |||
53a9a28ec0 | |||
aa8dd74176 | |||
ed6dcce13b | |||
d170e45784 | |||
7033e7eb22 | |||
893123936b | |||
31fcb9e036 | |||
c303d44df6 | |||
73dd43170b | |||
514271ba9c | |||
8d18b49899 | |||
6b0b7d01bf | |||
079773f54e | |||
b5cb120db0 | |||
0fb78d6c94 | |||
a80a8636ba | |||
0878d67757 | |||
5e0890b3af | |||
43bac21301 | |||
4df415060b | |||
039d70efec | |||
2a71496791 | |||
617a329c24 | |||
a00eae0b62 | |||
e54dd741ef | |||
7b4c1cdbe4 | |||
5e4babeaa9 | |||
f661f460bb | |||
44f233c02c | |||
31e8a52722 | |||
e3c9f9d794 | |||
e7c4e94c9a | |||
26dc826821 | |||
287247ef05 | |||
af170d2ae9 | |||
a01ed0d7b4 | |||
a7b94783b5 | |||
789dd6a0da | |||
e5b18e810c | |||
b8f86ad7d5 | |||
6f2e8afaed | |||
699c705a8d | |||
adc869ff88 | |||
46f2dcc470 | |||
2d9c4c1d82 | |||
0757702d63 | |||
174777443d | |||
baf2d9ddbc | |||
da444984a8 | |||
84a3daf609 | |||
c88cdea9ac | |||
7b3bd219f7 | |||
dc76c14e31 | |||
0ffc1d0d21 | |||
3d1b82be67 | |||
dec7e5286f | |||
2f812f31d5 | |||
18bac15ddd | |||
a1fe52b41c | |||
033fc3e6e5 | |||
76854287e5 | |||
972550ee08 | |||
c67f490d28 | |||
edd6cb5865 | |||
7b2617f087 | |||
d9d06899f4 | |||
eccb60cd6e | |||
3420d2923a | |||
6ec91dd4ca | |||
90ddee7a71 | |||
3300331691 | |||
6f3414bd68 | |||
1b0bd6b706 | |||
cfaefa9964 | |||
a48376b26a | |||
e6d8274c38 | |||
40df016390 | |||
eee75c2eea | |||
96aefc5019 | |||
038d823943 | |||
19095835a4 | |||
b560207bf5 | |||
c5de1fb05f | |||
62a9843ed0 | |||
75a162575f | |||
5bf912599f | |||
afd76a80da | |||
bb4627786d | |||
83d67b4a83 | |||
6ba31b9b84 | |||
a1c43b39a2 | |||
af91c21fd9 | |||
c00e7ff128 | |||
3bf2f98c35 | |||
2cabced9fc | |||
b38e8674bc | |||
553f335705 | |||
dde0a32946 | |||
9789cb6507 | |||
bb1fdb6c0f | |||
44b5bf486f | |||
14bfcfb731 | |||
04ebd59961 | |||
6129cfa269 | |||
b8f269414e | |||
8ed83caa19 | |||
aebf65d0ef | |||
b667bd2224 | |||
03e8a31bf5 | |||
800e90e4ed | |||
7290053952 | |||
14890e9117 | |||
06c49b4a6b | |||
d269b111dd | |||
46b160e925 | |||
dcbc28f729 | |||
9bdffb1e5c | |||
155f40c175 | |||
8c446b05d0 | |||
2647f708b7 | |||
fa15814d75 | |||
7a62530ed1 |
87
.bazelrc
87
.bazelrc
@ -18,8 +18,11 @@ test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test
|
||||
# See https://github.com/bazelbuild/bazel/issues/4603
|
||||
build --symlink_prefix=dist/
|
||||
|
||||
# Disable watchfs as it causes tests to be flaky on Windows
|
||||
# https://github.com/angular/angular/issues/29541
|
||||
build --nowatchfs
|
||||
|
||||
# Turn off legacy external runfiles
|
||||
build --nolegacy_external_runfiles
|
||||
run --nolegacy_external_runfiles
|
||||
test --nolegacy_external_runfiles
|
||||
|
||||
@ -59,7 +62,7 @@ test --test_output=errors
|
||||
# Settings for CircleCI #
|
||||
################################
|
||||
|
||||
# Bazel flags for CircleCI are in /.circleci/bazel.linux.rc and /.circleci/bazel.windows.rc
|
||||
# Bazel flags for CircleCI are in /.circleci/bazel.rc
|
||||
|
||||
################################
|
||||
# Temporary Settings for Ivy #
|
||||
@ -68,45 +71,18 @@ test --test_output=errors
|
||||
# any bazel target. This is a temporary flag until codebase is permanently switched to Ivy.
|
||||
build --define=compile=legacy
|
||||
|
||||
################################
|
||||
# Settings for rules_nodejs #
|
||||
################################
|
||||
# Temporary define while angular depends on the legacy rollup_bundle rule.
|
||||
# TODO: remove this setting after https://github.com/angular/angular/pull/33201 lands.
|
||||
build --define=enable_legacy_rollup_rule=1
|
||||
###############################
|
||||
# Remote Build Execution support
|
||||
# Turn on these settings with
|
||||
# --config=remote
|
||||
###############################
|
||||
|
||||
#######################
|
||||
# Remote HTTP Caching #
|
||||
#######################
|
||||
build --remote_http_cache=https://storage.googleapis.com/angular-team-cache
|
||||
build --remote_accept_cached=true
|
||||
build --remote_upload_local_results=false
|
||||
|
||||
######################################
|
||||
# Remote HTTP Caching writes support #
|
||||
# Turn on these settings with #
|
||||
# --config=-http-caching #
|
||||
######################################
|
||||
build:remote-http-caching --remote_upload_local_results=true
|
||||
build:remote-http-caching --google_default_credentials
|
||||
|
||||
##################################
|
||||
# Remote Build Execution support #
|
||||
# Turn on these settings with #
|
||||
# --config=remote #
|
||||
##################################
|
||||
|
||||
# The following --define=EXECUTOR=remote will be able to be removed
|
||||
# once https://github.com/bazelbuild/bazel/issues/7254 is fixed
|
||||
build:remote --define=EXECUTOR=remote
|
||||
|
||||
# Set a higher timeout value, just in case.
|
||||
build:remote --remote_timeout=600
|
||||
# Load default settings for Remote Build Execution.
|
||||
import %workspace%/third_party/github.com/bazelbuild/bazel-toolchains/bazelrc/.bazelrc.notoolchain
|
||||
|
||||
# Increase the default number of jobs by 50% because our build has lots of
|
||||
# parallelism
|
||||
build:remote --jobs=150
|
||||
build:remote --google_default_credentials
|
||||
|
||||
# Toolchain and platform related flags
|
||||
build:remote --host_javabase=@rbe_ubuntu1604_angular//java:jdk
|
||||
@ -120,11 +96,21 @@ build:remote --extra_execution_platforms=//tools:rbe_ubuntu1604-angular
|
||||
build:remote --host_platform=//tools:rbe_ubuntu1604-angular
|
||||
build:remote --platforms=//tools:rbe_ubuntu1604-angular
|
||||
|
||||
# Remote instance and caching
|
||||
# Remote instance.
|
||||
build:remote --remote_instance_name=projects/internal-200822/instances/default_instance
|
||||
build:remote --project_id=internal-200822
|
||||
|
||||
# Remote caching
|
||||
build:remote --remote_cache=remotebuildexecution.googleapis.com
|
||||
build:remote --remote_executor=remotebuildexecution.googleapis.com
|
||||
# By default, do not accept remote cache, to be set to true for CI based on environment
|
||||
build:remote --remote_accept_cached=false
|
||||
# By default, do not upload local results to cache, to be set to true for CI based on environment
|
||||
build:remote --remote_upload_local_results=false
|
||||
|
||||
# Build Event Service Configuration
|
||||
build:remote --bes_backend=buildeventservice.googleapis.com
|
||||
build:remote --bes_timeout=30s
|
||||
build:remote --bes_results_url="https://source.cloud.google.com/results/invocations/"
|
||||
|
||||
###############################
|
||||
# NodeJS rules settings
|
||||
@ -135,6 +121,31 @@ build:remote --remote_executor=remotebuildexecution.googleapis.com
|
||||
# This allows us to avoid installing a second copy of node_modules
|
||||
common --experimental_allow_incremental_repository_updates
|
||||
|
||||
# This option is changed to true in Bazel 0.27 and exposes a possible
|
||||
# regression in Bazel 0.27.0.
|
||||
# Error observed is in npm_package target `//packages/common/locales:package`:
|
||||
# ```
|
||||
# ERROR: /home/circleci/ng/packages/common/locales/BUILD.bazel:13:1: Assembling
|
||||
# npm package packages/common/locales/package failed: No usable spawn strategy found
|
||||
# for spawn with mnemonic SkylarkAction. Your --spawn_strategyor --strategy flags
|
||||
# are probably too strict. Visit https://github.com/bazelbuild/bazel/issues/7480 for
|
||||
# migration advises
|
||||
# ```
|
||||
# Suspect is https://github.com/bazelbuild/rules_nodejs/blob/master/internal/npm_package/npm_package.bzl#L75-L82:
|
||||
# ```
|
||||
# execution_requirements = {
|
||||
# # Never schedule this action remotely because it's not computationally expensive.
|
||||
# # It just copies files into a directory; it's not worth copying inputs and outputs to a remote worker.
|
||||
# # Also don't run it in a sandbox, because it resolves an absolute path to the bazel-out directory
|
||||
# # allowing the .pack and .publish runnables to work with no symlink_prefix
|
||||
# # See https://github.com/bazelbuild/rules_nodejs/issues/187
|
||||
# "local": "1",
|
||||
# },
|
||||
# ```
|
||||
build --incompatible_list_based_execution_strategy_selection=false
|
||||
test --incompatible_list_based_execution_strategy_selection=false
|
||||
run --incompatible_list_based_execution_strategy_selection=false
|
||||
|
||||
####################################################
|
||||
# User bazel configuration
|
||||
# NOTE: This needs to be the *last* entry in the config.
|
||||
|
@ -1,15 +0,0 @@
|
||||
# Settings in this file should be OS agnostic. Use the bazel.<OS>.rc files for OS specific settings.
|
||||
|
||||
# Don't be spammy in the logs
|
||||
build --noshow_progress
|
||||
|
||||
# Print all the options that apply to the build.
|
||||
# This helps us diagnose which options override others
|
||||
# (e.g. /etc/bazel.bazelrc vs. tools/bazel.rc)
|
||||
build --announce_rc
|
||||
|
||||
# Retry in the event of flakes, eg. https://circleci.com/gh/angular/angular/31309
|
||||
test --flaky_test_attempts=2
|
||||
|
||||
# More details on failures
|
||||
build --verbose_failures=true
|
@ -1,17 +0,0 @@
|
||||
# These options are enabled when running on CI
|
||||
# We do this by copying this file to /etc/bazel.bazelrc at the start of the build.
|
||||
# See documentation in /docs/BAZEL.md
|
||||
|
||||
# Import config items common to both Linux and Windows setups.
|
||||
# https://docs.bazel.build/versions/master/guide.html#bazelrc-syntax-and-semantics
|
||||
import %workspace%/.circleci/bazel.common.rc
|
||||
|
||||
# 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
|
||||
|
||||
# Workaround https://github.com/bazelbuild/bazel/issues/3645
|
||||
# Bazel doesn't calculate the memory ceiling correctly when running under Docker.
|
||||
# Limit Bazel to consuming resources that fit in CircleCI "xlarge" class
|
||||
# https://circleci.com/docs/2.0/configuration-reference/#resource_class
|
||||
build --local_resources=14336,8.0,1.0
|
41
.circleci/bazel.rc
Normal file
41
.circleci/bazel.rc
Normal file
@ -0,0 +1,41 @@
|
||||
# These options are enabled when running on CI
|
||||
# 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
|
||||
# error: Too long with no output (exceeded 10m0s)
|
||||
# build --noshow_progress
|
||||
|
||||
# Print all the options that apply to the build.
|
||||
# This helps us diagnose which options override others
|
||||
# (e.g. /etc/bazel.bazelrc vs. tools/bazel.rc)
|
||||
build --announce_rc
|
||||
|
||||
# Workaround https://github.com/bazelbuild/bazel/issues/3645
|
||||
# Bazel doesn't calculate the memory ceiling correctly when running under Docker.
|
||||
# Limit Bazel to consuming resources that fit in CircleCI "xlarge" class
|
||||
# https://circleci.com/docs/2.0/configuration-reference/#resource_class
|
||||
build --local_resources=14336,8.0,1.0
|
||||
|
||||
# Retry in the event of flakes, eg. https://circleci.com/gh/angular/angular/31309
|
||||
test --flaky_test_attempts=2
|
||||
|
||||
# More details on failures
|
||||
build --verbose_failures=true
|
||||
|
||||
# We have seen some flakiness in using TS workers on CircleCI
|
||||
# https://angular-team.slack.com/archives/C07DT5M6V/p1562693245183400
|
||||
# > failures like `ERROR: /home/circleci/ng/packages/core/test/BUILD.bazel:5:1:
|
||||
# > Compiling TypeScript (devmode) //packages/core/test:test_lib failed: Worker process did not return a WorkResponse:`
|
||||
# > I saw that issue a couple times today.
|
||||
# > Example job: https://circleci.com/gh/angular/angular/385517
|
||||
# We expect that TypeScript compilations will parallelize wider than the number of local cores anyway
|
||||
# so we should saturate remote workers with TS compilations
|
||||
build --strategy=AngularTemplateCompile=local
|
||||
build --strategy=TypeScriptCompile=local
|
@ -1,14 +0,0 @@
|
||||
# These options are enabled when running on CI
|
||||
# We do this by copying this file to $env:ProgramData\bazel.bazelrc at the start of the build.
|
||||
# See documentation in /docs/BAZEL.md
|
||||
|
||||
# Import config items common to both Linux and Windows setups.
|
||||
# https://docs.bazel.build/versions/master/guide.html#bazelrc-syntax-and-semantics
|
||||
import %workspace%/.circleci/bazel.common.rc
|
||||
|
||||
# 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=C:/Users/circleci/bazel_repository_cache
|
||||
|
||||
# All windows jobs run on master and should use http caching
|
||||
build --config=remote-http-caching
|
File diff suppressed because it is too large
Load Diff
@ -19,20 +19,16 @@ setPublicVar PROJECT_ROOT "$projectDir";
|
||||
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_BUILD_URL "$CIRCLE_BUILD_URL";
|
||||
# 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 75.0.3770.90";
|
||||
setPublicVar CI_COMMIT "$CIRCLE_SHA1";
|
||||
# `CI_COMMIT_RANGE` is only used on push builds (a.k.a. non-PR, non-scheduled builds and rerun
|
||||
# workflows of such builds).
|
||||
# NOTE: With [CircleCI Pipelines](https://circleci.com/docs/2.0/build-processing) enabled,
|
||||
# `CIRCLE_COMPARE_URL` is no longer available and the commit range cannot be reliably
|
||||
# detected. Fall back to only considering the last commit (which is accurate in the majority
|
||||
# of cases for push builds).
|
||||
setPublicVar CI_COMMIT_RANGE "`[[ ${CIRCLE_PR_NUMBER:-false} != false ]] && echo "" || echo "$CIRCLE_SHA1~1...$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
|
||||
# rerun workflows of such builds). That is fine, since we only need it in push builds.
|
||||
setPublicVar CI_COMMIT_RANGE "`[[ ${CIRCLE_PR_NUMBER:-false} != false ]] && echo "" || node $getCommitRangePath "$CIRCLE_BUILD_NUM" "$CIRCLE_COMPARE_URL"`";
|
||||
setPublicVar CI_PULL_REQUEST "${CIRCLE_PR_NUMBER:-false}";
|
||||
setPublicVar CI_REPO_NAME "$CIRCLE_PROJECT_REPONAME";
|
||||
setPublicVar CI_REPO_OWNER "$CIRCLE_PROJECT_USERNAME";
|
||||
@ -84,7 +80,7 @@ setPublicVar MATERIAL_REPO_TMP_DIR "/tmp/material2"
|
||||
setPublicVar MATERIAL_REPO_URL "https://github.com/angular/material2.git"
|
||||
setPublicVar MATERIAL_REPO_BRANCH "master"
|
||||
# **NOTE**: When updating the commit SHA, also update the cache key in the CircleCI "config.yml".
|
||||
setPublicVar MATERIAL_REPO_COMMIT "a5cad10cf9ca5db84c307d38d5594c3f1d89ae2b"
|
||||
setPublicVar MATERIAL_REPO_COMMIT "18b9ef3f5529f0fa8f034944681486447af7b879"
|
||||
|
||||
# Source `$BASH_ENV` to make the variables available immediately.
|
||||
source $BASH_ENV;
|
||||
|
@ -10,13 +10,6 @@
|
||||
* format of the `CIRCLE_COMPARE_URL` environment variable, or by retrieving the equivalent of
|
||||
* `CIRCLE_COMPARE_URL` for jobs that are part of a rerun workflow and extracting it from there.
|
||||
*
|
||||
* > !!! WARNING !!!
|
||||
* > !!
|
||||
* > !! When [CircleCI Pipelines](https://circleci.com/docs/2.0/build-processing) is enabled, the
|
||||
* > !! `CIRCLE_COMPARE_URL` environment variable is not available at all and this script does not
|
||||
* > !! work.
|
||||
* > !!!!!!!!!!!!!!!
|
||||
*
|
||||
* **Context:**
|
||||
* CircleCI sets the `CIRCLE_COMPARE_URL` environment variable (from which we can extract the commit
|
||||
* range) on push builds (a.k.a. non-PR, non-scheduled builds). Yet, when a workflow is rerun
|
||||
@ -28,7 +21,7 @@
|
||||
* (undocumented) fact that the workspace ID happens to be the same as the workflow ID that first
|
||||
* created it.
|
||||
*
|
||||
* For example, for a job on push build workflows, the CircleCI API will return data that look like:
|
||||
* For example, for a job on push build workflow, the CircleCI API will return data that look like:
|
||||
* ```js
|
||||
* {
|
||||
* compare: 'THE_COMPARE_URL_WE_ARE_LOOKING_FOR',
|
||||
|
@ -1,41 +0,0 @@
|
||||
# Install Bazel pre-reqs on Windows
|
||||
# https://docs.bazel.build/versions/master/install-windows.html
|
||||
# https://docs.bazel.build/versions/master/windows.html
|
||||
# Install MSYS2 and packages
|
||||
choco install msys2 --version 20180531.0.0 --no-progress --package-parameters "/NoUpdate"
|
||||
C:\tools\msys64\usr\bin\bash.exe -l -c "pacman --needed --noconfirm -S zip unzip patch diffutils git"
|
||||
|
||||
# Add PATH modifications to the Powershell profile. This is the win equivalent of .bash_profile.
|
||||
# https://docs.microsoft.com/en-us/previous-versions//bb613488(v=vs.85)
|
||||
new-item -path $profile -itemtype file -force
|
||||
# Paths for nodejs, npm, yarn, and msys2. Use single quotes to prevent interpolation.
|
||||
# Add before the original path to use msys2 instead of the installed gitbash.
|
||||
Add-Content $profile '$Env:path = "${Env:ProgramFiles}\nodejs\;C:\Users\circleci\AppData\Roaming\npm\;${Env:ProgramFiles(x86)}\Yarn\bin\;C:\Users\circleci\AppData\Local\Yarn\bin\;C:\tools\msys64\usr\bin\;" + $Env:path'
|
||||
# Environment variables for Bazel
|
||||
Add-Content $profile '$Env:BAZEL_SH = "C:\tools\msys64\usr\bin\bash.exe"'
|
||||
|
||||
# Get the bazel version devdep and store it in a global var for use in the circleci job.
|
||||
$bazelVersion = & ${Env:ProgramFiles}\nodejs\node.exe -e "console.log(require('./package.json').devDependencies['@bazel/bazel'])"
|
||||
# This is a tricky situation: we want $bazelVersion to be evaluated but not $Env:BAZEL_VERSION.
|
||||
# Formatting works https://stackoverflow.com/questions/32127583/expand-variable-inside-single-quotes
|
||||
$bazelVersionGlobalVar = '$Env:BAZEL_VERSION = "{0}"' -f $bazelVersion
|
||||
Add-Content $profile $bazelVersionGlobalVar
|
||||
|
||||
# Remove the CircleCI checkout SSH override, because it breaks cloning repositories through Bazel.
|
||||
# See https://circleci.com/gh/angular/angular/401454 for an example.
|
||||
# TODO: is this really needed? Maybe there's a better way. It doesn't happen on Linux or on Codefresh.
|
||||
git config --global --unset url.ssh://git@github.com.insteadOf
|
||||
|
||||
|
||||
# These Bazel prereqs aren't needed because the CircleCI image already includes them.
|
||||
# choco install nodejs --version 10.16.0 --no-progress
|
||||
# choco install yarn --version 1.16.0 --no-progress
|
||||
# choco install vcredist2015 --version 14.0.24215.20170201
|
||||
|
||||
# We don't need VS Build Tools for the tested bazel targets.
|
||||
# If it's needed again, uncomment these lines.
|
||||
# VS Build Tools are needed for Bazel C++ targets (like com_google_protobuf)
|
||||
# choco install visualstudio2019buildtools --version 16.1.2.0 --no-progress --package-parameters "--add Microsoft.VisualStudio.Workload.VCTools --add Microsoft.VisualStudio.Component.VC.Tools.x86.x64 --add Microsoft.Component.VC.Runtime.UCRTSDK --add Microsoft.VisualStudio.Component.Windows10SDK.17763"
|
||||
# Add-Content $profile '$Env:BAZEL_VC = "${Env:ProgramFiles(x86)}\Microsoft Visual Studio\2019\BuildTools\VC\"'
|
||||
# Python is needed for Bazel Python targets
|
||||
# choco install python --version 3.5.1 --no-progress
|
141
.github/CODEOWNERS
vendored
141
.github/CODEOWNERS
vendored
@ -44,19 +44,23 @@
|
||||
# alxhub - Alex Rickabaugh
|
||||
# AndrewKushnir - Andrew Kushnir
|
||||
# andrewseguin - Andrew Seguin
|
||||
# atscott - Andrew Scott
|
||||
# benlesh - Ben Lesh
|
||||
# brandonroberts - Brandon Roberts
|
||||
# devversion - Paul Gschwendtner
|
||||
# filipesilva - Filipe Silva
|
||||
# gkalpak - George Kalpakas
|
||||
# hansl - Hans Larsen
|
||||
# IgorMinar - Igor Minar
|
||||
# jasonaden - Jason Aden
|
||||
# jenniferfell - Jennifer Fell
|
||||
# JiaLiPassion - Jia Li
|
||||
# josephperrott - Joey Perrott
|
||||
# kapunahelewong - Kapunahele Wong
|
||||
# kara - Kara Erickson
|
||||
# kyliau - Keen Yee Liau
|
||||
# matsko - Matias Niemelä
|
||||
# mgechev - Minko Gechev
|
||||
# mhevery - Misko Hevery
|
||||
# ocombe - Olivier Combe
|
||||
# petebacondarwin - Pete Bacon Darwin
|
||||
# pkozlowski-opensource - Pawel Kozlowski
|
||||
# robwormald - Rob Wormald
|
||||
@ -84,9 +88,9 @@
|
||||
# (secret team to avoid review requests, it also doesn't inherit from @angular/framework because nested teams can't be secret)
|
||||
#
|
||||
# - IgorMinar
|
||||
# - josephperrott
|
||||
# - kara
|
||||
# - mhevery
|
||||
# - alexeagle
|
||||
|
||||
|
||||
# ===========================================================
|
||||
@ -95,8 +99,8 @@
|
||||
# Used for approving minor documentation-only changes that don't require engineering review.
|
||||
# (secret team to avoid review requests, it also doesn't inherit from @angular/framework because nested teams can't be secret)
|
||||
#
|
||||
# - brandonroberts
|
||||
# - gkalpak
|
||||
# - kapunahelewong
|
||||
# - petebacondarwin
|
||||
|
||||
|
||||
@ -121,9 +125,10 @@
|
||||
# @angular/tools-cli
|
||||
# ===========================================================
|
||||
#
|
||||
# - alexeagle
|
||||
# - filipesilva
|
||||
# - hansl
|
||||
# - mgechev
|
||||
# - vikerman
|
||||
|
||||
|
||||
# ===========================================================
|
||||
@ -174,7 +179,8 @@
|
||||
# @angular/fw-forms
|
||||
# ===========================================================
|
||||
#
|
||||
# - AndrewKushnir
|
||||
# - kara
|
||||
# - jasonaden
|
||||
|
||||
|
||||
# ===========================================================
|
||||
@ -196,7 +202,7 @@
|
||||
# @angular/fw-router
|
||||
# ===========================================================
|
||||
#
|
||||
# - atscott
|
||||
# - jasonaden
|
||||
|
||||
|
||||
# ===========================================================
|
||||
@ -214,6 +220,7 @@
|
||||
#
|
||||
# - gkalpak
|
||||
# - petebacondarwin
|
||||
# - jasonaden
|
||||
|
||||
|
||||
# ===========================================================
|
||||
@ -229,7 +236,7 @@
|
||||
#
|
||||
# - AndrewKushnir
|
||||
# - mhevery
|
||||
# - petebacondarwin
|
||||
# - ocombe
|
||||
# - vikerman
|
||||
|
||||
|
||||
@ -261,8 +268,8 @@
|
||||
# @angular/fw-integration
|
||||
# ===========================================================
|
||||
#
|
||||
# - alexeagle
|
||||
# - IgorMinar
|
||||
# - josephperrott
|
||||
# - mhevery
|
||||
|
||||
|
||||
@ -270,6 +277,7 @@
|
||||
# @angular/docs-infra
|
||||
# ===========================================================
|
||||
#
|
||||
# - brandonroberts
|
||||
# - gkalpak
|
||||
# - IgorMinar
|
||||
# - petebacondarwin
|
||||
@ -279,6 +287,8 @@
|
||||
# @angular/fw-docs-intro
|
||||
# ===========================================================
|
||||
#
|
||||
# - jenniferfell
|
||||
# - brandonroberts
|
||||
# - IgorMinar
|
||||
# - stephenfluin
|
||||
|
||||
@ -287,15 +297,16 @@
|
||||
# @angular/fw-docs-observables
|
||||
# ===========================================================
|
||||
#
|
||||
# - alxhub
|
||||
# - benlesh
|
||||
# - jasonaden
|
||||
|
||||
|
||||
# ===========================================================
|
||||
# @angular/fw-docs-packaging
|
||||
# ===========================================================
|
||||
#
|
||||
# - alexeagle
|
||||
# - IgorMinar
|
||||
# - vikerman
|
||||
|
||||
|
||||
# ===========================================================
|
||||
@ -303,9 +314,10 @@
|
||||
# ===========================================================
|
||||
#
|
||||
# - alan-agius4
|
||||
# - alexeagle
|
||||
# - hansl
|
||||
# - IgorMinar
|
||||
# - mgechev
|
||||
# - vikerman
|
||||
|
||||
|
||||
# ===========================================================
|
||||
@ -313,9 +325,11 @@
|
||||
# ===========================================================
|
||||
#
|
||||
# - alan-agius4
|
||||
# - alexeagle
|
||||
# - hansl
|
||||
# - IgorMinar
|
||||
# - mgechev
|
||||
# - vikerman
|
||||
|
||||
|
||||
|
||||
# ===========================================================
|
||||
@ -368,44 +382,6 @@
|
||||
|
||||
|
||||
|
||||
# ================================================
|
||||
# Build, CI & Dev-infra Owners
|
||||
# ================================================
|
||||
|
||||
/* @angular/dev-infra-framework
|
||||
/.buildkite/** @angular/dev-infra-framework
|
||||
/.circleci/** @angular/dev-infra-framework
|
||||
/.devcontainer/** @angular/dev-infra-framework
|
||||
/.github/** @angular/dev-infra-framework
|
||||
/.vscode/** @angular/dev-infra-framework
|
||||
/docs/BAZEL.md @angular/dev-infra-framework
|
||||
/packages/* @angular/dev-infra-framework
|
||||
/packages/examples/test-utils/** @angular/dev-infra-framework
|
||||
/packages/private/** @angular/dev-infra-framework
|
||||
/scripts/** @angular/dev-infra-framework
|
||||
/third_party/** @angular/dev-infra-framework
|
||||
/tools/build/** @angular/dev-infra-framework
|
||||
/tools/cjs-jasmine/** @angular/dev-infra-framework
|
||||
/tools/gulp-tasks/** @angular/dev-infra-framework
|
||||
/tools/ngcontainer/** @angular/dev-infra-framework
|
||||
/tools/npm/** @angular/dev-infra-framework
|
||||
/tools/npm_workspace/** @angular/dev-infra-framework
|
||||
/tools/public_api_guard/** @angular/dev-infra-framework
|
||||
/tools/rxjs/** @angular/dev-infra-framework
|
||||
/tools/size-tracking/** @angular/dev-infra-framework
|
||||
/tools/source-map-test/** @angular/dev-infra-framework
|
||||
/tools/symbol-extractor/** @angular/dev-infra-framework
|
||||
/tools/testing/** @angular/dev-infra-framework
|
||||
/tools/ts-api-guardian/** @angular/dev-infra-framework
|
||||
/tools/tslint/** @angular/dev-infra-framework
|
||||
/tools/validate-commit-message/** @angular/dev-infra-framework
|
||||
/tools/yarn/** @angular/dev-infra-framework
|
||||
/tools/* @angular/dev-infra-framework
|
||||
*.BAZEL @angular/dev-infra-framework
|
||||
*.bzl @angular/dev-infra-framework
|
||||
|
||||
|
||||
|
||||
# ================================================
|
||||
# @angular/animations
|
||||
# ================================================
|
||||
@ -432,7 +408,6 @@
|
||||
# ================================================
|
||||
|
||||
/packages/bazel/** @angular/tools-bazel @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/bazel.md @angular/tools-bazel @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
|
||||
|
||||
|
||||
@ -444,10 +419,7 @@
|
||||
/packages/compiler/** @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/packages/examples/compiler/** @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/packages/compiler-cli/** @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/angular-compiler-options.md @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/aot-compiler.md @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/aot-metadata-errors.md @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/template-typecheck.md @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
|
||||
|
||||
|
||||
@ -456,7 +428,6 @@
|
||||
# ================================================
|
||||
|
||||
/packages/compiler-cli/ngcc/** @angular/fw-ngcc @angular/framework-global-approvers
|
||||
/aio/content/guide/ngcc.md @angular/fw-ngcc @angular/framework-global-approvers
|
||||
|
||||
|
||||
|
||||
@ -467,11 +438,11 @@
|
||||
# ================================================
|
||||
|
||||
/packages/compiler-cli/src/ngtools/** @angular/tools-cli @angular/framework-global-approvers
|
||||
/aio/content/guide/cli-builder.md @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/ivy.md @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/web-worker.md @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
|
||||
|
||||
|
||||
# ================================================
|
||||
# @angular/core
|
||||
# @angular/common (except @angular/common/http)
|
||||
@ -490,10 +461,6 @@
|
||||
/packages/platform-webworker/** @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/packages/platform-webworker-dynamic/** @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/packages/examples/common/** @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/packages/docs/** @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
|
||||
/aio/content/guide/accessibility.md @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/examples/accessibility/** @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
|
||||
/aio/content/guide/architecture-components.md @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/architecture-modules.md @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
@ -592,6 +559,7 @@
|
||||
/aio/content/images/guide/inputs-outputs/** @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/examples/template-expression-operators/** @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
|
||||
|
||||
/aio/content/guide/pipes.md @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/examples/pipes/** @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/images/guide/pipes/** @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
@ -764,11 +732,11 @@ testing/** @angular/fw-test
|
||||
/packages/compiler/src/i18n/** @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/packages/compiler/src/render3/view/i18n/** @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/packages/compiler-cli/src/extract_i18n.ts @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/packages/localize/** @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/i18n.md @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/examples/i18n/** @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
|
||||
|
||||
|
||||
# ================================================
|
||||
# @angular security
|
||||
# ================================================
|
||||
@ -881,15 +849,7 @@ testing/** @angular/fw-test
|
||||
/aio/content/guide/updating.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/workspace-config.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/deprecations.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/migration-renderer.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/migration-undecorated-classes.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/migration-dynamic-flag.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/migration-injectable.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/migration-localize.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/migration-module-with-providers.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/updating-to-version-9.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/ivy-compatibility.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
/aio/content/guide/ivy-compatibility-examples.md @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
|
||||
|
||||
|
||||
# ================================================
|
||||
@ -926,10 +886,37 @@ testing/** @angular/fw-test
|
||||
|
||||
|
||||
# ================================================
|
||||
# Material CI
|
||||
# Build & CI Owners
|
||||
# ================================================
|
||||
|
||||
/tools/material-ci/** @angular/fw-core @angular/framework-global-approvers
|
||||
/* @angular/dev-infra-framework
|
||||
/.buildkite/** @angular/dev-infra-framework
|
||||
/.circleci/** @angular/dev-infra-framework
|
||||
/.devcontainer/** @angular/dev-infra-framework
|
||||
/.github/** @angular/dev-infra-framework
|
||||
/.vscode/** @angular/dev-infra-framework
|
||||
/docs/BAZEL.md @angular/dev-infra-framework
|
||||
/packages/* @angular/dev-infra-framework
|
||||
/packages/examples/test-utils/** @angular/dev-infra-framework
|
||||
/scripts/** @angular/dev-infra-framework
|
||||
/third_party/** @angular/dev-infra-framework
|
||||
/tools/build/** @angular/dev-infra-framework
|
||||
/tools/cjs-jasmine/** @angular/dev-infra-framework
|
||||
/tools/gulp-tasks/** @angular/dev-infra-framework
|
||||
/tools/ngcontainer/** @angular/dev-infra-framework
|
||||
/tools/npm/** @angular/dev-infra-framework
|
||||
/tools/npm_workspace/** @angular/dev-infra-framework
|
||||
/tools/public_api_guard/** @angular/dev-infra-framework
|
||||
/tools/rxjs/** @angular/dev-infra-framework
|
||||
/tools/source-map-test/** @angular/dev-infra-framework
|
||||
/tools/symbol-extractor/** @angular/dev-infra-framework
|
||||
/tools/testing/** @angular/dev-infra-framework
|
||||
/tools/ts-api-guardian/** @angular/dev-infra-framework
|
||||
/tools/tslint/** @angular/dev-infra-framework
|
||||
/tools/validate-commit-message/** @angular/dev-infra-framework
|
||||
/tools/yarn/** @angular/dev-infra-framework
|
||||
/tools/* @angular/dev-infra-framework
|
||||
*.bzl @angular/dev-infra-framework
|
||||
|
||||
|
||||
|
||||
@ -945,14 +932,6 @@ testing/** @angular/fw-test
|
||||
|
||||
|
||||
|
||||
# ================================================
|
||||
# Special cases
|
||||
# ================================================
|
||||
|
||||
/aio/content/guide/static-query-migration.md @kara @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
|
||||
|
||||
|
||||
# ================================================
|
||||
# CODEOWNERS Owners owners ...
|
||||
# ================================================
|
||||
|
13
.github/ISSUE_TEMPLATE/7-angular-components.md
vendored
13
.github/ISSUE_TEMPLATE/7-angular-components.md
vendored
@ -1,13 +0,0 @@
|
||||
---
|
||||
name: "\U0001F48EAngular Components"
|
||||
about: Issues and feature requests for Angular Components
|
||||
|
||||
---
|
||||
|
||||
🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑
|
||||
|
||||
Please file any Angular Components issues at: https://github.com/angular/components/issues/new
|
||||
|
||||
For the time being, we keep Angular Components issues in a separate repository.
|
||||
|
||||
🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑
|
13
.github/ISSUE_TEMPLATE/7-angular-material.md
vendored
Normal file
13
.github/ISSUE_TEMPLATE/7-angular-material.md
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
name: "\U0001F48EAngular Material"
|
||||
about: Issues and feature requests for Angular Material
|
||||
|
||||
---
|
||||
|
||||
🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑
|
||||
|
||||
Please file any Angular Material issues at: https://github.com/angular/material2/issues/new
|
||||
|
||||
For the time being, we keep Angular Material issues in a separate repository.
|
||||
|
||||
🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑
|
6
.github/angular-robot.yml
vendored
6
.github/angular-robot.yml
vendored
@ -52,7 +52,6 @@ merge:
|
||||
- "packages/elements/schematics/**"
|
||||
- "packages/examples/**"
|
||||
- "packages/language-service/**"
|
||||
- "packages/localize/**"
|
||||
- "packages/private/**"
|
||||
- "packages/service-worker/**"
|
||||
- "**/.gitignore"
|
||||
@ -62,15 +61,10 @@ merge:
|
||||
- "**/third_party/**"
|
||||
- "**/tsconfig-build.json"
|
||||
- "**/tsconfig.json"
|
||||
- "**/rollup.config.js"
|
||||
- "**/BUILD.bazel"
|
||||
- "**/*.md"
|
||||
- "packages/**/integrationtest/**"
|
||||
- "packages/**/test/**"
|
||||
- "packages/zone.js/*"
|
||||
- "packages/zone.js/doc/**"
|
||||
- "packages/zone.js/example/**"
|
||||
- "packages/zone.js/scripts/**"
|
||||
|
||||
# comment that will be added to a PR when there is a conflict, leave empty or set to false to disable
|
||||
mergeConflictComment: "Hi @{{PRAuthor}}! This PR has merge conflicts due to recent upstream merges.
|
||||
|
14
.github/workflows/lock-closed.yml
vendored
14
.github/workflows/lock-closed.yml
vendored
@ -1,14 +0,0 @@
|
||||
name: Lock closed inactive issues
|
||||
|
||||
on:
|
||||
schedule:
|
||||
# Run at 16:00 every day
|
||||
- cron: '0 16 * * *'
|
||||
|
||||
jobs:
|
||||
lock_closed:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: angular/dev-infra/github-actions/lock-closed@66462f6
|
||||
with:
|
||||
lock-bot-key: ${{ secrets.LOCK_BOT_PRIVATE_KEY }}
|
6
.gitignore
vendored
6
.gitignore
vendored
@ -4,7 +4,6 @@
|
||||
/bazel-out
|
||||
/integration/bazel/bazel-*
|
||||
e2e_test.*
|
||||
*.log
|
||||
node_modules
|
||||
tools/gulp-tasks/cldr/cldr-data/
|
||||
|
||||
@ -18,12 +17,9 @@ pubspec.lock
|
||||
.settings/
|
||||
.vscode/launch.json
|
||||
.vscode/settings.json
|
||||
.vscode/tasks.json
|
||||
*.swo
|
||||
modules/.settings
|
||||
modules/.vscode
|
||||
.vimrc
|
||||
.nvimrc
|
||||
|
||||
# Don't check in secret files
|
||||
*secret.js
|
||||
@ -41,5 +37,3 @@ yarn-error.log
|
||||
# User specific bazel settings
|
||||
.bazelrc.user
|
||||
|
||||
.notes.md
|
||||
baseline.json
|
||||
|
18
.vscode/README.md
vendored
18
.vscode/README.md
vendored
@ -1,25 +1,23 @@
|
||||
# VSCode Configuration
|
||||
|
||||
This folder contains opt-in [Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings), [Tasks](https://code.visualstudio.com/docs/editor/tasks), [Launch Configurations](https://code.visualstudio.com/Docs/editor/debugging#_launch-configurations) and [Extension Recommendations](https://code.visualstudio.com/docs/editor/extension-gallery#_workspace-recommended-extensions) that the Angular team recommends using when working on this repository.
|
||||
This folder contains opt-in [Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings) and [Extension Recommendations](https://code.visualstudio.com/docs/editor/extension-gallery#_workspace-recommended-extensions) that the Angular team recommends using when working on this repository.
|
||||
|
||||
## Usage
|
||||
|
||||
To use the recommended configurations follow the steps below:
|
||||
To use the recommended settings follow the steps below:
|
||||
|
||||
- install the recommneded extensions in `.vscode/extensions.json`
|
||||
- copy (or link) `.vscode/recommended-settings.json` to `.vscode/settings.json`
|
||||
- copy (or link) `.vscode/recommended-launch.json` to `.vscode/launch.json`
|
||||
- copy (or link) `.vscode/recommended-tasks.json` to `.vscode/tasks.json`
|
||||
- install <https://marketplace.visualstudio.com/items?itemName=xaver.clang-format>
|
||||
- copy `.vscode/recommended-settings.json` to `.vscode/settings.json`
|
||||
- restart the editor
|
||||
|
||||
If you already have your custom workspace settings you should instead manually merge the file contents.
|
||||
If you already have your custom workspace settings you should instead manually merge the file content.
|
||||
|
||||
This isn't an automatic process so you will need to repeat it when settings are updated.
|
||||
|
||||
To see the recommended extensions select "Extensions: Show Recommended Extensions" in the [Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).
|
||||
|
||||
## Editing `.vscode/recommended-*.json` files
|
||||
## Editing `.vscode/recommended-settings.json`
|
||||
|
||||
If you wish to add extra configuration items please keep in mind any modifications you make here will be used by many users.
|
||||
If you wish to add extra configuration items please keep in mind any settings you add here will be used by many users.
|
||||
|
||||
Try to keep these settings/configuations to things that help facilitate the development process and avoid altering the user workflow whenever possible.
|
||||
Try to keep these settings to things that help facilitate the development process and avoid altering the user workflow whenever possible.
|
||||
|
85
.vscode/recommended-launch.json
vendored
85
.vscode/recommended-launch.json
vendored
@ -1,85 +0,0 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Attach to bazel test ... --config=debug",
|
||||
"type": "node",
|
||||
"request": "attach",
|
||||
"port": 9229,
|
||||
"address": "localhost",
|
||||
"restart": false,
|
||||
"sourceMaps": true,
|
||||
"localRoot": "${workspaceRoot}",
|
||||
"remoteRoot": "${workspaceRoot}",
|
||||
"stopOnEntry": false,
|
||||
"timeout": 600000,
|
||||
},
|
||||
{
|
||||
"name": "Attach to bazel test ... --config=debug (no source maps)",
|
||||
"type": "node",
|
||||
"request": "attach",
|
||||
"port": 9229,
|
||||
"address": "localhost",
|
||||
"restart": false,
|
||||
"sourceMaps": false,
|
||||
"localRoot": "${workspaceRoot}",
|
||||
"remoteRoot": "${workspaceRoot}",
|
||||
"stopOnEntry": false,
|
||||
"timeout": 600000,
|
||||
},
|
||||
{
|
||||
"name": "IVY:packages/core/test/acceptance",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"program": "${workspaceFolder}/node_modules/.bin/bazel",
|
||||
"args": [
|
||||
"test",
|
||||
"--define=compile=aot",
|
||||
"packages/core/test/acceptance",
|
||||
"--config=debug"
|
||||
],
|
||||
"port": 9229,
|
||||
"address": "localhost",
|
||||
"restart": true,
|
||||
"sourceMaps": true,
|
||||
"timeout": 600000,
|
||||
},
|
||||
{
|
||||
"name": "IVY:packages/core/test/render3",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"program": "${workspaceFolder}/node_modules/.bin/bazel",
|
||||
"args": [
|
||||
"test",
|
||||
"--define=compile=aot",
|
||||
"packages/core/test/render3",
|
||||
"--config=debug"
|
||||
],
|
||||
"port": 9229,
|
||||
"address": "localhost",
|
||||
"restart": true,
|
||||
"sourceMaps": true,
|
||||
"timeout": 600000,
|
||||
},
|
||||
{
|
||||
"name": "IVY:packages/core/test",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"program": "${workspaceFolder}/node_modules/.bin/bazel",
|
||||
"args": [
|
||||
"test",
|
||||
"--define=compile=aot",
|
||||
"packages/core/test",
|
||||
"--config=debug"
|
||||
],
|
||||
"port": 9229,
|
||||
"address": "localhost",
|
||||
"restart": true,
|
||||
"sourceMaps": true,
|
||||
"timeout": 600000,
|
||||
},
|
||||
]
|
||||
}
|
113
.vscode/recommended-tasks.json
vendored
113
.vscode/recommended-tasks.json
vendored
@ -1,113 +0,0 @@
|
||||
{
|
||||
// See https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
// for the documentation about the tasks.json format
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"label": "IVY:packages/core/test/...",
|
||||
"type": "shell",
|
||||
"command": "${workspaceFolder}/node_modules/.bin/bazel",
|
||||
"args": [
|
||||
"test",
|
||||
"--define=compile=aot",
|
||||
"packages/core/test",
|
||||
"packages/core/test/acceptance",
|
||||
"packages/core/test/render3",
|
||||
],
|
||||
"group": "test",
|
||||
"presentation": {
|
||||
"reveal": "always",
|
||||
"panel": "dedicated",
|
||||
},
|
||||
},
|
||||
{
|
||||
"label": "VE:packages/core/test/...",
|
||||
"type": "shell",
|
||||
"command": "${workspaceFolder}/node_modules/.bin/bazel",
|
||||
"args": [
|
||||
"test",
|
||||
"packages/core/test",
|
||||
"packages/core/test/acceptance",
|
||||
"packages/core/test/render3",
|
||||
],
|
||||
"group": "test",
|
||||
"presentation": {
|
||||
"reveal": "always",
|
||||
"panel": "dedicated",
|
||||
},
|
||||
},
|
||||
{
|
||||
"label": "IVY:packages/core/test/acceptance",
|
||||
"type": "shell",
|
||||
"command": "${workspaceFolder}/node_modules/.bin/bazel",
|
||||
"args": [
|
||||
"test",
|
||||
"--define=compile=aot",
|
||||
"packages/core/test/acceptance",
|
||||
],
|
||||
"group": "test",
|
||||
"presentation": {
|
||||
"reveal": "always",
|
||||
"panel": "dedicated",
|
||||
},
|
||||
},
|
||||
{
|
||||
"label": "VE:packages/core/test/acceptance",
|
||||
"type": "shell",
|
||||
"command": "${workspaceFolder}/node_modules/.bin/bazel",
|
||||
"args": [
|
||||
"test",
|
||||
"packages/core/test/acceptance",
|
||||
],
|
||||
"group": "test",
|
||||
"presentation": {
|
||||
"reveal": "always",
|
||||
"panel": "dedicated",
|
||||
},
|
||||
},
|
||||
{
|
||||
"label": "IVY:packages/core/test",
|
||||
"type": "shell",
|
||||
"command": "${workspaceFolder}/node_modules/.bin/bazel",
|
||||
"args": [
|
||||
"test",
|
||||
"--define=compile=aot",
|
||||
"packages/core/test",
|
||||
],
|
||||
"group": "test",
|
||||
"presentation": {
|
||||
"reveal": "always",
|
||||
"panel": "dedicated",
|
||||
},
|
||||
},
|
||||
{
|
||||
"label": "VE:packages/core/test",
|
||||
"type": "shell",
|
||||
"command": "${workspaceFolder}/node_modules/.bin/bazel",
|
||||
"args": [
|
||||
"test",
|
||||
"packages/core/test",
|
||||
],
|
||||
"group": "test",
|
||||
"presentation": {
|
||||
"reveal": "always",
|
||||
"panel": "dedicated",
|
||||
},
|
||||
},
|
||||
{
|
||||
"label": "IVY:packages/core/test/render3",
|
||||
"type": "shell",
|
||||
"command": "${workspaceFolder}/node_modules/.bin/bazel",
|
||||
"args": [
|
||||
"test",
|
||||
"--define=compile=aot",
|
||||
"packages/core/test/render3",
|
||||
],
|
||||
"group": "test",
|
||||
"presentation": {
|
||||
"reveal": "always",
|
||||
"panel": "dedicated",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
@ -19,9 +19,9 @@ filegroup(
|
||||
# do not sort
|
||||
srcs = [
|
||||
"@npm//:node_modules/core-js/client/core.js",
|
||||
"//packages/zone.js/dist:zone.js",
|
||||
"//packages/zone.js/dist:zone-testing.js",
|
||||
"//packages/zone.js/dist:task-tracking.js",
|
||||
"@npm//:node_modules/zone.js/dist/zone.js",
|
||||
"@npm//:node_modules/zone.js/dist/zone-testing.js",
|
||||
"@npm//:node_modules/zone.js/dist/task-tracking.js",
|
||||
"//:test-events.js",
|
||||
"//:shims_for_IE.js",
|
||||
# Including systemjs because it defines `__eval`, which produces correct stack traces.
|
||||
|
943
CHANGELOG.md
943
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
@ -201,7 +201,7 @@ Must be one of the following:
|
||||
* **test**: Adding missing tests or correcting existing tests
|
||||
|
||||
### Scope
|
||||
The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages).
|
||||
The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.
|
||||
|
||||
The following is the list of supported scopes:
|
||||
|
||||
|
24
WORKSPACE
24
WORKSPACE
@ -21,12 +21,12 @@ http_archive(
|
||||
patch_args = ["-p1"],
|
||||
# Patch https://github.com/bazelbuild/rules_nodejs/pull/903
|
||||
patches = ["//tools:rollup_bundle_commonjs_ignoreGlobal.patch"],
|
||||
sha256 = "3d7296d834208792fa3b2ded8ec04e75068e3de172fae79db217615bd75a6ff7",
|
||||
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.39.1/rules_nodejs-0.39.1.tar.gz"],
|
||||
sha256 = "7c4a690268be97c96f04d505224ec4cb1ae53c2c2b68be495c9bd2634296a5cd",
|
||||
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.34.0/rules_nodejs-0.34.0.tar.gz"],
|
||||
)
|
||||
|
||||
# Check the bazel version and download npm dependencies
|
||||
load("@build_bazel_rules_nodejs//:index.bzl", "check_bazel_version", "check_rules_nodejs_version", "node_repositories", "yarn_install")
|
||||
load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "check_rules_nodejs_version", "node_repositories", "yarn_install")
|
||||
|
||||
# Bazel version must be at least the following version because:
|
||||
# - 0.26.0 managed_directories feature added which is required for nodejs rules 0.30.0
|
||||
@ -54,10 +54,7 @@ Try running `yarn bazel` instead.
|
||||
# - 0.32.1 remove override of @bazel/tsetse & exclude typescript lib declarations in node_module_library transitive_declarations
|
||||
# - 0.32.2 resolves bug in @bazel/hide-bazel-files postinstall step
|
||||
# - 0.34.0 introduces protractor rule
|
||||
# - 0.37.1 windows fixes
|
||||
# - 0.38.2 Adds NpmPackageInfo & JSNamedModuleInfo providers
|
||||
# - 0.38.3 all providers loaded from //:providers.bzl
|
||||
check_rules_nodejs_version(minimum_version_string = "0.38.3")
|
||||
check_rules_nodejs_version(minimum_version_string = "0.34.0")
|
||||
|
||||
# Setup the Node.js toolchain
|
||||
node_repositories(
|
||||
@ -104,21 +101,20 @@ load("@npm_bazel_protractor//:package.bzl", "npm_bazel_protractor_dependencies")
|
||||
npm_bazel_protractor_dependencies()
|
||||
|
||||
# Load karma dependencies
|
||||
load("@npm_bazel_karma//:package.bzl", "npm_bazel_karma_dependencies")
|
||||
load("@npm_bazel_karma//:package.bzl", "rules_karma_dependencies")
|
||||
|
||||
npm_bazel_karma_dependencies()
|
||||
rules_karma_dependencies()
|
||||
|
||||
# Setup the rules_webtesting toolchain
|
||||
load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
|
||||
|
||||
web_test_repositories()
|
||||
|
||||
load("@io_bazel_rules_webtesting//web/versioned:browsers-0.3.2.bzl", "browser_repositories")
|
||||
# Temporary work-around for https://github.com/angular/angular/issues/28681
|
||||
# TODO(gregmagolan): go back to @io_bazel_rules_webtesting browser_repositories
|
||||
load("//:browser_repositories.bzl", "browser_repositories")
|
||||
|
||||
browser_repositories(
|
||||
chromium = True,
|
||||
firefox = True,
|
||||
)
|
||||
browser_repositories()
|
||||
|
||||
# Setup the rules_typescript tooolchain
|
||||
load("@npm_bazel_typescript//:index.bzl", "ts_setup_workspace")
|
||||
|
@ -18,8 +18,8 @@ Here are the most important tasks you might need to use:
|
||||
|
||||
* `yarn build` - create a production build of the application (after installing dependencies, boilerplate, etc).
|
||||
* `yarn build-local` - same as `build`, but use `setup-local` instead of `setup`.
|
||||
* `yarn build-local-with-viewengine` - same as `build-local`, but in addition also turns on `ViewEngine` mode in aio.
|
||||
(Note: Docs examples run in `ViewEngine` mode by default. To turn on `ivy` mode in examples, see `yarn boilerplate:add` below.)
|
||||
* `yarn build-with-ivy` - same as `build-local`, but in addition also turns on `ivy` mode in aio.
|
||||
(Note: To turn on `ivy` mode in examples, see `yarn boilerplate:add` below.)
|
||||
|
||||
* `yarn start` - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary.
|
||||
* `yarn serve-and-sync` - run both the `docs-watch` and `start` in the same console.
|
||||
@ -34,18 +34,17 @@ Here are the most important tasks you might need to use:
|
||||
* `yarn docs-test` - run the unit tests for the doc generation code.
|
||||
|
||||
* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
|
||||
* `yarn boilerplate:add:ivy` - same as `boilerplate:add` but also turns on `ivy` mode.
|
||||
- Add the option `--local` to use your local version of Angular contained in the "dist" folder.
|
||||
- Add the option `--ivy` to turn on `ivy` mode.
|
||||
|
||||
* `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
|
||||
* `yarn generate-stackblitz` - generate the stackblitz files that are used by the `live-example` tags in the docs.
|
||||
* `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs.
|
||||
|
||||
* `yarn example-e2e` - run all e2e tests for examples. Available options:
|
||||
- `--setup`: generate boilerplate, force webdriver update & other setup, then run tests.
|
||||
- `--local`: run e2e tests with the local version of Angular contained in the "dist" folder.
|
||||
_Requires `--setup` in order to take effect._
|
||||
- `--ivy`: run e2e tests in `ivy` mode.
|
||||
- `--filter=foo`: limit e2e tests to those containing the word "foo".
|
||||
* `yarn example-e2e` - run all e2e tests for examples
|
||||
- `yarn example-e2e --setup` - force webdriver update & other setup, then run tests
|
||||
- `yarn example-e2e --filter=foo` - limit e2e tests to those containing the word "foo"
|
||||
- `yarn example-e2e --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
|
||||
|
||||
> **Note for Windows users**
|
||||
>
|
||||
|
@ -34,7 +34,7 @@
|
||||
"shelljs": "^0.8.2",
|
||||
"source-map-support": "^0.5.9",
|
||||
"tar-stream": "^1.6.1",
|
||||
"tslib": "^1.10.0"
|
||||
"tslib": "^1.9.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/body-parser": "^1.17.0",
|
||||
|
@ -2444,12 +2444,7 @@ touch@^3.1.0:
|
||||
dependencies:
|
||||
nopt "~1.0.10"
|
||||
|
||||
tslib@^1.10.0:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
|
||||
integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
|
||||
|
||||
tslib@^1.8.0, tslib@^1.8.1:
|
||||
tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.3:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
|
||||
|
||||
|
@ -59,13 +59,7 @@
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"budgets": [
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
]
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"fast": {
|
||||
|
@ -1,21 +0,0 @@
|
||||
'use strict'; // necessary for es6 output in node
|
||||
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
describe('Accessibility example e2e tests', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
browser.get('');
|
||||
});
|
||||
|
||||
it('should display Accessibility Example', function () {
|
||||
expect(element(by.css('h1')).getText()).toEqual('Accessibility Example');
|
||||
});
|
||||
|
||||
it('should take a number and change progressbar width', function () {
|
||||
element(by.css('input')).sendKeys('16');
|
||||
expect(element(by.css('input')).getAttribute('value')).toEqual('016');
|
||||
expect(element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px');
|
||||
});
|
||||
|
||||
});
|
@ -1,13 +0,0 @@
|
||||
<h1>Accessibility Example</h1>
|
||||
<!-- #docregion template -->
|
||||
<label>
|
||||
Enter an example progress value
|
||||
<input type="number" min="0" max="100"
|
||||
[value]="progress" (input)="progress = $event.target.value">
|
||||
</label>
|
||||
|
||||
<!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
|
||||
<app-example-progressbar [value]="progress" aria-label="Example of a progress bar">
|
||||
</app-example-progressbar>
|
||||
<!-- #enddocregion template -->
|
||||
|
@ -1,10 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: [ './app.component.css' ]
|
||||
})
|
||||
export class AppComponent {
|
||||
progress = 0;
|
||||
}
|
@ -1,12 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { ExampleProgressbarComponent } from './progress-bar.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
declarations: [ AppComponent, ExampleProgressbarComponent ],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
@ -1,12 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 25px;
|
||||
border: 1px solid black;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
background: blue;
|
||||
height: 100%;
|
||||
}
|
@ -1,28 +0,0 @@
|
||||
// #docregion progressbar-component
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
/**
|
||||
* Example progressbar component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-example-progressbar',
|
||||
template: `<div class="bar" [style.width.%]="value"></div>`,
|
||||
styleUrls: ['./progress-bar.component.css'],
|
||||
host: {
|
||||
// Sets the role for this component to "progressbar"
|
||||
role: 'progressbar',
|
||||
|
||||
// Sets the minimum and maximum values for the progressbar role.
|
||||
'aria-valuemin': '0',
|
||||
'aria-valuemax': '100',
|
||||
|
||||
// Binding that updates the current value of the progressbar.
|
||||
'[attr.aria-valuenow]': 'value',
|
||||
}
|
||||
})
|
||||
export class ExampleProgressbarComponent {
|
||||
/** Current value of the progressbar. */
|
||||
@Input() value = 0;
|
||||
}
|
||||
|
||||
// #enddocregion progressbar-component
|
@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Accessibility Example</title>
|
||||
<base href="/">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root>Loading...</app-root>
|
||||
</body>
|
||||
</html>
|
@ -1,11 +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);
|
@ -1,10 +0,0 @@
|
||||
{
|
||||
"description": "Accessibility",
|
||||
"files": [
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.[1,2].*"
|
||||
],
|
||||
"file": "src/app/app.component.ts",
|
||||
"tags": ["Accessibility"]
|
||||
}
|
@ -36,6 +36,9 @@ import { transAnimation } from './animations';
|
||||
})
|
||||
])
|
||||
])
|
||||
// #docregion runtime
|
||||
],
|
||||
// #enddocregion runtime
|
||||
// #enddocregion reusable
|
||||
templateUrl: 'open-close.component.html',
|
||||
styleUrls: ['open-close.component.css']
|
||||
|
@ -8,7 +8,7 @@ import { Component, ViewChild, ElementRef } from '@angular/core';
|
||||
})
|
||||
export class AppComponent {
|
||||
|
||||
@ViewChild('bindingInput') bindingInput: ElementRef;
|
||||
@ViewChild('bindingInput', { static: false }) bindingInput: ElementRef;
|
||||
|
||||
isUnchanged = true;
|
||||
|
||||
|
@ -39,7 +39,7 @@ export class CountdownLocalVarParentComponent { }
|
||||
})
|
||||
export class CountdownViewChildParentComponent implements AfterViewInit {
|
||||
|
||||
@ViewChild(CountdownTimerComponent)
|
||||
@ViewChild(CountdownTimerComponent, {static: false})
|
||||
private timerComponent: CountdownTimerComponent;
|
||||
|
||||
seconds() { return 0; }
|
||||
|
@ -28,9 +28,9 @@ describe('HeroesService', () => {
|
||||
|
||||
// Inject the http, test controller, and service-under-test
|
||||
// as they will be referenced by each test.
|
||||
httpClient = TestBed.inject(HttpClient);
|
||||
httpTestingController = TestBed.inject(HttpTestingController);
|
||||
heroService = TestBed.inject(HeroesService);
|
||||
httpClient = TestBed.get(HttpClient);
|
||||
httpTestingController = TestBed.get(HttpTestingController);
|
||||
heroService = TestBed.get(HeroesService);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
@ -44,7 +44,7 @@ describe('HeroesService', () => {
|
||||
let expectedHeroes: Hero[];
|
||||
|
||||
beforeEach(() => {
|
||||
heroService = TestBed.inject(HeroesService);
|
||||
heroService = TestBed.get(HeroesService);
|
||||
expectedHeroes = [
|
||||
{ id: 1, name: 'A' },
|
||||
{ id: 2, name: 'B' },
|
||||
|
@ -27,8 +27,8 @@ describe('HttpClient testing', () => {
|
||||
});
|
||||
|
||||
// Inject the http service and test controller for each test
|
||||
httpClient = TestBed.inject(HttpClient);
|
||||
httpTestingController = TestBed.inject(HttpTestingController);
|
||||
httpClient = TestBed.get(HttpClient);
|
||||
httpTestingController = TestBed.get(HttpTestingController);
|
||||
});
|
||||
// #enddocregion setup
|
||||
// #docregion afterEach
|
||||
|
@ -18,26 +18,26 @@ describe('providers App', () => {
|
||||
expect(page.getTitleText()).toEqual('Lazy loading feature modules');
|
||||
});
|
||||
|
||||
describe('Customers', function() {
|
||||
describe('Customers list', function() {
|
||||
beforeEach(function() {
|
||||
customersButton.click();
|
||||
});
|
||||
|
||||
it('should show customers when the button is clicked', function() {
|
||||
let customersMessage = element(by.css('app-customers > p'));
|
||||
expect(customersMessage.getText()).toBe('customers works!');
|
||||
it('should show customers list when the button is clicked', function() {
|
||||
let customersMessage = element(by.css('app-customer-list > p'));
|
||||
expect(customersMessage.getText()).toBe('customer-list works!');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('Orders', function() {
|
||||
describe('Orders list', function() {
|
||||
beforeEach(function() {
|
||||
ordersButton.click();
|
||||
});
|
||||
|
||||
it('should show orders when the button is clicked', function() {
|
||||
let ordersMessage = element(by.css('app-orders > p'));
|
||||
expect(ordersMessage.getText()).toBe('orders works!');
|
||||
it('should show orders list when the button is clicked', function() {
|
||||
let ordersMessage = element(by.css('app-order-list > p'));
|
||||
expect(ordersMessage.getText()).toBe('order-list works!');
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -21,16 +21,16 @@ describe('AppComponent', () => {
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
|
||||
it(`should have as title 'customer-app'`, async(() => {
|
||||
it(`should have as title 'app works!'`, async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('customer-app');
|
||||
expect(app.title).toEqual('app works!');
|
||||
}));
|
||||
|
||||
it('should render title in a h1 tag', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('customer-app');
|
||||
expect(compiled.querySelector('h1').textContent).toContain('app works!');
|
||||
}));
|
||||
});
|
||||
|
@ -0,0 +1,3 @@
|
||||
<p>
|
||||
customer-list works!
|
||||
</p>
|
@ -1,20 +1,20 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CustomersComponent } from './customers.component';
|
||||
import { CustomerListComponent } from './customer-list.component';
|
||||
|
||||
describe('CustomerListComponent', () => {
|
||||
let component: CustomersComponent;
|
||||
let fixture: ComponentFixture<CustomersComponent>;
|
||||
let component: CustomerListComponent;
|
||||
let fixture: ComponentFixture<CustomerListComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CustomersComponent ]
|
||||
declarations: [ CustomerListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CustomersComponent);
|
||||
fixture = TestBed.createComponent(CustomerListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-customer-list',
|
||||
templateUrl: './customer-list.component.html',
|
||||
styleUrls: ['./customer-list.component.css']
|
||||
})
|
||||
export class CustomerListComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
@ -3,13 +3,13 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { CustomersComponent } from './customers.component';
|
||||
import { CustomerListComponent } from './customer-list/customer-list.component';
|
||||
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: CustomersComponent
|
||||
component: CustomerListComponent
|
||||
}
|
||||
];
|
||||
|
||||
|
@ -1,3 +0,0 @@
|
||||
<p>
|
||||
customers works!
|
||||
</p>
|
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-customers',
|
||||
templateUrl: './customers.component.html',
|
||||
styleUrls: ['./customers.component.css']
|
||||
})
|
||||
export class CustomersComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
@ -3,14 +3,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CustomersRoutingModule } from './customers-routing.module';
|
||||
import { CustomersComponent } from './customers.component';
|
||||
import { CustomerListComponent } from './customer-list/customer-list.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
CustomersRoutingModule
|
||||
],
|
||||
declarations: [CustomersComponent]
|
||||
declarations: [CustomerListComponent]
|
||||
})
|
||||
export class CustomersModule { }
|
||||
// #enddocregion customers-module
|
||||
|
@ -0,0 +1,3 @@
|
||||
<p>
|
||||
order-list works!
|
||||
</p>
|
@ -1,20 +1,20 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { OrdersComponent } from './orders.component';
|
||||
import { OrderListComponent } from './order-list.component';
|
||||
|
||||
describe('OrderListComponent', () => {
|
||||
let component: OrdersComponent;
|
||||
let fixture: ComponentFixture<OrdersComponent>;
|
||||
let component: OrderListComponent;
|
||||
let fixture: ComponentFixture<OrderListComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ OrdersComponent ]
|
||||
declarations: [ OrderListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(OrdersComponent);
|
||||
fixture = TestBed.createComponent(OrderListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-order-list',
|
||||
templateUrl: './order-list.component.html',
|
||||
styleUrls: ['./order-list.component.css']
|
||||
})
|
||||
export class OrderListComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
@ -4,12 +4,12 @@ import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
// #docregion orders-routing-module-detail
|
||||
import { OrdersComponent } from './orders.component';
|
||||
import { OrderListComponent } from './order-list/order-list.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: OrdersComponent
|
||||
component: OrderListComponent
|
||||
}
|
||||
];
|
||||
// #enddocregion orders-routing-module-detail
|
||||
|
@ -1,3 +0,0 @@
|
||||
<p>
|
||||
orders works!
|
||||
</p>
|
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-orders',
|
||||
templateUrl: './orders.component.html',
|
||||
styleUrls: ['./orders.component.css']
|
||||
})
|
||||
export class OrdersComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
@ -2,13 +2,13 @@ import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { OrdersRoutingModule } from './orders-routing.module';
|
||||
import { OrdersComponent } from './orders.component';
|
||||
import { OrderListComponent } from './order-list/order-list.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
OrdersRoutingModule
|
||||
],
|
||||
declarations: [OrdersComponent]
|
||||
declarations: [OrderListComponent]
|
||||
})
|
||||
export class OrdersModule { }
|
||||
|
@ -34,7 +34,7 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
|
||||
comment = '';
|
||||
|
||||
// Query for a CONTENT child of type `ChildComponent`
|
||||
@ContentChild(ChildComponent) contentChild: ChildComponent;
|
||||
@ContentChild(ChildComponent, {static: false}) contentChild: ChildComponent;
|
||||
|
||||
// #enddocregion hooks
|
||||
constructor(private logger: LoggerService) {
|
||||
|
@ -35,7 +35,7 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
|
||||
private prevHero = '';
|
||||
|
||||
// Query for a VIEW child of type `ChildViewComponent`
|
||||
@ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
|
||||
@ViewChild(ChildViewComponent, {static: false}) viewChild: ChildViewComponent;
|
||||
|
||||
// #enddocregion hooks
|
||||
constructor(private logger: LoggerService) {
|
||||
|
@ -81,7 +81,7 @@ export class DoCheckParentComponent {
|
||||
hero: Hero;
|
||||
power: string;
|
||||
title = 'DoCheck';
|
||||
@ViewChild(DoCheckComponent) childView: DoCheckComponent;
|
||||
@ViewChild(DoCheckComponent, {static: false}) childView: DoCheckComponent;
|
||||
|
||||
constructor() { this.reset(); }
|
||||
|
||||
|
@ -55,7 +55,7 @@ export class OnChangesParentComponent {
|
||||
hero: Hero;
|
||||
power: string;
|
||||
title = 'OnChanges';
|
||||
@ViewChild(OnChangesComponent) childView: OnChangesComponent;
|
||||
@ViewChild(OnChangesComponent, {static: false}) childView: OnChangesComponent;
|
||||
|
||||
constructor() {
|
||||
this.reset();
|
||||
|
@ -13,19 +13,3 @@ export class AppComponent {
|
||||
constructor(public flower: FlowerService, public animal: AnimalService) {}
|
||||
}
|
||||
// #enddocregion inject-animal-service
|
||||
|
||||
// When using @Host() together with @SkipSelf() in
|
||||
// child.component.ts for the AnimalService, add the
|
||||
// following viewProviders array to the @Component metadata:
|
||||
|
||||
// viewProviders: [{ provide: AnimalService, useValue: { emoji: '🦔' } }]
|
||||
|
||||
// So, the entire @ChildComponent() decorator and its
|
||||
// metadata should be as follows:
|
||||
|
||||
// @Component({
|
||||
// selector: 'app-root',
|
||||
// templateUrl: './app.component.html',
|
||||
// styleUrls: [ './app.component.css' ],
|
||||
// viewProviders: [{ provide: AnimalService, useValue: { emoji: '🦔' } }]
|
||||
// })
|
||||
|
@ -6,7 +6,7 @@ describe('MyLibService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: MyLibService = TestBed.inject(MyLibService);
|
||||
const service: MyLibService = TestBed.get(MyLibService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
@ -8,7 +8,7 @@ import { NgForm } from '@angular/forms';
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
@ViewChild('itemForm') form: NgForm;
|
||||
@ViewChild('itemForm', { static: false }) form: NgForm;
|
||||
|
||||
private _submitMessage = '';
|
||||
|
||||
|
@ -13,7 +13,7 @@ import { Hero } from './hero';
|
||||
})
|
||||
export class HeroFormComponent {
|
||||
@Input() hero: Hero;
|
||||
@ViewChild('heroForm') form: NgForm;
|
||||
@ViewChild('heroForm', {static: false}) form: NgForm;
|
||||
|
||||
// tslint:disable-next-line:variable-name
|
||||
private _submitMessage = '';
|
||||
|
@ -103,7 +103,7 @@ xdescribe('AppComponent & Lazy Loading (not working yet)', () => {
|
||||
|
||||
beforeEach(fakeAsync(() => {
|
||||
createComponent();
|
||||
loader = TestBed.inject(NgModuleFactoryLoader);
|
||||
loader = TestBed.get(NgModuleFactoryLoader);
|
||||
loader.stubbedModules = { expected: HeroModule };
|
||||
router.resetConfig([{path: 'heroes', loadChildren: 'expected'}]);
|
||||
}));
|
||||
|
@ -46,21 +46,21 @@ describe('demo (with TestBed):', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({ providers: [ValueService] });
|
||||
// #enddocregion value-service-before-each
|
||||
service = TestBed.inject(ValueService);
|
||||
service = TestBed.get(ValueService);
|
||||
// #docregion value-service-before-each
|
||||
});
|
||||
// #enddocregion value-service-before-each, value-service-inject-before-each
|
||||
|
||||
// #docregion value-service-inject-it
|
||||
it('should use ValueService', () => {
|
||||
service = TestBed.inject(ValueService);
|
||||
service = TestBed.get(ValueService);
|
||||
expect(service.getValue()).toBe('real value');
|
||||
});
|
||||
// #enddocregion value-service-inject-it
|
||||
|
||||
it('can inject a default value when service is not provided', () => {
|
||||
// #docregion testbed-get-w-null
|
||||
service = TestBed.inject(NotProvided, null); // service is null
|
||||
service = TestBed.get(NotProvided, null); // service is null
|
||||
// #enddocregion testbed-get-w-null
|
||||
});
|
||||
|
||||
@ -109,8 +109,8 @@ describe('demo (with TestBed):', () => {
|
||||
]
|
||||
});
|
||||
// Inject both the service-to-test and its (spy) dependency
|
||||
masterService = TestBed.inject(MasterService);
|
||||
valueServiceSpy = TestBed.inject(ValueService);
|
||||
masterService = TestBed.get(MasterService);
|
||||
valueServiceSpy = TestBed.get(ValueService);
|
||||
});
|
||||
// #enddocregion master-service-before-each
|
||||
|
||||
|
@ -206,7 +206,6 @@ function heroModuleSetup() {
|
||||
nameInput.value = 'quick BROWN fOx';
|
||||
|
||||
// dispatch a DOM event so that Angular learns of input value change.
|
||||
// use newEvent utility function (not provided by Angular) for better browser compatibility
|
||||
nameInput.dispatchEvent(newEvent('input'));
|
||||
|
||||
// Tell Angular to update the display binding through the title pipe
|
||||
|
@ -15,7 +15,7 @@ export class HeroDetailService {
|
||||
// Returns a clone which caller may modify safely
|
||||
getHero(id: number | string): Observable<Hero> {
|
||||
if (typeof id === 'string') {
|
||||
id = parseInt(id, 10);
|
||||
id = parseInt(id as string, 10);
|
||||
}
|
||||
return this.heroService.getHero(id).pipe(
|
||||
map(hero => {
|
||||
|
@ -65,9 +65,9 @@ describe('HeroesService (with mocks)', () => {
|
||||
|
||||
// Inject the http, test controller, and service-under-test
|
||||
// as they will be referenced by each test.
|
||||
httpClient = TestBed.inject(HttpClient);
|
||||
httpTestingController = TestBed.inject(HttpTestingController);
|
||||
heroService = TestBed.inject(HeroService);
|
||||
httpClient = TestBed.get(HttpClient);
|
||||
httpTestingController = TestBed.get(HttpTestingController);
|
||||
heroService = TestBed.get(HeroService);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
@ -80,7 +80,7 @@ describe('HeroesService (with mocks)', () => {
|
||||
let expectedHeroes: Hero[];
|
||||
|
||||
beforeEach(() => {
|
||||
heroService = TestBed.inject(HeroService);
|
||||
heroService = TestBed.get(HeroService);
|
||||
expectedHeroes = [
|
||||
{ id: 1, name: 'A' },
|
||||
{ id: 2, name: 'B' },
|
||||
|
@ -18,7 +18,7 @@ export class HeroService {
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
/** GET heroes from the server */
|
||||
getHeroes(): Observable<Hero[]> {
|
||||
getHeroes (): Observable<Hero[]> {
|
||||
return this.http.get<Hero[]>(this.heroesUrl)
|
||||
.pipe(
|
||||
tap(heroes => this.log(`fetched heroes`)),
|
||||
@ -29,7 +29,7 @@ export class HeroService {
|
||||
/** GET hero by id. Return `undefined` when id not found */
|
||||
getHero<Data>(id: number | string): Observable<Hero> {
|
||||
if (typeof id === 'string') {
|
||||
id = parseInt(id, 10);
|
||||
id = parseInt(id as string, 10);
|
||||
}
|
||||
const url = `${this.heroesUrl}/?id=${id}`;
|
||||
return this.http.get<Hero[]>(url)
|
||||
@ -46,14 +46,14 @@ export class HeroService {
|
||||
//////// Save methods //////////
|
||||
|
||||
/** POST: add a new hero to the server */
|
||||
addHero(hero: Hero): Observable<Hero> {
|
||||
addHero (hero: Hero): Observable<Hero> {
|
||||
return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
|
||||
tap((addedHero) => this.log(`added hero w/ id=${addedHero.id}`)),
|
||||
tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
|
||||
catchError(this.handleError<Hero>('addHero'))
|
||||
);
|
||||
}
|
||||
/** DELETE: delete the hero from the server */
|
||||
deleteHero(hero: Hero | number): Observable<Hero> {
|
||||
deleteHero (hero: Hero | number): Observable<Hero> {
|
||||
const id = typeof hero === 'number' ? hero : hero.id;
|
||||
const url = `${this.heroesUrl}/${id}`;
|
||||
|
||||
@ -64,7 +64,7 @@ export class HeroService {
|
||||
}
|
||||
|
||||
/** PUT: update the hero on the server */
|
||||
updateHero(hero: Hero): Observable<any> {
|
||||
updateHero (hero: Hero): Observable<any> {
|
||||
return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
|
||||
tap(_ => this.log(`updated hero id=${hero.id}`)),
|
||||
catchError(this.handleError<any>('updateHero'))
|
||||
@ -75,7 +75,7 @@ export class HeroService {
|
||||
* This error handler lets the app continue to run as if no error occurred.
|
||||
* @param operation - name of the operation that failed
|
||||
*/
|
||||
private handleError<T>(operation = 'operation') {
|
||||
private handleError<T> (operation = 'operation') {
|
||||
return (error: HttpErrorResponse): Observable<T> => {
|
||||
|
||||
// TODO: send the error to remote logging infrastructure
|
||||
|
@ -27,8 +27,8 @@ describe('HttpClient testing', () => {
|
||||
});
|
||||
|
||||
// Inject the http service and test controller for each test
|
||||
httpClient = TestBed.inject(HttpClient);
|
||||
httpTestingController = TestBed.inject(HttpTestingController);
|
||||
httpClient = TestBed.get(HttpClient);
|
||||
httpTestingController = TestBed.get(HttpTestingController);
|
||||
});
|
||||
// #enddocregion setup
|
||||
// #docregion afterEach
|
||||
|
@ -42,9 +42,9 @@ export class TestHeroService extends HeroService {
|
||||
|
||||
getHero(id: number | string): Observable<Hero> {
|
||||
if (typeof id === 'string') {
|
||||
id = parseInt(id, 10);
|
||||
id = parseInt(id as string, 10);
|
||||
}
|
||||
const hero = this.heroes.find(h => h.id === id);
|
||||
let hero = this.heroes.find(h => h.id === id);
|
||||
return this.lastResult = asyncData(hero);
|
||||
}
|
||||
|
||||
|
@ -6,7 +6,7 @@ import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
|
||||
})
|
||||
export class CanvasComponent implements AfterViewInit {
|
||||
blobSize: number;
|
||||
@ViewChild('sampleCanvas') sampleCanvas: ElementRef;
|
||||
@ViewChild('sampleCanvas', {static: false}) sampleCanvas: ElementRef;
|
||||
|
||||
constructor() { }
|
||||
|
||||
|
@ -25,8 +25,8 @@ describe('WelcomeComponent (class only)', () => {
|
||||
]
|
||||
});
|
||||
// inject both the component and the dependent service.
|
||||
comp = TestBed.inject(WelcomeComponent);
|
||||
userService = TestBed.inject(UserService);
|
||||
comp = TestBed.get(WelcomeComponent);
|
||||
userService = TestBed.get(UserService);
|
||||
});
|
||||
// #enddocregion class-only-before-each
|
||||
|
||||
@ -93,7 +93,7 @@ describe('WelcomeComponent', () => {
|
||||
// #docregion setup
|
||||
// #docregion inject-from-testbed
|
||||
// UserService from the root injector
|
||||
userService = TestBed.inject(UserService);
|
||||
userService = TestBed.get(UserService);
|
||||
// #enddocregion inject-from-testbed
|
||||
|
||||
// get the "welcome" element by CSS selector (e.g., by class name)
|
||||
|
@ -24,6 +24,6 @@ export class ActivatedRouteStub {
|
||||
/** Set the paramMap observables's next value */
|
||||
setParamMap(params?: Params) {
|
||||
this.subject.next(convertToParamMap(params));
|
||||
}
|
||||
};
|
||||
}
|
||||
// #enddocregion activated-route-stub
|
||||
|
@ -1,66 +1,61 @@
|
||||
// These are important and needed before anything else
|
||||
import 'zone.js/dist/zone-node';
|
||||
import 'reflect-metadata';
|
||||
|
||||
import { enableProdMode } from '@angular/core';
|
||||
|
||||
import { ngExpressEngine } from '@nguniversal/express-engine';
|
||||
import * as express from 'express';
|
||||
import { join } from 'path';
|
||||
|
||||
import { AppServerModule } from './src/main.server';
|
||||
import { APP_BASE_HREF } from '@angular/common';
|
||||
// Faster server renders w/ Prod mode (dev mode never needed)
|
||||
enableProdMode();
|
||||
|
||||
// The Express app is exported so that it can be used by serverless Functions.
|
||||
export function app() {
|
||||
const server = express();
|
||||
const distFolder = join(process.cwd(), 'dist/express-engine-ivy/browser');
|
||||
// Express server
|
||||
const app = express();
|
||||
|
||||
// #docregion ngExpressEngine
|
||||
server.engine('html', ngExpressEngine({
|
||||
bootstrap: AppServerModule,
|
||||
}));
|
||||
// #enddocregion ngExpressEngine
|
||||
server.set('view engine', 'html');
|
||||
server.set('views', distFolder);
|
||||
const PORT = process.env.PORT || 4000;
|
||||
const DIST_FOLDER = join(process.cwd(), 'dist');
|
||||
|
||||
// #docregion data-request
|
||||
// TODO: implement data requests securely
|
||||
server.get('/api/*', (req, res) => {
|
||||
res.status(404).send('data requests are not supported');
|
||||
});
|
||||
// #enddocregion data-request
|
||||
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
|
||||
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
|
||||
|
||||
// #docregion static
|
||||
// Serve static files from /browser
|
||||
server.get('*.*', express.static(distFolder, {
|
||||
maxAge: '1y'
|
||||
}));
|
||||
// #enddocregion static
|
||||
// Express Engine
|
||||
import { ngExpressEngine } from '@nguniversal/express-engine';
|
||||
// Import module map for lazy loading
|
||||
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
|
||||
|
||||
// #docregion navigation-request
|
||||
// All regular routes use the Universal engine
|
||||
server.get('*', (req, res) => {
|
||||
res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
|
||||
});
|
||||
// #enddocregion navigation-request
|
||||
// #docregion ngExpressEngine
|
||||
app.engine('html', ngExpressEngine({
|
||||
bootstrap: AppServerModuleNgFactory,
|
||||
providers: [
|
||||
provideModuleMap(LAZY_MODULE_MAP)
|
||||
]
|
||||
}));
|
||||
// #enddocregion ngExpressEngine
|
||||
|
||||
return server;
|
||||
}
|
||||
app.set('view engine', 'html');
|
||||
app.set('views', join(DIST_FOLDER, 'browser'));
|
||||
|
||||
function run() {
|
||||
const port = process.env.PORT || 4000;
|
||||
// #docregion data-request
|
||||
// TODO: implement data requests securely
|
||||
app.get('/api/*', (req, res) => {
|
||||
res.status(404).send('data requests are not supported');
|
||||
});
|
||||
// #enddocregion data-request
|
||||
|
||||
// Start up the Node server
|
||||
const server = app();
|
||||
server.listen(port, () => {
|
||||
console.log(`Node Express server listening on http://localhost:${port}`);
|
||||
});
|
||||
}
|
||||
// #docregion static
|
||||
// Server static files from /browser
|
||||
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
|
||||
// #enddocregion static
|
||||
|
||||
// Webpack will replace 'require' with '__webpack_require__'
|
||||
// '__non_webpack_require__' is a proxy to Node 'require'
|
||||
// The below code is to ensure that the server is run only when not requiring the bundle.
|
||||
declare const __non_webpack_require__: NodeRequire;
|
||||
const mainModule = __non_webpack_require__.main;
|
||||
if (mainModule && mainModule.filename === __filename) {
|
||||
run();
|
||||
}
|
||||
// #docregion navigation-request
|
||||
// All regular routes use the Universal engine
|
||||
app.get('*', (req, res) => {
|
||||
res.render('index', { req });
|
||||
});
|
||||
// #enddocregion navigation-request
|
||||
|
||||
export * from './src/main.server';
|
||||
// Start up the Node server
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Node server listening on http://localhost:${PORT}`);
|
||||
});
|
||||
|
@ -1,10 +1 @@
|
||||
import { enableProdMode } from '@angular/core';
|
||||
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
export { AppServerModule } from './app/app.server.module';
|
||||
export { renderModule, renderModuleFactory } from '@angular/platform-server';
|
||||
|
@ -1,15 +1,16 @@
|
||||
{
|
||||
"extends": "./tsconfig.app.json",
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app-server",
|
||||
"outDir": "../out-tsc/app",
|
||||
"baseUrl": "./",
|
||||
"module": "commonjs",
|
||||
"types": ["node"]
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.server.ts",
|
||||
"server.ts"
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
],
|
||||
"angularCompilerOptions": {
|
||||
"entryModule": "./src/app/app.server.module#AppServerModule"
|
||||
"entryModule": "src/app/app.server.module#AppServerModule"
|
||||
}
|
||||
}
|
||||
|
@ -6,10 +6,7 @@
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es2015",
|
||||
"dom"
|
||||
],
|
||||
"lib": [ "es2015", "dom" ],
|
||||
"noImplicitAny": true,
|
||||
"skipLibCheck": true,
|
||||
"suppressImplicitAnyIndexErrors": true
|
||||
@ -19,8 +16,5 @@
|
||||
"node_modules/*",
|
||||
"**/*-aot.ts",
|
||||
"aot/**/*"
|
||||
],
|
||||
"angularCompilerOptions": {
|
||||
"enableIvy": false
|
||||
}
|
||||
]
|
||||
}
|
@ -19,7 +19,6 @@
|
||||
],
|
||||
|
||||
"angularCompilerOptions": {
|
||||
"skipMetadataEmit" : true,
|
||||
"enableIvy": false,
|
||||
"skipMetadataEmit" : true
|
||||
}
|
||||
}
|
||||
|
@ -6,10 +6,7 @@
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es2015",
|
||||
"dom"
|
||||
],
|
||||
"lib": [ "es2015", "dom" ],
|
||||
"noImplicitAny": true,
|
||||
"skipLibCheck": true,
|
||||
"suppressImplicitAnyIndexErrors": true
|
||||
@ -18,8 +15,5 @@
|
||||
"exclude": [
|
||||
"node_modules/*",
|
||||
"**/*-aot.ts"
|
||||
],
|
||||
"angularCompilerOptions": {
|
||||
"enableIvy": false
|
||||
}
|
||||
]
|
||||
}
|
@ -6,10 +6,7 @@
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es2015",
|
||||
"dom"
|
||||
],
|
||||
"lib": [ "es2015", "dom" ],
|
||||
"noImplicitAny": true,
|
||||
"skipLibCheck": true,
|
||||
"suppressImplicitAnyIndexErrors": true
|
||||
@ -18,8 +15,5 @@
|
||||
"exclude": [
|
||||
"node_modules/*",
|
||||
"**/*-aot.ts"
|
||||
],
|
||||
"angularCompilerOptions": {
|
||||
"enableIvy": false
|
||||
}
|
||||
]
|
||||
}
|
@ -28,7 +28,7 @@ export class KeyUpComponent_v1 {
|
||||
// #docregion key-up-component-1-class
|
||||
|
||||
onKey(event: KeyboardEvent) { // with type info
|
||||
this.values += (event.target as HTMLInputElement).value + ' | ';
|
||||
this.values += (<HTMLInputElement>event.target).value + ' | ';
|
||||
}
|
||||
// #docregion key-up-component-1-class-no-type
|
||||
}
|
||||
|
@ -13,8 +13,5 @@
|
||||
"node_modules/@types"
|
||||
]
|
||||
},
|
||||
"compileOnSave": true,
|
||||
"angularCompilerOptions": {
|
||||
"enableIvy": false
|
||||
}
|
||||
"compileOnSave": true
|
||||
}
|
@ -84,15 +84,48 @@ The following example shows how to make a simple progress bar accessible by usin
|
||||
|
||||
* The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes. The ARIA attribute `aria-valuenow` is bound to the user's input.
|
||||
|
||||
<code-example path="accessibility/src/app/progress-bar.component.ts" header="src/app/progress-bar.component.ts" region="progressbar-component"></code-example>
|
||||
```ts
|
||||
import { Component, Input } from '@angular/core';
|
||||
/**
|
||||
* Example progressbar component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'example-progressbar',
|
||||
template: `<div class="bar" [style.width.%]="value"></div>`,
|
||||
styleUrls: ['./progress-bar.css'],
|
||||
host: {
|
||||
// Sets the role for this component to "progressbar"
|
||||
role: 'progressbar',
|
||||
|
||||
// Sets the minimum and maximum values for the progressbar role.
|
||||
'aria-valuemin': '0',
|
||||
'aria-valuemax': '100',
|
||||
|
||||
// Binding that updates the current value of the progressbar.
|
||||
'[attr.aria-valuenow]': 'value',
|
||||
}
|
||||
})
|
||||
export class ExampleProgressbar {
|
||||
/** Current value of the progressbar. */
|
||||
@Input() value: number = 0;
|
||||
}
|
||||
```
|
||||
|
||||
* In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
|
||||
|
||||
<code-example path="accessibility/src/app/app.component.html" header="src/app/app.component.html" region="template"></code-example>
|
||||
```html
|
||||
<label>
|
||||
Enter an example progress value
|
||||
<input type="number" min="0" max="100"
|
||||
[value]="progress" (input)="progress = $event.target.value">
|
||||
</label>
|
||||
|
||||
<!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
|
||||
<example-progressbar [value]="progress" aria-label="Example of a progress bar">
|
||||
</example-progressbar>
|
||||
```
|
||||
|
||||
To see the progress bar in a working example app, refer to the <live-example></live-example>.
|
||||
[See the full example in StackBlitz](https://stackblitz.com/edit/angular-kn5jdi?file=src%2Fapp%2Fapp.component.html).
|
||||
|
||||
## Routing and focus management
|
||||
|
||||
|
@ -1148,7 +1148,9 @@ The Angular code is shown using TypeScript.
|
||||
<code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="class"></code-example>
|
||||
|
||||
|
||||
In Angular, you create a component class to contain the data model and control methods. Use the TypeScript <code>export</code> keyword to export the class so that the functionality can be imported into NgModules.
|
||||
In Angular, you create a component class.
|
||||
|
||||
NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class.
|
||||
|
||||
For more information, see the [Components](guide/architecture#components)
|
||||
section of the [Architecture Overview](guide/architecture) page.
|
||||
|
@ -44,7 +44,7 @@ For example:
|
||||
}
|
||||
```
|
||||
|
||||
For more information, see the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
|
||||
For more informaton, see the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
|
||||
|
||||
## Template options
|
||||
|
||||
@ -77,20 +77,12 @@ When `false`, disables this rewriting, requiring the rewriting to be done manual
|
||||
|
||||
When `true`, the compiler does not check the TypeScript version and does not report an error when an unsupported version of TypeScript is used. Not recommended, as unsupported versions of TypeScript might have undefined behavior. Default is false.
|
||||
|
||||
### `enableIvy`
|
||||
|
||||
Enables the [Ivy](guide/ivy) compilation and rendering pipeline. Default is `true`, as of version 9. In version 9, you can [opt out of Ivy](guide/ivy#opting-out-of-angular-ivy) to continue using the previous compiler, View Engine.
|
||||
|
||||
For library projects generated with the CLI, the `prod` configuration default is false in version 9.
|
||||
|
||||
### `enableResourceInlining`
|
||||
|
||||
When true, replaces the `templateUrl` and `styleUrls` property in all `@Component` decorators with inlined contents in `template` and `styles` properties.
|
||||
|
||||
When enabled, the `.js` output of `ngc` does not include any lazy-loaded template or style URLs.
|
||||
|
||||
For library projects generated with the CLI, the dev configuration default is true.
|
||||
|
||||
|
||||
{@a enablelegacytemplate}
|
||||
|
||||
@ -126,9 +118,9 @@ would be `"index.d.ts"`.
|
||||
|
||||
### `fullTemplateTypeCheck`
|
||||
|
||||
When true (recommended), enables the [binding expression validation](guide/aot-compiler#binding-expression-validation) phase of the template compiler, which uses TypeScript to validate binding expressions. For more information, see [Template type checking](guide/template-typecheck).
|
||||
When true (recommended), enables the [binding expression validation](guide/aot-compiler#binding-expression-validation) phase of the template compiler, which uses TypeScript to validate binding expressions.
|
||||
|
||||
Default is false, but when you use the CLI command `ng new`, it is set to true by default in the generated project's configuration.
|
||||
Default is currently false.
|
||||
|
||||
### `generateCodeForLibraries`
|
||||
|
||||
@ -162,8 +154,6 @@ When true, does not emit `.ngfactory.js` and `.ngstyle.js` files. This turns off
|
||||
|
||||
Can be used to instruct the template compiler to produce `.metadata.json` files for distribution with an `npm` package while avoiding the production of `.ngfactory.js` and `.ngstyle.js` files that cannot be distributed to `npm`.
|
||||
|
||||
For library projects generated with the CLI, the dev configuration default is true.
|
||||
|
||||
### `strictMetadataEmit`
|
||||
|
||||
When true, reports an error to the `.metadata.json` file if `"skipMetadataEmit"` is `false`.
|
||||
@ -180,21 +170,10 @@ If the client of a library intends to use a symbol in an annotation, the templat
|
||||
This option allows detection of these errors during the build phase of
|
||||
the library and is used, for example, in producing Angular libraries themselves.
|
||||
|
||||
For library projects generated with the CLI, the dev configuration default is true.
|
||||
|
||||
### `strictInjectionParameters`
|
||||
|
||||
When true (recommended), reports an error for a supplied parameter whose injection type cannot be determined. When false (currently the default), constructor parameters of classes marked with `@Injectable` whose type cannot be resolved produce a warning.
|
||||
|
||||
When you use the CLI command `ng new`, it is set to true by default in the generated project's configuration.
|
||||
|
||||
### `strictTemplates`
|
||||
|
||||
When true, enables [strict template type checking](guide/template-typecheck#strict-mode) in Angular version 9. Strict mode is only available when using [Ivy](guide/ivy).
|
||||
|
||||
Additional strictness flags allow you to enable and disable specific types of strict template type checking. See [troubleshooting template errors](guide/template-typecheck#troubleshooting-template-errors).
|
||||
|
||||
|
||||
### `trace`
|
||||
|
||||
When true, prints extra information while compiling templates. Default is false.
|
||||
|
@ -69,10 +69,8 @@ Let's animate a simple transition that changes a single HTML element from one st
|
||||
|
||||
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. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
|
||||
</figure>
|
||||
|
||||
### Animation state and styles
|
||||
@ -95,7 +93,7 @@ In the `closed` state, shown below, the button has a height of 100 pixels, an op
|
||||
|
||||
In Angular, you can set multiple styles without any animation. However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring.
|
||||
|
||||
To make the change less abrupt, we need to define an animation *transition* to specify the changes that occur between one state and another over a period of time. The `transition()` function accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps.
|
||||
To make the change less abrupt, we need to define an animation *transition* to specify the changes that occur between one state and another over a period of time. The `transition()` function accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts an `animate()` function.
|
||||
|
||||
|
||||
Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. You can also use the `animate()` function to define the `keyframes()` function for multi-step animations. These definitions are placed in the second argument of the `animate()` function.
|
||||
@ -168,10 +166,8 @@ The `trigger()` function describes the property name to watch for changes. When
|
||||
|
||||
In this example, we'll name the trigger `openClose`, and attach it to the `button` element. The trigger describes the open and closed states, and the timings for the two transitions.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
|
||||
</figure>
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
@ -144,7 +144,7 @@ describes the JSON format as a collection of TypeScript interfaces.
|
||||
{@a expression-syntax}
|
||||
### Expression syntax limitations
|
||||
|
||||
The AOT collector only understands a subset of JavaScript.
|
||||
The AOT collector only understands a subset of JavaScript.
|
||||
Define metadata objects with the following limited syntax:
|
||||
|
||||
<style>
|
||||
@ -467,7 +467,7 @@ export class AppComponent {
|
||||
The collector can represent a function call or object creation with `new` as long as the syntax is valid.
|
||||
The compiler, however, can later refuse to generate a call to a _particular_ function or creation of a _particular_ object.
|
||||
|
||||
The compiler can only create instances of certain classes, supports only core decorators, and only supports calls to macros (functions or static methods) that return expressions.
|
||||
The compiler can only create instances certain classes, supports only core decorators, and only supports calls to macros (functions or static methods) that return expressions.
|
||||
* New instances
|
||||
|
||||
The compiler only allows metadata that create instances of the class `InjectionToken` from `@angular/core`.
|
||||
@ -564,25 +564,10 @@ It does not, however, rewrite the `.d.ts` file, so TypeScript doesn't recognize
|
||||
{@a binding-expression-validation}
|
||||
## Phase 3: Template type checking
|
||||
|
||||
One of the Angular compiler's most helpful features is the ability to type-check expressions within templates, and catch any errors before they cause crashes at runtime.
|
||||
In the template type-checking phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates.
|
||||
|
||||
Enable this phase explicitly by adding the compiler option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json`
|
||||
(see [Angular Compiler Options](guide/angular-compiler-options)).
|
||||
|
||||
<div class="alert is-helpful>
|
||||
|
||||
In [Angular Ivy](guide/ivy), the template type checker has been completely rewritten to be more capable as well as stricter, meaning it can catch a variety of new errors that the previous type checker would not detect.
|
||||
|
||||
As a result, templates that previously compiled under View Engine can fail type checking under Ivy. This can happen because Ivy's stricter checking catches genuine errors, or because application code is not typed correctly, or because the application uses libraries in which typings are inaccurate or not specific enough.
|
||||
|
||||
This stricter type checking is not enabled by default in version 9, but can be enabled by setting the `strictTemplates` configuration option.
|
||||
We do expect to make strict type checking the default in the future.
|
||||
|
||||
<!-- For more information about type-checking options, and about improvements to template type checking in version 9 and above, see [Template type checking](guide/template-type-checking). -->
|
||||
|
||||
</div>
|
||||
|
||||
Template validation produces error messages when a type error is detected in a template binding
|
||||
expression, similar to how type errors are reported by the TypeScript compiler against code in a `.ts`
|
||||
file.
|
||||
@ -674,7 +659,7 @@ There is no convenient way to describe this constraint to TypeScript and the tem
|
||||
|
||||
The non-null assertion operator should be used sparingly as refactoring of the component might break this constraint.
|
||||
|
||||
In this example it is recommended to include the checking of `address` in the `*ngIf` as shown below:
|
||||
In this example it is recommended to include the checking of `address` in the `*ngIf`as shown below:
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
@ -692,80 +677,6 @@ In this example it is recommended to include the checking of `address` in the `*
|
||||
}
|
||||
```
|
||||
|
||||
### Input setter coercion
|
||||
|
||||
Occasionally it is desirable for the `@Input` of a directive or component to alter the value bound to it, typically using a getter/setter pair for the input. As an example, consider this custom button component:
|
||||
|
||||
Consider the following directive:
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
selector: 'submit-button',
|
||||
template: `
|
||||
<div class="wrapper">
|
||||
<button [disabled]="disabled">Submit</button>'
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
class SubmitButton {
|
||||
private _disabled: boolean;
|
||||
|
||||
get disabled(): boolean {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
set disabled(value: boolean) {
|
||||
this._disabled = value;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Here, the `disabled` input of the component is being passed on to the `<button>` in the template. All of this works as expected, as long as a `boolean` value is bound to the input. But, suppose a consumer uses this input in the template as an attribute:
|
||||
|
||||
```html
|
||||
<submit-button disabled></submit-button>
|
||||
```
|
||||
|
||||
This has the same effect as the binding:
|
||||
|
||||
```html
|
||||
<submit-button [disabled]="''"></submit-button>
|
||||
```
|
||||
|
||||
At runtime, the input will be set to the empty string, which is not a `boolean` value. Angular component libraries that deal with this problem often "coerce" the value into the right type in the setter:
|
||||
|
||||
```typescript
|
||||
set disabled(value: boolean) {
|
||||
this._disabled = (value === '') || value;
|
||||
}
|
||||
```
|
||||
|
||||
It would be ideal to change the type of `value` here, from `boolean` to `boolean|''`, to match the set of values which are actually accepted by the setter. Unfortunately, TypeScript requires that both the getter and setter have the same type, so if the getter should return a `boolean` then the setter is stuck with the narrower type.
|
||||
|
||||
If the consumer has Angular's strictest type checking for templates enabled, this creates a problem: the empty string `''` is not actually assignable to the `disabled` field, which will create a type error when the attribute form is used.
|
||||
|
||||
As a workaround for this problem, Angular supports checking a wider, more permissive type for `@Input`s than is declared for the input field itself. This is enabled by adding a static property with the `ngAcceptInputType_` prefix to the component class:
|
||||
|
||||
```typescript
|
||||
class SubmitButton {
|
||||
private _disabled: boolean;
|
||||
|
||||
get disabled(): boolean {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
set disabled(value: boolean) {
|
||||
this._disabled = (value === '') || value;
|
||||
}
|
||||
|
||||
static ngAcceptInputType_disabled: boolean|'';
|
||||
}
|
||||
```
|
||||
|
||||
This field does not need to have a value. Its existence communicates to the Angular type checker that the `disabled` input should be considered as accepting bindings that match the type `boolean|''`. The suffix should be the `@Input` _field_ name.
|
||||
|
||||
Care should be taken that if an `ngAcceptInputType_` override is present for a given input, then the setter should be able to handle any values of the overridden type.
|
||||
|
||||
### Disabling type checking using `$any()`
|
||||
|
||||
Disable checking of a binding expression by surrounding the expression in a call to the [`$any()` cast pseudo-function](guide/template-syntax).
|
||||
|
@ -21,10 +21,11 @@ For an existing application, you have to manually add the `RouterModule` and def
|
||||
Use the CLI to automatically create the app shell.
|
||||
|
||||
<code-example language="bash">
|
||||
ng generate app-shell
|
||||
ng generate app-shell --client-project my-app --universal-project server-app
|
||||
</code-example>
|
||||
|
||||
* `client-project` takes the name of your client application.
|
||||
* `my-app` takes the name of your client application.
|
||||
* `server-app` takes the name of the Universal (or server) application.
|
||||
|
||||
After running this command you will notice that the `angular.json` configuration file has been updated to add two new targets, with a few other changes.
|
||||
|
||||
|
@ -35,7 +35,7 @@ Here's an example of basic metadata for `HeroListComponent`.
|
||||
|
||||
This example shows some of the most useful `@Component` configuration options:
|
||||
|
||||
* `selector`: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains `<app-hero-list></app-hero-list>`, then
|
||||
* `selector`: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains `<app-hero-list></app-hero-list>`, then
|
||||
Angular inserts an instance of the `HeroListComponent` view between those tags.
|
||||
|
||||
* `templateUrl`: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's *host view*.
|
||||
@ -51,10 +51,8 @@ You define a component's view with its companion template. A template is a form
|
||||
|
||||
Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's *host view*. The component can also define a *view hierarchy*, which contains *embedded views*, hosted by other components.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
|
||||
</figure>
|
||||
|
||||
A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules.
|
||||
@ -83,10 +81,8 @@ Angular supports *two-way data binding*, a mechanism for coordinating the parts
|
||||
|
||||
The following diagram shows the four forms of data binding markup. Each form has a direction: to the DOM, from the DOM, or both.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
|
||||
</figure>
|
||||
|
||||
This example from the `HeroListComponent` template uses three of these forms.
|
||||
@ -114,18 +110,14 @@ as with event binding.
|
||||
Angular processes *all* data bindings once for each JavaScript event cycle,
|
||||
from the root of the application component tree through all child components.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
|
||||
</figure>
|
||||
|
||||
Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
|
||||
</figure>
|
||||
|
||||
### Pipes
|
||||
|
@ -35,20 +35,20 @@ Here's a simple root NgModule definition.
|
||||
|
||||
NgModules provide a *compilation context* for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">
|
||||
</div>
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">
|
||||
|
||||
</figure>
|
||||
|
||||
<br class="clear">
|
||||
|
||||
A component and its template together define a *view*. A component can contain a *view hierarchy*, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">
|
||||
</div>
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">
|
||||
|
||||
</figure>
|
||||
|
||||
<br class="clear">
|
||||
|
@ -70,10 +70,8 @@ When all requested services have been resolved and returned, Angular can call th
|
||||
|
||||
The process of `HeroService` injection looks something like this.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
|
||||
</figure>
|
||||
|
||||
### Providing services
|
||||
@ -84,7 +82,7 @@ or you can register providers with specific modules or components.
|
||||
You register providers in the metadata of the service (in the `@Injectable()` decorator),
|
||||
or in the `@NgModule()` or `@Component()` metadata
|
||||
|
||||
* By default, the Angular CLI command [`ng generate service`](cli/generate) registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. The tutorial uses this method to register the provider of HeroService class definition.
|
||||
* By default, the Angular CLI command [`ng generate service`](cli/generate) registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. The tutorial uses this method to register the provider of HeroService class definition.
|
||||
|
||||
```
|
||||
@Injectable({
|
||||
|
@ -113,10 +113,8 @@ To define navigation rules, you associate *navigation paths* with your component
|
||||
|
||||
You've learned the basics about the main building blocks of an Angular application. The following diagram shows how these basic pieces are related.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/architecture/overview2.png" alt="overview">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/architecture/overview2.png" alt="overview">
|
||||
</figure>
|
||||
|
||||
* Together, a component and template define an Angular view.
|
||||
|
@ -142,7 +142,7 @@ Begin by adding `HostListener` to the list of imported symbols.
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" header="src/app/highlight.directive.ts (imports)" region="imports"></code-example>
|
||||
|
||||
Then add two event handlers that respond when the mouse enters or leaves,
|
||||
Then add two eventhandlers that respond when the mouse enters or leaves,
|
||||
each adorned by the `HostListener` decorator.
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" header="src/app/highlight.directive.ts (mouse-methods)" region="mouse-methods"></code-example>
|
||||
@ -175,10 +175,8 @@ Here's the updated directive in full:
|
||||
Run the app and confirm that the background color appears when
|
||||
the mouse hovers over the `p` and disappears as it moves out.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
|
||||
</figure>
|
||||
|
||||
{@a bindings}
|
||||
@ -249,7 +247,7 @@ You get the best of both worlds: the property name you want and the binding synt
|
||||
<code-example path="attribute-directives/src/app/app.component.html" header="src/app/app.component.html (color)" region="color"></code-example>
|
||||
|
||||
Now that you're binding via the alias to the `highlightColor`, modify the `onMouseEnter()` method to use that property.
|
||||
If someone neglects to bind to `appHighlight`, highlight the host element in red:
|
||||
If someone neglects to bind to `appHighlightColor`, highlight the host element in red:
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.3.ts" header="src/app/highlight.directive.ts (mouse enter)" region="mouse-enter"></code-example>
|
||||
|
||||
@ -273,10 +271,8 @@ Revise the `AppComponent.color` so that it has no initial value.
|
||||
|
||||
Here are the harness and directive in action.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
|
||||
</figure>
|
||||
|
||||
{@a second-property}
|
||||
@ -311,10 +307,8 @@ because you made it _public_ with the `@Input` decorator.
|
||||
|
||||
Here's how the harness should work when you're done coding.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
|
||||
</div>
|
||||
<figure>
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
|
||||
</figure>
|
||||
|
||||
## Summary
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user