Compare commits
93 Commits
Author | SHA1 | Date | |
---|---|---|---|
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 |
16
.bazelrc
16
.bazelrc
@ -36,22 +36,6 @@ build --incompatible_strict_action_env
|
||||
run --incompatible_strict_action_env
|
||||
test --incompatible_strict_action_env
|
||||
|
||||
###############################
|
||||
# Saucelabs support #
|
||||
# Turn on these settings with #
|
||||
# --config=saucelabs #
|
||||
###############################
|
||||
|
||||
# Expose SauceLabs environment to actions
|
||||
# These environment variables are needed by
|
||||
# web_test_karma to run on Saucelabs
|
||||
test:saucelabs --action_env=SAUCE_USERNAME
|
||||
test:saucelabs --action_env=SAUCE_ACCESS_KEY
|
||||
test:saucelabs --action_env=SAUCE_READY_FILE
|
||||
test:saucelabs --action_env=SAUCE_PID_FILE
|
||||
test:saucelabs --action_env=SAUCE_TUNNEL_IDENTIFIER
|
||||
test:saucelabs --define=KARMA_WEB_TEST_MODE=SL_REQUIRED
|
||||
|
||||
###############################
|
||||
# Release support #
|
||||
# Turn on these settings with #
|
||||
|
@ -37,5 +37,5 @@ build --verbose_failures=true
|
||||
# > 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=TypeScriptCompile=standalone
|
||||
build --strategy=AngularTemplateCompile=standalone
|
||||
build --strategy=AngularTemplateCompile=local
|
||||
build --strategy=TypeScriptCompile=local
|
||||
|
@ -143,7 +143,7 @@ var_14: ¬ify_dev_infra_on_fail
|
||||
|
||||
# Cache key for the Material unit tests job. **Note** when updating the SHA in the cache keys,
|
||||
# also update the SHA for the "MATERIAL_REPO_COMMIT" environment variable.
|
||||
var_15: &material_unit_tests_cache_key v4-angular-material-701302dc482d7e4b77990b24e3b5ab330bbf1aa5
|
||||
var_15: &material_unit_tests_cache_key v4-angular-material-18b9ef3f5529f0fa8f034944681486447af7b879
|
||||
var_16: &material_unit_tests_cache_key_short v4-angular-material
|
||||
|
||||
version: 2
|
||||
@ -256,23 +256,19 @@ jobs:
|
||||
- *init_environment
|
||||
- *setup_circleci_bazel_config
|
||||
- run:
|
||||
name: Preparing environment for running tests on Saucelabs.
|
||||
command: setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)
|
||||
- run:
|
||||
name: Starting Saucelabs tunnel
|
||||
command: ./scripts/saucelabs/start-tunnel.sh
|
||||
background: true
|
||||
# Waits for the Saucelabs tunnel to be ready. This ensures that we don't run tests
|
||||
# too early without Saucelabs not being ready.
|
||||
- run: ./scripts/saucelabs/wait-for-tunnel.sh
|
||||
# All web tests are contained within a single //:test_web_all target for Saucelabs
|
||||
# as running each set of tests as a separate target will attempt to acquire too
|
||||
# many browsers on Saucelabs (7 per target currently) and some tests will always
|
||||
# fail to acquire browsers. For example:
|
||||
# 14 02 2019 19:52:33.170:WARN [launcher]: chrome beta on SauceLabs have not captured in 180000 ms, killing.
|
||||
# //packages/forms/test:web_test_sauce TIMEOUT in 315.0s
|
||||
- run: yarn bazel test --config=saucelabs //:test_web_all
|
||||
- run: ./scripts/saucelabs/stop-tunnel.sh
|
||||
name: Run Bazel tests in saucelabs
|
||||
# All web tests are contained within a single //:test_web_all target for Saucelabs
|
||||
# as running each set of tests as a separate target will attempt to acquire too
|
||||
# many browsers on Saucelabs (7 per target currently) and some tests will always
|
||||
# fail to acquire browsers. For example:
|
||||
# 14 02 2019 19:52:33.170:WARN [launcher]: chrome beta on SauceLabs have not captured in 180000 ms, killing.
|
||||
# //packages/forms/test:web_test_sauce TIMEOUT in 315.0s
|
||||
command: |
|
||||
./scripts/saucelabs/run-bazel-via-tunnel.sh \
|
||||
--tunnel-id angular-${CIRCLE_BUILD_NUM}-${CIRCLE_NODE_INDEX} \
|
||||
--username $SAUCE_USERNAME \
|
||||
--key $(echo $SAUCE_ACCESS_KEY | rev) \
|
||||
yarn bazel test //:test_web_all
|
||||
- *notify_dev_infra_on_fail
|
||||
|
||||
test_aio:
|
||||
@ -321,7 +317,7 @@ jobs:
|
||||
- *attach_workspace
|
||||
- *init_environment
|
||||
# Build aio (with local Angular packages)
|
||||
- run: yarn --cwd aio build-local --progress=false
|
||||
- run: yarn --cwd aio build-local-ci
|
||||
# Run unit tests
|
||||
- run: yarn --cwd aio test --progress=false --watch=false
|
||||
# Run e2e tests
|
||||
@ -340,7 +336,7 @@ jobs:
|
||||
- *attach_workspace
|
||||
- *init_environment
|
||||
# Build aio with Ivy (using local Angular packages)
|
||||
- run: yarn --cwd aio build-with-ivy --progress=false
|
||||
- run: yarn --cwd aio build-with-ivy-ci
|
||||
# Run unit tests
|
||||
- run: yarn --cwd aio test --progress=false --watch=false
|
||||
# Run e2e tests
|
||||
@ -673,7 +669,10 @@ workflows:
|
||||
version: 2
|
||||
default_workflow:
|
||||
jobs:
|
||||
- setup
|
||||
- setup:
|
||||
filters:
|
||||
branches:
|
||||
ignore: g3
|
||||
- lint:
|
||||
requires:
|
||||
- setup
|
||||
@ -784,9 +783,3 @@ workflows:
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
|
||||
# TODO:
|
||||
# - don't build the g3 branch
|
||||
# - verify that we are bootstrapping with the right yarn version coming from the docker image
|
||||
# - check local chrome version pulled from docker image
|
||||
# - remove /tools/ngcontainer
|
||||
|
@ -61,6 +61,7 @@ else
|
||||
setPublicVar SAUCE_USERNAME "angular-ci";
|
||||
setSecretVar SAUCE_ACCESS_KEY "9b988f434ff8-fbca-8aa4-4ae3-35442987";
|
||||
fi
|
||||
# TODO(josephperrott): Remove environment variables once all saucelabs tests are via bazel method.
|
||||
setPublicVar SAUCE_LOG_FILE /tmp/angular/sauce-connect.log
|
||||
setPublicVar SAUCE_READY_FILE /tmp/angular/sauce-connect-ready-file.lock
|
||||
setPublicVar SAUCE_PID_FILE /tmp/angular/sauce-connect-pid-file.lock
|
||||
@ -79,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 "701302dc482d7e4b77990b24e3b5ab330bbf1aa5"
|
||||
setPublicVar MATERIAL_REPO_COMMIT "18b9ef3f5529f0fa8f034944681486447af7b879"
|
||||
|
||||
# Source `$BASH_ENV` to make the variables available immediately.
|
||||
source $BASH_ENV;
|
||||
|
@ -1,126 +0,0 @@
|
||||
# escape=`
|
||||
|
||||
ARG core=mcr.microsoft.com/windows/servercore:1809
|
||||
ARG target=mcr.microsoft.com/powershell:windowsservercore-1809
|
||||
|
||||
FROM $core as download
|
||||
|
||||
ARG node_version=10.13.0
|
||||
ARG yarn_version=1.13.0
|
||||
|
||||
SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
|
||||
|
||||
ENV GPG_VERSION 2.3.4
|
||||
|
||||
RUN Invoke-WebRequest $('https://files.gpg4win.org/gpg4win-vanilla-{0}.exe' -f $env:GPG_VERSION) -OutFile 'gpg4win.exe' -UseBasicParsing ; `
|
||||
Start-Process .\gpg4win.exe -ArgumentList '/S' -NoNewWindow -Wait
|
||||
|
||||
RUN @( `
|
||||
'94AE36675C464D64BAFA68DD7434390BDBE9B9C5', `
|
||||
'FD3A5288F042B6850C66B31F09FE44734EB7990E', `
|
||||
'71DCFD284A79C3B38668286BC97EC7A07EDE3FC1', `
|
||||
'DD8F2338BAE7501E3DD5AC78C273792F7D83545D', `
|
||||
'C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8', `
|
||||
'B9AE9905FFD7803F25714661B63B535A4C206CA9', `
|
||||
'77984A986EBC2AA786BC0F66B01FBB92821C587A', `
|
||||
'8FCCA13FEF1D0C2E91008E09770F7A9A5AE15600', `
|
||||
'4ED778F539E3634C779C87C6D7062848A1AB005C', `
|
||||
'A48C2BEE680E841632CD4E44F07496B3EB3C1762', `
|
||||
'B9E2F5981AA6E0CD28160D9FF13993A75599653C' `
|
||||
) | foreach { `
|
||||
gpg --keyserver ha.pool.sks-keyservers.net --recv-keys $_ ; `
|
||||
}
|
||||
|
||||
ENV NODE_VERSION=$node_version
|
||||
|
||||
RUN Invoke-WebRequest $('https://nodejs.org/dist/v{0}/SHASUMS256.txt.asc' -f $env:NODE_VERSION) -OutFile 'SHASUMS256.txt.asc' -UseBasicParsing ; `
|
||||
gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc
|
||||
|
||||
RUN Invoke-WebRequest $('https://nodejs.org/dist/v{0}/node-v{0}-win-x64.zip' -f $env:NODE_VERSION) -OutFile 'node.zip' -UseBasicParsing ; `
|
||||
$sum = $(cat SHASUMS256.txt.asc | sls $(' node-v{0}-win-x64.zip' -f $env:NODE_VERSION)) -Split ' ' ; `
|
||||
if ((Get-FileHash node.zip -Algorithm sha256).Hash -ne $sum[0]) { Write-Error 'SHA256 mismatch' } ; `
|
||||
Expand-Archive node.zip -DestinationPath C:\ ; `
|
||||
Rename-Item -Path $('C:\node-v{0}-win-x64' -f $env:NODE_VERSION) -NewName 'C:\nodejs'
|
||||
|
||||
ENV YARN_VERSION=$yarn_version
|
||||
|
||||
RUN [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12 ; `
|
||||
Invoke-WebRequest $('https://yarnpkg.com/downloads/{0}/yarn-{0}.msi' -f $env:YARN_VERSION) -OutFile yarn.msi -UseBasicParsing ; `
|
||||
$sig = Get-AuthenticodeSignature yarn.msi ; `
|
||||
if ($sig.Status -ne 'Valid') { Write-Error 'Authenticode signature is not valid' } ; `
|
||||
Write-Output $sig.SignerCertificate.Thumbprint ; `
|
||||
if (@( `
|
||||
'7E253367F8A102A91D04829E37F3410F14B68A5F', `
|
||||
'AF764E1EA56C762617BDC757C8B0F3780A0CF5F9' `
|
||||
) -notcontains $sig.SignerCertificate.Thumbprint) { Write-Error 'Unknown signer certificate' } ; `
|
||||
Start-Process msiexec.exe -ArgumentList '/i', 'yarn.msi', '/quiet', '/norestart' -NoNewWindow -Wait
|
||||
|
||||
ENV GIT_VERSION 2.20.1
|
||||
ENV GIT_DOWNLOAD_URL https://github.com/git-for-windows/git/releases/download/v${GIT_VERSION}.windows.1/MinGit-${GIT_VERSION}-busybox-64-bit.zip
|
||||
ENV GIT_SHA256 9817ab455d9cbd0b09d8664b4afbe4bbf78d18b556b3541d09238501a749486c
|
||||
|
||||
RUN [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12 ; `
|
||||
Invoke-WebRequest -UseBasicParsing $env:GIT_DOWNLOAD_URL -OutFile git.zip; `
|
||||
if ((Get-FileHash git.zip -Algorithm sha256).Hash -ne $env:GIT_SHA256) {exit 1} ; `
|
||||
Expand-Archive git.zip -DestinationPath C:\git; `
|
||||
Remove-Item git.zip
|
||||
|
||||
FROM $target as baseimage
|
||||
|
||||
ENV NPM_CONFIG_LOGLEVEL info
|
||||
|
||||
COPY --from=download /nodejs /nodejs
|
||||
COPY --from=download [ "/Program Files (x86)/yarn", "/yarn" ]
|
||||
COPY --from=download /git /git
|
||||
|
||||
ARG SETX=/M
|
||||
RUN setx %SETX% PATH "%PATH%;C:\nodejs;C:\yarn\bin;C:\git\cmd;C:\git\mingw64\bin;C:\git\usr\bin"
|
||||
|
||||
CMD [ "node.exe" ]
|
||||
|
||||
FROM baseimage
|
||||
|
||||
SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
|
||||
|
||||
# Install Bazel prereqs on Windows (https://docs.bazel.build/versions/master/install-windows.html)
|
||||
|
||||
# Install MSYS2
|
||||
RUN Invoke-WebRequest -UseBasicParsing 'https://www.7-zip.org/a/7z1805-x64.exe' -OutFile 7z.exe; `
|
||||
Start-Process -FilePath 'C:\\7z.exe' -ArgumentList '/S', '/D=C:\\7zip0' -NoNewWindow -Wait; `
|
||||
Invoke-WebRequest -UseBasicParsing 'http://repo.msys2.org/distrib/x86_64/msys2-base-x86_64-20180531.tar.xz' -OutFile msys2.tar.xz; `
|
||||
Start-Process -FilePath 'C:\\7zip\\7z' -ArgumentList 'e', 'msys2.tar.xz' -Wait; `
|
||||
Start-Process -FilePath 'C:\\7zip\\7z' -ArgumentList 'x', 'msys2.tar', '-oC:\\' -Wait; `
|
||||
Remove-Item msys2.tar.xz; `
|
||||
Remove-Item msys2.tar; `
|
||||
Remove-Item 7z.exe; `
|
||||
Remove-Item -Recurse 7zip; `
|
||||
[Environment]::SetEnvironmentVariable('Path', $env:Path + ';C:\msys64\usr\bin', [System.EnvironmentVariableTarget]::Machine); `
|
||||
[Environment]::SetEnvironmentVariable('BAZEL_SH', 'C:\msys64\usr\bin\bash.exe', [System.EnvironmentVariableTarget]::Machine)
|
||||
|
||||
# Install MSYS2 packages
|
||||
RUN C:\msys64\usr\bin\bash.exe -l -c \"pacman --needed --noconfirm -S zip unzip patch diffutils git\"
|
||||
|
||||
# Install VS Build Tools (required to build C++ targets)
|
||||
RUN Invoke-WebRequest -UseBasicParsing https://download.visualstudio.microsoft.com/download/pr/df649173-11e9-4af2-8eb7-0eb02ba8958a/cadb5bdac41e55bb8f6a6b7c45273370/vs_buildtools.exe -OutFile vs_BuildTools.exe; `
|
||||
# Installer won't detect DOTNET_SKIP_FIRST_TIME_EXPERIENCE if ENV is used, must use setx /M
|
||||
setx /M DOTNET_SKIP_FIRST_TIME_EXPERIENCE 1; `
|
||||
Start-Process vs_BuildTools.exe `
|
||||
-ArgumentList `
|
||||
'--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', `
|
||||
'--quiet', '--norestart', '--nocache' `
|
||||
-NoNewWindow -Wait; `
|
||||
Remove-Item -Force vs_buildtools.exe; `
|
||||
Remove-Item -Force -Recurse \"${Env:ProgramFiles(x86)}\Microsoft Visual Studio\Installer\"; `
|
||||
Remove-Item -Force -Recurse ${Env:TEMP}\*; `
|
||||
Remove-Item -Force -Recurse \"${Env:ProgramData}\Package Cache\"; `
|
||||
[Environment]::SetEnvironmentVariable('BAZEL_VC', \"${Env:ProgramFiles(x86)}\Microsoft Visual Studio\2019\BuildTools\VC\", [System.EnvironmentVariableTarget]::Machine)
|
||||
|
||||
# Install Python (required to build Python targets)
|
||||
RUN Invoke-WebRequest -UseBasicParsing https://www.python.org/ftp/python/3.5.1/python-3.5.1.exe -OutFile python-3.5.1.exe; `
|
||||
Start-Process python-3.5.1.exe -ArgumentList '/quiet InstallAllUsers=1 PrependPath=1' -Wait; `
|
||||
Remove-Item -Force python-3.5.1.exe
|
||||
|
||||
CMD ["cmd.exe"]
|
@ -1,33 +0,0 @@
|
||||
# CodeFresh configuration
|
||||
|
||||
[](https://g.codefresh.io/public/accounts/angular/pipelines/angular/angular/angular)
|
||||
|
||||
This folder contains configuration for the [CodeFresh](<https://codefresh.io/>) based CI checks for this repository.
|
||||
|
||||
## The build pipeline
|
||||
|
||||
CodeFresh uses a several pipeline for each repository. The `codefresh.yml` file defines pipeline [build steps](https://codefresh.io/docs/docs/configure-ci-cd-pipeline/introduction-to-codefresh-pipelines/) for this repository.
|
||||
|
||||
Run results can be seen in the GitHub checks interface and in the [public pipeline](https://g.codefresh.io/public/accounts/angular/pipelines/angular/angular/angular)
|
||||
|
||||
Although most configuration is done via `pipeline.yml`, some options are only available in the online [pipeline settings](https://g.codefresh.io/pipelines/angular/services?repoOwner=angular&repoName=angular&project=angular%2Fangular&context=github&serviceName=angular%2Fangular), which needs a login to access.
|
||||
|
||||
|
||||
## Caretaker
|
||||
|
||||
CodeFresh status can be found at <http://status.codefresh.io/>.
|
||||
|
||||
Issues related to the CodeFresh setup should be escalated to the Tools Team via the current caretaker, followed by Alex Eagle and Filipe Silva.
|
||||
|
||||
## Rollout strategy
|
||||
|
||||
Currently it is only used for tests on Windows platforms, on the master branch, and without pushing user-facing reports. It's only possible to see current builds in the [public pipeline dashboard](https://g.codefresh.io/public/accounts/angular/pipelines/angular/angular/angular).
|
||||
|
||||
After a week or two of running like this, we should reassess how stable and reliable it is.
|
||||
|
||||
Next steps include:
|
||||
- building PRs
|
||||
- showing build status publicly
|
||||
- blocking PRs that break the build
|
||||
- expanding the test suite
|
||||
|
@ -1,38 +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
|
||||
|
||||
# Save built files and downloaded repositories in a location that can be cached by CodeFresh and
|
||||
# shared between builds. This helps speed up the analysis time significantly with Bazel managed node
|
||||
# dependencies on the CI.
|
||||
# https://codefresh.io/docs/docs/configure-ci-cd-pipeline/introduction-to-codefresh-pipelines/#caching-the-artifacts-of-your-build-system
|
||||
build --repository_cache=C:/codefresh/volume/bazel_repository_cache
|
||||
# Setting the output_base to a Docker volume is currently broken because of a Docker bug on Windows:
|
||||
# https://github.com/moby/moby/issues/37024
|
||||
# This affects Bazel because bazel_output_base\external\bazel_tools is an absolute path junction.
|
||||
# When its fixed we can uncomment this line, and use a different output_base for Ivy tests (they
|
||||
# use a separate compiler and destructively replace the cache).
|
||||
# startup --output_base=C:/codefresh/volume/bazel_output_base
|
||||
|
||||
# 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 CodeFresh VMs
|
||||
# TODO(filipesilva): determine the correct memory limit
|
||||
build --local_resources=10240,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
|
@ -1,28 +0,0 @@
|
||||
version: '1.0'
|
||||
|
||||
steps:
|
||||
BuildImage:
|
||||
title: Build Docker image
|
||||
type: build
|
||||
image_name: node-bazel-windows
|
||||
working_directory: ./.codefresh
|
||||
no_cf_cache: true
|
||||
build_arguments:
|
||||
- node_version=10.13.0
|
||||
- yarn_version=1.13.0
|
||||
dockerfile: ./Dockerfile.win-1809
|
||||
|
||||
RunTests:
|
||||
title: Run Bazel tests
|
||||
image: ${{BuildImage}}
|
||||
commands:
|
||||
# Install dependencies
|
||||
- yarn install --frozen-lockfile --non-interactive --network-timeout 100000 --no-progress
|
||||
# Add Bazel CI config
|
||||
- copy .codefresh\bazel.rc %ProgramData%\bazel.bazelrc
|
||||
# Run tests
|
||||
# At the moment 'browser:chromium-local' are broken in CI while locally they work
|
||||
# VE
|
||||
- yarn bazel test --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only,-browser:chromium-local //...
|
||||
# Ivy
|
||||
- yarn bazel test --define=compile=aot --build_tag_filters=-no-ivy-aot,-fixme-ivy-aot --test_tag_filters=-no-ivy-aot,-fixme-ivy-aot,-browser:chromium-local //...
|
10
.github/CODEOWNERS
vendored
10
.github/CODEOWNERS
vendored
@ -101,7 +101,6 @@
|
||||
#
|
||||
# - brandonroberts
|
||||
# - gkalpak
|
||||
# - jenniferfell
|
||||
# - petebacondarwin
|
||||
|
||||
|
||||
@ -884,7 +883,6 @@ testing/** @angular/fw-test
|
||||
/* @angular/fw-dev-infra
|
||||
/.buildkite/** @angular/fw-dev-infra
|
||||
/.circleci/** @angular/fw-dev-infra
|
||||
/.codefresh/** @angular/fw-dev-infra
|
||||
/.devcontainer/** @angular/fw-dev-infra
|
||||
/.github/** @angular/fw-dev-infra
|
||||
/.vscode/** @angular/fw-dev-infra
|
||||
@ -912,14 +910,6 @@ testing/** @angular/fw-test
|
||||
|
||||
|
||||
|
||||
# ================================================
|
||||
# Material CI
|
||||
# ================================================
|
||||
|
||||
/tools/material-ci/** @angular/fw-core @angular/framework-global-approvers
|
||||
|
||||
|
||||
|
||||
# ================================================
|
||||
# Public API
|
||||
# ================================================
|
||||
|
77
CHANGELOG.md
77
CHANGELOG.md
@ -1,3 +1,80 @@
|
||||
<a name="8.2.3"></a>
|
||||
## [8.2.3](https://github.com/angular/angular/compare/8.2.2...8.2.3) (2019-08-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** pin `[@microsoft](https://github.com/microsoft)/api-extractor` ([#32187](https://github.com/angular/angular/issues/32187)) ([a7b9478](https://github.com/angular/angular/commit/a7b9478))
|
||||
|
||||
|
||||
|
||||
<a name="8.2.2"></a>
|
||||
## [8.2.2](https://github.com/angular/angular/compare/8.2.1...8.2.2) (2019-08-12)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** disable treeshaking when generating FESM and UMD bundles ([#32069](https://github.com/angular/angular/issues/32069)) ([3420d29](https://github.com/angular/angular/commit/3420d29))
|
||||
|
||||
|
||||
<a name="8.2.1"></a>
|
||||
## [8.2.1](https://github.com/angular/angular/compare/8.2.0...8.2.1) (2019-08-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **upgrade:** compile downgraded components synchronously (if possible) ([#31840](https://github.com/angular/angular/issues/31840)) ([04ebd59](https://github.com/angular/angular/commit/04ebd59)), closes [#27217](https://github.com/angular/angular/issues/27217) [#30330](https://github.com/angular/angular/issues/30330)
|
||||
|
||||
|
||||
|
||||
<a name="8.2.0"></a>
|
||||
# [8.2.0](https://github.com/angular/angular/compare/8.2.0-rc.0...8.2.0) (2019-07-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** DebugElement.listeners not cleared on destroy ([#31820](https://github.com/angular/angular/issues/31820)) ([46b160e](https://github.com/angular/angular/commit/46b160e))
|
||||
|
||||
|
||||
|
||||
<a name="8.2.0-rc.0"></a>
|
||||
# [8.2.0-rc.0](https://github.com/angular/angular/compare/8.2.0-next.2...8.2.0-rc.0) (2019-07-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** increase memory limit of ngc under bazel from 2 to 4 GB ([#31784](https://github.com/angular/angular/issues/31784)) ([5a8eb92](https://github.com/angular/angular/commit/5a8eb92))
|
||||
* **core:** allow Z variations of CSS transforms in sanitizer ([#29264](https://github.com/angular/angular/issues/29264)) ([78e7fdd](https://github.com/angular/angular/commit/78e7fdd))
|
||||
* **elements:** handle falsy initial value ([#31604](https://github.com/angular/angular/issues/31604)) ([7151eae](https://github.com/angular/angular/commit/7151eae)), closes [angular/angular#30834](https://github.com/angular/angular/issues/30834)
|
||||
* **platform-browser:** debug element query predicates not compatible with strictFunctionTypes ([#30993](https://github.com/angular/angular/issues/30993)) ([10a1e19](https://github.com/angular/angular/commit/10a1e19))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **bazel:** compile targets used for indexing by Kythe with Ivy ([#31786](https://github.com/angular/angular/issues/31786)) ([82055b2](https://github.com/angular/angular/commit/82055b2))
|
||||
* **upgrade:** support $element in upgraded component template/templateUrl functions ([#31637](https://github.com/angular/angular/issues/31637)) ([29e1c53](https://github.com/angular/angular/commit/29e1c53))
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **compiler:** avoid copying from prototype while cloning an object ([#31638](https://github.com/angular/angular/issues/31638)) ([24ca582](https://github.com/angular/angular/commit/24ca582)), closes [#31627](https://github.com/angular/angular/issues/31627)
|
||||
|
||||
|
||||
|
||||
<a name="8.1.3"></a>
|
||||
## [8.1.3](https://github.com/angular/angular/compare/8.1.2...8.1.3) (2019-07-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **elements:** handle falsy initial value ([#31604](https://github.com/angular/angular/issues/31604)) ([434b796](https://github.com/angular/angular/commit/434b796)), closes [angular/angular#30834](https://github.com/angular/angular/issues/30834)
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **compiler:** avoid copying from prototype while cloning an object ([#31638](https://github.com/angular/angular/issues/31638)) ([1f3daa0](https://github.com/angular/angular/commit/1f3daa0)), closes [#31627](https://github.com/angular/angular/issues/31627)
|
||||
|
||||
|
||||
<a name="8.2.0-next.2"></a>
|
||||
# [8.2.0-next.2](https://github.com/angular/angular/compare/8.2.0-next.1...8.2.0-next.2) (2019-07-17)
|
||||
|
||||
|
@ -233,6 +233,7 @@ There are currently a few exceptions to the "use package name" rule:
|
||||
* **docs-infra**: used for docs-app (angular.io) related changes within the /aio directory of the
|
||||
repo
|
||||
* **ivy**: used for changes to the [Ivy renderer](https://github.com/angular/angular/issues/21706).
|
||||
* **ngcc**: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md)
|
||||
* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all
|
||||
packages (e.g. `style: add missing semicolons`) and for docs changes that are not related to a
|
||||
specific package (e.g. `docs: fix typo in tutorial`).
|
||||
|
@ -6,7 +6,7 @@
|
||||
|
||||
# Angular
|
||||
|
||||
Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages.
|
||||
Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages.
|
||||
|
||||
## Quickstart
|
||||
|
||||
@ -14,7 +14,7 @@ Angular is a development platform for building mobile and desktop web applicatio
|
||||
|
||||
## Changelog
|
||||
|
||||
[Learn about the latest improvements][changelog].
|
||||
[Learn about the latest improvements][changelog].
|
||||
|
||||
## Want to help?
|
||||
|
||||
|
12
WORKSPACE
12
WORKSPACE
@ -21,8 +21,8 @@ http_archive(
|
||||
patch_args = ["-p1"],
|
||||
# Patch https://github.com/bazelbuild/rules_nodejs/pull/903
|
||||
patches = ["//tools:rollup_bundle_commonjs_ignoreGlobal.patch"],
|
||||
sha256 = "6d4edbf28ff6720aedf5f97f9b9a7679401bf7fca9d14a0fff80f644a99992b4",
|
||||
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.32.2/rules_nodejs-0.32.2.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
|
||||
@ -53,7 +53,8 @@ Try running `yarn bazel` instead.
|
||||
# - 0.32.0 yarn_install and npm_install no longer puts build files under symlinked node_modules
|
||||
# - 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
|
||||
check_rules_nodejs_version(minimum_version_string = "0.32.2")
|
||||
# - 0.34.0 introduces protractor rule
|
||||
check_rules_nodejs_version(minimum_version_string = "0.34.0")
|
||||
|
||||
# Setup the Node.js toolchain
|
||||
node_repositories(
|
||||
@ -91,6 +92,11 @@ load("//packages/bazel:package.bzl", "rules_angular_dev_dependencies")
|
||||
|
||||
rules_angular_dev_dependencies()
|
||||
|
||||
# Load protractor dependencies
|
||||
load("@npm_bazel_protractor//:package.bzl", "npm_bazel_protractor_dependencies")
|
||||
|
||||
npm_bazel_protractor_dependencies()
|
||||
|
||||
# Load karma dependencies
|
||||
load("@npm_bazel_karma//:package.bzl", "rules_karma_dependencies")
|
||||
|
||||
|
@ -14,10 +14,12 @@ Here are the most important tasks you might need to use:
|
||||
|
||||
* `yarn` - install all the dependencies.
|
||||
* `yarn setup` - install all the dependencies, boilerplate, stackblitz, zips and run dgeni on the docs.
|
||||
* `yarn setup-local` - same as `setup`, but use the locally built Angular packages for aio and docs examples boilerplate.
|
||||
* `yarn setup-local` - same as `setup`, but build the Angular packages from the source code and use these locally built versions (instead of the ones fetched from npm) for aio and docs examples boilerplate.
|
||||
|
||||
* `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-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.
|
||||
@ -31,7 +33,10 @@ Here are the most important tasks you might need to use:
|
||||
* `yarn docs-lint` - check that the doc gen code follows our style rules.
|
||||
* `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. Add the option `--local` to use your local version of Angular contained in the "dist" folder.
|
||||
* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
|
||||
- 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.
|
||||
|
@ -0,0 +1,24 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
import { logging } from 'selenium-webdriver';
|
||||
|
||||
describe('Providers and ViewProviders', function () {
|
||||
|
||||
|
||||
beforeEach(() => {
|
||||
browser.get('');
|
||||
});
|
||||
|
||||
it('shows basic flower emoji', function() {
|
||||
expect(element.all(by.css('p')).get(0).getText()).toContain('🌺');
|
||||
});
|
||||
|
||||
it('shows whale emoji', function() {
|
||||
expect(element.all(by.css('p')).get(1).getText()).toContain('🐳');
|
||||
});
|
||||
|
||||
it('shows sunflower from FlowerService', function() {
|
||||
expect(element.all(by.css('p')).get(8).getText()).toContain('🌻');
|
||||
});
|
||||
|
||||
});
|
||||
|
10
aio/content/examples/providers-viewproviders/src/app/animal.service.ts
Executable file
10
aio/content/examples/providers-viewproviders/src/app/animal.service.ts
Executable file
@ -0,0 +1,10 @@
|
||||
// #docregion animal-service
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AnimalService {
|
||||
emoji = '🐳';
|
||||
}
|
||||
// #enddocregion animal-service
|
@ -0,0 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FlowerService } from './flower.service';
|
||||
import { AnimalService } from './animal.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: [ './app.component.css' ]
|
||||
})
|
||||
// #docregion injection
|
||||
export class AppComponent {
|
||||
constructor(public flower: FlowerService) {}
|
||||
}
|
||||
// #enddocregion injection
|
15
aio/content/examples/providers-viewproviders/src/app/app.component.html
Executable file
15
aio/content/examples/providers-viewproviders/src/app/app.component.html
Executable file
@ -0,0 +1,15 @@
|
||||
|
||||
<h2>From AppComponent:</h2>
|
||||
<!-- #docregion binding-flower -->
|
||||
<p>Emoji from FlowerService: {{flower.emoji}}</p>
|
||||
<!-- #enddocregion binding-flower -->
|
||||
<!-- #docregion binding-animal -->
|
||||
<p>Emoji from AnimalService: {{animal.emoji}}</p>
|
||||
<!-- #enddocregion binding-animal -->
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>From ChildComponent:</h2>
|
||||
<!-- #docregion content-projection -->
|
||||
<app-child><app-inspector></app-inspector></app-child>
|
||||
<!-- #enddocregion content-projection -->
|
15
aio/content/examples/providers-viewproviders/src/app/app.component.ts
Executable file
15
aio/content/examples/providers-viewproviders/src/app/app.component.ts
Executable file
@ -0,0 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FlowerService } from './flower.service';
|
||||
import { AnimalService } from './animal.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: [ './app.component.css' ]
|
||||
})
|
||||
// #docregion inject-animal-service
|
||||
export class AppComponent {
|
||||
constructor(public flower: FlowerService, public animal: AnimalService) {}
|
||||
}
|
||||
// #enddocregion inject-animal-service
|
17
aio/content/examples/providers-viewproviders/src/app/app.module.ts
Executable file
17
aio/content/examples/providers-viewproviders/src/app/app.module.ts
Executable file
@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { ChildComponent } from './child/child.component';
|
||||
import { InspectorComponent } from './inspector/inspector.component';
|
||||
|
||||
// #docregion appmodule
|
||||
@NgModule({
|
||||
imports: [ BrowserModule, FormsModule ],
|
||||
declarations: [ AppComponent, ChildComponent, InspectorComponent ],
|
||||
bootstrap: [ AppComponent ],
|
||||
providers: []
|
||||
})
|
||||
export class AppModule { }
|
||||
// #enddocregion appmodule
|
@ -0,0 +1,19 @@
|
||||
import { Component, OnInit, Host, SkipSelf, Optional } from '@angular/core';
|
||||
import { FlowerService } from '../flower.service';
|
||||
|
||||
// #docregion flowerservice
|
||||
@Component({
|
||||
selector: 'app-child',
|
||||
templateUrl: './child.component.html',
|
||||
styleUrls: ['./child.component.css'],
|
||||
// use the providers array to provide a service
|
||||
providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }]
|
||||
})
|
||||
|
||||
export class ChildComponent {
|
||||
// inject the service
|
||||
constructor( public flower: FlowerService) { }
|
||||
}
|
||||
|
||||
// #enddocregion flowerservice
|
||||
|
@ -0,0 +1,4 @@
|
||||
.container {
|
||||
border: 1px solid darkblue;
|
||||
padding: 1rem;
|
||||
}
|
@ -0,0 +1,24 @@
|
||||
<!-- #docplaster -->
|
||||
<!-- #docregion child-component -->
|
||||
<!-- #docregion flower-binding -->
|
||||
<p>Emoji from FlowerService: {{flower.emoji}}</p>
|
||||
<!-- #enddocregion flower-binding -->
|
||||
<!-- #docregion animal-binding -->
|
||||
<p>Emoji from AnimalService: {{animal.emoji}}</p>
|
||||
<!-- #enddocregion animal-binding -->
|
||||
|
||||
<div class="container">
|
||||
<h3>Content projection</h3>
|
||||
<!-- #enddocregion child-component -->
|
||||
<p>The following is coming from content. It doesn't get to see the puppy because the puppy is declared inside the view only.</p>
|
||||
<!-- #docregion child-component -->
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
<h3>Inside the view</h3>
|
||||
<!-- #enddocregion child-component -->
|
||||
<p>The following is inside the view so it does see the puppy.</p>
|
||||
<!-- #docregion child-component -->
|
||||
<app-inspector></app-inspector>
|
||||
<!-- #enddocregion child-component -->
|
||||
|
@ -0,0 +1,44 @@
|
||||
// #docplaster
|
||||
import { Component, OnInit, Host, SkipSelf, Optional } from '@angular/core';
|
||||
import { FlowerService } from '../flower.service';
|
||||
import { AnimalService } from '../animal.service';
|
||||
|
||||
// #docregion provide-animal-service
|
||||
@Component({
|
||||
selector: 'app-child',
|
||||
templateUrl: './child.component.html',
|
||||
styleUrls: ['./child.component.css'],
|
||||
// provide services
|
||||
providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }],
|
||||
viewProviders: [{ provide: AnimalService, useValue: { emoji: '🐶' } }]
|
||||
})
|
||||
|
||||
export class ChildComponent {
|
||||
// inject service
|
||||
constructor( public flower: FlowerService, public animal: AnimalService) { }
|
||||
// #enddocregion provide-animal-service
|
||||
|
||||
// viewProviders ensures that only the view gets to see this.
|
||||
// With the AnimalService in the viewProviders, the
|
||||
// InspectorComponent doesn't get to see it because the
|
||||
// inspector is in the content.
|
||||
|
||||
|
||||
// constructor( public flower: FlowerService, @Optional() @Host() public animal: AnimalService) { }
|
||||
|
||||
// Comment out the above constructor and alternately
|
||||
// uncomment the two following constructors to see the
|
||||
// effects of @Host() and @Host() + @SkipSelf().
|
||||
|
||||
// constructor(
|
||||
// @Host() public animal : AnimalService,
|
||||
// @Host() @Optional() public flower : FlowerService) { }
|
||||
|
||||
// constructor(
|
||||
// @SkipSelf() @Host() public animal : AnimalService,
|
||||
// @SkipSelf() @Host() @Optional() public flower : FlowerService) { }
|
||||
|
||||
// #docregion provide-animal-service
|
||||
}
|
||||
// #enddocregion provide-animal-service
|
||||
|
11
aio/content/examples/providers-viewproviders/src/app/flower.service.ts
Executable file
11
aio/content/examples/providers-viewproviders/src/app/flower.service.ts
Executable file
@ -0,0 +1,11 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
// #docregion flowerservice
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FlowerService {
|
||||
emoji = '🌺';
|
||||
}
|
||||
// #enddocregion flowerservice
|
||||
|
@ -0,0 +1,4 @@
|
||||
<!-- #docregion binding -->
|
||||
<p>Emoji from FlowerService: {{flower.emoji}}</p>
|
||||
<p>Emoji from AnimalService: {{animal.emoji}}</p>
|
||||
<!-- #enddocregion binding -->
|
@ -0,0 +1,14 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FlowerService } from '../flower.service';
|
||||
import { AnimalService } from '../animal.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-inspector',
|
||||
templateUrl: './inspector.component.html',
|
||||
styleUrls: ['./inspector.component.css']
|
||||
})
|
||||
// #docregion injection
|
||||
export class InspectorComponent {
|
||||
constructor(public flower: FlowerService, public animal: AnimalService) { }
|
||||
}
|
||||
// #enddocregion injection
|
14
aio/content/examples/providers-viewproviders/src/index.html
Normal file
14
aio/content/examples/providers-viewproviders/src/index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>providers vs. viewProviders</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></app-root>
|
||||
</body>
|
||||
</html>
|
12
aio/content/examples/providers-viewproviders/src/main.ts
Normal file
12
aio/content/examples/providers-viewproviders/src/main.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.log(err));
|
10
aio/content/examples/providers-viewproviders/stackblitz.json
Normal file
10
aio/content/examples/providers-viewproviders/stackblitz.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"description": "Inputs and Outputs",
|
||||
"files": [
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.[1,2].*"
|
||||
],
|
||||
"file": "src/app/app.component.ts",
|
||||
"tags": ["Inputs and Outputs"]
|
||||
}
|
@ -0,0 +1,21 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
describe('Resolution-modifiers-example', function () {
|
||||
|
||||
beforeAll(function () {
|
||||
browser.get('');
|
||||
});
|
||||
|
||||
it('shows basic flower emoji', function() {
|
||||
expect(element.all(by.css('p')).get(0).getText()).toContain('🌸');
|
||||
});
|
||||
|
||||
it('shows basic leaf emoji', function() {
|
||||
expect(element.all(by.css('p')).get(1).getText()).toContain('🌿');
|
||||
});
|
||||
|
||||
it('shows yellow flower in host child', function() {
|
||||
expect(element.all(by.css('p')).get(9).getText()).toContain('🌼');
|
||||
});
|
||||
|
||||
});
|
0
aio/content/examples/resolution-modifiers/src/app/app.component.css
Executable file
0
aio/content/examples/resolution-modifiers/src/app/app.component.css
Executable file
14
aio/content/examples/resolution-modifiers/src/app/app.component.html
Executable file
14
aio/content/examples/resolution-modifiers/src/app/app.component.html
Executable file
@ -0,0 +1,14 @@
|
||||
<h1>DI resolution modifiers</h1>
|
||||
|
||||
<p>Basic flower service: {{flower.emoji}}</p>
|
||||
<p>Basic leaf service: {{leaf.emoji}}</p>
|
||||
|
||||
<app-optional></app-optional>
|
||||
|
||||
<app-self></app-self>
|
||||
|
||||
<app-self-no-data></app-self-no-data>
|
||||
|
||||
<app-skipself></app-skipself>
|
||||
|
||||
<app-host-parent></app-host-parent>
|
13
aio/content/examples/resolution-modifiers/src/app/app.component.ts
Executable file
13
aio/content/examples/resolution-modifiers/src/app/app.component.ts
Executable file
@ -0,0 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { LeafService } from './leaf.service';
|
||||
import { FlowerService } from './flower.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: [ './app.component.css' ]
|
||||
})
|
||||
export class AppComponent {
|
||||
name = 'Angular';
|
||||
constructor(public flower: FlowerService, public leaf: LeafService) {}
|
||||
}
|
33
aio/content/examples/resolution-modifiers/src/app/app.module.ts
Executable file
33
aio/content/examples/resolution-modifiers/src/app/app.module.ts
Executable file
@ -0,0 +1,33 @@
|
||||
;
|
||||
import { OptionalComponent } from './optional/optional.component';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { SelfNoDataComponent } from './self-no-data/self-no-data.component';
|
||||
import { HostComponent } from './host/host.component';
|
||||
import { SelfComponent } from './self/self.component';
|
||||
import { SkipselfComponent } from './skipself/skipself.component';
|
||||
import { HostParentComponent } from './host-parent/host-parent.component';
|
||||
import { HostChildComponent } from './host-child/host-child.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
OptionalComponent,
|
||||
SelfComponent,
|
||||
SelfNoDataComponent,
|
||||
HostComponent,
|
||||
SkipselfComponent,
|
||||
HostParentComponent,
|
||||
HostChildComponent
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
providers: []
|
||||
})
|
||||
export class AppModule { }
|
9
aio/content/examples/resolution-modifiers/src/app/flower.service.ts
Executable file
9
aio/content/examples/resolution-modifiers/src/app/flower.service.ts
Executable file
@ -0,0 +1,9 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root' // provide this service in the root ModuleInjector
|
||||
|
||||
})
|
||||
export class FlowerService {
|
||||
emoji = '🌸';
|
||||
}
|
@ -0,0 +1,5 @@
|
||||
.section {
|
||||
border: 2px solid #369;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
<div class="section">
|
||||
<h2>Child of @Host() Component</h2>
|
||||
<p>Flower emoji: {{flower.emoji}}</p>
|
||||
</div>
|
@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FlowerService } from '../flower.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-host-child',
|
||||
templateUrl: './host-child.component.html',
|
||||
styleUrls: ['./host-child.component.css']
|
||||
})
|
||||
export class HostChildComponent {
|
||||
constructor(public flower: FlowerService) { }
|
||||
}
|
@ -0,0 +1,5 @@
|
||||
.section {
|
||||
border: 2px solid #369;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
@ -0,0 +1,5 @@
|
||||
<div class="section">
|
||||
<h2>Parent of @Host() Component</h2>
|
||||
<p>Flower emoji: {{flower.emoji}}</p>
|
||||
<app-host></app-host>
|
||||
</div>
|
@ -0,0 +1,16 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FlowerService } from '../flower.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-host-parent',
|
||||
templateUrl: './host-parent.component.html',
|
||||
styleUrls: ['./host-parent.component.css'],
|
||||
providers: [{ provide: FlowerService, useValue: { emoji: '🌺' } }]
|
||||
|
||||
})
|
||||
export class HostParentComponent {
|
||||
|
||||
constructor(public flower: FlowerService) { }
|
||||
|
||||
}
|
@ -0,0 +1,5 @@
|
||||
.section {
|
||||
border: 2px solid #369;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
@ -0,0 +1,6 @@
|
||||
<div class="section">
|
||||
<h2>@Host() Component</h2>
|
||||
<p>Flower emoji: {{flower.emoji}}</p>
|
||||
<p><i>(@Host() stops it here)</i></p>
|
||||
<app-host-child></app-host-child>
|
||||
</div>
|
21
aio/content/examples/resolution-modifiers/src/app/host/host.component.ts
Executable file
21
aio/content/examples/resolution-modifiers/src/app/host/host.component.ts
Executable file
@ -0,0 +1,21 @@
|
||||
import { Component, Host, Optional } from '@angular/core';
|
||||
import { FlowerService } from '../flower.service';
|
||||
|
||||
// #docregion host-component
|
||||
@Component({
|
||||
selector: 'app-host',
|
||||
templateUrl: './host.component.html',
|
||||
styleUrls: ['./host.component.css'],
|
||||
// provide the service
|
||||
providers: [{ provide: FlowerService, useValue: { emoji: '🌼' } }]
|
||||
})
|
||||
export class HostComponent {
|
||||
// use @Host() in the constructor when injecting the service
|
||||
constructor(@Host() @Optional() public flower: FlowerService) { }
|
||||
|
||||
}
|
||||
// #enddocregion host-component
|
||||
|
||||
// if you take out @Host() and the providers array, flower will be red hibiscus
|
||||
|
||||
|
11
aio/content/examples/resolution-modifiers/src/app/leaf.service.ts
Executable file
11
aio/content/examples/resolution-modifiers/src/app/leaf.service.ts
Executable file
@ -0,0 +1,11 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
// #docregion leafservice
|
||||
export class LeafService {
|
||||
emoji = '🌿';
|
||||
}
|
||||
// #enddocregion leafservice
|
||||
|
7
aio/content/examples/resolution-modifiers/src/app/optional.service.ts
Executable file
7
aio/content/examples/resolution-modifiers/src/app/optional.service.ts
Executable file
@ -0,0 +1,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class OptionalService {
|
||||
}
|
||||
|
||||
// This service isn't provided anywhere.
|
@ -0,0 +1,5 @@
|
||||
.section {
|
||||
border: 2px solid #369;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
<div class="section">
|
||||
<h2>@Optional() Component</h2>
|
||||
<p>This component still works even though the OptionalService (notice @Optional() in the consturctor isn't provided or configured anywhere. Angular goes through tree and visibilty rules, and if it doesn't find the requested service, returns null.</p>
|
||||
</div>
|
@ -0,0 +1,21 @@
|
||||
import { Component, Optional } from '@angular/core';
|
||||
import { OptionalService } from '../optional.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-optional',
|
||||
templateUrl: './optional.component.html',
|
||||
styleUrls: ['./optional.component.css']
|
||||
})
|
||||
|
||||
// #docregion optional-component
|
||||
export class OptionalComponent {
|
||||
constructor(@Optional() public optional: OptionalService) {}
|
||||
}
|
||||
// #enddocregion optional-component
|
||||
|
||||
// The OptionalService isn't provided here, in the @Injectable()
|
||||
// providers array, or in the NgModule. If you remove @Optional()
|
||||
// from the constructor, you'll get an error.
|
||||
|
||||
|
||||
|
@ -0,0 +1,5 @@
|
||||
.section {
|
||||
border: 2px solid #369;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
<div class="section">
|
||||
<h2>@Self() Component (without a provider)</h2>
|
||||
<p>Leaf emoji: {{leaf?.emoji}}</p>
|
||||
</div>
|
@ -0,0 +1,18 @@
|
||||
import { Component, Self, Optional } from '@angular/core';
|
||||
import { LeafService } from '../leaf.service';
|
||||
|
||||
// #docregion self-no-data-component
|
||||
@Component({
|
||||
selector: 'app-self-no-data',
|
||||
templateUrl: './self-no-data.component.html',
|
||||
styleUrls: ['./self-no-data.component.css']
|
||||
})
|
||||
export class SelfNoDataComponent {
|
||||
constructor(@Self() @Optional() public leaf: LeafService) { }
|
||||
}
|
||||
|
||||
// #enddocregion self-no-data-component
|
||||
|
||||
// The app doesn't break because the value being available at self is optional.
|
||||
// If you remove @Optional(), the app breaks.
|
||||
|
@ -0,0 +1,5 @@
|
||||
.section {
|
||||
border: 2px solid #369;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
<div class="section">
|
||||
<h2>@Self() Component</h2>
|
||||
<p>Flower emoji: {{flower?.emoji}}</p>
|
||||
</div>
|
19
aio/content/examples/resolution-modifiers/src/app/self/self.component.ts
Executable file
19
aio/content/examples/resolution-modifiers/src/app/self/self.component.ts
Executable file
@ -0,0 +1,19 @@
|
||||
import { Component, Self } from '@angular/core';
|
||||
import { FlowerService } from '../flower.service';
|
||||
|
||||
// #docregion self-component
|
||||
@Component({
|
||||
selector: 'app-self',
|
||||
templateUrl: './self.component.html',
|
||||
styleUrls: ['./self.component.css'],
|
||||
providers: [{ provide: FlowerService, useValue: { emoji: '🌼' } }]
|
||||
|
||||
})
|
||||
export class SelfComponent {
|
||||
constructor(@Self() public flower: FlowerService) {}
|
||||
}
|
||||
// #enddocregion self-component
|
||||
|
||||
// This component provides the FlowerService so the injector
|
||||
// doesn't have to look further up the injector tree
|
||||
|
@ -0,0 +1,5 @@
|
||||
.section {
|
||||
border: 2px solid #369;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
<div class="section">
|
||||
<h2>@SkipSelf() Component</h2>
|
||||
<p>Leaf emoji: {{leaf.emoji}}</p>
|
||||
</div>
|
@ -0,0 +1,18 @@
|
||||
import { Component, SkipSelf } from '@angular/core';
|
||||
import { LeafService } from '../leaf.service';
|
||||
|
||||
// #docregion skipself-component
|
||||
@Component({
|
||||
selector: 'app-skipself',
|
||||
templateUrl: './skipself.component.html',
|
||||
styleUrls: ['./skipself.component.css'],
|
||||
// Angular would ignore this LeafService instance
|
||||
providers: [{ provide: LeafService, useValue: { emoji: '🍁' } }]
|
||||
})
|
||||
export class SkipselfComponent {
|
||||
// Use @SkipSelf() in the constructor
|
||||
constructor(@SkipSelf() public leaf: LeafService) { }
|
||||
}
|
||||
// #enddocregion skipself-component
|
||||
|
||||
// @SkipSelf(): Specifies that the dependency resolution should start from the parent injector, not here.
|
14
aio/content/examples/resolution-modifiers/src/index.html
Normal file
14
aio/content/examples/resolution-modifiers/src/index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>DI Resolution Modifiers 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>
|
11
aio/content/examples/resolution-modifiers/src/main.ts
Normal file
11
aio/content/examples/resolution-modifiers/src/main.ts
Normal file
@ -0,0 +1,11 @@
|
||||
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);
|
10
aio/content/examples/resolution-modifiers/stackblitz.json
Normal file
10
aio/content/examples/resolution-modifiers/stackblitz.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"description": "NgModules",
|
||||
"files": [
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.[1,2].*"
|
||||
],
|
||||
"file": "src/app/app.component.ts",
|
||||
"tags": ["NgModules"]
|
||||
}
|
@ -1,12 +0,0 @@
|
||||
{
|
||||
"description": "Quickstart AppComponent Testing",
|
||||
"files":[
|
||||
"src/browser-test-shim.js",
|
||||
"src/app/app.component.ts",
|
||||
"src/app/app.component.spec.ts",
|
||||
"src/quickstart-specs.html"
|
||||
],
|
||||
"main": "src/quickstart-specs.html",
|
||||
"file": "src/app/app.component.spec.ts",
|
||||
"tags": ["quickstart", "setup", "testing"]
|
||||
}
|
@ -1,36 +0,0 @@
|
||||
<!-- Run application specs in a browser -->
|
||||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<base href="/">
|
||||
<title>1st Specs</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Polyfills -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
|
||||
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
|
||||
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone-testing.js"></script>
|
||||
|
||||
<!-- #docregion files -->
|
||||
<script>
|
||||
var __spec_files__ = [
|
||||
'app/app.component.spec'
|
||||
];
|
||||
</script>
|
||||
<!-- #enddocregion files-->
|
||||
<script src="browser-test-shim.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
@ -1,12 +0,0 @@
|
||||
{
|
||||
"description": "QuickStart Setup",
|
||||
"files": [
|
||||
"src/app/app.component.ts",
|
||||
"src/app/app.module.ts",
|
||||
"src/index.html",
|
||||
"src/main.ts",
|
||||
"src/styles.css"
|
||||
],
|
||||
"file": "src/app/app.component.ts",
|
||||
"tags": ["quickstart", "setup", "seed"]
|
||||
}
|
@ -1,24 +1,22 @@
|
||||
{
|
||||
"description": "Testing - specs",
|
||||
"files":[
|
||||
"src/expected.ts",
|
||||
"src/index-specs.html",
|
||||
"src/main-specs.ts",
|
||||
"src/styles.css",
|
||||
"src/test.css",
|
||||
"src/tests.sb.ts",
|
||||
|
||||
"e2e/src/**/*.ts",
|
||||
|
||||
"src/app/**/*.css",
|
||||
"src/app/**/*.html",
|
||||
"src/app/**/*.ts",
|
||||
"src/app/**/*.spec.ts",
|
||||
|
||||
"src/testing/*.ts",
|
||||
"src/testing/**/*",
|
||||
|
||||
"!src/main.ts",
|
||||
"!src/app/bag/*.*",
|
||||
"!src/app/1st.spec.ts",
|
||||
|
||||
"src/expected.ts",
|
||||
"src/test.css",
|
||||
"src/tests.sb.ts",
|
||||
"src/main-specs.ts",
|
||||
"src/index-specs.html"
|
||||
"src/**/*.spec.ts"
|
||||
],
|
||||
"main": "src/index-specs.html",
|
||||
"tags": ["testing"]
|
||||
|
@ -1,3 +1,3 @@
|
||||
const jasmineRequire = require('jasmine-core/lib/jasmine-core/jasmine.js');
|
||||
import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
|
||||
|
||||
window['jasmineRequire'] = jasmineRequire;
|
||||
|
@ -1,19 +1,18 @@
|
||||
{
|
||||
"description": "Heroes Test App",
|
||||
"files":[
|
||||
"src/index.html",
|
||||
"src/main.ts",
|
||||
"src/styles.css",
|
||||
"src/test.css",
|
||||
|
||||
"e2e/src/**/*.ts",
|
||||
|
||||
"src/app/**/*.css",
|
||||
"src/app/**/*.html",
|
||||
"src/app/**/*.ts",
|
||||
|
||||
"!src/app/bag/*.*",
|
||||
|
||||
"!src/test.ts",
|
||||
|
||||
"src/test.css",
|
||||
"src/main.ts",
|
||||
"src/index.html"
|
||||
"!src/**/*.spec.ts"
|
||||
],
|
||||
"tags": ["testing"]
|
||||
}
|
||||
|
@ -179,3 +179,8 @@ Books
|
||||
* "A Web for Everyone: Designing Accessible User Experiences", Sarah Horton and Whitney Quesenbery
|
||||
|
||||
* "Inclusive Design Patterns", Heydon Pickering
|
||||
|
||||
## More on accessibility
|
||||
|
||||
You may also be interested in the following:
|
||||
* [Audit your Angular app's accessibility with codelyzer](https://web.dev/accessible-angular-with-codelyzer/).
|
||||
|
148
aio/content/guide/angular-compiler-options.md
Normal file
148
aio/content/guide/angular-compiler-options.md
Normal file
@ -0,0 +1,148 @@
|
||||
# Angular compiler options
|
||||
|
||||
When you use [AOT compilation](guide/aot-compiler), you can control how your application is compiled by specifying *template* compiler options in the `tsconfig.json` [TypeScript configuration file](guide/typescript-configuration).
|
||||
|
||||
The template options object, `angularCompilerOptions`, is a sibling to the `compilerOptions` object that supplies standard options to the TypeScript compiler.
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
...
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"fullTemplateTypeCheck": true,
|
||||
"preserveWhitespaces": true,
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
This page describes the available Angular template compiler options.
|
||||
|
||||
### `allowEmptyCodegenFiles`
|
||||
|
||||
When true, generate all possible files even if they are empty. Default is false. Used by the Bazel build rules to simplify how Bazel rules track file dependencies. Do not use this option outside of the Bazel rules.
|
||||
|
||||
### `annotationsAs`
|
||||
|
||||
Modifies how Angular-specific annotations are emitted to improve tree-shaking. Non-Angular annotations are not affected. One of `static fields` (the default) or `decorators`.
|
||||
|
||||
* By default, the compiler replaces decorators with a static field in the class, which allows advanced tree-shakers like [Closure compiler](https://github.com/google/closure-compiler) to remove unused classes.
|
||||
|
||||
* The `decorators` value leaves the decorators in place, which makes compilation faster. TypeScript emits calls to the` __decorate` helper. Use `--emitDecoratorMetadata` for runtime reflection (but note taht the resulting code will not properly tree-shake.
|
||||
|
||||
### `annotateForClosureCompiler`
|
||||
|
||||
When true, use [Tsickle](https://github.com/angular/tsickle) to annotate the emitted JavaScript with [JSDoc](http://usejsdoc.org/) comments needed by the
|
||||
[Closure Compiler](https://github.com/google/closure-compiler). Default is false.
|
||||
|
||||
### `disableExpressionLowering`
|
||||
|
||||
When true (the default), transforms code that is or could be used in an annotation, to allow it to be imported from template factory modules. See [metadata rewriting](guide/aot-compiler#metadata-rewriting) for more information.
|
||||
|
||||
When `false`, disables this rewriting, requiring the rewriting to be done manually.
|
||||
|
||||
### `disableTypeScriptVersionCheck`
|
||||
|
||||
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.
|
||||
|
||||
### `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.
|
||||
|
||||
|
||||
{@a enablelegacytemplate}
|
||||
|
||||
### `enableLegacyTemplate`
|
||||
|
||||
When true, enables use of the `<template>` element, which was deprecated in Angular 4.0, in favor of `<ng-template>` (to avoid colliding with the DOM's element of the same name). Default is false. Might be required by some third-party Angular libraries. |
|
||||
|
||||
### `flatModuleId`
|
||||
|
||||
The module ID to use for importing a flat module (when `flatModuleOutFile` is true). References generated by the template compiler use this module name when importing symbols
|
||||
from the flat module. Ignored if `flatModuleOutFile` is false.
|
||||
|
||||
### `flatModuleOutFile`
|
||||
|
||||
When true, generates a flat module index of the given file name and the corresponding flat module metadata. Use to create flat modules that are packaged similarly to `@angular/core` and `@angular/common`. When this option is used, the `package.json` for the library should refer
|
||||
to the generated flat module index instead of the library index file.
|
||||
|
||||
Produces only one `.metadata.json` file, which contains all the metadata necessary
|
||||
for symbols exported from the library index. In the generated `.ngfactory.js` files, the flat
|
||||
module index is used to import symbols that includes both the public API from the library index
|
||||
as well as shrowded internal symbols.
|
||||
|
||||
By default the `.ts` file supplied in the `files` field is assumed to be the library index.
|
||||
If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use.
|
||||
If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced.
|
||||
|
||||
A flat module index `.d.ts` and `.js` is created with the given `flatModuleOutFile` name in the same location as the library index `.d.ts` file.
|
||||
|
||||
For example, if a library uses the `public_api.ts` file as the library index of the module, the `tsconfig.json` `files` field would be `["public_api.ts"]`.
|
||||
The `flatModuleOutFile` options could then be set to (for example) `"index.js"`, which produces `index.d.ts` and `index.metadata.json` files.
|
||||
The `module` field of the library's `package.json` would be `"index.js"` and the `typings` field
|
||||
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.
|
||||
|
||||
Default is currently false.
|
||||
|
||||
### `generateCodeForLibraries`
|
||||
|
||||
When true (the default), generates factory files (`.ngfactory.js` and `.ngstyle.js`)
|
||||
for `.d.ts` files with a corresponding `.metadata.json` file.
|
||||
|
||||
When false, factory files are generated only for `.ts` files. Do this when using factory summaries.
|
||||
|
||||
|
||||
### `preserveWhitespaces`
|
||||
|
||||
When false (the default), removes blank text nodes from compiled templates, which results in smaller emitted template factory modules. Set to true to preserve blank text nodes.
|
||||
|
||||
### `skipMetadataEmit`
|
||||
|
||||
When true, does not to produce `.metadata.json` files. Default is `false`.
|
||||
|
||||
The `.metadata.json` files contain information needed by the template compiler from a `.ts`
|
||||
file that is not included in the `.d.ts` file produced by the TypeScript compiler.
|
||||
This information includes, for example, the content of annotations (such as a component's template), which TypeScript emits to the `.js` file but not to the `.d.ts` file.
|
||||
|
||||
You can set to `true` when using factory summaries, because the factory summaries
|
||||
include a copy of the information that is in the `.metadata.json` file.
|
||||
|
||||
Set to `true` if you are using TypeScript's `--outFile` option, because the metadata files
|
||||
are not valid for this style of TypeScript output. However, we do not recommend using `--outFile` with Angular. Use a bundler, such as [webpack](https://webpack.js.org/), instead.
|
||||
|
||||
### `skipTemplateCodegen`
|
||||
|
||||
When true, does not emit `.ngfactory.js` and `.ngstyle.js` files. This turns off most of the template compiler and disables the reporting of template diagnostics.
|
||||
|
||||
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`.
|
||||
|
||||
### `strictMetadataEmit`
|
||||
|
||||
When true, reports an error to the `.metadata.json` file if `"skipMetadataEmit"` is `false`.
|
||||
Default is false. Use only when `"skipMetadataEmit"` is false and `"skipTemplateCodeGen"` is true.
|
||||
|
||||
This option is intended to validate the `.metadata.json` files emitted for bundling with an `npm` package. The validation is strict and can emit errors for metadata that would never produce an error when used by the template compiler. You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol.
|
||||
|
||||
It is valid for `.metadata.json` files to contain errors.
|
||||
The template compiler reports these errors if the metadata is used to determine the contents of an annotation.
|
||||
The metadata collector cannot predict the symbols that are designed for use in an annotation, so it preemptively includes error nodes in the metadata for the exported symbols.
|
||||
The template compiler can then use the error nodes to report an error if these symbols are used.
|
||||
|
||||
If the client of a library intends to use a symbol in an annotation, the template compiler does not normally report this until the client uses the symbol.
|
||||
This option allows detection of these errors during the build phase of
|
||||
the library and is used, for example, in producing Angular libraries themselves.
|
||||
|
||||
### `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.
|
||||
|
||||
### `trace`
|
||||
|
||||
When true, prints extra information while compiling templates. Default is false.
|
@ -128,7 +128,7 @@ The third argument, `easing`, controls how the animation [accelerates and decele
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
**Note:** See the Angular Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves.
|
||||
**Note:** See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves.
|
||||
</div>
|
||||
|
||||
This example provides a state transition from `open` to `closed` with a one second transition between states.
|
||||
|
@ -79,11 +79,9 @@ there are fewer opportunities for injection attacks.
|
||||
|
||||
When you use the Angular AOT compiler, you can control your app compilation in two ways:
|
||||
|
||||
* By providing template compiler options in the `tsconfig.json` file.
|
||||
* By [specifying Angular metadata](#metadata-aot), as described below.
|
||||
|
||||
For more information, see [Angular template compiler options](#compiler-options).
|
||||
|
||||
* By [specifying Angular metadata](#metadata-aot).
|
||||
* By providing options in the `tsconfig.json` [TypeScript configuration file](guide/typescript-configuration). See [Angular compiler options](guide/angular-compiler-options).
|
||||
|
||||
|
||||
{@a metadata-aot}
|
||||
@ -1165,7 +1163,7 @@ Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](
|
||||
In the validation 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](#compiler-options)).
|
||||
[Angular Compiler Options](guide/angular-compiler-options)).
|
||||
|
||||
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`
|
||||
@ -1329,198 +1327,3 @@ Similar to TypeScript Compiler, Angular Compiler also supports `extends` in the
|
||||
}
|
||||
```
|
||||
More information about tsconfig extends can be found in the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
|
||||
|
||||
{@a compiler-options}
|
||||
## Angular template compiler options
|
||||
|
||||
The template compiler options are specified as members of the `"angularCompilerOptions"` object in the `tsconfig.json` file. Specify template compiler options along with the options supplied to the TypeScript compiler as shown here:
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
...
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"fullTemplateTypeCheck": true,
|
||||
"preserveWhitespaces": true,
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The following section describes the Angular's template compiler options.
|
||||
|
||||
### *enableResourceInlining*
|
||||
This option instructs the compiler to replace the `templateUrl` and `styleUrls` property in all `@Component` decorators with inlined contents in `template` and `styles` properties.
|
||||
When enabled, the `.js` output of `ngc` will have no lazy-loaded `templateUrl` or `styleUrls`.
|
||||
|
||||
### *skipMetadataEmit*
|
||||
|
||||
This option tells the compiler not to produce `.metadata.json` files.
|
||||
The option is `false` by default.
|
||||
|
||||
`.metadata.json` files contain information needed by the template compiler from a `.ts`
|
||||
file that is not included in the `.d.ts` file produced by the TypeScript compiler. This information contains,
|
||||
for example, the content of annotations (such as a component's template), which TypeScript
|
||||
emits to the `.js` file but not to the `.d.ts` file.
|
||||
|
||||
This option should be set to `true` if you are using TypeScript's `--outFile` option, because the metadata files
|
||||
are not valid for this style of TypeScript output. It is not recommended to use `--outFile` with
|
||||
Angular. Use a bundler, such as [webpack](https://webpack.js.org/), instead.
|
||||
|
||||
This option can also be set to `true` when using factory summaries because the factory summaries
|
||||
include a copy of the information that is in the `.metadata.json` file.
|
||||
|
||||
### *strictMetadataEmit*
|
||||
|
||||
This option tells the template compiler to report an error to the `.metadata.json`
|
||||
file if `"skipMetadataEmit"` is `false`. This option is `false` by default. This should only be used when `"skipMetadataEmit"` is `false` and `"skipTemplateCodeGen"` is `true`.
|
||||
|
||||
This option is intended to validate the `.metadata.json` files emitted for bundling with an `npm` package. The validation is strict and can emit errors for metadata that would never produce an error when used by the template compiler. You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol.
|
||||
|
||||
It is valid for `.metadata.json` files to contain errors. The template compiler reports these errors
|
||||
if the metadata is used to determine the contents of an annotation. The metadata
|
||||
collector cannot predict the symbols that are designed for use in an annotation, so it will preemptively
|
||||
include error nodes in the metadata for the exported symbols. The template compiler can then use the error
|
||||
nodes to report an error if these symbols are used. If the client of a library intends to use a symbol in an annotation, the template compiler will not normally report
|
||||
this until the client uses the symbol. This option allows detecting these errors during the build phase of
|
||||
the library and is used, for example, in producing Angular libraries themselves.
|
||||
|
||||
### *skipTemplateCodegen*
|
||||
|
||||
This option tells the compiler to suppress emitting `.ngfactory.js` and `.ngstyle.js` files. When set,
|
||||
this turns off most of the template compiler and disables reporting template diagnostics.
|
||||
This option 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`.
|
||||
|
||||
### *strictInjectionParameters*
|
||||
|
||||
When set to `true`, this options tells the compiler to report an error for a parameter supplied
|
||||
whose injection type cannot be determined. When this option is not provided or is `false`, constructor parameters of classes marked with `@Injectable` whose type cannot be resolved will
|
||||
produce a warning.
|
||||
|
||||
*Note*: It is recommended to change this option explicitly to `true` as this option will default to `true` in the future.
|
||||
|
||||
### *flatModuleOutFile*
|
||||
|
||||
When set to `true`, this option tells the template compiler to generate a flat module
|
||||
index of the given file name and the corresponding flat module metadata. Use this option when creating
|
||||
flat modules that are packaged similarly to `@angular/core` and `@angular/common`. When this option
|
||||
is used, the `package.json` for the library should refer
|
||||
to the generated flat module index instead of the library index file. With this
|
||||
option only one `.metadata.json` file is produced, which contains all the metadata necessary
|
||||
for symbols exported from the library index. In the generated `.ngfactory.js` files, the flat
|
||||
module index is used to import symbols that includes both the public API from the library index
|
||||
as well as shrowded internal symbols.
|
||||
|
||||
By default the `.ts` file supplied in the `files` field is assumed to be the library index.
|
||||
If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use.
|
||||
If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced. A flat module
|
||||
index `.d.ts` and `.js` will be created with the given `flatModuleOutFile` name in the same
|
||||
location as the library index `.d.ts` file. For example, if a library uses the
|
||||
`public_api.ts` file as the library index of the module, the `tsconfig.json` `files` field
|
||||
would be `["public_api.ts"]`. The `flatModuleOutFile` options could then be set to, for
|
||||
example `"index.js"`, which produces `index.d.ts` and `index.metadata.json` files. The
|
||||
library's `package.json`'s `module` field would be `"index.js"` and the `typings` field
|
||||
would be `"index.d.ts"`.
|
||||
|
||||
### *flatModuleId*
|
||||
|
||||
This option specifies the preferred module id to use for importing a flat module.
|
||||
References generated by the template compiler will use this module name when importing symbols
|
||||
from the flat module.
|
||||
This is only meaningful when `flatModuleOutFile` is also supplied. Otherwise the compiler ignores
|
||||
this option.
|
||||
|
||||
### *generateCodeForLibraries*
|
||||
|
||||
This option tells the template compiler to generate factory files (`.ngfactory.js` and `.ngstyle.js`)
|
||||
for `.d.ts` files with a corresponding `.metadata.json` file. This option defaults to
|
||||
`true`. When this option is `false`, factory files are generated only for `.ts` files.
|
||||
|
||||
This option should be set to `false` when using factory summaries.
|
||||
|
||||
### *fullTemplateTypeCheck*
|
||||
|
||||
This option tells the compiler to enable the [binding expression validation](#binding-expression-validation)
|
||||
phase of the template compiler which uses TypeScript to validate binding expressions.
|
||||
|
||||
This option is `false` by default.
|
||||
|
||||
*Note*: It is recommended to set this to `true` because this option will default to `true` in the future.
|
||||
|
||||
### *annotateForClosureCompiler*
|
||||
|
||||
This option tells the compiler to use [Tsickle](https://github.com/angular/tsickle) to annotate the emitted
|
||||
JavaScript with [JSDoc](http://usejsdoc.org/) comments needed by the
|
||||
[Closure Compiler](https://github.com/google/closure-compiler). This option defaults to `false`.
|
||||
|
||||
### *annotationsAs*
|
||||
|
||||
Use this option to modify how the Angular specific annotations are emitted to improve tree-shaking. Non-Angular
|
||||
annotations and decorators are unaffected. Default is `static fields`.
|
||||
|
||||
<style>
|
||||
td, th {vertical-align: top}
|
||||
</style>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Value</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>decorators</code></td>
|
||||
<td>Leave the decorators in place. This makes compilation faster. TypeScript will emit calls to the __decorate helper. Use <code>--emitDecoratorMetadata</code> for runtime reflection. However, the resulting code will not properly tree-shake.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>static fields</code></td>
|
||||
<td>Replace decorators with a static field in the class. Allows advanced tree-shakers like
|
||||
<a href="https://github.com/google/closure-compiler">Closure compiler</a> to remove unused classes.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### *trace*
|
||||
|
||||
This tells the compiler to print extra information while compiling templates.
|
||||
|
||||
### *enableLegacyTemplate*
|
||||
|
||||
Use of the `<template>` element was deprecated starting in Angular 4.0 in favor of using
|
||||
`<ng-template>` to avoid colliding with the DOM's element of the same name. Setting this option to
|
||||
`true` enables the use of the deprecated `<template>` element. This option
|
||||
is `false` by default. This option might be required by some third-party Angular libraries.
|
||||
|
||||
### *disableExpressionLowering*
|
||||
|
||||
The Angular template compiler transforms code that is used, or could be used, in an annotation
|
||||
to allow it to be imported from template factory modules. See
|
||||
[metadata rewriting](#metadata-rewriting) for more information.
|
||||
|
||||
Setting this option to `false` disables this rewriting, requiring the rewriting to be
|
||||
done manually.
|
||||
|
||||
### *disableTypeScriptVersionCheck*
|
||||
|
||||
When `true`, this option tells the compiler not to check the TypeScript version.
|
||||
The compiler will skip checking and will not error out when an unsupported version of TypeScript is used.
|
||||
Setting this option to `true` is not recommended because unsupported versions of TypeScript might have undefined behavior.
|
||||
|
||||
This option is `false` by default.
|
||||
|
||||
### *preserveWhitespaces*
|
||||
|
||||
This option tells the compiler whether to remove blank text nodes from compiled templates.
|
||||
As of v6, this option is `false` by default, which results in smaller emitted template factory modules.
|
||||
|
||||
### *allowEmptyCodegenFiles*
|
||||
|
||||
Tells the compiler to generate all the possible generated files even if they are empty. This option is
|
||||
`false` by default. This is an option used by the Bazel build rules and is needed to simplify
|
||||
how Bazel rules track file dependencies. It is not recommended to use this option outside of the Bazel
|
||||
rules.
|
||||
|
||||
|
@ -53,7 +53,7 @@ Angular supports most recent browsers. This includes the following specific vers
|
||||
IE
|
||||
</td>
|
||||
<td>
|
||||
11, 10, 9
|
||||
11, 10, 9 ("compatibility view" mode not supported)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -183,7 +183,7 @@ These are the polyfills required to run an Angular application on each supported
|
||||
|
||||
<td>
|
||||
Chrome, Firefox, Edge, <br>
|
||||
Safari, Android, IE10+
|
||||
Safari, Android, IE 10+
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@ -197,7 +197,7 @@ These are the polyfills required to run an Angular application on each supported
|
||||
<tr style="vertical-align: top">
|
||||
|
||||
<td>
|
||||
IE9
|
||||
IE 9
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@ -275,7 +275,7 @@ Some features of Angular may require additional polyfills.
|
||||
</td>
|
||||
|
||||
<td>
|
||||
All but Chrome, Firefox, Edge, IE11 and Safari 10
|
||||
All but Chrome, Firefox, Edge, IE 11 and Safari 10
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
@ -294,7 +294,7 @@ Some features of Angular may require additional polyfills.
|
||||
</td>
|
||||
|
||||
<td>
|
||||
IE10, IE11
|
||||
IE 10, IE 11
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
@ -214,14 +214,17 @@ Each budget entry is a JSON object with the following properties:
|
||||
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>The type of budget. One of:
|
||||
<td>
|
||||
|
||||
* bundle - The size of a specific bundle.
|
||||
* initial - The initial size of the app.
|
||||
* allScript - The size of all scripts.
|
||||
* all - The size of the entire app.
|
||||
* anyScript - The size of any one script.
|
||||
* any - The size of any file.
|
||||
The type of budget. One of:
|
||||
|
||||
* `bundle` - The size of a specific bundle.
|
||||
* `initial` - The initial size of the app.
|
||||
* `allScript` - The size of all scripts.
|
||||
* `all` - The size of the entire app.
|
||||
* `anyComponentStyle` - This size of any one component stylesheet.
|
||||
* `anyScript` - The size of any one script.
|
||||
* `any` - The size of any file.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -253,7 +253,7 @@ In the `package.json` file, add a `builders` key that tells the Architect tool w
|
||||
</code-example>
|
||||
|
||||
The official name of our builder is now ` @example/command-runner:command`.
|
||||
The first part of this is the package name (resolved using node resolution), and the second part is the builder name (resolved using the `builder.json` file).
|
||||
The first part of this is the package name (resolved using node resolution), and the second part is the builder name (resolved using the `builders.json` file).
|
||||
|
||||
Using one of our `options` is very straightforward, we did this in the previous section when we accessed `options.command`.
|
||||
|
||||
@ -279,28 +279,28 @@ By default, for example, the `build` command runs the builder `@angular-devkit/
|
||||
"myApp": {
|
||||
...
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/myApp",
|
||||
"index": "src/index.html",
|
||||
...
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
...
|
||||
}
|
||||
}
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/myApp",
|
||||
"index": "src/index.html",
|
||||
...
|
||||
},
|
||||
...
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
...
|
||||
}
|
||||
}
|
||||
},
|
||||
...
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -419,15 +419,13 @@ We need to update the `angular.json` file to add a target for this builder to th
|
||||
"projects": {
|
||||
"builder-test": {
|
||||
"architect": {
|
||||
"builder-test": {
|
||||
"touch": {
|
||||
"builder": "@example/command-runner:command",
|
||||
"options": {
|
||||
"command": "touch",
|
||||
"args": [
|
||||
"src/main.ts"
|
||||
]
|
||||
}
|
||||
"touch": {
|
||||
"builder": "@example/command-runner:command",
|
||||
"options": {
|
||||
"command": "touch",
|
||||
"args": [
|
||||
"src/main.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"build": {
|
||||
@ -497,14 +495,14 @@ The test uses the builder to run the `ls` command, then validates that it ran su
|
||||
|
||||
<code-example language="typescript">
|
||||
|
||||
import { Architect, ArchitectHost } from '@angular-devkit/architect';
|
||||
import { Architect } from '@angular-devkit/architect';
|
||||
import { TestingArchitectHost } from '@angular-devkit/architect/testing';
|
||||
// Our builder forwards the STDOUT of the command to the logger.
|
||||
import { logging, schema } from '@angular-devkit/core';
|
||||
|
||||
describe('Command Runner Builder', () => {
|
||||
let architect: Architect;
|
||||
let architectHost: ArchitectHost;
|
||||
let architectHost: TestingArchitectHost;
|
||||
|
||||
beforeEach(async () => {
|
||||
const registry = new schema.CoreSchemaRegistry();
|
||||
|
@ -30,7 +30,7 @@ The Filter/Stagger tab in the live example shows a list of heroes with an introd
|
||||
|
||||
The following example demonstrates how to use `query()` and `stagger()` functions on the entry of an animated element.
|
||||
|
||||
* Use `query()` to look for any element entering or leaving the page. The query specifies elements meeting certain CSS class criteria.
|
||||
* Use `query()` to look for an element entering the page that meets certain criteria.
|
||||
|
||||
* For each of these elements, use `style()` to set the same initial style for the element. Make it invisible and use `transform` to move it out of position so that it can slide into place.
|
||||
|
||||
|
@ -134,7 +134,7 @@ The `@NgModule()` and `@Component()` decorators have the `providers` metadata op
|
||||
|
||||
Components are directives, and the `providers` option is inherited from `@Directive()`. You can also configure providers for directives and pipes at the same level as the component.
|
||||
|
||||
Learn more about [where to configure providers](guide/hierarchical-dependency-injection#where-to-register).
|
||||
Learn more about [where to configure providers](guide/hierarchical-dependency-injection).
|
||||
|
||||
</div>
|
||||
|
||||
|
@ -178,7 +178,7 @@ For more information, see [/deep/, >>>, and ::ng-deep](guide/component-styles#de
|
||||
{@a template-tag}
|
||||
### <template> tag
|
||||
|
||||
The `<template>` tag was deprecated in v4 to avoid colliding with the DOM's element of the same name (such as when using web components). Use `<ng-template>` instead. For more information, see the [Ahead-of-Time Compilation](guide/aot-compiler#enablelegacytemplate) guide.
|
||||
The `<template>` tag was deprecated in v4 to avoid colliding with the DOM's element of the same name (such as when using web components). Use `<ng-template>` instead. For more information, see the [Ahead-of-Time Compilation](guide/angular-compiler-options#enablelegacytemplate) guide.
|
||||
|
||||
|
||||
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -207,3 +207,6 @@ You may also be interested in the following:
|
||||
* [Routing and Navigation](guide/router).
|
||||
* [Providers](guide/providers).
|
||||
* [Types of Feature Modules](guide/module-types).
|
||||
* [Route-level code-splitting in Angular](https://web.dev/route-level-code-splitting-in-angular/)
|
||||
* [Route preloading strategies in Angular](https://web.dev/route-preloading-in-angular/)
|
||||
|
||||
|
@ -2,15 +2,17 @@
|
||||
|
||||
Angular makes use of observables as an interface to handle a variety of common asynchronous operations. For example:
|
||||
|
||||
* The `EventEmitter` class extends `Observable`.
|
||||
* You can define [custom events](guide/template-syntax#custom-events-with-eventemitter) that send observable output data from a child to a parent component.
|
||||
* The HTTP module uses observables to handle AJAX requests and responses.
|
||||
* The Router and Forms modules use observables to listen for and respond to user-input events.
|
||||
|
||||
## Event emitter
|
||||
## Transmitting data between components
|
||||
|
||||
Angular provides an `EventEmitter` class that is used when publishing values from a component through the `@Output()` decorator. `EventEmitter` extends `Observable`, adding an `emit()` method so it can send arbitrary values. When you call `emit()`, it passes the emitted value to the `next()` method of any subscribed observer.
|
||||
Angular provides an `EventEmitter` class that is used when publishing values from a component through the [`@Output()` decorator](guide/template-syntax#how-to-use-output).
|
||||
`EventEmitter` extends [RxJS `Subject`](https://rxjs.dev/api/index/class/Subject), adding an `emit()` method so it can send arbitrary values.
|
||||
When you call `emit()`, it passes the emitted value to the `next()` method of any subscribed observer.
|
||||
|
||||
A good example of usage can be found on the [EventEmitter](https://angular.io/api/core/EventEmitter) documentation. Here is the example component that listens for open and close events:
|
||||
A good example of usage can be found in the [EventEmitter](https://angular.io/api/core/EventEmitter) documentation. Here is the example component that listens for open and close events:
|
||||
|
||||
`<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>`
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
# The RxJS library
|
||||
|
||||
Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change ([Wikipedia](https://en.wikipedia.org/wiki/Reactive_programming)). RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code ([RxJS Docs](http://reactivex.io/rxjs/)).
|
||||
Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change ([Wikipedia](https://en.wikipedia.org/wiki/Reactive_programming)). RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. See ([RxJS Docs](https://rxjs.dev/guide/overview)).
|
||||
|
||||
RxJS provides an implementation of the `Observable` type, which is needed until the type becomes part of the language and until browsers support it. The library also provides utility functions for creating and working with observables. These utility functions can be used for:
|
||||
|
||||
@ -45,7 +45,7 @@ The `pipe()` function is also a method on the RxJS `Observable`, so you use this
|
||||
|
||||
### Common operators
|
||||
|
||||
RxJS provides many operators, but only a handful are used frequently. For a list of operators and usage samples, visit the [RxJS API Documentation](https://rxjs-dev.firebaseapp.com/api).
|
||||
RxJS provides many operators, but only a handful are used frequently. For a list of operators and usage samples, visit the [RxJS API Documentation](https://rxjs.dev/api).
|
||||
|
||||
<div class="alert is-helpful">
|
||||
Note that, for Angular apps, we prefer combining operators with pipes, rather than chaining. Chaining is used in many RxJS examples.
|
||||
|
@ -137,8 +137,9 @@ export interface DataGroup {
|
||||
Similar to `assetGroups`, every data group has a `name` which uniquely identifies it.
|
||||
|
||||
### `urls`
|
||||
A list of URL patterns. URLs that match these patterns will be cached according to this data group's policy.<br>
|
||||
_(Negative glob patterns are not supported and `?` will be matched literally; i.e. it will not match any character other than `?`.)_
|
||||
A list of URL patterns. URLs that match these patterns are cached according to this data group's policy. Only non-mutating requests (GET and HEAD) are cached.
|
||||
* Negative glob patterns are not supported.
|
||||
* `?` is matched literally; that is, it matches *only* the character `?`.
|
||||
|
||||
### `version`
|
||||
Occasionally APIs change formats in a way that is not backward-compatible. A new version of the app may not be compatible with the old API format and thus may not be compatible with existing cached resources from that API.
|
||||
|
@ -31,11 +31,34 @@ Installing the Angular service worker is as simple as including an `NgModule`. I
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Your application must run in a web browser that supports service workers. Currently, service workers are supported in the latest versions of Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android version) and Samsung Internet. Browsers like IE and Opera Mini do not provide the support. To learn more about other browsers that are service worker ready, see the [Can I Use](https://caniuse.com/#feat=serviceworkers) page and [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API).
|
||||
To make use of all the features of Angular service worker, use the latest versions of Angular and the Angular CLI.
|
||||
|
||||
In addition, in order for service workers to be registered, the app must be accessed over HTTPS, not HTTP. Browsers will ignore service workers on pages that are served over an insecure connection. The reason is that service workers are quite powerful, so extra care needs to be taken to ensure the service worker script has not been tampered with.
|
||||
In order for service workers to be registered, the app must be accessed over HTTPS, not HTTP.
|
||||
Browsers ignore service workers on pages that are served over an insecure connection.
|
||||
The reason is that service workers are quite powerful, so extra care needs to be taken to ensure the service worker script has not been tampered with.
|
||||
|
||||
There is one exception to this rule: to make local development easier, browsers do _not_ require a secure connection when accessing an app on `localhost`.
|
||||
|
||||
### Browser support
|
||||
|
||||
To benefit from the Angular service worker, your app must run in a web browser that supports service workers in general.
|
||||
Currently, service workers are supported in the latest versions of Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android version) and Samsung Internet.
|
||||
Browsers like IE and Opera Mini do not support service workers.
|
||||
|
||||
If the user is accessing your app via a browser that does not support service workers, the service worker is not registered and related behavior such as offline cache management and push notifications does not happen.
|
||||
More specifically:
|
||||
|
||||
* The browser does not download the service worker script and `ngsw.json` manifest file.
|
||||
* Active attempts to interact with the service worker, such as calling `SwUpdate.checkForUpdate()`, return rejected promises.
|
||||
* The observable events of related services, such as `SwUpdate.available`, are not triggered.
|
||||
|
||||
It is highly recommended that you ensure that your app works even without service worker support in the browser.
|
||||
Although an unsupported browser ignores service worker caching, it will still report errors if the app attempts to interact with the service worker.
|
||||
For example, calling `SwUpdate.checkForUpdate()` will return rejected promises.
|
||||
To avoid such an error, you can check whether the Angular service worker is enabled using `SwUpdate.isEnabled()`.
|
||||
|
||||
To learn more about other browsers that are service worker ready, see the [Can I Use](https://caniuse.com/#feat=serviceworkers) page and [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API).
|
||||
|
||||
There is one exception to this rule: To make local development easier, browsers do _not_ require a secure connection when accessing an app on `localhost`.
|
||||
|
||||
## Related resources
|
||||
|
||||
@ -46,7 +69,6 @@ For more information about browser support, see the [browser support](https://de
|
||||
|
||||
The remainder of this Angular documentation specifically addresses the Angular implementation of service workers.
|
||||
|
||||
## More on Angular service workers
|
||||
## Next steps
|
||||
|
||||
You may also be interested in the following:
|
||||
* [Getting Started with service workers](guide/service-worker-getting-started).
|
||||
To begin using Angular service workers, see [Getting Started with service workers](guide/service-worker-getting-started).
|
||||
|
@ -927,7 +927,7 @@ As always, strive for consistency.
|
||||
<div class="s-rule do">
|
||||
|
||||
**Do** use a custom prefix for a component selector.
|
||||
For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the prefix `admin` represents an admin feature area.
|
||||
For example, the prefix `toh` represents **T**our **o**f **H**eroes and the prefix `admin` represents an admin feature area.
|
||||
|
||||
</div>
|
||||
|
||||
@ -1080,6 +1080,10 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
|
||||
|
||||
|
||||
**Do** use consistent names for all pipes, named after their feature.
|
||||
The pipe class name should use [UpperCamelCase](guide/glossary#case-types)
|
||||
(the general convention for class names),
|
||||
and the corresponding `name` string should use *lowerCamelCase*.
|
||||
The `name` string cannot use hyphens ("dash-case" or "kebab-case").
|
||||
|
||||
|
||||
</div>
|
||||
@ -1670,7 +1674,7 @@ keep the **F**lattest structure you can, and
|
||||
|
||||
|
||||
|
||||
**Why?** LIFT Provides a consistent structure that scales well, is modular, and makes it easier to increase developer efficiency by finding code quickly.
|
||||
**Why?** LIFT provides a consistent structure that scales well, is modular, and makes it easier to increase developer efficiency by finding code quickly.
|
||||
To confirm your intuition about a particular structure, ask:
|
||||
_can I quickly open and start work in all of the related files for this feature_?
|
||||
|
||||
@ -1690,7 +1694,7 @@ _can I quickly open and start work in all of the related files for this feature_
|
||||
|
||||
|
||||
|
||||
**Do** make locating code intuitive, simple and fast.
|
||||
**Do** make locating code intuitive, simple, and fast.
|
||||
|
||||
|
||||
</div>
|
||||
|
@ -6,14 +6,14 @@ This guide offers tips and techniques for unit and integration testing Angular a
|
||||
The guide presents tests of a sample application created with the [Angular CLI](cli). This sample application is much like the one created in the [_Tour of Heroes_ tutorial](tutorial).
|
||||
The sample application and all tests in this guide are available for inspection and experimentation:
|
||||
|
||||
- <live-example embedded-style>Sample app</live-example>
|
||||
- <live-example stackblitz="specs">Tests</live-example>
|
||||
- <live-example embedded-style noDownload>Sample app</live-example>
|
||||
- <live-example stackblitz="specs" noDownload>Tests</live-example>
|
||||
|
||||
<hr>
|
||||
|
||||
## Setup
|
||||
|
||||
The Angular CLI downloads and install everything you need to test an Angular application with the [Jasmine test framework](https://jasmine.github.io/).
|
||||
The Angular CLI downloads and installs everything you need to test an Angular application with the [Jasmine test framework](https://jasmine.github.io/).
|
||||
|
||||
The project you create with the CLI is immediately ready to test.
|
||||
Just run the [`ng test`](cli/test) CLI command:
|
||||
@ -116,7 +116,7 @@ jobs:
|
||||
build:
|
||||
working_directory: ~/my-project
|
||||
docker:
|
||||
- image: circleci/node:8-browsers
|
||||
- image: circleci/node:10-browsers
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
You learned the basics of Angular animations in the [introduction](guide/animations) page.
|
||||
|
||||
In this guide, we go into greater depth on special transition states such as `*` (wildcard) and `void`, and show how these special states are used for elements entering and leaving a view. The chapter also explores on multiple animation triggers, animation callbacks and sequence-based animation using keyframes.
|
||||
In this guide, we go into greater depth on special transition states such as `*` (wildcard) and `void`, and show how these special states are used for elements entering and leaving a view. The chapter also explores multiple animation triggers, animation callbacks and sequence-based animation using keyframes.
|
||||
|
||||
## Predefined states and wildcard matching
|
||||
|
||||
|
@ -348,7 +348,7 @@ For example:
|
||||
|
||||
<code-example language="json">
|
||||
|
||||
"sourceMaps": { "scripts": true, "styles": false, "hidden": true, "vendor": true }
|
||||
"sourceMap": { "scripts": true, "styles": false, "hidden": true, "vendor": true }
|
||||
|
||||
</code-example>
|
||||
|
||||
|
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 600 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g id="NullInjector"><rect x="11.864" y="16.952" width="575.424" height="114.429" style="fill:#fff;stroke:#0159d3;stroke-width:3.81px;"/><text x="208.488px" y="67.96px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:30.514px;">NullInjector()</text><g transform="matrix(0.847458,0,0,0.847619,-81.3559,-80.5238)"><text x="286.27px" y="212px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">always throws an error unless</text><text x="334.768px" y="236.785px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">you use @Optional()</text></g></g><path d="M286.822,144.941l-7.161,0l11.017,-11.017l11.017,11.017l-7.161,0l0,38.992l-7.712,0l0,-38.992Z" style="fill:#0159d3;stroke:#0159d3;stroke-width:3.81px;"/><path d="M286.822,297.512l-7.161,0l11.017,-11.017l11.017,11.017l-7.161,0l0,38.993l-7.712,0l0,-38.993Z" style="fill:#0159d3;stroke:#0159d3;stroke-width:3.81px;"/><g id="Moduleinjector"><rect x="11.864" y="168.913" width="575.424" height="114.429" style="fill:#fff;stroke:#0159d3;stroke-width:3.81px;"/><text x="215.313px" y="211.956px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:25.429px;">ModuleInjector</text><g transform="matrix(0.847458,0,0,0.847619,-24.5763,-79.6762)"><text x="215.592px" y="385px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">(configured by PlatformModule)</text><text x="74.879px" y="409.785px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">has special things like DomSanitizer => platformBrowser()</text></g></g><g id="root"><rect x="10.599" y="320.428" width="577.966" height="113.581" style="fill:#fff;stroke:#0159d3;stroke-width:3.81px;"/><g transform="matrix(0.847458,0,0,0.847619,-59.3163,262.743)"><text x="280.144px" y="115px" style="font-family:'Courier';font-size:30px;">root</text><text x="370.158px" y="115px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:30px;">ModuleInjector</text></g><g transform="matrix(0.847458,0,0,0.847619,15.5593,-82.219)"><text x="165.889px" y="559px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">(configured by <tspan x="324.209px 338.014px 351.361px " y="559px 559px 559px ">You</tspan>rAppModule)</text><text x="5.57px" y="583.785px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">has things for your app => bootstrapModule(Y<tspan x="498.332px 511.68px " y="583.785px 583.785px ">ou</tspan>rAppModule)</text></g></g></svg>
|
After Width: | Height: | Size: 2.9 KiB |
@ -276,8 +276,7 @@
|
||||
"twitter": "deborahkurata",
|
||||
"website": "http://blogs.msmvps.com/deborahk/",
|
||||
"bio": "Deborah is a software developer, author, and Google Developer Expert. She is author of several Pluralsight courses including: 'Angular 2: Getting Started' and ‘Angular Routing’",
|
||||
"groups": ["Collaborators", "GDE"],
|
||||
"mentor": "kara"
|
||||
"groups": ["GDE"]
|
||||
},
|
||||
"alyssa": {
|
||||
"name": "Alyssa Nicoll",
|
||||
|
@ -13,35 +13,23 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- ng-conf 2019-->
|
||||
<!-- NG-DE 2019-->
|
||||
<tr>
|
||||
<th><a href="https://ng-conf.org/" title="ng-conf">ng-conf</a></th>
|
||||
<td>Salt Lake City, Utah</td>
|
||||
<td>May 1-3, 2019</td>
|
||||
<th><a href="https://ng-de.org/" title="NG-DE">NG-DE</a></th>
|
||||
<td>Berlin, Germany</td>
|
||||
<td>August 29th workshops, 30-31 conference, 2019</td>
|
||||
</tr>
|
||||
<!-- ngVikings 2019-->
|
||||
<tr>
|
||||
<th><a href="https://ngvikings.org/" title="ngVikings">ngVikings</a></th>
|
||||
<td>Copenhagen, Denmark</td>
|
||||
<td>May 26 (workshops), 27-28 (conference), 2019</td>
|
||||
</tr>
|
||||
<!-- ngJapan-->
|
||||
<tr>
|
||||
<th><a href="https://ngjapan.org" title="ng-japan">ng-japan</a></th>
|
||||
<td>Tokyo, Japan</td>
|
||||
<td>July 13, 2019</td>
|
||||
</tr>
|
||||
<!-- AngularConnect 2019-->
|
||||
<tr>
|
||||
<th><a href="https://www.angularconnect.com/?utm_source=angular.io&utm_medium=referral" title="AngularConnect">AngularConnect</a></th>
|
||||
<td>London, UK</td>
|
||||
<td>September 19-20, 2019</td>
|
||||
</tr>
|
||||
<!-- NG-DE 2019-->
|
||||
<!-- ReactiveConf 2019 -->
|
||||
<tr>
|
||||
<th><a href="https://ng-de.org/" title="NG-DE">NG-DE</a></th>
|
||||
<td>Berlin, Germany</td>
|
||||
<td>August 29th workshops, 30-31 conference, 2019</td>
|
||||
<th><a href="https://reactiveconf.com/" title="ReactiveConf">ReactiveConf</a></th>
|
||||
<td>Prague, Czech Republic</td>
|
||||
<td>October 30 - November 1, 2019</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -56,6 +44,24 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- ngJapan-->
|
||||
<tr>
|
||||
<th><a href="https://ngjapan.org" title="ng-japan">ng-japan</a></th>
|
||||
<td>Tokyo, Japan</td>
|
||||
<td>July 13, 2019</td>
|
||||
</tr>
|
||||
<!-- ngVikings 2019-->
|
||||
<tr>
|
||||
<th><a href="https://ngvikings.org/" title="ngVikings">ngVikings</a></th>
|
||||
<td>Copenhagen, Denmark</td>
|
||||
<td>May 26 (workshops), 27-28 (conference), 2019</td>
|
||||
</tr>
|
||||
<!-- ng-conf 2019-->
|
||||
<tr>
|
||||
<th><a href="https://ng-conf.org/" title="ng-conf">ng-conf</a></th>
|
||||
<td>Salt Lake City, Utah</td>
|
||||
<td>May 1-3, 2019</td>
|
||||
</tr>
|
||||
<!-- ng-India 2019-->
|
||||
<tr>
|
||||
<th><a href="https://www.ng-ind.com/" title="ng-India">ng-India</a></th>
|
||||
|
@ -259,6 +259,12 @@
|
||||
"UI Components": {
|
||||
"order": 4,
|
||||
"resources": {
|
||||
"AngularUIToolkit": {
|
||||
"desc": "Angular UI Toolkit: 115 professionally maintained UI components ranging from a robust grid to charts and more. Try for free & build Angular apps faster.",
|
||||
"rev": true,
|
||||
"title": "Angular UI Toolkit",
|
||||
"url": "https://www.angular-ui-tools.com"
|
||||
},
|
||||
"IgniteUIforAngular": {
|
||||
"desc": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps.",
|
||||
"rev": true,
|
||||
@ -637,6 +643,12 @@
|
||||
"rev": true,
|
||||
"title": "Loiane Training (Português)",
|
||||
"url": "https://loiane.training/course/angular/"
|
||||
},
|
||||
"web-dev-angular": {
|
||||
"desc": "Build performant and progressive Angular applications.",
|
||||
"rev": true,
|
||||
"title": "web.dev/angular",
|
||||
"url": "https://web.dev/angular"
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -728,7 +740,7 @@
|
||||
"desc": "Angular trainings delivered by Zenika (FRANCE)",
|
||||
"rev": true,
|
||||
"title": "Angular Trainings (French)",
|
||||
"url": "https://training.zenika.com/fr/training/angular2/description"
|
||||
"url": "https://training.zenika.com/fr/training/angular/description"
|
||||
},
|
||||
"formationjs": {
|
||||
"desc": "Angular onsite training in Paris (France). Monthly Angular workshops and custom onsite classes. We are focused on Angular, so we are always up to date.",
|
||||
|
@ -597,6 +597,11 @@
|
||||
"title": "Ahead-of-Time Compilation",
|
||||
"tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler."
|
||||
},
|
||||
{
|
||||
"url": "guide/angular-compiler-options",
|
||||
"title": "Compiler Options",
|
||||
"tooltip": "Configuration options for the AOT compiler."
|
||||
},
|
||||
{
|
||||
"url": "guide/build",
|
||||
"title": "Building & Serving",
|
||||
|
@ -91,8 +91,6 @@ configures it with the `routes` in one step by calling
|
||||
|
||||
Next, `AppRoutingModule` exports `RouterModule` so it will be available throughout the app.
|
||||
|
||||
Open the `AppComponent` template and replace the `<app-heroes>` element with a `<router-outlet>` element.
|
||||
|
||||
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts (exports array)" region="export-routermodule">
|
||||
</code-example>
|
||||
|
||||
|
@ -317,7 +317,7 @@ Each hero in the heroes list should have a delete button.
|
||||
Add the following button element to the `HeroesComponent` template, after the hero
|
||||
name in the repeated `<li>` element.
|
||||
|
||||
<code-example path="toh-pt6/src/app/heroes/heroes.component.html" header="src/app/hero.service.ts" region="delete"></code-example>
|
||||
<code-example path="toh-pt6/src/app/heroes/heroes.component.html" header="src/app/heroes/heroes.component.html" region="delete"></code-example>
|
||||
|
||||
The HTML for the list of heroes should look like this:
|
||||
|
||||
|
@ -8,7 +8,7 @@
|
||||
"scripts": {
|
||||
"preinstall": "node ../tools/yarn/check-yarn.js",
|
||||
"postinstall": "node tools/cli-patches/patch.js",
|
||||
"aio-use-local": "node tools/ng-packages-installer overwrite . --debug",
|
||||
"aio-use-local": "node tools/ng-packages-installer overwrite . --debug --force --build-packages",
|
||||
"aio-use-npm": "node tools/ng-packages-installer restore .",
|
||||
"aio-check-local": "node tools/ng-packages-installer check .",
|
||||
"ng": "yarn check-env && ng",
|
||||
@ -17,18 +17,22 @@
|
||||
"build": "yarn ~~build",
|
||||
"prebuild-local": "yarn setup-local",
|
||||
"build-local": "yarn ~~build",
|
||||
"prebuild-local-ci": "yarn setup-local --no-build-packages",
|
||||
"build-local-ci": "yarn ~~build --progress=false",
|
||||
"prebuild-with-ivy": "yarn setup-local && node scripts/switch-to-ivy",
|
||||
"build-with-ivy": "yarn ~~build",
|
||||
"extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js a8fe15cb6",
|
||||
"prebuild-with-ivy-ci": "yarn setup-local --no-build-packages && node scripts/switch-to-ivy",
|
||||
"build-with-ivy-ci": "yarn ~~build --progress=false",
|
||||
"extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js e0055d293",
|
||||
"lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint && yarn tools-lint",
|
||||
"test": "yarn check-env && ng test",
|
||||
"pree2e": "yarn check-env && yarn update-webdriver",
|
||||
"e2e": "ng e2e --no-webdriver-update",
|
||||
"presetup": "yarn --cwd .. install && yarn install --frozen-lockfile && yarn ~~check-env && yarn ~~clean-generated && yarn boilerplate:remove",
|
||||
"setup": "yarn aio-use-npm && yarn example-use-npm",
|
||||
"setup": "yarn example-use-npm && yarn aio-use-npm",
|
||||
"postsetup": "yarn boilerplate:add && yarn extract-cli-command-docs && yarn docs",
|
||||
"presetup-local": "yarn presetup",
|
||||
"setup-local": "yarn aio-use-local && yarn example-use-local",
|
||||
"setup-local": "yarn example-use-local && yarn aio-use-local",
|
||||
"postsetup-local": "yarn postsetup",
|
||||
"set-opensearch-url": "node --eval \"const sh = require('shelljs'); sh.set('-e'); sh.sed('-i', /PLACEHOLDER_URL/g, process.argv[1], 'dist/assets/opensearch.xml');\"",
|
||||
"presmoke-tests": "yarn update-webdriver",
|
||||
@ -39,7 +43,7 @@
|
||||
"test-pwa-score-localhost": "run-p --race \"~~light-server -s dist -p 4200 --quiet\" \"test-pwa-score http://localhost:4200 {1} {2}\" --",
|
||||
"example-e2e": "yarn example-check-local && node ./tools/examples/run-example-e2e",
|
||||
"example-lint": "tslint --config \"content/examples/tslint.json\" \"content/examples/**/*.ts\" --exclude \"content/examples/styleguide/**/*.avoid.ts\"",
|
||||
"example-use-local": "node tools/ng-packages-installer overwrite ./tools/examples/shared --debug",
|
||||
"example-use-local": "node tools/ng-packages-installer overwrite ./tools/examples/shared --debug --force",
|
||||
"example-use-npm": "node tools/ng-packages-installer restore ./tools/examples/shared",
|
||||
"example-check-local": "node tools/ng-packages-installer check ./tools/examples/shared",
|
||||
"deploy-production": "scripts/deploy-to-firebase.sh",
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user