Compare commits
309 Commits
Author | SHA1 | Date | |
---|---|---|---|
a73b8a62c8 | |||
2fe8f2b1e0 | |||
f1c08c6918 | |||
bf9de8ca53 | |||
df37c47ac5 | |||
788d19c036 | |||
8492499fe7 | |||
48174010a1 | |||
1460e46ba1 | |||
a7ff7d8d27 | |||
eb970b4626 | |||
18d301258a | |||
6a01fa532c | |||
e190a7e9de | |||
53c6425954 | |||
c198dc6c19 | |||
d1b26dd3a1 | |||
ce7131f3fb | |||
934702892e | |||
8a830a72e2 | |||
2abb54c4a1 | |||
44632bb700 | |||
e33b382ab4 | |||
c4da400db4 | |||
c40e6b2edc | |||
978fc27314 | |||
b9f2bbb7d1 | |||
9654d646ae | |||
7f214499e8 | |||
a3d55a9d27 | |||
e222b8761e | |||
1435c0b3a9 | |||
0a7aebbcf5 | |||
bd7f91feac | |||
3bbc89b958 | |||
52d98e563d | |||
b279f8bd62 | |||
954e34cc91 | |||
e1f6d15387 | |||
cbb3794931 | |||
77a5790a9d | |||
4ca401c394 | |||
3dcd5ebdbc | |||
49307f0595 | |||
762fc28fee | |||
338e58c278 | |||
7e2ed89208 | |||
56a3dcf44c | |||
501bacdcf6 | |||
c5f2979a87 | |||
fe02462b5f | |||
3000d19ad1 | |||
dcf9f05c9a | |||
ba56f3c15b | |||
865ad56e9a | |||
5cda2a041b | |||
6a484853a9 | |||
e6ac289518 | |||
4e8614bb92 | |||
9ace748d3a | |||
08c38a1f99 | |||
9aeef0afdb | |||
8aef446373 | |||
f7ee91a17c | |||
8ae0afd3f8 | |||
be82270493 | |||
4cef2c1236 | |||
26e3615e19 | |||
65f20107fe | |||
5a7bcd1862 | |||
152ea36c80 | |||
ea2adb104b | |||
19caace2ab | |||
ccc1c27461 | |||
97268b95f7 | |||
7c41abe64a | |||
991e138650 | |||
d00b421402 | |||
06ffed5141 | |||
5a15126520 | |||
9e4b2f1a4f | |||
393529d3b5 | |||
81b75590d7 | |||
151f0f4b2c | |||
f88f941008 | |||
0e17958640 | |||
e82b45c8a7 | |||
8422ef2a93 | |||
cdf586d0d2 | |||
3828c89792 | |||
0f352b6350 | |||
06bdecffb9 | |||
99ddec152b | |||
31aba96fcb | |||
facce2c9fd | |||
edaf058548 | |||
4bff2d0c8c | |||
cfc608aaf3 | |||
6d9f5fcddb | |||
b19a05c25a | |||
bd75b3b7b3 | |||
1c67b9063b | |||
9a9ae60e0e | |||
ae6fa9260a | |||
f8fa2f2a6c | |||
f3ee9a6144 | |||
d076c51455 | |||
38a7e2a775 | |||
c61c14a127 | |||
652b0959a8 | |||
002fbddcf1 | |||
4761d40a41 | |||
608e0f0d67 | |||
45718b3b21 | |||
b5756bcc39 | |||
60f0462049 | |||
9fd22959d3 | |||
d5dd907396 | |||
5a6bf7de0e | |||
d135bb5e6e | |||
8b9a3e49f2 | |||
44e55fe2e4 | |||
063cc308b6 | |||
c567135dd5 | |||
361f181c8c | |||
b40844523b | |||
c8af830ec8 | |||
e2c9ddb33e | |||
04196ec2d0 | |||
7323072c5c | |||
f0c5400cab | |||
3f2f937c9f | |||
256fe2421a | |||
e6f27bcb0c | |||
8abcf04a5e | |||
bf38df4eb9 | |||
79a025306a | |||
62c936aa49 | |||
77e1b34d91 | |||
26cb128b3c | |||
fdbe07982a | |||
c0e3209915 | |||
70880f0cea | |||
221a5ba634 | |||
68b08cf782 | |||
10560a0872 | |||
561e01ddfd | |||
d1345c78f0 | |||
276f9067c8 | |||
0e90a4263b | |||
e4cc1398aa | |||
8d1f993ceb | |||
df1ab49893 | |||
df03fec8a6 | |||
c01cae22e1 | |||
5a46f94987 | |||
5716605d52 | |||
8043e3131c | |||
54f7245081 | |||
5de24b6dfe | |||
4dc4d7f30a | |||
fcea1a3c22 | |||
8bc4da8665 | |||
a5a2d525ae | |||
4690dcecac | |||
722b2fa6ed | |||
124d1abf19 | |||
736d3ef820 | |||
9b0ad347e1 | |||
d2598ace0a | |||
4a25e4cf95 | |||
3f67bf208d | |||
d85476fd8c | |||
9763edf829 | |||
b6ae54c547 | |||
3de26a84ff | |||
8022d3691b | |||
581336a918 | |||
effc58086c | |||
766615c8a1 | |||
ede4246663 | |||
bb8a6abbf2 | |||
32daa930d0 | |||
b6aa99d3a7 | |||
e10b213784 | |||
a67cf99b0c | |||
04d04fd147 | |||
17361d2b2c | |||
9b88920aa9 | |||
b12e76d1d3 | |||
af001a8cbd | |||
db64b014f8 | |||
7e34975bb0 | |||
0fa48e8c00 | |||
fde3f467e2 | |||
7b378a6920 | |||
3136d9ff2e | |||
325e6cf557 | |||
381d7c4e44 | |||
1b6f3c1ead | |||
c38349127c | |||
a4817729a2 | |||
61c343e3eb | |||
24e6c1e80d | |||
42fc5c9b33 | |||
33e7b285ca | |||
74afdc37da | |||
3c1ffba0ad | |||
14c0017db8 | |||
4878f4890b | |||
b7edef0cd3 | |||
39fa937ab9 | |||
2977829c67 | |||
dbe845e048 | |||
e562acc884 | |||
e295c6a0ae | |||
10b43355f8 | |||
d4e7587bd8 | |||
cabe03cf6d | |||
0cefa9e342 | |||
e073daa48e | |||
994d48a96e | |||
806f8118c8 | |||
dd299f9eb2 | |||
49ec3f312c | |||
71eba450e6 | |||
192f108b0f | |||
dd8651db73 | |||
5bbbe3f684 | |||
a71d8a837b | |||
e8ceae14e1 | |||
c3246e6f16 | |||
685753361e | |||
6b07711f96 | |||
12fb639b7d | |||
644925fd0c | |||
bcc72b0924 | |||
e1091b2ba8 | |||
08841e31d9 | |||
d1fcc2bc13 | |||
fac00442d2 | |||
b8cbcbcf49 | |||
1ed45bd783 | |||
82fd1920b1 | |||
f6d7271ec7 | |||
c1f3faf1df | |||
97202278f9 | |||
132f01c5ca | |||
6a987f1b9c | |||
548b003ed3 | |||
48dc41de01 | |||
817c2b49bc | |||
fed07c735c | |||
390cac6874 | |||
8eb0b8bd40 | |||
d7283c6085 | |||
3fe3a84a4b | |||
28e4187bd6 | |||
7cbc69c890 | |||
1dc134bc6b | |||
6a61d37f95 | |||
8d2e92bcfe | |||
5038f5c909 | |||
6eeca70043 | |||
9f68c35fa9 | |||
21418ea109 | |||
02d8b4ed3c | |||
6748392edc | |||
d9fd301157 | |||
71c5d80ce7 | |||
9798229fde | |||
4b2fcfd5dc | |||
b4d291aa7a | |||
b0ecafdc2f | |||
6816bb62d7 | |||
4b05b8cea0 | |||
a0728aedf7 | |||
ea96f6112a | |||
b706800ea8 | |||
c6f95b1d70 | |||
d896126604 | |||
a20da5ddcc | |||
18878600ba | |||
d7e10f3f7e | |||
4d044ea5b2 | |||
e2d1e0cd98 | |||
4e056580bb | |||
e4c2e6a904 | |||
a50989832d | |||
525307b6a3 | |||
a3ab76b216 | |||
f2265d4b46 | |||
d3ac709b99 | |||
908d43a5bb | |||
71cdb0a08e | |||
c7fbbdfa99 | |||
10e4ab7712 | |||
5114c23c21 | |||
c3e585d7eb | |||
0776daec88 | |||
615e1a58b2 | |||
606758357e | |||
ba2a3595c6 | |||
a50bfe5054 | |||
c8983bc367 | |||
8d6d2c6704 | |||
6711f22e62 | |||
8dd9192fe3 | |||
870e0dab48 |
@ -1,4 +1,3 @@
|
||||
.git
|
||||
node_modules
|
||||
dist
|
||||
aio/content
|
||||
|
72
.bazelrc
72
.bazelrc
@ -1,3 +1,20 @@
|
||||
################################
|
||||
# Settings for Angular team members only
|
||||
################################
|
||||
# To enable this feature check the "Remote caching" section in docs/BAZEL.md.
|
||||
build:angular-team --remote_http_cache=https://storage.googleapis.com/angular-team-cache
|
||||
|
||||
###############################
|
||||
# Typescript / Angular / Sass #
|
||||
###############################
|
||||
|
||||
# Make compilation fast, by keeping a few copies of the compilers
|
||||
# running as daemons, and cache SourceFile AST's to reduce parse time.
|
||||
build --strategy=AngularTemplateCompile=worker
|
||||
# TODO(alexeagle): re-enable after fixing worker instability with rxjs typings
|
||||
# build --strategy=TypeScriptCompile=worker
|
||||
build --strategy=TypeScriptCompile=standalone
|
||||
|
||||
# Enable debugging tests with --config=debug
|
||||
test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test_strategy=exclusive --test_timeout=9999 --nocache_test_results
|
||||
|
||||
@ -74,6 +91,12 @@ query --output=label_kind
|
||||
# By default, failing tests don't print any output, it goes to the log file
|
||||
test --test_output=errors
|
||||
|
||||
# Show which actions are run under workers,
|
||||
# and print all the actions running in parallel.
|
||||
# Helps to demonstrate that bazel uses all the cores on the machine.
|
||||
build --experimental_ui
|
||||
test --experimental_ui
|
||||
|
||||
################################
|
||||
# Settings for CircleCI #
|
||||
################################
|
||||
@ -114,19 +137,14 @@ build:remote --platforms=//tools:rbe_ubuntu1604-angular
|
||||
|
||||
# Remote instance.
|
||||
build:remote --remote_instance_name=projects/internal-200822/instances/default_instance
|
||||
build:remote --project_id=internal-200822
|
||||
|
||||
# Remote caching
|
||||
build:remote --remote_cache=remotebuildexecution.googleapis.com
|
||||
# By default, do not accept remote cache, to be set to true for CI based on environment
|
||||
# Do not accept remote cache.
|
||||
# We need to understand the security risks of using prior build artifacts.
|
||||
build:remote --remote_accept_cached=false
|
||||
# By default, do not upload local results to cache, to be set to true for CI based on environment
|
||||
build:remote --remote_upload_local_results=false
|
||||
|
||||
# Build Event Service Configuration
|
||||
build:remote --bes_backend=buildeventservice.googleapis.com
|
||||
build:remote --bes_timeout=30s
|
||||
build:remote --bes_results_url="https://source.cloud.google.com/results/invocations/"
|
||||
# Load any settings specific to the current user. Needs to be last statement in this
|
||||
# config, as the user configuration should be able to overwrite flags from this file.
|
||||
try-import .bazelrc.user
|
||||
|
||||
###############################
|
||||
# NodeJS rules settings
|
||||
@ -136,37 +154,3 @@ build:remote --bes_results_url="https://source.cloud.google.com/results/invocati
|
||||
# Turn on managed directories feature in Bazel
|
||||
# This allows us to avoid installing a second copy of node_modules
|
||||
common --experimental_allow_incremental_repository_updates
|
||||
|
||||
# This option is changed to true in Bazel 0.27 and exposes a possible
|
||||
# regression in Bazel 0.27.0.
|
||||
# Error observed is in npm_package target `//packages/common/locales:package`:
|
||||
# ```
|
||||
# ERROR: /home/circleci/ng/packages/common/locales/BUILD.bazel:13:1: Assembling
|
||||
# npm package packages/common/locales/package failed: No usable spawn strategy found
|
||||
# for spawn with mnemonic SkylarkAction. Your --spawn_strategyor --strategy flags
|
||||
# are probably too strict. Visit https://github.com/bazelbuild/bazel/issues/7480 for
|
||||
# migration advises
|
||||
# ```
|
||||
# Suspect is https://github.com/bazelbuild/rules_nodejs/blob/master/internal/npm_package/npm_package.bzl#L75-L82:
|
||||
# ```
|
||||
# execution_requirements = {
|
||||
# # Never schedule this action remotely because it's not computationally expensive.
|
||||
# # It just copies files into a directory; it's not worth copying inputs and outputs to a remote worker.
|
||||
# # Also don't run it in a sandbox, because it resolves an absolute path to the bazel-out directory
|
||||
# # allowing the .pack and .publish runnables to work with no symlink_prefix
|
||||
# # See https://github.com/bazelbuild/rules_nodejs/issues/187
|
||||
# "local": "1",
|
||||
# },
|
||||
# ```
|
||||
build --incompatible_list_based_execution_strategy_selection=false
|
||||
test --incompatible_list_based_execution_strategy_selection=false
|
||||
run --incompatible_list_based_execution_strategy_selection=false
|
||||
|
||||
####################################################
|
||||
# User bazel configuration
|
||||
# NOTE: This needs to be the *last* entry in the config.
|
||||
####################################################
|
||||
|
||||
# Load any settings which are specific to the current user. Needs to be *last* statement
|
||||
# in this config, as the user configuration should be able to overwrite flags from this file.
|
||||
try-import .bazelrc.user
|
||||
|
42
.buildkite/Dockerfile
Normal file
42
.buildkite/Dockerfile
Normal file
@ -0,0 +1,42 @@
|
||||
# Heavily based on https://github.com/StefanScherer/dockerfiles-windows/ images.
|
||||
# Combines the node windowsservercore image with the Bazel Prerequisites (https://docs.bazel.build/versions/master/install-windows.html).
|
||||
# msys install taken from https://github.com/StefanScherer/dockerfiles-windows/issues/30
|
||||
# VS redist install taken from https://github.com/StefanScherer/dockerfiles-windows/blob/master/apache/Dockerfile
|
||||
# The nanoserver image won't work because MSYS2 does not run in it https://github.com/Alexpux/MSYS2-packages/issues/1493
|
||||
|
||||
# Before building this image, you must locally build node-windows:10.13.0-windowsservercore-1803.
|
||||
# Clone https://github.com/StefanScherer/dockerfiles-windows/commit/4ce7101a766b9b880ac262479dd9126b64d656cf and build using
|
||||
# docker build -t node-windows:10.13.0-windowsservercore-1803 --build-arg core=microsoft/windowsservercore:1803 --build-arg target=microsoft/windowsservercore:1803 .
|
||||
FROM node-windows:10.13.0-windowsservercore-1803
|
||||
|
||||
SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
|
||||
|
||||
# Install 7zip to extract msys2
|
||||
RUN Invoke-WebRequest -UseBasicParsing 'https://www.7-zip.org/a/7z1805-x64.exe' -OutFile 7z.exe
|
||||
# For some reason the last letter in the destination directory is lost. So '/D=C:\\7zip0' will extract to '/D=C:\\7zip'.
|
||||
RUN Start-Process -FilePath 'C:\\7z.exe' -ArgumentList '/S', '/D=C:\\7zip0' -NoNewWindow -Wait
|
||||
|
||||
# Extract msys2
|
||||
RUN Invoke-WebRequest -UseBasicParsing 'http://repo.msys2.org/distrib/x86_64/msys2-base-x86_64-20180531.tar.xz' -OutFile msys2.tar.xz
|
||||
RUN Start-Process -FilePath 'C:\\7zip\\7z' -ArgumentList 'e', 'msys2.tar.xz' -Wait
|
||||
RUN Start-Process -FilePath 'C:\\7zip\\7z' -ArgumentList 'x', 'msys2.tar', '-oC:\\' -Wait
|
||||
RUN Remove-Item msys2.tar.xz
|
||||
RUN Remove-Item msys2.tar
|
||||
RUN Remove-Item 7z.exe
|
||||
RUN Remove-Item -Recurse 7zip
|
||||
|
||||
# Add MSYS2 to PATH, and set BAZEL_SH
|
||||
RUN [Environment]::SetEnvironmentVariable('Path', $env:Path + ';C:\msys64\usr\bin', [System.EnvironmentVariableTarget]::Machine)
|
||||
RUN [Environment]::SetEnvironmentVariable('BAZEL_SH', 'C:\msys64\usr\bin\bash.exe', [System.EnvironmentVariableTarget]::Machine)
|
||||
|
||||
# Install Microsoft Visual C++ Redistributable for Visual Studio 2015
|
||||
RUN Invoke-WebRequest -UseBasicParsing 'https://download.microsoft.com/download/9/3/F/93FCF1E7-E6A4-478B-96E7-D4B285925B00/vc_redist.x64.exe' -OutFile vc_redist.x64.exe
|
||||
RUN Start-Process 'c:\\vc_redist.x64.exe' -ArgumentList '/Install', '/Passive', '/NoRestart' -NoNewWindow -Wait
|
||||
RUN Remove-Item vc_redist.x64.exe
|
||||
|
||||
# Add a fix for https://github.com/docker/for-win/issues/2920 as entry point to the container.
|
||||
SHELL ["cmd", "/c"]
|
||||
COPY "fix-msys64.cmd" "C:\\fix-msys64.cmd"
|
||||
ENTRYPOINT cmd /C C:\\fix-msys64.cmd && cmd /c
|
||||
|
||||
CMD ["cmd.exe"]
|
96
.buildkite/README.md
Normal file
96
.buildkite/README.md
Normal file
@ -0,0 +1,96 @@
|
||||
# BuildKite configuration
|
||||
|
||||
This folder contains configuration for the [BuildKite](https://buildkite.com) based CI checks for
|
||||
this repository.
|
||||
|
||||
BuildKite is a CI provider that provides build coordination and reports while we provide the
|
||||
infrastructure.
|
||||
|
||||
CI runs are triggered by new PRs and will show up on the GitHub checks interface, along with the
|
||||
other current CI solutions.
|
||||
|
||||
Currently it is only used for tests on Windows platforms.
|
||||
|
||||
|
||||
## The build pipeline
|
||||
|
||||
BuildKite uses a pipeline for each repository. The `pipeline.yml` file defines pipeline
|
||||
[build steps](https://buildkite.com/docs/pipelines/defining-steps) for this repository.
|
||||
|
||||
Run results can be seen in the GitHub checks interface and in the
|
||||
[pipeline dashboard](https://buildkite.com/angular/angular).
|
||||
|
||||
Although most configuration is done via `pipeline.yml`, some options are only available
|
||||
in the online [pipeline settings](https://buildkite.com/angular/angular/settings).
|
||||
|
||||
|
||||
## Infrastructure
|
||||
|
||||
BuildKite does not provide the host machines where the builds runs, providing instead the
|
||||
[BuildKite Agent](https://buildkite.com/docs/agent/v3) that should be run our own infrastructure.
|
||||
|
||||
|
||||
### Agents
|
||||
|
||||
This agent polls the BuildKite API for builds, runs them, and reports back the results.
|
||||
Agents are the unit of concurrency: each agent can run one build at any given time.
|
||||
Adding agents allows more builds to be ran at the same time.
|
||||
|
||||
Individual agents can have tags, and pipeline steps can target only agents with certain tags via the
|
||||
`agents` field in `pipeline.yml`.
|
||||
For example: agents on Windows machines are tagged as `windows`, and the Windows specific build
|
||||
steps list `windows: true` in their `agents` field.
|
||||
|
||||
You can see the current agent pool, along with their tags, in the
|
||||
[agents list](https://buildkite.com/organizations/angular/agents).
|
||||
|
||||
|
||||
### Our host machines
|
||||
|
||||
We use [Google Cloud](https://cloud.google.com/) as our cloud provider, under the
|
||||
[Angular project](https://console.cloud.google.com/home/dashboard?project=internal-200822).
|
||||
To access this project you need need to be logged in with a Google account that's a member of
|
||||
team@angular.io.
|
||||
For googlers this may be your google.com account, for others it is an angular.io account.
|
||||
|
||||
In this project we have a number of Windows VMs running, each of them with several agents.
|
||||
The `provision-windows-buildkite.ps1` file contains instructions on how to create new host VMs that
|
||||
are fully configured to run the BuildKite agents as services.
|
||||
|
||||
Our pipeline uses [docker-buildkite-plugin](https://github.com/buildkite-plugins/docker-buildkite-plugin)
|
||||
to run build steps inside docker containers.
|
||||
This way we achieve isolation and hermeticity.
|
||||
|
||||
The `Dockerfile` file describes a custom Docker image that includes NodeJs, Yarn, and the Bazel
|
||||
pre-requisites on Windows.
|
||||
|
||||
To upload a new version of the docker image, follow any build instructions in `Dockerfile` and then
|
||||
run `docker build -t angular/node-bazel-windows:NEW_VERSION`, followed by
|
||||
`docker push angular/node-bazel-windows:NEW_VERSION`.
|
||||
After being pushed it should be available online, and you can use the new version in `pipeline.yml`.
|
||||
|
||||
|
||||
## Caretaker
|
||||
|
||||
BuildKite status can be found at https://www.buildkitestatus.com/.
|
||||
|
||||
Issues related to the BuildKite setup should be escalated to the Tools Team via the current
|
||||
caretaker, followed by Alex Eagle and Filipe Silva.
|
||||
|
||||
Support requests should be submitted via email to support@buildkite.com and cc Igor, Misko, Alex,
|
||||
Jeremy and Manu
|
||||
|
||||
|
||||
## Rollout strategy
|
||||
|
||||
At the moment our BuildKite CI uses 1 host VM running 4 agents, thus being capable of 4 concurrent
|
||||
builds.
|
||||
The only test running is `bazel test //tools/ts-api-guardian:all`, and the PR check is not
|
||||
mandatory.
|
||||
|
||||
In the future we should add cache support to speed up the initial `yarn` install, and also Bazel
|
||||
remote caching to speed up Bazel builds.
|
||||
|
||||
After the current setup is verified as stable and reliable the GitHub PR check can become mandatory.
|
||||
|
||||
The tests ran should also be expanded to cover most, if not all, of the Bazel tests.
|
6
.buildkite/fix-msys64.cmd
Normal file
6
.buildkite/fix-msys64.cmd
Normal file
@ -0,0 +1,6 @@
|
||||
@echo off
|
||||
REM Fix for https://github.com/docker/for-win/issues/2920
|
||||
REM echo "Fixing msys64 folder..."
|
||||
REM Touch all .dll files inside C:\msys64\
|
||||
forfiles /p C:\msys64\ /s /m *.dll /c "cmd /c Copy /B @path+,, >NUL"
|
||||
REM echo "Fixed msys64 folder."
|
10
.buildkite/pipeline.yml
Normal file
10
.buildkite/pipeline.yml
Normal file
@ -0,0 +1,10 @@
|
||||
steps:
|
||||
- label: windows-test
|
||||
commands:
|
||||
- "yarn install --frozen-lockfile --non-interactive --network-timeout 100000"
|
||||
- "yarn bazel test //tools/ts-api-guardian:all --noshow_progress"
|
||||
plugins:
|
||||
- docker#v2.1.0:
|
||||
image: "filipesilva/node-bazel-windows:0.0.2"
|
||||
agents:
|
||||
windows: true
|
94
.buildkite/provision-windows-buildkite.ps1
Normal file
94
.buildkite/provision-windows-buildkite.ps1
Normal file
@ -0,0 +1,94 @@
|
||||
# PowerShell script to provision a Windows Server with BuildKite
|
||||
# This script follows https://buildkite.com/docs/agent/v3/windows.
|
||||
|
||||
# Instructions
|
||||
|
||||
# VM creation:
|
||||
# In Google Cloud Platform, create a Compute Engine instance.
|
||||
# We recommend machine type n1-standard-16 (16 vCPUs, 60 GB memory).
|
||||
# Use a recent windows boot disk with container support such as
|
||||
# "Windows Server version 1803 Datacenter Core for Containers", and add a 128GB SSD disk.
|
||||
# Give it a name, then click "Create".
|
||||
|
||||
# VM setup:
|
||||
# In the Compute Engine menu, select "VM Instances". Click on the VM name you chose before.
|
||||
# Click "Set Windows Password" to choose a username and password.
|
||||
# Click RDP to open a remote desktop via browser, using the username and password.
|
||||
# In the Windows command prompt start an elevated powershell by inputing
|
||||
# "powershell -Command "Start-Process PowerShell -Verb RunAs" followed by Enter.
|
||||
# Download and execute this script from GitHub, passing the token (mandatory), tags (optional)
|
||||
# and number of agents (optional) as args:
|
||||
# ```
|
||||
# Invoke-WebRequest -Uri https://raw.githubusercontent.com/angular/angular/master/.buildkite/provision-windows-buildkite.ps1 -OutFile provision.ps1
|
||||
# .\provision.ps1 -token "MY_TOKEN" -tags "windows=true,another_tag=true" -agents 4
|
||||
# ```
|
||||
# The VM should restart and be fully configured.
|
||||
|
||||
# Creating extra VMs
|
||||
# You can create an image of the current VM by following the instructions below.
|
||||
# https://cloud.google.com/compute/docs/instances/windows/creating-windows-os-image
|
||||
# Then create a new VM and choose "Custom images".
|
||||
|
||||
|
||||
# Script proper.
|
||||
|
||||
# Get the token and tags from arguments.
|
||||
param (
|
||||
[Parameter(Mandatory=$true)][string]$token,
|
||||
[string]$tags = "",
|
||||
[Int]$agents = 1
|
||||
)
|
||||
|
||||
# Allow HTTPS
|
||||
[Net.ServicePointManager]::SecurityProtocol = "tls12, tls11, tls"
|
||||
|
||||
# Helper to add to PATH.
|
||||
# Will take current PATH so avoid running it after anything to modifies only the powershell session path.
|
||||
function Add-Path ([string]$newPathItem) {
|
||||
$Env:Path+= ";" + $newPathItem + ";"
|
||||
[Environment]::SetEnvironmentVariable("Path",$env:Path, [System.EnvironmentVariableTarget]::Machine)
|
||||
}
|
||||
|
||||
# Install Git for Windows
|
||||
Write-Host "Installing Git for Windows."
|
||||
Invoke-WebRequest -Uri https://github.com/git-for-windows/git/releases/download/v2.19.1.windows.1/Git-2.19.1-64-bit.exe -OutFile git.exe
|
||||
.\git.exe /VERYSILENT /NORESTART /NOCANCEL /SP- /CLOSEAPPLICATIONS /RESTARTAPPLICATIONS /COMPONENTS="icons,ext\reg\shellhere,assoc,assoc_sh" /DIR="C:\git"
|
||||
Add-Path "C:\git\bin"
|
||||
# Sleep for 15s while git is installed. Trying to remove the git.exe before it finishes install causes an error.
|
||||
Start-Sleep -s 15
|
||||
Remove-Item git.exe
|
||||
|
||||
# Download NSSM (https://nssm.cc/) to run the BuildKite agent as a service.
|
||||
Write-Host "Downloading NSSM."
|
||||
Invoke-WebRequest -Uri https://nssm.cc/ci/nssm-2.24-101-g897c7ad.zip -OutFile nssm.zip
|
||||
Expand-Archive -Path nssm.zip -DestinationPath C:\nssm
|
||||
Add-Path "C:\nssm\nssm-2.24-101-g897c7ad\win64"
|
||||
Remove-Item nssm.zip
|
||||
|
||||
# Run the BuildKite agent install script
|
||||
Write-Host "Installing BuildKite agent."
|
||||
$env:buildkiteAgentToken = $token
|
||||
$env:buildkiteAgentTags = $tags
|
||||
Set-ExecutionPolicy Bypass -Scope Process -Force
|
||||
iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/buildkite/agent/master/install.ps1'))
|
||||
|
||||
# Configure the BuildKite agent clone and timestamp behavior
|
||||
Add-Content C:\buildkite-agent\buildkite-agent.cfg "`ngit-clone-flags=--config core.autocrlf=input --config core.eol=lf --config core.longpaths=true --config core.symlinks=true`n"
|
||||
Add-Content C:\buildkite-agent\buildkite-agent.cfg "`ntimestamp-lines=true`n"
|
||||
|
||||
# Register the BuildKite agent service using NSSM, so that it persists through restarts and is
|
||||
# restarted if the process dies.
|
||||
for ($i=1; $i -le $agents; $i++)
|
||||
{
|
||||
$agentName = "buildkite-agent-$i"
|
||||
Write-Host "Registering $agentName as a service."
|
||||
nssm.exe install $agentName "C:\buildkite-agent\bin\buildkite-agent.exe" "start"
|
||||
nssm.exe set $agentName AppStdout "C:\buildkite-agent\$agentName.log"
|
||||
nssm.exe set $agentName AppStderr "C:\buildkite-agent\$agentName.log"
|
||||
nssm.exe status $agentName
|
||||
nssm.exe start $agentName
|
||||
nssm.exe status $agentName
|
||||
}
|
||||
|
||||
# Restart the machine.
|
||||
Restart-Computer
|
@ -28,14 +28,3 @@ test --flaky_test_attempts=2
|
||||
|
||||
# More details on failures
|
||||
build --verbose_failures=true
|
||||
|
||||
# We have seen some flakiness in using TS workers on CircleCI
|
||||
# https://angular-team.slack.com/archives/C07DT5M6V/p1562693245183400
|
||||
# > failures like `ERROR: /home/circleci/ng/packages/core/test/BUILD.bazel:5:1:
|
||||
# > Compiling TypeScript (devmode) //packages/core/test:test_lib failed: Worker process did not return a WorkResponse:`
|
||||
# > I saw that issue a couple times today.
|
||||
# > Example job: https://circleci.com/gh/angular/angular/385517
|
||||
# We expect that TypeScript compilations will parallelize wider than the number of local cores anyway
|
||||
# so we should saturate remote workers with TS compilations
|
||||
build --strategy=TypeScriptCompile=standalone
|
||||
build --strategy=AngularTemplateCompile=standalone
|
||||
|
@ -58,17 +58,7 @@ var_5: &setup_bazel_remote_execution
|
||||
# cause decryption failures based on the openssl version. https://stackoverflow.com/a/39641378/4317734
|
||||
openssl aes-256-cbc -d -in .circleci/gcp_token -md md5 -k "$CI_REPO_NAME" -out /home/circleci/.gcp_credentials
|
||||
echo "export GOOGLE_APPLICATION_CREDENTIALS=/home/circleci/.gcp_credentials" >> $BASH_ENV
|
||||
touch .bazelrc.user
|
||||
sudo bash -c "echo -e 'build --config=remote\n' >> .bazelrc.user"
|
||||
sudo bash -c "echo -e 'build:remote --remote_accept_cached=true\n' >> .bazelrc.user"
|
||||
echo "Reading from remote cache for bazel remote jobs."
|
||||
if [[ "$CI_PULL_REQUEST" == "false" ]]; then
|
||||
sudo bash -c "echo -e 'build:remote --remote_upload_local_results=true\n' >> .bazelrc.user"
|
||||
echo "Uploading local build results to remote cache."
|
||||
else
|
||||
sudo bash -c "echo -e 'build:remote --remote_upload_local_results=false\n' >> .bazelrc.user"
|
||||
echo "Not uploading local build results to remote cache."
|
||||
fi
|
||||
sudo bash -c "echo 'build --config=remote' >> /etc/bazel.bazelrc"
|
||||
|
||||
# Settings common to each job
|
||||
var_6: &job_defaults
|
||||
@ -116,7 +106,7 @@ var_10: &restore_cache
|
||||
|
||||
# Branch filter that can be specified for jobs that should only run on publish branches
|
||||
# (e.g. master or the patch branch)
|
||||
var_11: &publish_branches_filter
|
||||
var_12: &publish_branches_filter
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
@ -127,30 +117,10 @@ var_11: &publish_branches_filter
|
||||
# `build-npm-packages`.
|
||||
# https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
|
||||
# https://circleci.com/blog/deep-diving-into-circleci-workspaces/
|
||||
var_12: &attach_workspace
|
||||
var_13: &attach_workspace
|
||||
attach_workspace:
|
||||
at: ~/
|
||||
|
||||
var_13: ¬ify_caretaker_on_fail
|
||||
run:
|
||||
when: on_fail
|
||||
name: Notify caretaker about failure
|
||||
# `$SLACK_CARETAKER_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
|
||||
# The URL comes from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
|
||||
command: |
|
||||
notificationJson="{\"text\":\":x: \`$CIRCLE_JOB\` job for $CIRCLE_BRANCH branch failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}"
|
||||
curl --request POST --header "Content-Type: application/json" --data "$notificationJson" $SLACK_CARETAKER_WEBHOOK_URL
|
||||
|
||||
var_14: ¬ify_dev_infra_on_fail
|
||||
run:
|
||||
when: on_fail
|
||||
name: Notify dev-infra about failure
|
||||
# `$SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
|
||||
# The URL comes from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
|
||||
command: |
|
||||
notificationJson="{\"text\":\":x: \`$CIRCLE_JOB\` job for $CIRCLE_BRANCH branch failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}"
|
||||
curl --request POST --header "Content-Type: application/json" --data "$notificationJson" $SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL
|
||||
|
||||
version: 2
|
||||
jobs:
|
||||
setup:
|
||||
@ -200,16 +170,11 @@ jobs:
|
||||
- *attach_workspace
|
||||
- *init_environment
|
||||
- *setup_circleci_bazel_config
|
||||
# Enable remote/sibling docker which is needed by auto-selection of toolchain configs for RBE.
|
||||
- setup_remote_docker
|
||||
# Setup remote execution and run RBE-compatible tests.
|
||||
- *setup_bazel_remote_execution
|
||||
- run: yarn bazel test //... --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only
|
||||
- run: mkdir ~/testlogs
|
||||
- run: cp -Lr dist/testlogs/* ~/testlogs
|
||||
- store_test_results:
|
||||
# Bazel always writes test.xml files under this directory
|
||||
path: ~/testlogs
|
||||
- store_artifacts:
|
||||
path: ~/testlogs
|
||||
|
||||
# Temporary job to test what will happen when we flip the Ivy flag to true
|
||||
test_ivy_aot:
|
||||
@ -219,6 +184,8 @@ jobs:
|
||||
- *attach_workspace
|
||||
- *init_environment
|
||||
- *setup_circleci_bazel_config
|
||||
# Enable remote/sibling docker which is needed by auto-selection of toolchain configs for RBE.
|
||||
- setup_remote_docker
|
||||
- *setup_bazel_remote_execution
|
||||
|
||||
# We need to explicitly specify the --symlink_prefix option because otherwise we would
|
||||
@ -273,7 +240,6 @@ jobs:
|
||||
# //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
|
||||
- *notify_dev_infra_on_fail
|
||||
|
||||
test_aio:
|
||||
<<: *job_defaults
|
||||
@ -293,8 +259,6 @@ jobs:
|
||||
- run: yarn --cwd aio e2e --configuration=ci
|
||||
# Run PWA-score tests
|
||||
- run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
|
||||
# Run accessibility tests
|
||||
- run: yarn --cwd aio test-a11y-score-localhost
|
||||
# Check the bundle sizes.
|
||||
- run: yarn --cwd aio payload-size
|
||||
# Run unit tests for Firebase redirects
|
||||
@ -329,7 +293,8 @@ jobs:
|
||||
# Run PWA-score tests
|
||||
- run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
|
||||
# Check the bundle sizes.
|
||||
- run: yarn --cwd aio payload-size aio-local
|
||||
# Temporary disabled due to a problem with patch branch (8.0.x)
|
||||
# - run: yarn --cwd aio payload-size aio-local
|
||||
|
||||
test_aio_local_ivy:
|
||||
<<: *job_defaults
|
||||
@ -348,7 +313,8 @@ jobs:
|
||||
# Run PWA-score tests
|
||||
- run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
|
||||
# Check the bundle sizes.
|
||||
- run: yarn --cwd aio payload-size aio-local-ivy
|
||||
# Temporary disabled due to a problem with patch branch (8.0.x)
|
||||
# - run: yarn --cwd aio payload-size aio-local-ivy
|
||||
|
||||
test_aio_tools:
|
||||
<<: *job_defaults
|
||||
@ -403,7 +369,7 @@ jobs:
|
||||
# Run examples tests with ivy. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
|
||||
# Since the parallelism is set to "3", there will be three parallel CircleCI containers
|
||||
# with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
|
||||
- run: yarn --cwd aio example-e2e --setup --local --ivy --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
|
||||
- run: yarn --cwd aio example-e2e --setup --local --ivy --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
|
||||
|
||||
# This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
|
||||
aio_preview:
|
||||
@ -451,6 +417,8 @@ jobs:
|
||||
- *attach_workspace
|
||||
- *init_environment
|
||||
- *setup_circleci_bazel_config
|
||||
# Enable remote/sibling docker which is needed by auto-selection of toolchain configs for RBE.
|
||||
- setup_remote_docker
|
||||
- *setup_bazel_remote_execution
|
||||
|
||||
- run: scripts/build-packages-dist.sh
|
||||
@ -477,6 +445,8 @@ jobs:
|
||||
- *attach_workspace
|
||||
- *init_environment
|
||||
- *setup_circleci_bazel_config
|
||||
# Enable remote/sibling docker which is needed by auto-selection of toolchain configs for RBE.
|
||||
- setup_remote_docker
|
||||
- *setup_bazel_remote_execution
|
||||
|
||||
- run: scripts/build-ivy-npm-packages.sh
|
||||
@ -559,8 +529,12 @@ jobs:
|
||||
- run:
|
||||
name: Run tests against https://angular.io/
|
||||
command: ./aio/scripts/test-production.sh https://angular.io/ $CI_AIO_MIN_PWA_SCORE
|
||||
- *notify_caretaker_on_fail
|
||||
- *notify_dev_infra_on_fail
|
||||
- run:
|
||||
name: Notify caretaker about failure
|
||||
# `$SLACK_CARETAKER_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
|
||||
# The URL comes from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
|
||||
command: 'curl --request POST --header "Content-Type: application/json" --data "{\"text\":\":x: \`$CIRCLE_JOB\` job failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}" $SLACK_CARETAKER_WEBHOOK_URL'
|
||||
when: on_fail
|
||||
|
||||
aio_monitoring_next:
|
||||
<<: *job_defaults
|
||||
@ -574,8 +548,12 @@ jobs:
|
||||
- run:
|
||||
name: Run tests against https://next.angular.io/
|
||||
command: ./aio/scripts/test-production.sh https://next.angular.io/ $CI_AIO_MIN_PWA_SCORE
|
||||
- *notify_caretaker_on_fail
|
||||
- *notify_dev_infra_on_fail
|
||||
- run:
|
||||
name: Notify caretaker about failure
|
||||
# `$SLACK_CARETAKER_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
|
||||
# The URL comes from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
|
||||
command: 'curl --request POST --header "Content-Type: application/json" --data "{\"text\":\":x: \`$CIRCLE_JOB\` job failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}" $SLACK_CARETAKER_WEBHOOK_URL'
|
||||
when: on_fail
|
||||
|
||||
legacy-unit-tests-saucelabs:
|
||||
<<: *job_defaults
|
||||
@ -658,17 +636,6 @@ jobs:
|
||||
name: "Running Material unit tests"
|
||||
command: ./scripts/ci/run_angular_material_unit_tests.sh
|
||||
|
||||
test_zonejs:
|
||||
<<: *job_defaults
|
||||
steps:
|
||||
- *attach_workspace
|
||||
- *init_environment
|
||||
# Install
|
||||
- run: yarn --cwd packages/zone.js install --frozen-lockfile --non-interactive
|
||||
# Run zone.js tools tests
|
||||
- run: yarn --cwd packages/zone.js promisetest
|
||||
- run: yarn --cwd packages/zone.js promisefinallytest
|
||||
|
||||
workflows:
|
||||
version: 2
|
||||
default_workflow:
|
||||
@ -753,9 +720,6 @@ workflows:
|
||||
- material-unit-tests:
|
||||
requires:
|
||||
- build-ivy-npm-packages
|
||||
- test_zonejs:
|
||||
requires:
|
||||
- setup
|
||||
|
||||
saucelabs_tests:
|
||||
jobs:
|
||||
|
Binary file not shown.
@ -1,5 +1,3 @@
|
||||
# escape=`
|
||||
|
||||
ARG core=mcr.microsoft.com/windows/servercore:1809
|
||||
ARG target=mcr.microsoft.com/powershell:windowsservercore-1809
|
||||
|
||||
@ -12,57 +10,57 @@ SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPref
|
||||
|
||||
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 ; `
|
||||
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 $_ ; `
|
||||
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 ; `
|
||||
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:\ ; `
|
||||
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' } ; `
|
||||
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; `
|
||||
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
|
||||
@ -82,45 +80,24 @@ FROM baseimage
|
||||
|
||||
SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
|
||||
|
||||
# Install Bazel prereqs on Windows (https://docs.bazel.build/versions/master/install-windows.html)
|
||||
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); \
|
||||
Invoke-WebRequest -UseBasicParsing 'https://download.microsoft.com/download/9/3/F/93FCF1E7-E6A4-478B-96E7-D4B285925B00/vc_redist.x64.exe' -OutFile vc_redist.x64.exe; \
|
||||
Start-Process 'c:\\vc_redist.x64.exe' -ArgumentList '/Install', '/Passive', '/NoRestart' -NoNewWindow -Wait; \
|
||||
Remove-Item vc_redist.x64.exe
|
||||
|
||||
# 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
|
||||
# Add a fix for https://github.com/docker/for-win/issues/2920 as entry point to the container.
|
||||
SHELL ["cmd", "/c"]
|
||||
COPY "fix-msys64.cmd" "C:\\fix-msys64.cmd"
|
||||
ENTRYPOINT cmd /C C:\\fix-msys64.cmd && cmd /c
|
||||
|
||||
CMD ["cmd.exe"]
|
@ -2,17 +2,11 @@
|
||||
# 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.
|
||||
# Save 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
|
||||
@ -29,10 +23,20 @@ build --announce_rc
|
||||
# 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
|
||||
build --local_resources=8000,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
|
||||
|
||||
# Include PATH in Windows build/tests
|
||||
# https://github.com/bazelbuild/rules_typescript/pull/356
|
||||
build --action_env=PATH
|
||||
test --action_env=PATH --test_env=PATH
|
||||
|
||||
# Exclude tests known to not work on Windows.
|
||||
|
||||
# Chrome web tests are currently broken.
|
||||
test --test_tag_filters=-browser:chromium-local
|
||||
|
@ -2,7 +2,6 @@ version: '1.0'
|
||||
|
||||
steps:
|
||||
BuildImage:
|
||||
title: Build Docker image
|
||||
type: build
|
||||
image_name: node-bazel-windows
|
||||
working_directory: ./.codefresh
|
||||
@ -13,7 +12,7 @@ steps:
|
||||
dockerfile: ./Dockerfile.win-1809
|
||||
|
||||
RunTests:
|
||||
title: Run Bazel tests
|
||||
title: Run Example
|
||||
image: ${{BuildImage}}
|
||||
commands:
|
||||
# Install dependencies
|
||||
@ -21,8 +20,7 @@ steps:
|
||||
# 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 //...
|
||||
- yarn bazel test //tools/ts-api-guardian:all //packages/language-service/test //packages/compiler/test //packages/compiler-cli/test:ngc //packages/compiler-cli/test/ngtsc:ngtsc
|
||||
- yarn test-ivy-aot //packages/animations/test //packages/common/test //packages/forms/test //packages/http/test //packages/platform-browser/test //packages/platform-browser-dynamic/test //packages/router/test
|
||||
- yarn bazel test //tools/public_api_guard/...
|
||||
- yarn bazel test //packages/compiler-cli/integrationtest:integrationtest //packages/compiler-cli/test/compliance:compliance
|
||||
|
6
.codefresh/fix-msys64.cmd
Normal file
6
.codefresh/fix-msys64.cmd
Normal file
@ -0,0 +1,6 @@
|
||||
@echo off
|
||||
REM Fix for https://github.com/docker/for-win/issues/2920
|
||||
REM echo "Fixing msys64 folder..."
|
||||
REM Touch all .dll files inside C:\msys64\
|
||||
forfiles /p C:\msys64\ /s /m *.dll /c "cmd /c Copy /B @path+,, >NUL"
|
||||
REM echo "Fixed msys64 folder."
|
20
.github/CODEOWNERS
vendored
20
.github/CODEOWNERS
vendored
@ -53,8 +53,6 @@
|
||||
# IgorMinar - Igor Minar
|
||||
# jasonaden - Jason Aden
|
||||
# jenniferfell - Jennifer Fell
|
||||
# JiaLiPassion - Jia Li
|
||||
# josephperrott - Joey Perrott
|
||||
# kara - Kara Erickson
|
||||
# kyliau - Keen Yee Liau
|
||||
# matsko - Matias Niemelä
|
||||
@ -249,15 +247,6 @@
|
||||
# - mhevery
|
||||
|
||||
|
||||
# ===========================================================
|
||||
# @angular/fw-zones
|
||||
# ===========================================================
|
||||
#
|
||||
# - JiaLiPassion
|
||||
# - mhevery
|
||||
# - vikerman
|
||||
|
||||
|
||||
# ===========================================================
|
||||
# @angular/tools-benchpress
|
||||
# ===========================================================
|
||||
@ -357,7 +346,7 @@
|
||||
# - filipesilva
|
||||
# - gkalpak
|
||||
# - IgorMinar
|
||||
# - josephperrott
|
||||
|
||||
|
||||
|
||||
|
||||
@ -741,13 +730,6 @@ testing/** @angular/fw-test
|
||||
|
||||
|
||||
|
||||
# ================================================
|
||||
# zone.js
|
||||
# ================================================
|
||||
|
||||
/packages/zone.js/** @angular/fw-zones @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
|
||||
|
||||
|
||||
# ================================================
|
||||
# benchpress
|
||||
# ================================================
|
||||
|
31
BUILD.bazel
31
BUILD.bazel
@ -18,15 +18,15 @@ filegroup(
|
||||
name = "web_test_bootstrap_scripts",
|
||||
# do not sort
|
||||
srcs = [
|
||||
"@npm//:node_modules/core-js/client/core.js",
|
||||
"@npm//:node_modules/zone.js/dist/zone.js",
|
||||
"@npm//:node_modules/zone.js/dist/zone-testing.js",
|
||||
"@npm//:node_modules/zone.js/dist/task-tracking.js",
|
||||
"@npm//node_modules/core-js:client/core.js",
|
||||
"@npm//node_modules/zone.js:dist/zone.js",
|
||||
"@npm//node_modules/zone.js:dist/zone-testing.js",
|
||||
"@npm//node_modules/zone.js:dist/task-tracking.js",
|
||||
"//:test-events.js",
|
||||
"//:shims_for_IE.js",
|
||||
# Including systemjs because it defines `__eval`, which produces correct stack traces.
|
||||
"@npm//:node_modules/systemjs/dist/system.src.js",
|
||||
"@npm//:node_modules/reflect-metadata/Reflect.js",
|
||||
"@npm//node_modules/systemjs:dist/system.src.js",
|
||||
"@npm//node_modules/reflect-metadata:Reflect.js",
|
||||
],
|
||||
)
|
||||
|
||||
@ -35,15 +35,15 @@ filegroup(
|
||||
srcs = [
|
||||
# We also declare the unminfied AngularJS files since these can be used for
|
||||
# local debugging (e.g. see: packages/upgrade/test/common/test_helpers.ts)
|
||||
"@npm//:node_modules/angular/angular.js",
|
||||
"@npm//:node_modules/angular/angular.min.js",
|
||||
"@npm//:node_modules/angular-1.5/angular.js",
|
||||
"@npm//:node_modules/angular-1.5/angular.min.js",
|
||||
"@npm//:node_modules/angular-1.6/angular.js",
|
||||
"@npm//:node_modules/angular-1.6/angular.min.js",
|
||||
"@npm//:node_modules/angular-mocks/angular-mocks.js",
|
||||
"@npm//:node_modules/angular-mocks-1.5/angular-mocks.js",
|
||||
"@npm//:node_modules/angular-mocks-1.6/angular-mocks.js",
|
||||
"@npm//node_modules/angular:angular.js",
|
||||
"@npm//node_modules/angular:angular.min.js",
|
||||
"@npm//node_modules/angular-1.5:angular.js",
|
||||
"@npm//node_modules/angular-1.5:angular.min.js",
|
||||
"@npm//node_modules/angular-1.6:angular.js",
|
||||
"@npm//node_modules/angular-1.6:angular.min.js",
|
||||
"@npm//node_modules/angular-mocks:angular-mocks.js",
|
||||
"@npm//node_modules/angular-mocks-1.5:angular-mocks.js",
|
||||
"@npm//node_modules/angular-mocks-1.6:angular-mocks.js",
|
||||
],
|
||||
)
|
||||
|
||||
@ -74,7 +74,6 @@ karma_web_test(
|
||||
"//packages/core/test:test_lib",
|
||||
"//packages/forms/test:test_lib",
|
||||
"//packages/http/test:test_lib",
|
||||
"//packages/zone.js/test:karma_jasmine_test_ci",
|
||||
# "//packages/router/test:test_lib",
|
||||
# //packages/router/test:test_lib fails with:
|
||||
# IE 11.0.0 (Windows 8.1.0.0) bootstrap should restore the scrolling position FAILED
|
||||
|
311
CHANGELOG.md
311
CHANGELOG.md
@ -1,82 +1,3 @@
|
||||
<a name="8.1.2"></a>
|
||||
## [8.1.2](https://github.com/angular/angular/compare/8.1.0...8.1.2) (2019-07-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* use the correct WTF array to iterate over ([#31208](https://github.com/angular/angular/issues/31208)) ([4aed480](https://github.com/angular/angular/commit/4aed480))
|
||||
* **compiler-cli:** Return original sourceFile instead of redirected sourceFile from getSourceFile ([#26036](https://github.com/angular/angular/issues/26036)) ([13dbb98](https://github.com/angular/angular/commit/13dbb98)), closes [#22524](https://github.com/angular/angular/issues/22524)
|
||||
* **core:** export provider interfaces that are part of the public API types ([#31377](https://github.com/angular/angular/issues/31377)) ([bebf089](https://github.com/angular/angular/commit/bebf089)), closes [/github.com/angular/angular/pull/31377#discussion_r299254408](https://github.com//github.com/angular/angular/pull/31377/issues/discussion_r299254408) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L365-L366](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L365-L366) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L283-L284](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L283-L284) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts#L23](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts/issues/L23)
|
||||
|
||||
|
||||
|
||||
<a name="8.1.1"></a>
|
||||
## [8.1.1](https://github.com/angular/angular/compare/8.1.0...8.1.1) (2019-07-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** export provider interfaces that are part of the public API types ([#31377](https://github.com/angular/angular/issues/31377)) ([bebf089](https://github.com/angular/angular/commit/bebf089)), closes [/github.com/angular/angular/pull/31377#discussion_r299254408](https://github.com//github.com/angular/angular/pull/31377/issues/discussion_r299254408) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L365-L366](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L365-L366) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L283-L284](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L283-L284) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts#L23](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts/issues/L23)
|
||||
|
||||
|
||||
|
||||
<a name="8.1.0"></a>
|
||||
# [8.1.0](https://github.com/angular/angular/compare/8.1.0-rc.0...8.1.0) (2019-07-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** handle `undefined` meta in `injectArgs` ([#31333](https://github.com/angular/angular/issues/31333)) ([80ccd6c](https://github.com/angular/angular/commit/80ccd6c)), closes [CLI #14888](https://github.com/angular/angular-cli/issues/14888)
|
||||
* **service-worker:** cache opaque responses in data groups with `freshness` strategy ([#30977](https://github.com/angular/angular/issues/30977)) ([b0c3453](https://github.com/angular/angular/commit/b0c3453)), closes [#30968](https://github.com/angular/angular/issues/30968)
|
||||
* **service-worker:** cache opaque responses when requests exceeds timeout threshold ([#30977](https://github.com/angular/angular/issues/30977)) ([a9038ef](https://github.com/angular/angular/commit/a9038ef))
|
||||
|
||||
|
||||
|
||||
<a name="8.1.0-rc.0"></a>
|
||||
# [8.1.0-rc.0](https://github.com/angular/angular/compare/8.1.0-next.3...8.1.0-rc.0) (2019-06-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** exclude all angular schematics folders from metadata build ([#31237](https://github.com/angular/angular/issues/31237)) ([16717fa](https://github.com/angular/angular/commit/16717fa)), closes [#31235](https://github.com/angular/angular/issues/31235)
|
||||
* **bazel:** remove unsupported Css pre-processors from ng new ([#31234](https://github.com/angular/angular/issues/31234)) ([e83667a](https://github.com/angular/angular/commit/e83667a)), closes [#31209](https://github.com/angular/angular/issues/31209)
|
||||
* **bazel:** update ng new schema to match the current ng new schema of [@schematics](https://github.com/schematics)/angular ([#31234](https://github.com/angular/angular/issues/31234)) ([805fc86](https://github.com/angular/angular/commit/805fc86)), closes [#31233](https://github.com/angular/angular/issues/31233)
|
||||
* **compiler:** fix Elements not making a new ParseSourceSpan ([#31190](https://github.com/angular/angular/issues/31190)) ([7035f22](https://github.com/angular/angular/commit/7035f22))
|
||||
* **compiler:** stringify `Object.create(null)` tokens ([#16848](https://github.com/angular/angular/issues/16848)) ([5e53956](https://github.com/angular/angular/commit/5e53956))
|
||||
* **service-worker:** registration failed on Safari ([#31140](https://github.com/angular/angular/issues/31140)) ([a5dd4ed](https://github.com/angular/angular/commit/a5dd4ed)), closes [#31061](https://github.com/angular/angular/issues/31061)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **upgrade:** provide unit test helpers for wiring up injectors ([#16848](https://github.com/angular/angular/issues/16848)) ([3fb78aa](https://github.com/angular/angular/commit/3fb78aa))
|
||||
|
||||
|
||||
|
||||
<a name="8.0.3"></a>
|
||||
## [8.0.3](https://github.com/angular/angular/compare/8.0.2...8.0.3) (2019-06-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** exclude all angular schematics folders from metadata build ([#31237](https://github.com/angular/angular/issues/31237)) ([6bad2ca](https://github.com/angular/angular/commit/6bad2ca)), closes [#31235](https://github.com/angular/angular/issues/31235)
|
||||
* **bazel:** remove unsupported Css pre-processors from ng new ([#31234](https://github.com/angular/angular/issues/31234)) ([980bcaf](https://github.com/angular/angular/commit/980bcaf)), closes [#31209](https://github.com/angular/angular/issues/31209)
|
||||
* **bazel:** update ng new schema to match the current ng new schema of [@schematics](https://github.com/schematics)/angular ([#31234](https://github.com/angular/angular/issues/31234)) ([48f7f65](https://github.com/angular/angular/commit/48f7f65)), closes [#31233](https://github.com/angular/angular/issues/31233)
|
||||
* **service-worker:** registration failed on Safari ([#31140](https://github.com/angular/angular/issues/31140)) ([f470e69](https://github.com/angular/angular/commit/f470e69)), closes [#31061](https://github.com/angular/angular/issues/31061)
|
||||
|
||||
|
||||
|
||||
<a name="8.1.0-next.3"></a>
|
||||
# [8.1.0-next.3](https://github.com/angular/angular/compare/8.1.0-next.2...8.1.0-next.3) (2019-06-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** builder workspace should use nodejs v10.16.0 ([#31088](https://github.com/angular/angular/issues/31088)) ([a1fc4de](https://github.com/angular/angular/commit/a1fc4de))
|
||||
* **core:** temporarily remove [@deprecated](https://github.com/deprecated) jsdoc tag for a TextBedStatic.get overload ([#30714](https://github.com/angular/angular/issues/30714)) ([6bc9c78](https://github.com/angular/angular/commit/6bc9c78)), closes [#30514](https://github.com/angular/angular/issues/30514)
|
||||
* **language-service:** Remove 'any' in getQuickInfoAtPosition ([#31014](https://github.com/angular/angular/issues/31014)) ([a4601ec](https://github.com/angular/angular/commit/a4601ec))
|
||||
|
||||
|
||||
|
||||
<a name="8.0.2"></a>
|
||||
## [8.0.2](https://github.com/angular/angular/compare/8.0.1...8.0.2) (2019-06-19)
|
||||
|
||||
@ -89,20 +10,6 @@
|
||||
|
||||
|
||||
|
||||
<a name="8.1.0-next.2"></a>
|
||||
# [8.1.0-next.2](https://github.com/angular/angular/compare/8.1.0-next.1...8.1.0-next.2) (2019-06-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** do not modify tsconfig.json ([#30877](https://github.com/angular/angular/issues/30877)) ([b086676](https://github.com/angular/angular/commit/b086676))
|
||||
* **bazel:** exclude components schematics from build ([#30825](https://github.com/angular/angular/issues/30825)) ([05a43ca](https://github.com/angular/angular/commit/05a43ca))
|
||||
* **bazel:** Load global stylesheet in dev and prod ([#30879](https://github.com/angular/angular/issues/30879)) ([17bfedd](https://github.com/angular/angular/commit/17bfedd))
|
||||
* **common:** expose the `HttpUploadProgressEvent` interface as public API ([#30852](https://github.com/angular/angular/issues/30852)) ([5c18f23](https://github.com/angular/angular/commit/5c18f23)), closes [#30814](https://github.com/angular/angular/issues/30814)
|
||||
* **service-worker:** avoid uncaught rejection warning when registration fails ([#30876](https://github.com/angular/angular/issues/30876)) ([81c2a94](https://github.com/angular/angular/commit/81c2a94))
|
||||
|
||||
|
||||
|
||||
<a name="8.0.1"></a>
|
||||
## [8.0.1](https://github.com/angular/angular/compare/8.0.0...8.0.1) (2019-06-13)
|
||||
|
||||
@ -117,83 +24,24 @@
|
||||
|
||||
|
||||
|
||||
<a name="8.1.0-next.1"></a>
|
||||
# [8.1.0-next.1](https://github.com/angular/angular/compare/8.1.0-beta.0...8.1.0-next.1) (2019-06-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** TypeScript related migrations should cater for BOM ([#30719](https://github.com/angular/angular/issues/30719)) ([80394ce](https://github.com/angular/angular/commit/80394ce)), closes [/github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/tree/recorder.ts#L72](https://github.com//github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/tree/recorder.ts/issues/L72) [#30713](https://github.com/angular/angular/issues/30713)
|
||||
|
||||
|
||||
|
||||
<a name="8.1.0-beta.0"></a>
|
||||
# [8.1.0-beta.0](https://github.com/angular/angular/compare/8.0.0...8.1.0-beta.0) (2019-05-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** allow ts_library interop with list-typed inputs ([#30600](https://github.com/angular/angular/issues/30600)) ([3125376](https://github.com/angular/angular/commit/3125376))
|
||||
* **bazel:** Bump ibazel to 0.10.1 for windows fixes ([#30196](https://github.com/angular/angular/issues/30196)) ([1353bf0](https://github.com/angular/angular/commit/1353bf0))
|
||||
* **bazel:** Directly spawn native Bazel binary ([#30306](https://github.com/angular/angular/issues/30306)) ([2a0f497](https://github.com/angular/angular/commit/2a0f497))
|
||||
* **bazel:** Disable sandbox on Mac OS ([#30460](https://github.com/angular/angular/issues/30460)) ([b6b1aec](https://github.com/angular/angular/commit/b6b1aec))
|
||||
* **bazel:** Exclude common/upgrade* in metadata.tsconfig.json ([#30133](https://github.com/angular/angular/issues/30133)) ([1f4c380](https://github.com/angular/angular/commit/1f4c380))
|
||||
* **bazel:** ng test should run specific ts_web_test_suite ([#30526](https://github.com/angular/angular/issues/30526)) ([e688e02](https://github.com/angular/angular/commit/e688e02))
|
||||
* **bazel:** pass correct arguments to http_server in Windows ([#30346](https://github.com/angular/angular/issues/30346)) ([3aff79c](https://github.com/angular/angular/commit/3aff79c)), closes [#29785](https://github.com/angular/angular/issues/29785)
|
||||
* **bazel:** update peerDep ranges ([#30155](https://github.com/angular/angular/issues/30155)) ([4ae0ee8](https://github.com/angular/angular/commit/4ae0ee8))
|
||||
* **bazel:** Use existing npm/yarn lock files ([#30438](https://github.com/angular/angular/issues/30438)) ([ff29ccc](https://github.com/angular/angular/commit/ff29ccc))
|
||||
* **compiler-cli:** log ngcc skipping messages as debug instead of info ([#30232](https://github.com/angular/angular/issues/30232)) ([60a8888](https://github.com/angular/angular/commit/60a8888))
|
||||
* **core:** consistently use ng:/// for sourcemap URLs ([#29826](https://github.com/angular/angular/issues/29826)) ([392473e](https://github.com/angular/angular/commit/392473e))
|
||||
* **core:** CSS sanitizer now allows parens in file names ([#30322](https://github.com/angular/angular/issues/30322)) ([728db88](https://github.com/angular/angular/commit/728db88))
|
||||
* **core:** fix interpolate identifier in AOT ([#30243](https://github.com/angular/angular/issues/30243)) ([30d1f29](https://github.com/angular/angular/commit/30d1f29))
|
||||
* **core:** migrations not always migrating all files ([#30269](https://github.com/angular/angular/issues/30269)) ([349935a](https://github.com/angular/angular/commit/349935a))
|
||||
* **core:** remove deprecated `TestBed.deprecatedOverrideProvider` API ([#30576](https://github.com/angular/angular/issues/30576)) ([a96976e](https://github.com/angular/angular/commit/a96976e))
|
||||
* **core:** require 'static' flag on queries in typings ([#30639](https://github.com/angular/angular/issues/30639)) ([84dd267](https://github.com/angular/angular/commit/84dd267))
|
||||
* **core:** static-query migration errors not printed properly ([#30458](https://github.com/angular/angular/issues/30458)) ([6ceb903](https://github.com/angular/angular/commit/6ceb903))
|
||||
* **core:** static-query migration fails with default parameter values ([#30269](https://github.com/angular/angular/issues/30269)) ([6357d4a](https://github.com/angular/angular/commit/6357d4a))
|
||||
* **core:** static-query migration should gracefully exit if AOT compiler throws ([#30269](https://github.com/angular/angular/issues/30269)) ([509352f](https://github.com/angular/angular/commit/509352f))
|
||||
* **core:** static-query migration should handle queries on accessors ([#30327](https://github.com/angular/angular/issues/30327)) ([0ffdb48](https://github.com/angular/angular/commit/0ffdb48))
|
||||
* **core:** static-query migration should not fallback to test strategy ([#30458](https://github.com/angular/angular/issues/30458)) ([0cdf598](https://github.com/angular/angular/commit/0cdf598))
|
||||
* **core:** static-query migration should not prompt if no queries are used ([#30254](https://github.com/angular/angular/issues/30254)) ([4c12d74](https://github.com/angular/angular/commit/4c12d74))
|
||||
* **core:** static-query usage migration strategy should detect ambiguous query usage ([#30215](https://github.com/angular/angular/issues/30215)) ([8d3365e](https://github.com/angular/angular/commit/8d3365e))
|
||||
* **core:** temporarily remove [@deprecated](https://github.com/deprecated) jsdoc tag for a TextBed.get overload ([#30514](https://github.com/angular/angular/issues/30514)) ([f6bf892](https://github.com/angular/angular/commit/f6bf892)), closes [#29290](https://github.com/angular/angular/issues/29290) [#29905](https://github.com/angular/angular/issues/29905)
|
||||
* **language-service:** Remove tsserverlibrary from rollup globals ([#30123](https://github.com/angular/angular/issues/30123)) ([124e497](https://github.com/angular/angular/commit/124e497))
|
||||
* **router:** ensure `history.state` is set in `eager` update mode ([#30154](https://github.com/angular/angular/issues/30154)) ([b40f6f3](https://github.com/angular/angular/commit/b40f6f3))
|
||||
* **router:** ensure navigations start with the current URL value incase redirect is skipped ([#30344](https://github.com/angular/angular/issues/30344)) ([0fd9d08](https://github.com/angular/angular/commit/0fd9d08)), closes [#30340](https://github.com/angular/angular/issues/30340) [#30160](https://github.com/angular/angular/issues/30160)
|
||||
* **router:** fix a problem with router not responding to back button ([#30160](https://github.com/angular/angular/issues/30160)) ([3327bd8](https://github.com/angular/angular/commit/3327bd8))
|
||||
* **router:** IE 11 bug can break URL unification when comparing objects ([#30393](https://github.com/angular/angular/issues/30393)) ([197584d](https://github.com/angular/angular/commit/197584d))
|
||||
* **router:** type cast correctly for IE 11 bug breaking URL Unification when comparing objects ([#30464](https://github.com/angular/angular/issues/30464)) ([53f3564](https://github.com/angular/angular/commit/53f3564))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **bazel:** use `rbe_autoconfig()` and new container. ([#29336](https://github.com/angular/angular/issues/29336)) ([9abf114](https://github.com/angular/angular/commit/9abf114))
|
||||
* **common:** add ability to watch for AngularJS URL updates through `onUrlChange` hook ([#30466](https://github.com/angular/angular/issues/30466)) ([1aff524](https://github.com/angular/angular/commit/1aff524))
|
||||
* **common:** stricter types for `SlicePipe` ([#30156](https://github.com/angular/angular/issues/30156)) ([95830ee](https://github.com/angular/angular/commit/95830ee))
|
||||
* **core:** deprecate integration with the Web Tracing Framework (WTF) ([#30642](https://github.com/angular/angular/issues/30642)) ([f310a59](https://github.com/angular/angular/commit/f310a59))
|
||||
* **language-service:** Implement `definitionAndBoundSpan` ([#30125](https://github.com/angular/angular/issues/30125)) ([f491673](https://github.com/angular/angular/commit/f491673))
|
||||
* **platform-webworker:** deprecate platform-webworker ([#30642](https://github.com/angular/angular/issues/30642)) ([ccc76f7](https://github.com/angular/angular/commit/ccc76f7))
|
||||
|
||||
|
||||
|
||||
<a name="8.0.0"></a>
|
||||
# [8.0.0](https://github.com/angular/angular/compare/8.0.0-rc.5...8.0.0) (2019-05-28)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add support for TypeScript 3.4 (and drop older versions) ([#29372](https://github.com/angular/angular/issues/29372)) ([ef85336](https://github.com/angular/angular/commit/ef85336))
|
||||
* add support for TypeScript 3.3 (and drop older versions) ([#29004](https://github.com/angular/angular/issues/29004)) ([75748d6](https://github.com/angular/angular/commit/75748d6))
|
||||
* **common:** add ability to watch for AngularJS URL updates through `onUrlChange` hook ([#30466](https://github.com/angular/angular/issues/30466)) ([8022d36](https://github.com/angular/angular/commit/8022d36))
|
||||
* **common:** stricter types for `SlicePipe` ([#30156](https://github.com/angular/angular/issues/30156)) ([722b2fa](https://github.com/angular/angular/commit/722b2fa))
|
||||
* **bazel:** use `rbe_autoconfig()` and new container ([#29336](https://github.com/angular/angular/issues/29336)) ([e562acc](https://github.com/angular/angular/commit/e562acc))
|
||||
* **common:** add @angular/common/upgrade package for `$location`-related APIs ([#30055](https://github.com/angular/angular/issues/30055)) ([152d99e](https://github.com/angular/angular/commit/152d99e))
|
||||
* **common:** add ability to retrieve the state from `Location` service ([#30055](https://github.com/angular/angular/issues/30055)) ([b44b143](https://github.com/angular/angular/commit/b44b143))
|
||||
* **common:** stricter types for SlicePipe ([#30156](https://github.com/angular/angular/issues/30156)) ([722b2fa](https://github.com/angular/angular/commit/722b2fa))
|
||||
* **bazel:** use rbe_autoconfig() and new container. ([#29336](https://github.com/angular/angular/issues/29336)) ([e562acc](https://github.com/angular/angular/commit/e562acc))
|
||||
* **common:** add [@angular](https://github.com/angular)/common/upgrade package for $location-related APIs ([#30055](https://github.com/angular/angular/issues/30055)) ([152d99e](https://github.com/angular/angular/commit/152d99e))
|
||||
* **common:** add ability to retrieve the state from Location service ([#30055](https://github.com/angular/angular/issues/30055)) ([b44b143](https://github.com/angular/angular/commit/b44b143))
|
||||
* **common:** add ability to track all location changes ([#30055](https://github.com/angular/angular/issues/30055)) ([3a9cf3f](https://github.com/angular/angular/commit/3a9cf3f))
|
||||
* **common:** add APIs to read component pieces of URL ([#30055](https://github.com/angular/angular/issues/30055)) ([b635fe8](https://github.com/angular/angular/commit/b635fe8))
|
||||
* **common:** add `MockPlatformLocation` to enable more robust testing of `Location` services ([#30055](https://github.com/angular/angular/issues/30055)) ([d0672c2](https://github.com/angular/angular/commit/d0672c2))
|
||||
* **common:** add `UrlCodec` type for use with upgrade applications ([#30055](https://github.com/angular/angular/issues/30055)) ([ec455e1](https://github.com/angular/angular/commit/ec455e1))
|
||||
* **common:** add MockPlatformLocation to enable more robust testing of Location services ([#30055](https://github.com/angular/angular/issues/30055)) ([d0672c2](https://github.com/angular/angular/commit/d0672c2))
|
||||
* **common:** add UrlCodec type for use with upgrade applications ([#30055](https://github.com/angular/angular/issues/30055)) ([ec455e1](https://github.com/angular/angular/commit/ec455e1))
|
||||
* **common:** provide replacement for AngularJS $location service ([#30055](https://github.com/angular/angular/issues/30055)) ([4277600](https://github.com/angular/angular/commit/4277600))
|
||||
* remove deprecated `DOCUMENT` token from platform-browser ([#28117](https://github.com/angular/angular/issues/28117)) ([3a9d247](https://github.com/angular/angular/commit/3a9d247))
|
||||
* remove deprecated DOCUMENT token from platform-browser ([#28117](https://github.com/angular/angular/issues/28117)) ([3a9d247](https://github.com/angular/angular/commit/3a9d247))
|
||||
* **compiler:** support skipping leading trivia in template source-maps ([#30095](https://github.com/angular/angular/issues/30095)) ([304a12f](https://github.com/angular/angular/commit/304a12f))
|
||||
* **core:** add missing ARIA attributes to html sanitizer ([#29685](https://github.com/angular/angular/issues/29685)) ([909557d](https://github.com/angular/angular/commit/909557d)), closes [#26815](https://github.com/angular/angular/issues/26815)
|
||||
* **router:** deprecate loadChildren:string ([#30073](https://github.com/angular/angular/issues/30073)) ([c61df39](https://github.com/angular/angular/commit/c61df39))
|
||||
@ -202,28 +50,28 @@
|
||||
* **service-worker:** support bypassing SW with specific header/query param ([#30010](https://github.com/angular/angular/issues/30010)) ([6200732](https://github.com/angular/angular/commit/6200732)), closes [#21191](https://github.com/angular/angular/issues/21191)
|
||||
* **compiler-cli:** export tooling definitions ([#29929](https://github.com/angular/angular/issues/29929)) ([e1f51ea](https://github.com/angular/angular/commit/e1f51ea))
|
||||
* **compiler-cli:** lower some exported expressions ([#30038](https://github.com/angular/angular/issues/30038)) ([8e73f9b](https://github.com/angular/angular/commit/8e73f9b))
|
||||
* **core:** add schematics to move deprecated `DOCUMENT` import ([#29950](https://github.com/angular/angular/issues/29950)) ([645e305](https://github.com/angular/angular/commit/645e305))
|
||||
* **core:** add schematics to move deprecated DOCUMENT import ([#29950](https://github.com/angular/angular/issues/29950)) ([645e305](https://github.com/angular/angular/commit/645e305))
|
||||
* **bazel:** update the build to use the new architect api ([#29720](https://github.com/angular/angular/issues/29720)) ([902a53a](https://github.com/angular/angular/commit/902a53a))
|
||||
* remove @angular/http dependency from @angular/platform-server ([#29408](https://github.com/angular/angular/issues/29408)) ([9745f55](https://github.com/angular/angular/commit/9745f55))
|
||||
* remove [@angular](https://github.com/angular)/http dependency from [@angular](https://github.com/angular)/platform-server ([#29408](https://github.com/angular/angular/issues/29408)) ([9745f55](https://github.com/angular/angular/commit/9745f55))
|
||||
* **compiler-cli:** ngcc - make logging more configurable ([#29591](https://github.com/angular/angular/issues/29591)) ([8d3d75e](https://github.com/angular/angular/commit/8d3d75e))
|
||||
* **core:** Add `AbstractType<T>` interface ([#29295](https://github.com/angular/angular/issues/29295)) ([afd4a4e](https://github.com/angular/angular/commit/afd4a4e)), closes [#26491](https://github.com/angular/angular/issues/26491)
|
||||
* **core:** Add "AbstractType<T>" interface ([#29295](https://github.com/angular/angular/issues/29295)) ([afd4a4e](https://github.com/angular/angular/commit/afd4a4e)), closes [#26491](https://github.com/angular/angular/issues/26491)
|
||||
* **core:** template-var-assignment update schematic ([#29608](https://github.com/angular/angular/issues/29608)) ([7c8f4e3](https://github.com/angular/angular/commit/7c8f4e3))
|
||||
* **bazel:** Upgrade rules_nodejs and rules_sass ([#29388](https://github.com/angular/angular/issues/29388)) ([d6d081e](https://github.com/angular/angular/commit/d6d081e))
|
||||
* **service-worker:** support multiple apps on different subpaths of a domain ([#27080](https://github.com/angular/angular/issues/27080)) ([e721c08](https://github.com/angular/angular/commit/e721c08)), closes [#21388](https://github.com/angular/angular/issues/21388)
|
||||
* **bazel:** Eject Bazel ([#29167](https://github.com/angular/angular/issues/29167)) ([36a1550](https://github.com/angular/angular/commit/36a1550))
|
||||
* **bazel:** Hide Bazel files in Bazel builder ([#29110](https://github.com/angular/angular/issues/29110)) ([7060d90](https://github.com/angular/angular/commit/7060d90))
|
||||
* **forms:** clear (remove all) components from a FormArray ([#28918](https://github.com/angular/angular/issues/28918)) ([a68b1a1](https://github.com/angular/angular/commit/a68b1a1)), closes [#18531](https://github.com/angular/angular/issues/18531)
|
||||
* **platform-server:** wait on returned `BEFORE_APP_SERIALIZED` promises ([#29120](https://github.com/angular/angular/issues/29120)) ([7102ea8](https://github.com/angular/angular/commit/7102ea8))
|
||||
* **platform-server:** wait on returned BEFORE_APP_SERIALIZED promises ([#29120](https://github.com/angular/angular/issues/29120)) ([7102ea8](https://github.com/angular/angular/commit/7102ea8))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** allow `ts_library` interop with list-typed inputs ([#30600](https://github.com/angular/angular/issues/30600)) ([bf38df4](https://github.com/angular/angular/commit/bf38df4))
|
||||
* **bazel:** allow ts_library interop with list-typed inputs ([#30600](https://github.com/angular/angular/issues/30600)) ([bf38df4](https://github.com/angular/angular/commit/bf38df4))
|
||||
* **bazel:** Disable sandbox on Mac OS ([#30460](https://github.com/angular/angular/issues/30460)) ([3de26a8](https://github.com/angular/angular/commit/3de26a8))
|
||||
* **bazel:** ng test should run specific ts_web_test_suite ([#30526](https://github.com/angular/angular/issues/30526)) ([8bc4da8](https://github.com/angular/angular/commit/8bc4da8))
|
||||
* **core:** remove deprecated `TestBed.deprecatedOverrideProvider` API ([#30576](https://github.com/angular/angular/issues/30576)) ([5a46f94](https://github.com/angular/angular/commit/5a46f94))
|
||||
* **core:** require 'static' flag on queries in typings ([#30641](https://github.com/angular/angular/issues/30641)) ([c8af830](https://github.com/angular/angular/commit/c8af830))
|
||||
* **core:** temporarily remove [@deprecated](https://github.com/deprecated) jsdoc tag for a `TextBed.get` overload ([#30514](https://github.com/angular/angular/issues/30514)) ([561e01d](https://github.com/angular/angular/commit/561e01d)), closes [#29290](https://github.com/angular/angular/issues/29290) [#29905](https://github.com/angular/angular/issues/29905)
|
||||
* **core:** temporarily remove [@deprecated](https://github.com/deprecated) jsdoc tag for a TextBed.get overload ([#30514](https://github.com/angular/angular/issues/30514)) ([561e01d](https://github.com/angular/angular/commit/561e01d)), closes [#29290](https://github.com/angular/angular/issues/29290) [#29905](https://github.com/angular/angular/issues/29905)
|
||||
* **router:** type cast correctly for IE 11 bug breaking URL Unification when comparing objects ([#30464](https://github.com/angular/angular/issues/30464)) ([32daa93](https://github.com/angular/angular/commit/32daa93))
|
||||
* **bazel:** Directly spawn native Bazel binary ([#30306](https://github.com/angular/angular/issues/30306)) ([d1fcc2b](https://github.com/angular/angular/commit/d1fcc2b))
|
||||
* **bazel:** pass correct arguments to http_server in Windows ([#30346](https://github.com/angular/angular/issues/30346)) ([71eba45](https://github.com/angular/angular/commit/71eba45)), closes [#29785](https://github.com/angular/angular/issues/29785)
|
||||
@ -239,7 +87,7 @@
|
||||
* **core:** static-query usage migration strategy should detect ambiguous query usage ([#30215](https://github.com/angular/angular/issues/30215)) ([e295c6a](https://github.com/angular/angular/commit/e295c6a))
|
||||
* **router:** ensure navigations start with the current URL value incase redirect is skipped ([#30344](https://github.com/angular/angular/issues/30344)) ([9b88920](https://github.com/angular/angular/commit/9b88920)), closes [#30340](https://github.com/angular/angular/issues/30340) [#30160](https://github.com/angular/angular/issues/30160)
|
||||
* **router:** IE 11 bug can break URL unification when comparing objects ([#30393](https://github.com/angular/angular/issues/30393)) ([c383491](https://github.com/angular/angular/commit/c383491))
|
||||
* **bazel:** Bump ibazel to 0.10.1 for Windows fixes ([#30196](https://github.com/angular/angular/issues/30196)) ([9f68c35](https://github.com/angular/angular/commit/9f68c35))
|
||||
* **bazel:** Bump ibazel to 0.10.1 for windows fixes ([#30196](https://github.com/angular/angular/issues/30196)) ([9f68c35](https://github.com/angular/angular/commit/9f68c35))
|
||||
* **compiler-cli:** log ngcc skipping messages as debug instead of info ([#30232](https://github.com/angular/angular/issues/30232)) ([548b003](https://github.com/angular/angular/commit/548b003))
|
||||
* **core:** fix interpolate identifier in AOT ([#30243](https://github.com/angular/angular/issues/30243)) ([3fe3a84](https://github.com/angular/angular/commit/3fe3a84))
|
||||
* **router:** ensure `history.state` is set in `eager` update mode ([#30154](https://github.com/angular/angular/issues/30154)) ([9720227](https://github.com/angular/angular/commit/9720227))
|
||||
@ -249,54 +97,57 @@
|
||||
* **bazel:** Exclude common/upgrade* in metadata.tsconfig.json ([#30133](https://github.com/angular/angular/issues/30133)) ([6711f22](https://github.com/angular/angular/commit/6711f22))
|
||||
* **bazel:** update peerDep ranges ([#30155](https://github.com/angular/angular/issues/30155)) ([6067583](https://github.com/angular/angular/commit/6067583))
|
||||
* **bazel:** make name param in ng add optional ([#30074](https://github.com/angular/angular/issues/30074)) ([0b5f480](https://github.com/angular/angular/commit/0b5f480))
|
||||
* **bazel:** Make sure only single copy of @angular/bazel is installed ([#30072](https://github.com/angular/angular/issues/30072)) ([2905bf5](https://github.com/angular/angular/commit/2905bf5))
|
||||
* **bazel:** Make sure only single copy of `[@angular](https://github.com/angular)/bazel` is installed ([#30072](https://github.com/angular/angular/issues/30072)) ([2905bf5](https://github.com/angular/angular/commit/2905bf5))
|
||||
* **bazel:** transitive npm deps in ng_module ([#30065](https://github.com/angular/angular/issues/30065)) ([61365a9](https://github.com/angular/angular/commit/61365a9))
|
||||
* **common:** add upgrade sub-package to `ng_package` rule for @angular/common ([#30117](https://github.com/angular/angular/issues/30117)) ([6de4cbd](https://github.com/angular/angular/commit/6de4cbd)), closes [#30055](https://github.com/angular/angular/issues/30055) [#30116](https://github.com/angular/angular/issues/30116)
|
||||
* **common:** adjust `MockPlatformLocation` to set state to new object ([#30055](https://github.com/angular/angular/issues/30055)) ([825efa8](https://github.com/angular/angular/commit/825efa8))
|
||||
* **common:** add upgrade sub-package to ng_package rule for [@angular](https://github.com/angular)/common ([#30117](https://github.com/angular/angular/issues/30117)) ([6de4cbd](https://github.com/angular/angular/commit/6de4cbd)), closes [#30055](https://github.com/angular/angular/issues/30055) [#30116](https://github.com/angular/angular/issues/30116)
|
||||
* **common:** adjust MockPlatformLocation to set state to new object ([#30055](https://github.com/angular/angular/issues/30055)) ([825efa8](https://github.com/angular/angular/commit/825efa8))
|
||||
* **compiler:** Fix compiler crash due to isSkipSelf of null ([#30075](https://github.com/angular/angular/issues/30075)) ([28fd5ab](https://github.com/angular/angular/commit/28fd5ab))
|
||||
* **upgrade:** do not break if `onMicrotaskEmpty` emits while a `$digest` is in progress ([#29794](https://github.com/angular/angular/issues/29794)) ([0ddf2e7](https://github.com/angular/angular/commit/0ddf2e7)), closes [#24680](https://github.com/angular/angular/issues/24680) [/github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts#L12](https://github.com//github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts/issues/L12) [#24680](https://github.com/angular/angular/issues/24680)
|
||||
* **bazel:** do not typecheck core schematic files ([#29876](https://github.com/angular/angular/issues/29876)) ([2ba799d](https://github.com/angular/angular/commit/2ba799d))
|
||||
* **bazel:** restore `ng build --prod` ([#30005](https://github.com/angular/angular/issues/30005)) ([96a8289](https://github.com/angular/angular/commit/96a8289))
|
||||
* **common:** prevent repeated application of `HttpParams` mutations ([#29045](https://github.com/angular/angular/issues/29045)) ([8e8e89a](https://github.com/angular/angular/commit/8e8e89a)), closes [#20430](https://github.com/angular/angular/issues/20430)
|
||||
* **common:** async pipe will properly check when it receives an NaN value from an observable ([#22305](https://github.com/angular/angular/issues/22305)) ([3f6bf6d](https://github.com/angular/angular/commit/3f6bf6d)), closes [#15721](https://github.com/angular/angular/issues/15721)
|
||||
* **core:** don't include a local `EventListener` in typings ([#29809](https://github.com/angular/angular/issues/29809)) ([4bde40f](https://github.com/angular/angular/commit/4bde40f)), closes [#29806](https://github.com/angular/angular/issues/29806)
|
||||
* **core:** use shakeable global definitions ([#29929](https://github.com/angular/angular/issues/29929)) ([e5905bb](https://github.com/angular/angular/commit/e5905bb))
|
||||
* **bazel:** restore ng build --prod ([#30005](https://github.com/angular/angular/issues/30005)) ([96a8289](https://github.com/angular/angular/commit/96a8289))
|
||||
* **common:** prevent repeated application of HttpParams mutations ([#29045](https://github.com/angular/angular/issues/29045)) ([8e8e89a](https://github.com/angular/angular/commit/8e8e89a)), closes [#20430](https://github.com/angular/angular/issues/20430)
|
||||
* **common:** async pipe will properly check when it recieves an NaN value from an observable ([#22305](https://github.com/angular/angular/issues/22305)) ([3f6bf6d](https://github.com/angular/angular/commit/3f6bf6d)), closes [#15721](https://github.com/angular/angular/issues/15721)
|
||||
* **core:** don't include a local `EventListener` in typings ([#29809](https://github.com/angular/angular/issues/29809)) ([4bde40f](https://github.com/angular/angular/commit/4bde40f)), closes [/github.com/angular/angular/blob/303eae918d997070a36b523ddc97e018f622c258/packages/core/src/debug/debug_node.ts#L32](https://github.com//github.com/angular/angular/blob/303eae918d997070a36b523ddc97e018f622c258/packages/core/src/debug/debug_node.ts/issues/L32) [#29806](https://github.com/angular/angular/issues/29806)
|
||||
* **core:** use shakeable global definitions ([#29929](https://github.com/angular/angular/issues/29929)) ([e5905bb](https://github.com/angular/angular/commit/e5905bb)), closes [/github.com/angular/angular-cli/blob/5fc1f2499cbe57f9a95e4b0dfced130eb3a8046d/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L279-L282](https://github.com//github.com/angular/angular-cli/blob/5fc1f2499cbe57f9a95e4b0dfced130eb3a8046d/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts/issues/L279-L282)
|
||||
* **language-service:** Use proper types instead of any ([#29942](https://github.com/angular/angular/issues/29942)) ([1a56cd5](https://github.com/angular/angular/commit/1a56cd5))
|
||||
* **bazel:** Install packages after `ng add` when invoked independently ([#29852](https://github.com/angular/angular/issues/29852)) ([bd2ce9c](https://github.com/angular/angular/commit/bd2ce9c))
|
||||
* **compiler-cli:** pass config path to `ts.parseJsonConfigFileContent` ([#29872](https://github.com/angular/angular/issues/29872)) ([86a3f90](https://github.com/angular/angular/commit/86a3f90))
|
||||
* **compiler-cli:** pass config path to ts.parseJsonConfigFileContent ([#29872](https://github.com/angular/angular/issues/29872)) ([86a3f90](https://github.com/angular/angular/commit/86a3f90)), closes [/github.com/Microsoft/TypeScript/blob/025d82633915b67003ea38ba40b9239a19721c13/src/compiler/emitter.ts#L56-L57](https://github.com//github.com/Microsoft/TypeScript/blob/025d82633915b67003ea38ba40b9239a19721c13/src/compiler/emitter.ts/issues/L56-L57)
|
||||
* **router:** support non-NgFactory promise in loadChildren typings ([#29832](https://github.com/angular/angular/issues/29832)) ([2bfb6a0](https://github.com/angular/angular/commit/2bfb6a0))
|
||||
* **bazel:** add `configuration_env_vars = ["compile"]` to generated `@npm//@angular/bazel/bin:ngc-wrapped` `nodejs_binary` ([#29694](https://github.com/angular/angular/issues/29694)) ([2e66ddf](https://github.com/angular/angular/commit/2e66ddf))
|
||||
* **bazel:** add configuration_env_vars = ["compile"] to generated [@npm](https://github.com/npm)//[@angular](https://github.com/angular)/bazel/bin:ngc-wrapped nodejs_binary ([#29694](https://github.com/angular/angular/issues/29694)) ([2e66ddf](https://github.com/angular/angular/commit/2e66ddf))
|
||||
* **bazel:** docs formatting ([#29817](https://github.com/angular/angular/issues/29817)) ([cc2e4b6](https://github.com/angular/angular/commit/cc2e4b6))
|
||||
* **bazel:** remove karma-jasmine from `ts_web_test_suite` ([#29695](https://github.com/angular/angular/issues/29695)) ([2bd9214](https://github.com/angular/angular/commit/2bd9214))
|
||||
* **bazel:** remove karma-jasmine from ts_web_test_suite ([#29695](https://github.com/angular/angular/issues/29695)) ([2bd9214](https://github.com/angular/angular/commit/2bd9214))
|
||||
* **bazel:** support running ng-add on minimal applications ([#29681](https://github.com/angular/angular/issues/29681)) ([9810c6c](https://github.com/angular/angular/commit/9810c6c)), closes [#29680](https://github.com/angular/angular/issues/29680)
|
||||
* **common:** add `@Injectable()` to common pipes ([#29834](https://github.com/angular/angular/issues/29834)) ([387fbb8](https://github.com/angular/angular/commit/387fbb8))
|
||||
* **compiler-cli:** ensure `LogicalProjectPaths` always start with a slash ([#29627](https://github.com/angular/angular/issues/29627)) ([e02684e](https://github.com/angular/angular/commit/e02684e))
|
||||
* **compiler-cli:** ensure LogicalProjectPaths always start with a slash ([#29627](https://github.com/angular/angular/issues/29627)) ([e02684e](https://github.com/angular/angular/commit/e02684e))
|
||||
* **core:** add missing migration to npm package ([#29705](https://github.com/angular/angular/issues/29705)) ([96b76dc](https://github.com/angular/angular/commit/96b76dc))
|
||||
* **core:** call `ngOnDestroy` for tree-shakeable providers ([#28943](https://github.com/angular/angular/issues/28943)) ([30b0442](https://github.com/angular/angular/commit/30b0442)), closes [#28927](https://github.com/angular/angular/issues/28927)
|
||||
* **core:** Deprecate `TestBed.get(...):any` ([#29290](https://github.com/angular/angular/issues/29290)) ([609024f](https://github.com/angular/angular/commit/609024f)), closes [#13785](https://github.com/angular/angular/issues/13785) [#26491](https://github.com/angular/angular/issues/26491)
|
||||
* **core:** call ngOnDestroy for tree-shakeable providers ([#28943](https://github.com/angular/angular/issues/28943)) ([30b0442](https://github.com/angular/angular/commit/30b0442)), closes [#28927](https://github.com/angular/angular/issues/28927)
|
||||
* **core:** Deprecate TestBed.get(...):any ([#29290](https://github.com/angular/angular/issues/29290)) ([609024f](https://github.com/angular/angular/commit/609024f)), closes [#13785](https://github.com/angular/angular/issues/13785) [#26491](https://github.com/angular/angular/issues/26491)
|
||||
* **core:** resolve ts compile issues due to lenient tsconfig ([#29843](https://github.com/angular/angular/issues/29843)) ([54058ba](https://github.com/angular/angular/commit/54058ba))
|
||||
* **platform-browser:** insert `APP_ID` in styles, contentAttr and hostAttr ([#17745](https://github.com/angular/angular/issues/17745)) ([712d60e](https://github.com/angular/angular/commit/712d60e))
|
||||
* **platform-browser:** insert APP_ID in styles, contentAttr and hostAttr ([#17745](https://github.com/angular/angular/issues/17745)) ([712d60e](https://github.com/angular/angular/commit/712d60e))
|
||||
* **bazel:** use //:tsconfig.json as the default for ng_module ([#29670](https://github.com/angular/angular/issues/29670)) ([#29711](https://github.com/angular/angular/issues/29711)) ([9e33dc3](https://github.com/angular/angular/commit/9e33dc3))
|
||||
* **platform-browser:** insert APP_ID in styles, contentAttr and hostAttr ([#17745](https://github.com/angular/angular/issues/17745)) ([ca14509](https://github.com/angular/angular/commit/ca14509))
|
||||
* **bazel:** Update schematics to support routing ([#29548](https://github.com/angular/angular/issues/29548)) ([401b8ee](https://github.com/angular/angular/commit/401b8ee))
|
||||
* **bazel:** use `//:tsconfig.json` as the default for `ng_module` ([#29670](https://github.com/angular/angular/issues/29670)) ([b14537a](https://github.com/angular/angular/commit/b14537a))
|
||||
* **bazel:** use //:tsconfig.json as the default for ng_module ([#29670](https://github.com/angular/angular/issues/29670)) ([b14537a](https://github.com/angular/angular/commit/b14537a))
|
||||
* **compiler-cli:** ngcc - cope with processing entry-points multiple times ([#29657](https://github.com/angular/angular/issues/29657)) ([6b39c9c](https://github.com/angular/angular/commit/6b39c9c))
|
||||
* **core:** static-query schematic should detect static queries in getters. ([#29609](https://github.com/angular/angular/issues/29609)) ([33016b8](https://github.com/angular/angular/commit/33016b8))
|
||||
* **common:** escape query selector used when anchor scrolling ([#29577](https://github.com/angular/angular/issues/29577)) ([7671c73](https://github.com/angular/angular/commit/7671c73)), closes [#28193](https://github.com/angular/angular/issues/28193)
|
||||
* **router:** adjust setting navigationTransition when a new navigation cancels an existing one ([#29636](https://github.com/angular/angular/issues/29636)) ([e884c0c](https://github.com/angular/angular/commit/e884c0c)), closes [#29389](https://github.com/angular/angular/issues/29389) [#29590](https://github.com/angular/angular/issues/29590)
|
||||
* **bazel:** allow `ng_module` users to set `createExternalSymbolFactoryReexports` ([#29459](https://github.com/angular/angular/issues/29459)) ([21be0fb](https://github.com/angular/angular/commit/21be0fb))
|
||||
* **bazel:** allow ng_module users to set createExternalSymbolFactoryReexports ([#29459](https://github.com/angular/angular/issues/29459)) ([21be0fb](https://github.com/angular/angular/commit/21be0fb))
|
||||
* **bazel:** workaround problem reading summary files from node_modules ([#29459](https://github.com/angular/angular/issues/29459)) ([769d960](https://github.com/angular/angular/commit/769d960))
|
||||
* **compiler:** inherit param types when class has a constructor which takes no declared parameters and delegates up ([#29232](https://github.com/angular/angular/issues/29232)) ([0007564](https://github.com/angular/angular/commit/0007564))
|
||||
* **core:** parse incorrect ML open tag as text ([#29328](https://github.com/angular/angular/issues/29328)) ([dafbbf8](https://github.com/angular/angular/commit/dafbbf8)), closes [#29231](https://github.com/angular/angular/issues/29231)
|
||||
* **core:** static-query schematic should detect queries in `ngDoCheck` and `ngOnChanges` ([#29492](https://github.com/angular/angular/issues/29492)) ([09fab58](https://github.com/angular/angular/commit/09fab58))
|
||||
* **router:** support `NgFactory` promise in loadChildren typings ([#29392](https://github.com/angular/angular/issues/29392)) ([26a8c59](https://github.com/angular/angular/commit/26a8c59))
|
||||
* **core:** static-query schematic should detect queries in "ngDoCheck" and "ngOnChanges" ([#29492](https://github.com/angular/angular/issues/29492)) ([09fab58](https://github.com/angular/angular/commit/09fab58))
|
||||
* **router:** support NgFactory promise in loadChildren typings ([#29392](https://github.com/angular/angular/issues/29392)) ([26a8c59](https://github.com/angular/angular/commit/26a8c59))
|
||||
* **bazel:** correct regexp test for self-references in metadata ([#29346](https://github.com/angular/angular/issues/29346)) ([9d090cb](https://github.com/angular/angular/commit/9d090cb))
|
||||
* **bazel:** don't produce self-references in metadata ([#29317](https://github.com/angular/angular/issues/29317)) ([3facdeb](https://github.com/angular/angular/commit/3facdeb)), closes [#29315](https://github.com/angular/angular/issues/29315)
|
||||
* **bazel:** fix strict null checks compile error in `packages/bazel/src/schematics/ng-add/index.ts` ([#29282](https://github.com/angular/angular/issues/29282)) ([9a7f560](https://github.com/angular/angular/commit/9a7f560))
|
||||
* **bazel:** Remove @angular/upgrade from dev dependencies ([#29319](https://github.com/angular/angular/issues/29319)) ([1db8bf3](https://github.com/angular/angular/commit/1db8bf3))
|
||||
* **bazel:** fix strict null checks compile error in packages/bazel/src/schematics/ng-add/index.ts ([#29282](https://github.com/angular/angular/issues/29282)) ([9a7f560](https://github.com/angular/angular/commit/9a7f560))
|
||||
* **bazel:** Remove [@angular](https://github.com/angular)/upgrade from dev dependencies ([#29319](https://github.com/angular/angular/issues/29319)) ([1db8bf3](https://github.com/angular/angular/commit/1db8bf3))
|
||||
* **bazel:** Support new e2e project layout ([#29318](https://github.com/angular/angular/issues/29318)) ([8ef690c](https://github.com/angular/angular/commit/8ef690c))
|
||||
* **bazel:** turn off pure call tree shaking for ng_package ([#29210](https://github.com/angular/angular/issues/29210)) ([4990b93](https://github.com/angular/angular/commit/4990b93))
|
||||
* **compiler-cli:** incorrect metadata bundle for multiple unnamed re-exports ([#29360](https://github.com/angular/angular/issues/29360)) ([105cfaf](https://github.com/angular/angular/commit/105cfaf))
|
||||
* **compiler-cli:** incorrect metadata bundle for multiple unnamed re-exports ([#29360](https://github.com/angular/angular/issues/29360)) ([105cfaf](https://github.com/angular/angular/commit/105cfaf)), closes [/github.com/angular/material2/blob/master/tools/package-tools/build-release.ts#L78-L85](https://github.com//github.com/angular/material2/blob/master/tools/package-tools/build-release.ts/issues/L78-L85)
|
||||
* **core:** don't wrap `<tr>` and `<col>` elements into a required parent ([#29219](https://github.com/angular/angular/issues/29219)) ([f2dc32e](https://github.com/angular/angular/commit/f2dc32e))
|
||||
* **core:** parse incorrect ML open tag as text ([#29328](https://github.com/angular/angular/issues/29328)) ([4605df8](https://github.com/angular/angular/commit/4605df8)), closes [#29231](https://github.com/angular/angular/issues/29231)
|
||||
* **compiler-cli:** incorrect metadata bundle for multiple unnamed re-exports ([#29360](https://github.com/angular/angular/issues/29360)) ([cf8d934](https://github.com/angular/angular/commit/cf8d934)), closes [github.com/angular/material2/blob/master/tools/package-tools/build-release.ts#L78-L85](https://github.com/angular/material2/blob/master/tools/package-tools/build-release.ts#L78-L85)
|
||||
* **bazel:** add missing binary path for api-extractor ([#29202](https://github.com/angular/angular/issues/29202)) ([df354d1](https://github.com/angular/angular/commit/df354d1))
|
||||
* **bazel:** ng build should produce prod bundle ([#29136](https://github.com/angular/angular/issues/29136)) ([14ce8a9](https://github.com/angular/angular/commit/14ce8a9))
|
||||
* **compiler:** ensure template is updated if an output is transformed ([#29041](https://github.com/angular/angular/issues/29041)) ([c7e4931](https://github.com/angular/angular/commit/c7e4931))
|
||||
@ -310,16 +161,16 @@
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **bazel:** @bazel/typescript is now a peerDependency of @angular/bazel so users of @angular/bazel must add @bazel/typescript to their package.json
|
||||
* **bazel:** `ng_module` now depends on a minimum of build_bazel_rules_nodejs 0.27.12
|
||||
* **core:** In Angular version 8, it's required that all `@ViewChild` and `@ContentChild`
|
||||
queries have a `'static'` flag specifying whether the query is 'static' or
|
||||
* **bazel:** @bazel/typescript is now a peerDependency of @angular/bazel so user's of @angular/bazel must add @bazel/typescript to their package.json
|
||||
* **bazel:** ng_module now depends on a minimum of build_bazel_rules_nodejs 0.27.12
|
||||
* **core:** In Angular version 8, it's required that all @ViewChild and @ContentChild
|
||||
queries have a 'static' flag specifying whether the query is 'static' or
|
||||
'dynamic'. The compiler previously sorted queries automatically, but in
|
||||
8.0 developers are required to explicitly specify which behavior is wanted.
|
||||
This is a temporary requirement as part of a migration; see
|
||||
[static query migration guide](https://v8.angular.io/guide/static-query-migration) for more details.
|
||||
https://v8.angular.io/guide/static-query-migration for more details.
|
||||
|
||||
`@ViewChildren` and `@ContentChildren` queries are always dynamic, and so are
|
||||
@ViewChildren and @ContentChildren queries are always dynamic, and so are
|
||||
unaffected.
|
||||
|
||||
* `TestBed.get()` has two signatures, one which is typed and another which accepts and returns `any`. The signature for `any` is deprecated; all usage of `TestBed.get()` should go through the typed API. This mainly affects string tokens
|
||||
@ -353,8 +204,8 @@ This is a temporary requirement as part of a migration; see
|
||||
- `<tr>` would be wrapped in `<tbody>` if not inside `<tbody>`, `<tfoot>` or `<thead>`;
|
||||
- `<col>` would be wrapped in `<colgroup>` if not inside `<colgroup>`.
|
||||
|
||||
This mechanism of automatic wrapping / auto-correcting was problematic for several reasons:
|
||||
- it is non-obvious and arbitrary (ex. there are more HTML elements that have rules for parent type);
|
||||
This meachanism of automatic wrapping / auto-correcting was problematic for several reasons:
|
||||
- it is non-obvious and arbitrary (ex. there are more HTML elements that has rules for parent type);
|
||||
- it is incorrect for cases where `<tr>` / `<col>` are at the root of a component's content, ex.:
|
||||
|
||||
```html
|
||||
@ -366,13 +217,10 @@ This is a temporary requirement as part of a migration; see
|
||||
In the above example the `<projecting-tr-inside-tbody>` component could be "surprised" to see additional
|
||||
`<tbody>` elements inserted by Angular HTML parser.
|
||||
|
||||
* **http:** The deprecated @angular/http package has been removed, the @angular/common/http package should be used instead.
|
||||
For details on how to migrate, please refer to [the deprecations guide](https://angular.io/guide/deprecations#angularhttp).
|
||||
|
||||
|
||||
* TypeScript 3.1 and 3.2 are no longer supported.
|
||||
|
||||
Please update your TypeScript version to 3.4, as version 3.3 is also not supported.
|
||||
Please update your TypeScript version to 3.3
|
||||
|
||||
|
||||
<a name="8.0.0-rc.5"></a>
|
||||
@ -458,17 +306,6 @@ unaffected.
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="7.2.15"></a>
|
||||
## [7.2.15](https://github.com/angular/angular/compare/7.2.14...7.2.15) (2019-05-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **upgrade:** do not break if `onMicrotaskEmpty` emits while a `$digest` is in progress ([#29794](https://github.com/angular/angular/issues/29794)) ([#30107](https://github.com/angular/angular/issues/30107)) ([1084c19](https://github.com/angular/angular/commit/1084c19)), closes [#24680](https://github.com/angular/angular/issues/24680) [/github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts#L12](https://github.com//github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts/issues/L12) [#24680](https://github.com/angular/angular/issues/24680)
|
||||
|
||||
|
||||
|
||||
<a name="8.0.0-rc.2"></a>
|
||||
# [8.0.0-rc.2](https://github.com/angular/angular/compare/8.0.0-rc.1...8.0.0-rc.2) (2019-04-29)
|
||||
|
||||
@ -498,9 +335,9 @@ unaffected.
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** make name param in ng add optional ([#30074](https://github.com/angular/angular/issues/30074)) ([0b5f480](https://github.com/angular/angular/commit/0b5f480))
|
||||
* **bazel:** Make sure only single copy of `@angular/bazel` is installed ([#30072](https://github.com/angular/angular/issues/30072)) ([2905bf5](https://github.com/angular/angular/commit/2905bf5))
|
||||
* **bazel:** Make sure only single copy of `[@angular](https://github.com/angular)/bazel` is installed ([#30072](https://github.com/angular/angular/issues/30072)) ([2905bf5](https://github.com/angular/angular/commit/2905bf5))
|
||||
* **bazel:** transitive npm deps in ng_module ([#30065](https://github.com/angular/angular/issues/30065)) ([61365a9](https://github.com/angular/angular/commit/61365a9))
|
||||
* **common:** add upgrade sub-package to ng_package rule for @angular/common ([#30117](https://github.com/angular/angular/issues/30117)) ([6de4cbd](https://github.com/angular/angular/commit/6de4cbd)), closes [#30055](https://github.com/angular/angular/issues/30055) [#30116](https://github.com/angular/angular/issues/30116)
|
||||
* **common:** add upgrade sub-package to ng_package rule for [@angular](https://github.com/angular)/common ([#30117](https://github.com/angular/angular/issues/30117)) ([6de4cbd](https://github.com/angular/angular/commit/6de4cbd)), closes [#30055](https://github.com/angular/angular/issues/30055) [#30116](https://github.com/angular/angular/issues/30116)
|
||||
* **common:** adjust MockPlatformLocation to set state to new object ([#30055](https://github.com/angular/angular/issues/30055)) ([825efa8](https://github.com/angular/angular/commit/825efa8))
|
||||
* **compiler:** Fix compiler crash due to isSkipSelf of null ([#30075](https://github.com/angular/angular/issues/30075)) ([28fd5ab](https://github.com/angular/angular/commit/28fd5ab))
|
||||
* **upgrade:** do not break if `onMicrotaskEmpty` emits while a `$digest` is in progress ([#29794](https://github.com/angular/angular/issues/29794)) ([0ddf2e7](https://github.com/angular/angular/commit/0ddf2e7)), closes [#24680](https://github.com/angular/angular/issues/24680) [/github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts#L12](https://github.com//github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts/issues/L12) [#24680](https://github.com/angular/angular/issues/24680)
|
||||
@ -508,7 +345,7 @@ unaffected.
|
||||
|
||||
### Features
|
||||
|
||||
* **common:** add @angular/common/upgrade package for $location-related APIs ([#30055](https://github.com/angular/angular/issues/30055)) ([152d99e](https://github.com/angular/angular/commit/152d99e))
|
||||
* **common:** add [@angular](https://github.com/angular)/common/upgrade package for $location-related APIs ([#30055](https://github.com/angular/angular/issues/30055)) ([152d99e](https://github.com/angular/angular/commit/152d99e))
|
||||
* **common:** add ability to retrieve the state from Location service ([#30055](https://github.com/angular/angular/issues/30055)) ([b44b143](https://github.com/angular/angular/commit/b44b143))
|
||||
* **common:** add ability to track all location changes ([#30055](https://github.com/angular/angular/issues/30055)) ([3a9cf3f](https://github.com/angular/angular/commit/3a9cf3f))
|
||||
* **common:** add APIs to read component pieces of URL ([#30055](https://github.com/angular/angular/issues/30055)) ([b635fe8](https://github.com/angular/angular/commit/b635fe8))
|
||||
@ -571,7 +408,7 @@ unaffected.
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** add configuration_env_vars = ["compile"] to generated [@npm](https://github.com/npm)//@angular/bazel/bin:ngc-wrapped nodejs_binary ([#29694](https://github.com/angular/angular/issues/29694)) ([2e66ddf](https://github.com/angular/angular/commit/2e66ddf))
|
||||
* **bazel:** add configuration_env_vars = ["compile"] to generated [@npm](https://github.com/npm)//[@angular](https://github.com/angular)/bazel/bin:ngc-wrapped nodejs_binary ([#29694](https://github.com/angular/angular/issues/29694)) ([2e66ddf](https://github.com/angular/angular/commit/2e66ddf))
|
||||
* **bazel:** docs formatting ([#29817](https://github.com/angular/angular/issues/29817)) ([cc2e4b6](https://github.com/angular/angular/commit/cc2e4b6))
|
||||
* **bazel:** remove karma-jasmine from ts_web_test_suite ([#29695](https://github.com/angular/angular/issues/29695)) ([2bd9214](https://github.com/angular/angular/commit/2bd9214))
|
||||
* **bazel:** support running ng-add on minimal applications ([#29681](https://github.com/angular/angular/issues/29681)) ([9810c6c](https://github.com/angular/angular/commit/9810c6c)), closes [#29680](https://github.com/angular/angular/issues/29680)
|
||||
@ -646,7 +483,7 @@ let service = TestBed.get(SERVICE_TOKEN); // type Service
|
||||
|
||||
### Features
|
||||
|
||||
* remove @angular/http dependency from @angular/platform-server ([#29408](https://github.com/angular/angular/issues/29408)) ([9745f55](https://github.com/angular/angular/commit/9745f55))
|
||||
* remove [@angular](https://github.com/angular)/http dependency from [@angular](https://github.com/angular)/platform-server ([#29408](https://github.com/angular/angular/issues/29408)) ([9745f55](https://github.com/angular/angular/commit/9745f55))
|
||||
* **compiler-cli:** ngcc - make logging more configurable ([#29591](https://github.com/angular/angular/issues/29591)) ([8d3d75e](https://github.com/angular/angular/commit/8d3d75e))
|
||||
* **core:** Add "AbstractType<T>" interface ([#29295](https://github.com/angular/angular/issues/29295)) ([afd4a4e](https://github.com/angular/angular/commit/afd4a4e)), closes [#26491](https://github.com/angular/angular/issues/26491)
|
||||
* **core:** template-var-assignment update schematic ([#29608](https://github.com/angular/angular/issues/29608)) ([7c8f4e3](https://github.com/angular/angular/commit/7c8f4e3))
|
||||
@ -706,7 +543,7 @@ This release contains various API docs improvements.
|
||||
* **bazel:** correct regexp test for self-references in metadata ([#29346](https://github.com/angular/angular/issues/29346)) ([9d090cb](https://github.com/angular/angular/commit/9d090cb))
|
||||
* **bazel:** don't produce self-references in metadata ([#29317](https://github.com/angular/angular/issues/29317)) ([3facdeb](https://github.com/angular/angular/commit/3facdeb)), closes [#29315](https://github.com/angular/angular/issues/29315)
|
||||
* **bazel:** fix strict null checks compile error in packages/bazel/src/schematics/ng-add/index.ts ([#29282](https://github.com/angular/angular/issues/29282)) ([9a7f560](https://github.com/angular/angular/commit/9a7f560))
|
||||
* **bazel:** Remove @angular/upgrade from dev dependencies ([#29319](https://github.com/angular/angular/issues/29319)) ([1db8bf3](https://github.com/angular/angular/commit/1db8bf3))
|
||||
* **bazel:** Remove [@angular](https://github.com/angular)/upgrade from dev dependencies ([#29319](https://github.com/angular/angular/issues/29319)) ([1db8bf3](https://github.com/angular/angular/commit/1db8bf3))
|
||||
* **bazel:** Support new e2e project layout ([#29318](https://github.com/angular/angular/issues/29318)) ([8ef690c](https://github.com/angular/angular/commit/8ef690c))
|
||||
* **bazel:** turn off pure call tree shaking for ng_package ([#29210](https://github.com/angular/angular/issues/29210)) ([4990b93](https://github.com/angular/angular/commit/4990b93))
|
||||
* **compiler-cli:** incorrect metadata bundle for multiple unnamed re-exports ([#29360](https://github.com/angular/angular/issues/29360)) ([105cfaf](https://github.com/angular/angular/commit/105cfaf)), closes [/github.com/angular/material2/blob/master/tools/package-tools/build-release.ts#L78-L85](https://github.com//github.com/angular/material2/blob/master/tools/package-tools/build-release.ts/issues/L78-L85)
|
||||
@ -727,8 +564,8 @@ This release contains various API docs improvements.
|
||||
- `<tr>` would be wrapped in `<tbody>` if not inside `<tbody>`, `<tfoot>` or `<thead>`;
|
||||
- `<col>` would be wrapped in `<colgroup>` if not inside `<colgroup>`.
|
||||
|
||||
This mechanism of automatic wrapping / auto-correcting was problematic for several reasons:
|
||||
- it is non-obvious and arbitrary (ex. there are more HTML elements that have rules for parent type);
|
||||
This meachanism of automatic wrapping / auto-correcting was problematic for several reasons:
|
||||
- it is non-obvious and arbitrary (ex. there are more HTML elements that has rules for parent type);
|
||||
- it is incorrect for cases where `<tr>` / `<col>` are at the root of a component's content, ex.:
|
||||
|
||||
```html
|
||||
@ -1129,7 +966,7 @@ This release contains various API docs improvements.
|
||||
* **bazel:** unable to launch protractor test on windows ([#27850](https://github.com/angular/angular/issues/27850)) ([1e6c9be](https://github.com/angular/angular/commit/1e6c9be))
|
||||
* **bazel:** devserver entry_module should have underscore name ([#27719](https://github.com/angular/angular/issues/27719)) ([f57916c](https://github.com/angular/angular/commit/f57916c))
|
||||
* **bazel:** emit full node stack traces when Angular compilation crashes ([#27678](https://github.com/angular/angular/issues/27678)) ([522919a](https://github.com/angular/angular/commit/522919a))
|
||||
* **bazel:** fix major/minor semver check between @angular/bazel npm packager version and angular bazel repo version ([#27635](https://github.com/angular/angular/issues/27635)) ([1cc08b4](https://github.com/angular/angular/commit/1cc08b4))
|
||||
* **bazel:** fix major/minor semver check between [@angular](https://github.com/angular)/bazel npm packager version and angular bazel repo version ([#27635](https://github.com/angular/angular/issues/27635)) ([1cc08b4](https://github.com/angular/angular/commit/1cc08b4))
|
||||
* **bazel:** Load http_archive and rules_nodejs dependencies ([#27609](https://github.com/angular/angular/issues/27609)) ([8313ffc](https://github.com/angular/angular/commit/8313ffc))
|
||||
* **bazel:** ng_package writes unrelevant definitions to bazel out ([#27519](https://github.com/angular/angular/issues/27519)) ([44dfa60](https://github.com/angular/angular/commit/44dfa60)), closes [/github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts#L105-L124](https://github.com//github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts/issues/L105-L124)
|
||||
* **bazel:** Set module_name and enable ng test ([#27715](https://github.com/angular/angular/issues/27715)) ([85866de](https://github.com/angular/angular/commit/85866de))
|
||||
@ -1149,7 +986,7 @@ This release contains various API docs improvements.
|
||||
* **core:** export a value for InjectFlags ([#27279](https://github.com/angular/angular/issues/27279)) ([23b06af](https://github.com/angular/angular/commit/23b06af)), closes [#27251](https://github.com/angular/angular/issues/27251)
|
||||
* **core:** More precise return type for `InjectableDecorator` ([#27360](https://github.com/angular/angular/issues/27360)) ([4b9948c](https://github.com/angular/angular/commit/4b9948c)), closes [#26942](https://github.com/angular/angular/issues/26942)
|
||||
* **forms:** typed argument for FormBuilder group ([#26985](https://github.com/angular/angular/issues/26985)) ([b0c7561](https://github.com/angular/angular/commit/b0c7561))
|
||||
* **platform-server:** add @angular/http to the list of peerDependencies ([#27307](https://github.com/angular/angular/issues/27307)) ([32c5be9](https://github.com/angular/angular/commit/32c5be9)), closes [#26154](https://github.com/angular/angular/issues/26154)
|
||||
* **platform-server:** add [@angular](https://github.com/angular)/http to the list of peerDependencies ([#27307](https://github.com/angular/angular/issues/27307)) ([32c5be9](https://github.com/angular/angular/commit/32c5be9)), closes [#26154](https://github.com/angular/angular/issues/26154)
|
||||
* **router:** ensure URL is updated after second redirect with UrlUpdateStrategy="eager" ([#27523](https://github.com/angular/angular/issues/27523)) ([ad26cd6](https://github.com/angular/angular/commit/ad26cd6)), closes [#27116](https://github.com/angular/angular/issues/27116)
|
||||
* **router:** update URL after redirects when urlHandlingStrategy='eager' ([#27356](https://github.com/angular/angular/issues/27356)) ([11a8bd8](https://github.com/angular/angular/commit/11a8bd8)), closes [#27076](https://github.com/angular/angular/issues/27076)
|
||||
* **upgrade:** allow nesting components from different downgraded modules ([#27217](https://github.com/angular/angular/issues/27217)) ([bc0ee01](https://github.com/angular/angular/commit/bc0ee01))
|
||||
@ -1169,7 +1006,7 @@ This release contains various API docs improvements.
|
||||
* **animations:** mark actual descendant node as disabled ([#26180](https://github.com/angular/angular/issues/26180)) ([453589f](https://github.com/angular/angular/commit/453589f))
|
||||
* **bazel:** devserver entry_module should have underscore name ([#27719](https://github.com/angular/angular/issues/27719)) ([b108e9a](https://github.com/angular/angular/commit/b108e9a))
|
||||
* **bazel:** emit full node stack traces when Angular compilation crashes ([#27678](https://github.com/angular/angular/issues/27678)) ([0d8528b](https://github.com/angular/angular/commit/0d8528b))
|
||||
* **bazel:** fix major/minor semver check between @angular/bazel npm packager version and angular bazel repo version ([#27635](https://github.com/angular/angular/issues/27635)) ([3ed1e84](https://github.com/angular/angular/commit/3ed1e84))
|
||||
* **bazel:** fix major/minor semver check between [@angular](https://github.com/angular)/bazel npm packager version and angular bazel repo version ([#27635](https://github.com/angular/angular/issues/27635)) ([3ed1e84](https://github.com/angular/angular/commit/3ed1e84))
|
||||
* **bazel:** Load http_archive and rules_nodejs dependencies ([#27609](https://github.com/angular/angular/issues/27609)) ([89ace1a](https://github.com/angular/angular/commit/89ace1a))
|
||||
* **bazel:** ng_package writes unrelevant definitions to bazel out ([#27519](https://github.com/angular/angular/issues/27519)) ([ef056c5](https://github.com/angular/angular/commit/ef056c5)), closes [/github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts#L105-L124](https://github.com//github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts/issues/L105-L124)
|
||||
* **bazel:** Read latest versions from latest-versions.ts & use semver check ([#27591](https://github.com/angular/angular/issues/27591)) ([93078e3](https://github.com/angular/angular/commit/93078e3))
|
||||
@ -1201,7 +1038,7 @@ This release contains various API docs improvements.
|
||||
* **bazel:** ng_package should correctly map to source maps in secondary entry-points ([#27313](https://github.com/angular/angular/issues/27313)) ([fc2c23e](https://github.com/angular/angular/commit/fc2c23e)), closes [#25510](https://github.com/angular/angular/issues/25510)
|
||||
* **compiler-cli:** flatModuleIndex files not generated on windows with multiple input files ([#27200](https://github.com/angular/angular/issues/27200)) ([8087b6b](https://github.com/angular/angular/commit/8087b6b))
|
||||
* **compiler-cli:** ngtsc shim files not being generated on case-insensitive platforms ([#27466](https://github.com/angular/angular/issues/27466)) ([84f2928](https://github.com/angular/angular/commit/84f2928)), closes [/github.com/Microsoft/TypeScript/blob/3e4c5c95abd515eb9713b881d27ab3a93cc00461/src/compiler/sys.ts#L681-L682](https://github.com//github.com/Microsoft/TypeScript/blob/3e4c5c95abd515eb9713b881d27ab3a93cc00461/src/compiler/sys.ts/issues/L681-L682)
|
||||
* **platform-server:** add @angular/http to the list of peerDependencies ([#27307](https://github.com/angular/angular/issues/27307)) ([236ac06](https://github.com/angular/angular/commit/236ac06)), closes [#26154](https://github.com/angular/angular/issues/26154)
|
||||
* **platform-server:** add [@angular](https://github.com/angular)/http to the list of peerDependencies ([#27307](https://github.com/angular/angular/issues/27307)) ([236ac06](https://github.com/angular/angular/commit/236ac06)), closes [#26154](https://github.com/angular/angular/issues/26154)
|
||||
|
||||
|
||||
|
||||
@ -1228,7 +1065,7 @@ This release contains various API docs improvements.
|
||||
* **compiler:** generate inputs with aliases properly ([#26774](https://github.com/angular/angular/issues/26774)) ([19fcfc3](https://github.com/angular/angular/commit/19fcfc3))
|
||||
* **compiler:** generate relative paths only in summary file errors ([#26759](https://github.com/angular/angular/issues/26759)) ([56f44be](https://github.com/angular/angular/commit/56f44be))
|
||||
* **core:** ignore comment nodes under unsafe elements ([#25879](https://github.com/angular/angular/issues/25879)) ([d5cbcef](https://github.com/angular/angular/commit/d5cbcef))
|
||||
* **core:** Remove static dependency from @angular/core to @angular/compiler ([#26734](https://github.com/angular/angular/issues/26734)) ([d042c4a](https://github.com/angular/angular/commit/d042c4a))
|
||||
* **core:** Remove static dependency from [@angular](https://github.com/angular)/core to [@angular](https://github.com/angular)/compiler ([#26734](https://github.com/angular/angular/issues/26734)) ([d042c4a](https://github.com/angular/angular/commit/d042c4a))
|
||||
* **core:** support computed base class in metadata inheritance ([#24014](https://github.com/angular/angular/issues/24014)) ([95743e3](https://github.com/angular/angular/commit/95743e3))
|
||||
* **bazel:** unknown replay compiler error in windows ([#26711](https://github.com/angular/angular/issues/26711)) ([aed95fd](https://github.com/angular/angular/commit/aed95fd))
|
||||
* **core:** ensure that `ɵdefineNgModule` is available in flat-file formats ([#26403](https://github.com/angular/angular/issues/26403)) ([a64859b](https://github.com/angular/angular/commit/a64859b))
|
||||
@ -1335,7 +1172,7 @@ This release contains various API docs improvements.
|
||||
* **compiler:** generate inputs with aliases properly ([#26774](https://github.com/angular/angular/issues/26774)) ([19fcfc3](https://github.com/angular/angular/commit/19fcfc3))
|
||||
* **compiler:** generate relative paths only in summary file errors ([#26759](https://github.com/angular/angular/issues/26759)) ([56f44be](https://github.com/angular/angular/commit/56f44be))
|
||||
* **core:** ignore comment nodes under unsafe elements ([#25879](https://github.com/angular/angular/issues/25879)) ([d5cbcef](https://github.com/angular/angular/commit/d5cbcef))
|
||||
* **core:** Remove static dependency from @angular/core to @angular/compiler ([#26734](https://github.com/angular/angular/issues/26734)) ([d042c4a](https://github.com/angular/angular/commit/d042c4a))
|
||||
* **core:** Remove static dependency from [@angular](https://github.com/angular)/core to [@angular](https://github.com/angular)/compiler ([#26734](https://github.com/angular/angular/issues/26734)) ([d042c4a](https://github.com/angular/angular/commit/d042c4a))
|
||||
* **core:** support computed base class in metadata inheritance ([#24014](https://github.com/angular/angular/issues/24014)) ([95743e3](https://github.com/angular/angular/commit/95743e3))
|
||||
|
||||
|
||||
@ -1347,7 +1184,7 @@ This release contains various API docs improvements.
|
||||
### Bug Fixes
|
||||
|
||||
* **compiler:** generate relative paths only in summary file errors ([#26759](https://github.com/angular/angular/issues/26759)) ([c01f340](https://github.com/angular/angular/commit/c01f340))
|
||||
* **core:** Remove static dependency from @angular/core to @angular/compiler ([#26734](https://github.com/angular/angular/issues/26734)) ([#26879](https://github.com/angular/angular/issues/26879)) ([257ac83](https://github.com/angular/angular/commit/257ac83))
|
||||
* **core:** Remove static dependency from [@angular](https://github.com/angular)/core to [@angular](https://github.com/angular)/compiler ([#26734](https://github.com/angular/angular/issues/26734)) ([#26879](https://github.com/angular/angular/issues/26879)) ([257ac83](https://github.com/angular/angular/commit/257ac83))
|
||||
* **core:** support computed base class in metadata inheritance ([#24014](https://github.com/angular/angular/issues/24014)) ([b3c6409](https://github.com/angular/angular/commit/b3c6409))
|
||||
|
||||
|
||||
@ -1424,7 +1261,7 @@ To learn about the release highlights and our new CLI-powered update workflow fo
|
||||
* **compiler:** update compiler to flatten nested template fns ([#24943](https://github.com/angular/angular/issues/24943)) ([fe14f18](https://github.com/angular/angular/commit/fe14f18))
|
||||
* **compiler:** update compiler to generate new slot allocations ([#25607](https://github.com/angular/angular/issues/25607)) ([27e2039](https://github.com/angular/angular/commit/27e2039))
|
||||
* **core:** In Testability.whenStable update callback, pass more complete ([#25010](https://github.com/angular/angular/issues/25010)) ([16c03c0](https://github.com/angular/angular/commit/16c03c0))
|
||||
* **core:** add missing `peerDependency ` to `@angular/compiler` ([#26033](https://github.com/angular/angular/issues/26033)) ([549de1e](https://github.com/angular/angular/commit/549de1e)), closes [/github.com/angular/angular/commit/919f42fea1df4b9e38b7d688aef5f2de668e9d3e#diff-58563046c4439699f2e6a89187099a54](https://github.com//github.com/angular/angular/commit/919f42fea1df4b9e38b7d688aef5f2de668e9d3e/issues/diff-58563046c4439699f2e6a89187099a54)
|
||||
* **core:** add missing `peerDependency ` to `[@angular](https://github.com/angular)/compiler` ([#26033](https://github.com/angular/angular/issues/26033)) ([549de1e](https://github.com/angular/angular/commit/549de1e)), closes [/github.com/angular/angular/commit/919f42fea1df4b9e38b7d688aef5f2de668e9d3e#diff-58563046c4439699f2e6a89187099a54](https://github.com//github.com/angular/angular/commit/919f42fea1df4b9e38b7d688aef5f2de668e9d3e/issues/diff-58563046c4439699f2e6a89187099a54)
|
||||
* **core:** allow null value for renderer setElement(…) ([#17065](https://github.com/angular/angular/issues/17065)) ([ff15043](https://github.com/angular/angular/commit/ff15043)), closes [#13686](https://github.com/angular/angular/issues/13686)
|
||||
* **core:** do not clear element content when using shadow dom ([#24861](https://github.com/angular/angular/issues/24861)) ([6e828bb](https://github.com/angular/angular/commit/6e828bb))
|
||||
* **core:** size regression with closure compiler ([#25531](https://github.com/angular/angular/issues/25531)) ([1f59f2f](https://github.com/angular/angular/commit/1f59f2f))
|
||||
@ -1870,7 +1707,7 @@ To learn about the release highlights and our new CLI-powered update workflow fo
|
||||
* **upgrade:** propagate return value of resumeBootstrap ([#22754](https://github.com/angular/angular/issues/22754)) ([a2330ff](https://github.com/angular/angular/commit/a2330ff)), closes [#22723](https://github.com/angular/angular/issues/22723)
|
||||
* **upgrade:** two-way binding and listening for event ([#22772](https://github.com/angular/angular/issues/22772)) ([2b3de63](https://github.com/angular/angular/commit/2b3de63)), closes [#22734](https://github.com/angular/angular/issues/22734)
|
||||
* **upgrade:** correctly destroy nested downgraded component ([#22400](https://github.com/angular/angular/issues/22400)) ([8a85888](https://github.com/angular/angular/commit/8a85888)), closes [#22392](https://github.com/angular/angular/issues/22392)
|
||||
* **upgrade:** correctly handle `=` bindings in `@angular/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([f089bf5](https://github.com/angular/angular/commit/f089bf5))
|
||||
* **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([f089bf5](https://github.com/angular/angular/commit/f089bf5))
|
||||
* **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([13ab91e](https://github.com/angular/angular/commit/13ab91e)), closes [#22175](https://github.com/angular/angular/issues/22175)
|
||||
|
||||
|
||||
@ -2005,7 +1842,7 @@ To learn about the release highlights and our new CLI-powered update workflow fo
|
||||
* **router:** don't mutate route configs ([#22358](https://github.com/angular/angular/issues/22358)) ([8f0a064](https://github.com/angular/angular/commit/8f0a064)), closes [#22203](https://github.com/angular/angular/issues/22203)
|
||||
* **router:** fix URL serialization so special characters are only encoded where needed ([#22337](https://github.com/angular/angular/issues/22337)) ([789a47e](https://github.com/angular/angular/commit/789a47e)), closes [#10280](https://github.com/angular/angular/issues/10280)
|
||||
* **upgrade:** correctly destroy nested downgraded component ([#22400](https://github.com/angular/angular/issues/22400)) ([4aef9de](https://github.com/angular/angular/commit/4aef9de)), closes [#22392](https://github.com/angular/angular/issues/22392)
|
||||
* **upgrade:** correctly handle `=` bindings in `@angular/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([6638390](https://github.com/angular/angular/commit/6638390))
|
||||
* **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([6638390](https://github.com/angular/angular/commit/6638390))
|
||||
* **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([a9a0e27](https://github.com/angular/angular/commit/a9a0e27)), closes [#22175](https://github.com/angular/angular/issues/22175)
|
||||
|
||||
|
||||
@ -2019,7 +1856,7 @@ To learn about the release highlights and our new CLI-powered update workflow fo
|
||||
* **platform-server:** generate correct stylings for camel case names ([#22263](https://github.com/angular/angular/issues/22263)) ([de02a7a](https://github.com/angular/angular/commit/de02a7a)), closes [#19235](https://github.com/angular/angular/issues/19235)
|
||||
* **router:** don't mutate route configs ([#22358](https://github.com/angular/angular/issues/22358)) ([8f0a064](https://github.com/angular/angular/commit/8f0a064)), closes [#22203](https://github.com/angular/angular/issues/22203)
|
||||
* **upgrade:** correctly destroy nested downgraded component ([#22400](https://github.com/angular/angular/issues/22400)) ([4aef9de](https://github.com/angular/angular/commit/4aef9de)), closes [#22392](https://github.com/angular/angular/issues/22392)
|
||||
* **upgrade:** correctly handle `=` bindings in `@angular/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([6638390](https://github.com/angular/angular/commit/6638390))
|
||||
* **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([6638390](https://github.com/angular/angular/commit/6638390))
|
||||
* **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([a9a0e27](https://github.com/angular/angular/commit/a9a0e27)), closes [#22175](https://github.com/angular/angular/issues/22175)
|
||||
|
||||
|
||||
@ -2466,7 +2303,7 @@ Note: Due to an animation fix back in 5.1.1 ([c2b3792](https://github.com/angula
|
||||
* **platform-server:** provide a way to hook into renderModule* ([#19023](https://github.com/angular/angular/issues/19023)) ([8dfc3c3](https://github.com/angular/angular/commit/8dfc3c3))
|
||||
* **router:** add ActivationStart/End events ([8f79150](https://github.com/angular/angular/commit/8f79150))
|
||||
* **router:** add events tracking activation of individual routes ([49cd851](https://github.com/angular/angular/commit/49cd851))
|
||||
* **service-worker:** introduce the @angular/service-worker package ([#19274](https://github.com/angular/angular/issues/19274)) ([d442b68](https://github.com/angular/angular/commit/d442b68))
|
||||
* **service-worker:** introduce the [@angular](https://github.com/angular)/service-worker package ([#19274](https://github.com/angular/angular/issues/19274)) ([d442b68](https://github.com/angular/angular/commit/d442b68))
|
||||
* **upgrade:** propagate touched state of NgModelController ([59c23c7](https://github.com/angular/angular/commit/59c23c7))
|
||||
* **upgrade:** support lazy-loading Angular module into AngularJS app ([30e76fc](https://github.com/angular/angular/commit/30e76fc))
|
||||
* update angular to support TypeScript 2.4 ([ca5aeba](https://github.com/angular/angular/commit/ca5aeba))
|
||||
@ -2690,7 +2527,7 @@ Because of multiple bugs and browser inconsistencies, we have dropped the intl a
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** do not leak DOM nodes/styling for host triggered animations ([#18853](https://github.com/angular/angular/issues/18853)) ([1cc3fe2](https://github.com/angular/angular/commit/1cc3fe2)), closes [#18606](https://github.com/angular/angular/issues/18606)
|
||||
* **common:** fix improper packaging for @angular/common/http ([#18613](https://github.com/angular/angular/issues/18613)) ([a203a95](https://github.com/angular/angular/commit/a203a95))
|
||||
* **common:** fix improper packaging for [@angular](https://github.com/angular)/common/http ([#18613](https://github.com/angular/angular/issues/18613)) ([a203a95](https://github.com/angular/angular/commit/a203a95))
|
||||
* **common:** fix XSSI prefix stripping by using JSON.parse always ([#18466](https://github.com/angular/angular/issues/18466)) ([8821723](https://github.com/angular/angular/commit/8821723)), closes [#18396](https://github.com/angular/angular/issues/18396) [#18453](https://github.com/angular/angular/issues/18453)
|
||||
* **compiler:** normalize the locale name ([#18963](https://github.com/angular/angular/issues/18963)) ([497e017](https://github.com/angular/angular/commit/497e017))
|
||||
* **core:** complete EventEmitter in QueryList on component destroy ([#18902](https://github.com/angular/angular/issues/18902)) ([7d137d7](https://github.com/angular/angular/commit/7d137d7)), closes [#18741](https://github.com/angular/angular/issues/18741)
|
||||
@ -3031,7 +2868,7 @@ Note: the 4.4.0 release on npm accidentally glitched-out midway, so we cut 4.4.1
|
||||
* **compiler-cli:** allow '==' to compare nullable types ([#16731](https://github.com/angular/angular/issues/16731)) ([d761059](https://github.com/angular/angular/commit/d761059))
|
||||
* **core:** detach projected views when a parent view is destroyed ([#16592](https://github.com/angular/angular/issues/16592)) ([f0f6544](https://github.com/angular/angular/commit/f0f6544)), closes [#15578](https://github.com/angular/angular/issues/15578)
|
||||
* **core:** projected views should be dirty checked when the declaring component is dirty checked. ([#16592](https://github.com/angular/angular/issues/16592)) ([fcc91d8](https://github.com/angular/angular/commit/fcc91d8)), closes [#14321](https://github.com/angular/angular/issues/14321)
|
||||
* **http:** flatten metadata for @angular/http/testing ([9da6340](https://github.com/angular/angular/commit/9da6340)), closes [#15521](https://github.com/angular/angular/issues/15521)
|
||||
* **http:** flatten metadata for [@angular](https://github.com/angular)/http/testing ([9da6340](https://github.com/angular/angular/commit/9da6340)), closes [#15521](https://github.com/angular/angular/issues/15521)
|
||||
* **http:** honor RequestArgs.search and RequestArgs.params map type ([aef5245](https://github.com/angular/angular/commit/aef5245)), closes [#15761](https://github.com/angular/angular/issues/15761) [#16392](https://github.com/angular/angular/issues/16392)
|
||||
* **http:** introduce encodingHint for text() for better ArrayBuffer support ([7ae7a84](https://github.com/angular/angular/commit/7ae7a84)), closes [#15932](https://github.com/angular/angular/issues/15932) [#16420](https://github.com/angular/angular/issues/16420)
|
||||
* **router:** fix redirect to a URL with a param having multiple values ([#16376](https://github.com/angular/angular/issues/16376)) ([5d4b36f](https://github.com/angular/angular/commit/5d4b36f)), closes [#16310](https://github.com/angular/angular/issues/16310)
|
||||
@ -3087,7 +2924,7 @@ Note: the 4.4.0 release on npm accidentally glitched-out midway, so we cut 4.4.1
|
||||
* **compiler:** avoid a `...null` spread in extraction ([#16547](https://github.com/angular/angular/issues/16547)) ([d0e1688](https://github.com/angular/angular/commit/d0e1688))
|
||||
* **core:** detach projected views when a parent view is destroyed ([#16592](https://github.com/angular/angular/issues/16592)) ([ee6705a](https://github.com/angular/angular/commit/ee6705a)), closes [#15578](https://github.com/angular/angular/issues/15578)
|
||||
* **core:** projected views should be dirty checked when the declaring component is dirty checked. ([#16592](https://github.com/angular/angular/issues/16592)) ([9218812](https://github.com/angular/angular/commit/9218812)), closes [#14321](https://github.com/angular/angular/issues/14321)
|
||||
* **http:** flatten metadata for @angular/http/testing ([9c70a3c](https://github.com/angular/angular/commit/9c70a3c)), closes [#15521](https://github.com/angular/angular/issues/15521)
|
||||
* **http:** flatten metadata for [@angular](https://github.com/angular)/http/testing ([9c70a3c](https://github.com/angular/angular/commit/9c70a3c)), closes [#15521](https://github.com/angular/angular/issues/15521)
|
||||
* **http:** honor RequestArgs.search and RequestArgs.params map type ([63066f7](https://github.com/angular/angular/commit/63066f7)), closes [#15761](https://github.com/angular/angular/issues/15761) [#16392](https://github.com/angular/angular/issues/16392)
|
||||
* **http:** introduce encodingHint for text() for better ArrayBuffer support ([ec3b6e9](https://github.com/angular/angular/commit/ec3b6e9)), closes [#15932](https://github.com/angular/angular/issues/15932) [#16420](https://github.com/angular/angular/issues/16420)
|
||||
* **router:** fix redirect to a URL with a param having multiple values ([#16376](https://github.com/angular/angular/issues/16376)) ([915eae5](https://github.com/angular/angular/commit/915eae5)), closes [#16310](https://github.com/angular/angular/issues/16310)
|
||||
@ -3717,7 +3554,7 @@ Note: the 4.0.0-rc.0 release on npm accidentally omitted one bug fix, so we cut
|
||||
* **core:** add isStable Observable property to ApplicationRef to indicate when it's stable and unstable ([#14337](https://github.com/angular/angular/issues/14337)) ([c481798](https://github.com/angular/angular/commit/c481798))
|
||||
* **platform-server:** add API to render Module and ModuleFactory to string ([#14381](https://github.com/angular/angular/issues/14381)) ([b4d444a](https://github.com/angular/angular/commit/b4d444a))
|
||||
* **platform-server:** Implement PlatformLocation for platformServer() ([#14405](https://github.com/angular/angular/issues/14405)) ([9e28568](https://github.com/angular/angular/commit/9e28568))
|
||||
* **platform-server:** support @angular/http from @angular/platform-server ([9559d3e](https://github.com/angular/angular/commit/9559d3e))
|
||||
* **platform-server:** support [@angular](https://github.com/angular)/http from [@angular](https://github.com/angular)/platform-server ([9559d3e](https://github.com/angular/angular/commit/9559d3e))
|
||||
* **tsc-wrapped:** add an option to `ngc` to bundle metadata ([#14509](https://github.com/angular/angular/issues/14509)) ([3b89670](https://github.com/angular/angular/commit/3b89670))
|
||||
|
||||
|
||||
@ -4678,7 +4515,7 @@ Note: The 2.2.0-beta.0 release also contains all the changes present in the 2.1.
|
||||
* **compiler:** properly shim `:host:before` and `:host(:before)` ([#12171](https://github.com/angular/angular/issues/12171)) ([aa92512](https://github.com/angular/angular/commit/aa92512)), closes [#12165](https://github.com/angular/angular/issues/12165)
|
||||
* **compiler:** validate `@HostBinding` name ([#12139](https://github.com/angular/angular/issues/12139)) ([13ecc14](https://github.com/angular/angular/commit/13ecc14))
|
||||
* **compiler-cli:** don't clone static symbols when simplifying annotation metadata ([#12158](https://github.com/angular/angular/issues/12158)) ([8c477b2](https://github.com/angular/angular/commit/8c477b2))
|
||||
* **compiler-cli:** remove peerDependency on @angular/platform-server ([#12122](https://github.com/angular/angular/issues/12122)) ([71b7654](https://github.com/angular/angular/commit/71b7654))
|
||||
* **compiler-cli:** remove peerDependency on [@angular](https://github.com/angular)/platform-server ([#12122](https://github.com/angular/angular/issues/12122)) ([71b7654](https://github.com/angular/angular/commit/71b7654))
|
||||
* **compiler-cli:** remove unused parse5 dependency from package.json ([eaaec69](https://github.com/angular/angular/commit/eaaec69))
|
||||
* **forms:** allow optional fields with pattern and minlength validators ([#12147](https://github.com/angular/angular/issues/12147)) ([d22eeb7](https://github.com/angular/angular/commit/d22eeb7))
|
||||
* **forms:** properly validate blank strings with minlength ([#12091](https://github.com/angular/angular/issues/12091)) ([f50c1da](https://github.com/angular/angular/commit/f50c1da))
|
||||
|
@ -222,7 +222,6 @@ The following is the list of supported scopes:
|
||||
* **router**
|
||||
* **service-worker**
|
||||
* **upgrade**
|
||||
* **zone.js**
|
||||
|
||||
There are currently a few exceptions to the "use package name" rule:
|
||||
|
||||
@ -232,7 +231,6 @@ There are currently a few exceptions to the "use package name" rule:
|
||||
* **changelog**: used for updating the release notes in CHANGELOG.md
|
||||
* **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).
|
||||
* 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`).
|
||||
|
44
WORKSPACE
44
WORKSPACE
@ -18,11 +18,8 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
|
||||
# Fetch rules_nodejs so we can install our npm dependencies
|
||||
http_archive(
|
||||
name = "build_bazel_rules_nodejs",
|
||||
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 = "e04a82a72146bfbca2d0575947daa60fda1878c8d3a3afe868a8ec39a6b968bb",
|
||||
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.31.1/rules_nodejs-0.31.1.tar.gz"],
|
||||
)
|
||||
|
||||
# Check the bazel version and download npm dependencies
|
||||
@ -30,7 +27,6 @@ load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "check_rules
|
||||
|
||||
# Bazel version must be at least the following version because:
|
||||
# - 0.26.0 managed_directories feature added which is required for nodejs rules 0.30.0
|
||||
# - 0.27.0 has a fix for managed_directories after `rm -rf node_modules`
|
||||
check_bazel_version(
|
||||
message = """
|
||||
You no longer need to install Bazel on your machine.
|
||||
@ -39,7 +35,7 @@ Try running `yarn bazel` instead.
|
||||
(If you did run that, check that you've got a fresh `yarn install`)
|
||||
|
||||
""",
|
||||
minimum_bazel_version = "0.27.0",
|
||||
minimum_bazel_version = "0.26.0",
|
||||
)
|
||||
|
||||
# The NodeJS rules version must be at least the following version because:
|
||||
@ -50,10 +46,7 @@ Try running `yarn bazel` instead.
|
||||
# - 0.27.12 Adds NodeModuleSources provider for transtive npm deps support
|
||||
# - 0.30.0 yarn_install now uses symlinked node_modules with new managed directories Bazel 0.26.0 feature
|
||||
# - 0.31.1 entry_point attribute of nodejs_binary & rollup_bundle is now a label
|
||||
# - 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")
|
||||
check_rules_nodejs_version(minimum_version_string = "0.31.1")
|
||||
|
||||
# Setup the Node.js toolchain
|
||||
node_repositories(
|
||||
@ -77,7 +70,19 @@ node_repositories(
|
||||
|
||||
yarn_install(
|
||||
name = "npm",
|
||||
data = [
|
||||
"//:tools/npm/@angular_bazel/index.js",
|
||||
"//:tools/npm/@angular_bazel/package.json",
|
||||
"//:tools/postinstall-patches.js",
|
||||
"//:tools/yarn/check-yarn.js",
|
||||
],
|
||||
package_json = "//:package.json",
|
||||
# Don't install devDependencies, they are large and not used under Bazel
|
||||
prod_only = True,
|
||||
# Temporarily disable node_modules symlinking until the fix for
|
||||
# https://github.com/bazelbuild/bazel/issues/8487 makes it into a
|
||||
# future Bazel release
|
||||
symlink_node_modules = False,
|
||||
yarn_lock = "//:yarn.lock",
|
||||
)
|
||||
|
||||
@ -127,20 +132,17 @@ load("@bazel_toolchains//rules:rbe_repo.bzl", "rbe_autoconfig")
|
||||
|
||||
rbe_autoconfig(
|
||||
name = "rbe_ubuntu1604_angular",
|
||||
# Need to specify a base container digest in order to ensure that we can use the checked-in
|
||||
# platform configurations for the "ubuntu16_04" image. Otherwise the autoconfig rule would
|
||||
# need to pull the image and run it in order determine the toolchain configuration. See:
|
||||
# https://github.com/bazelbuild/bazel-toolchains/blob/0.27.0/configs/ubuntu16_04_clang/versions.bzl
|
||||
base_container_digest = "sha256:94d7d8552902d228c32c8c148cc13f0effc2b4837757a6e95b73fdc5c5e4b07b",
|
||||
# The sha256 of marketplace.gcr.io/google/rbe-ubuntu16-04 container that is
|
||||
# used by rbe_autoconfig() to pair toolchain configs in the @bazel_toolchains repo.
|
||||
base_container_digest = "sha256:677c1317f14c6fd5eba2fd8ec645bfdc5119f64b3e5e944e13c89e0525cc8ad1",
|
||||
# Note that if you change the `digest`, you might also need to update the
|
||||
# `base_container_digest` to make sure marketplace.gcr.io/google/rbe-ubuntu16-04-webtest:<digest>
|
||||
# and marketplace.gcr.io/google/rbe-ubuntu16-04:<base_container_digest> have
|
||||
# the same Clang and JDK installed. Clang is needed because of the dependency on
|
||||
# @com_google_protobuf. Java is needed for the Bazel's test executor Java tool.
|
||||
digest = "sha256:76e2e4a894f9ffbea0a0cb2fbde741b5d223d40f265dbb9bca78655430173990",
|
||||
# the same Clang and JDK installed.
|
||||
# Clang is needed because of the dependency on @com_google_protobuf.
|
||||
# Java is needed for the Bazel's test executor Java tool.
|
||||
digest = "sha256:74a8e9dca4781d5f277a7bd8e7ea7ed0f5906c79c9cd996205b6d32f090c62f3",
|
||||
env = clang_env(),
|
||||
registry = "marketplace.gcr.io",
|
||||
# We can't use the default "ubuntu16_04" RBE image provided by the autoconfig because we need
|
||||
# a specific Linux kernel that comes with "libx11" in order to run headless browser tests.
|
||||
repository = "google/rbe-ubuntu16-04-webtest",
|
||||
)
|
||||
|
@ -36,14 +36,6 @@ ng serve
|
||||
In your browser, open http://localhost:4200/ to see the new app run.
|
||||
When you use the [ng serve](cli/serve) command to build an app and serve it locally, the server automatically rebuilds the app and reloads the page when you change any of the source files.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
When you run `ng new my-first-project` a new folder, named `my-first-project`, will be created in the current working directory. Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command.
|
||||
|
||||
If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>` first.
|
||||
|
||||
</div>
|
||||
|
||||
## Workspaces and project files
|
||||
|
||||
The [ng new](cli/new) command creates an *Angular workspace* folder and generates a new app skeleton.
|
||||
|
@ -25,8 +25,8 @@ describe('Attribute directives', () => {
|
||||
greenRb.click();
|
||||
browser.actions().mouseMove(highlightedEle).perform();
|
||||
|
||||
// Wait for up to 4s for the background color to be updated,
|
||||
// Wait for up to 2s for the background color to be updated,
|
||||
// to account for slow environments (e.g. CI).
|
||||
browser.wait(() => highlightedEle.getCssValue('background-color').then(c => c === lightGreen), 4000);
|
||||
browser.wait(() => highlightedEle.getCssValue('background-color').then(c => c === lightGreen), 2000);
|
||||
});
|
||||
});
|
||||
|
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 32 KiB |
@ -18,7 +18,7 @@ export class AppComponent {
|
||||
}
|
||||
|
||||
deleteItem(item: Item) {
|
||||
alert(`Delete the ${item.name}.`);
|
||||
alert(`Delete the ${item}.`);
|
||||
}
|
||||
|
||||
onClickMe(event?: KeyboardEvent) {
|
||||
|
@ -6,14 +6,14 @@ import { HeroesService } from './heroes.service';
|
||||
@Component({
|
||||
selector: 'app-heroes',
|
||||
templateUrl: './heroes.component.html',
|
||||
providers: [HeroesService],
|
||||
providers: [ HeroesService ],
|
||||
styleUrls: ['./heroes.component.css']
|
||||
})
|
||||
export class HeroesComponent implements OnInit {
|
||||
heroes: Hero[];
|
||||
editHero: Hero; // the hero currently being edited
|
||||
|
||||
constructor(private heroesService: HeroesService) {}
|
||||
constructor(private heroesService: HeroesService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.getHeroes();
|
||||
@ -21,21 +21,18 @@ export class HeroesComponent implements OnInit {
|
||||
|
||||
getHeroes(): void {
|
||||
this.heroesService.getHeroes()
|
||||
.subscribe(heroes => (this.heroes = heroes));
|
||||
.subscribe(heroes => this.heroes = heroes);
|
||||
}
|
||||
|
||||
add(name: string): void {
|
||||
this.editHero = undefined;
|
||||
name = name.trim();
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
if (!name) { return; }
|
||||
|
||||
// The server will generate the id for this new hero
|
||||
const newHero: Hero = { name } as Hero;
|
||||
// #docregion add-hero-subscribe
|
||||
this.heroesService
|
||||
.addHero(newHero)
|
||||
this.heroesService.addHero(newHero)
|
||||
.subscribe(hero => this.heroes.push(hero));
|
||||
// #enddocregion add-hero-subscribe
|
||||
}
|
||||
@ -43,9 +40,7 @@ export class HeroesComponent implements OnInit {
|
||||
delete(hero: Hero): void {
|
||||
this.heroes = this.heroes.filter(h => h !== hero);
|
||||
// #docregion delete-hero-subscribe
|
||||
this.heroesService
|
||||
.deleteHero(hero.id)
|
||||
.subscribe();
|
||||
this.heroesService.deleteHero(hero.id).subscribe();
|
||||
// #enddocregion delete-hero-subscribe
|
||||
/*
|
||||
// #docregion delete-hero-no-subscribe
|
||||
@ -55,29 +50,25 @@ export class HeroesComponent implements OnInit {
|
||||
*/
|
||||
}
|
||||
|
||||
edit(hero: Hero) {
|
||||
edit(hero) {
|
||||
this.editHero = hero;
|
||||
}
|
||||
|
||||
search(searchTerm: string) {
|
||||
this.editHero = undefined;
|
||||
if (searchTerm) {
|
||||
this.heroesService
|
||||
.searchHeroes(searchTerm)
|
||||
.subscribe(heroes => (this.heroes = heroes));
|
||||
this.heroesService.searchHeroes(searchTerm)
|
||||
.subscribe(heroes => this.heroes = heroes);
|
||||
}
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this.editHero) {
|
||||
this.heroesService
|
||||
.updateHero(this.editHero)
|
||||
this.heroesService.updateHero(this.editHero)
|
||||
.subscribe(hero => {
|
||||
// replace the hero in the heroes list with update from server
|
||||
const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1;
|
||||
if (ix > -1) {
|
||||
this.heroes[ix] = hero;
|
||||
}
|
||||
if (ix > -1) { this.heroes[ix] = hero; }
|
||||
});
|
||||
this.editHero = undefined;
|
||||
}
|
||||
|
@ -48,7 +48,7 @@ export class PackageSearchService {
|
||||
// TODO: Add error handling
|
||||
return this.http.get(searchUrl, options).pipe(
|
||||
map((data: any) => {
|
||||
return data.results.map((entry: any) => ({
|
||||
return data.results.map(entry => ({
|
||||
name: entry.name[0],
|
||||
version: entry.version[0],
|
||||
description: entry.description[0]
|
||||
|
@ -10,6 +10,7 @@ export class AppComponent {
|
||||
gender = 'female';
|
||||
fly = true;
|
||||
logo = 'https://angular.io/assets/images/logos/angular/angular.png';
|
||||
heroes: string[] = ['Magneta', 'Celeritas', 'Dynama'];
|
||||
inc(i: number) {
|
||||
this.minutes = Math.min(5, Math.max(0, this.minutes + i));
|
||||
}
|
||||
|
@ -1,14 +0,0 @@
|
||||
// imports
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
// @NgModule decorator with its metadata
|
||||
@NgModule({
|
||||
declarations: [AppComponent],
|
||||
imports: [BrowserModule],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule {}
|
@ -2,49 +2,42 @@
|
||||
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
// TODO Not yet complete
|
||||
describe('Template Syntax', () => {
|
||||
// Not yet complete
|
||||
describe('Template Syntax', function () {
|
||||
|
||||
beforeAll(() => {
|
||||
beforeAll(function () {
|
||||
browser.get('');
|
||||
});
|
||||
|
||||
it('should be able to use interpolation with a hero', () => {
|
||||
const heroInterEle = element.all(by.css('h2+p')).get(0);
|
||||
it('should be able to use interpolation with a hero', function () {
|
||||
let heroInterEle = element.all(by.css('h2+p')).get(0);
|
||||
expect(heroInterEle.getText()).toEqual('My current hero is Hercules');
|
||||
});
|
||||
|
||||
it('should be able to use interpolation with a calculation', () => {
|
||||
const theSumEles = element.all(by.cssContainingText('h3~p', 'The sum of'));
|
||||
it('should be able to use interpolation with a calculation', function () {
|
||||
let theSumEles = element.all(by.cssContainingText('h3~p', 'The sum of'));
|
||||
expect(theSumEles.count()).toBe(2);
|
||||
expect(theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2');
|
||||
expect(theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4');
|
||||
});
|
||||
|
||||
it('should be able to use class binding syntax', () => {
|
||||
const specialEle = element(by.cssContainingText('div', 'Special'));
|
||||
it('should be able to use class binding syntax', function () {
|
||||
let specialEle = element(by.cssContainingText('div', 'Special'));
|
||||
expect(specialEle.getAttribute('class')).toMatch('special');
|
||||
});
|
||||
|
||||
it('should be able to use style binding syntax', () => {
|
||||
const specialButtonEle = element(by.cssContainingText('div.special~button', 'button'));
|
||||
it('should be able to use style binding syntax', function () {
|
||||
let specialButtonEle = element(by.cssContainingText('div.special~button', 'button'));
|
||||
expect(specialButtonEle.getAttribute('style')).toMatch('color: red');
|
||||
});
|
||||
|
||||
it('should two-way bind to sizer', async () => {
|
||||
const div = element(by.css('div#two-way-1'));
|
||||
const incButton = div.element(by.buttonText('+'));
|
||||
const input = div.element(by.css('input'));
|
||||
const initSize = await input.getAttribute('value');
|
||||
let div = element(by.css('div#two-way-1'));
|
||||
let incButton = div.element(by.buttonText('+'));
|
||||
let input = div.element(by.css('input'));
|
||||
let initSize = await input.getAttribute('value');
|
||||
incButton.click();
|
||||
expect(input.getAttribute('value')).toEqual((+initSize + 1).toString());
|
||||
});
|
||||
|
||||
it('should change SVG rectangle\'s fill color on click', async () => {
|
||||
const div = element(by.css('app-svg'));
|
||||
const colorSquare = div.element(by.css('rect'));
|
||||
const initialColor = await colorSquare.getAttribute('fill');
|
||||
colorSquare.click();
|
||||
expect(colorSquare.getAttribute('fill')).not.toEqual(initialColor);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -38,7 +38,6 @@
|
||||
<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
|
||||
<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
|
||||
<a href="#enums">Enums</a><br>
|
||||
<a href="#svg-templates">SVG Templates</a><br>
|
||||
|
||||
<!-- Interpolation and expressions -->
|
||||
<hr><h2 id="interpolation">Interpolation</h2>
|
||||
@ -443,7 +442,7 @@ button</button>
|
||||
|
||||
<!-- #docregion without-NgModel -->
|
||||
<input [value]="currentHero.name"
|
||||
(input)="updateCurrentHeroName($event)">
|
||||
(input)="currentHero.name=$event.target.value" >
|
||||
<!-- #enddocregion without-NgModel -->
|
||||
without NgModel
|
||||
<br>
|
||||
@ -753,7 +752,7 @@ bindon-ngModel
|
||||
|
||||
<div>
|
||||
<!-- pipe price to USD and display the $ symbol -->
|
||||
<label>Price: </label>{{product.price | currency:'USD':'symbol'}}
|
||||
<label>Price: </label>{{product.price | currency:'USD':true}}
|
||||
</div>
|
||||
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
@ -858,9 +857,3 @@ The null hero's name is {{nullHero && nullHero.name}}
|
||||
</p>
|
||||
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
<hr><h2 id="svg-templates">SVG Templates</h2>
|
||||
<!-- #docregion svg-templates -->
|
||||
<app-svg></app-svg>
|
||||
<!-- #enddocregion svg-templates -->
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
@ -5,7 +5,7 @@ import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren }
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
export enum Color {Red, Green, Blue}
|
||||
export enum Color {Red, Green, Blue};
|
||||
|
||||
/**
|
||||
* Giant grab bag of stuff to drive the chapter
|
||||
@ -66,10 +66,6 @@ export class AppComponent implements AfterViewInit, OnInit {
|
||||
|
||||
currentHero: Hero;
|
||||
|
||||
updateCurrentHeroName(event: Event) {
|
||||
this.currentHero.name = (event.target as any).value;
|
||||
}
|
||||
|
||||
deleteHero(hero?: Hero) {
|
||||
this.alert(`Delete ${hero ? hero.name : 'the hero'}.`);
|
||||
}
|
||||
@ -109,13 +105,13 @@ export class AppComponent implements AfterViewInit, OnInit {
|
||||
|
||||
get nullHero(): Hero { return null; }
|
||||
|
||||
onClickMe(event?: MouseEvent) {
|
||||
const evtMsg = event ? ' Event target class is ' + (event.target as HTMLElement).className : '';
|
||||
onClickMe(event?: KeyboardEvent) {
|
||||
let evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className : '';
|
||||
this.alert('Click me.' + evtMsg);
|
||||
}
|
||||
|
||||
onSave(event?: MouseEvent) {
|
||||
const evtMsg = event ? ' Event target is ' + (event.target as HTMLElement).textContent : '';
|
||||
onSave(event?: KeyboardEvent) {
|
||||
let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).textContent : '';
|
||||
this.alert('Saved.' + evtMsg);
|
||||
if (event) { event.stopPropagation(); }
|
||||
}
|
||||
@ -144,9 +140,9 @@ export class AppComponent implements AfterViewInit, OnInit {
|
||||
setCurrentClasses() {
|
||||
// CSS classes: added/removed per current state of component properties
|
||||
this.currentClasses = {
|
||||
saveable: this.canSave,
|
||||
modified: !this.isUnchanged,
|
||||
special: this.isSpecial
|
||||
'saveable': this.canSave,
|
||||
'modified': !this.isUnchanged,
|
||||
'special': this.isSpecial
|
||||
};
|
||||
}
|
||||
// #enddocregion setClasses
|
||||
@ -168,7 +164,7 @@ export class AppComponent implements AfterViewInit, OnInit {
|
||||
// #enddocregion trackByHeroes
|
||||
|
||||
// #docregion trackById
|
||||
trackById(index: number, item: any): number { return item.id; }
|
||||
trackById(index: number, item: any): number { return item['id']; }
|
||||
// #enddocregion trackById
|
||||
}
|
||||
|
||||
|
@ -8,7 +8,6 @@ import { ClickDirective, ClickDirective2 } from './click.directive';
|
||||
import { HeroFormComponent } from './hero-form.component';
|
||||
import { heroSwitchComponents } from './hero-switch.components';
|
||||
import { SizerComponent } from './sizer.component';
|
||||
import { SvgComponent } from './svg.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@ -23,8 +22,7 @@ import { SvgComponent } from './svg.component';
|
||||
heroSwitchComponents,
|
||||
ClickDirective,
|
||||
ClickDirective2,
|
||||
SizerComponent,
|
||||
SvgComponent
|
||||
SizerComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
|
@ -1,4 +1,4 @@
|
||||
/* tslint:disable directive-selector directive-class-suffix */
|
||||
/* tslint:disable use-output-property-decorator directive-class-suffix */
|
||||
// #docplaster
|
||||
import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
|
||||
|
||||
|
@ -15,11 +15,10 @@ export class HeroFormComponent {
|
||||
@Input() hero: Hero;
|
||||
@ViewChild('heroForm', {static: false}) form: NgForm;
|
||||
|
||||
// tslint:disable-next-line:variable-name
|
||||
private _submitMessage = '';
|
||||
|
||||
get submitMessage() {
|
||||
if (this.form && !this.form.valid) {
|
||||
if (!this.form.valid) {
|
||||
this._submitMessage = '';
|
||||
}
|
||||
return this._submitMessage;
|
||||
|
@ -1,4 +0,0 @@
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
@ -1,6 +0,0 @@
|
||||
<svg>
|
||||
<g>
|
||||
<rect x="0" y="0" width="100" height="100" [attr.fill]="fillColor" (click)="changeColor()" />
|
||||
<text x="120" y="50">click the rectangle to change the fill color</text>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 201 B |
@ -1,17 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-svg',
|
||||
templateUrl: './svg.component.svg',
|
||||
styleUrls: ['./svg.component.css']
|
||||
})
|
||||
export class SvgComponent {
|
||||
fillColor = 'rgb(255, 0, 0)';
|
||||
|
||||
changeColor() {
|
||||
const r = Math.floor(Math.random() * 256);
|
||||
const g = Math.floor(Math.random() * 256);
|
||||
const b = Math.floor(Math.random() * 256);
|
||||
this.fillColor = `rgb(${r}, ${g}, ${b})`;
|
||||
}
|
||||
}
|
@ -1,35 +0,0 @@
|
||||
'use strict'; // necessary for es6 output in node
|
||||
|
||||
import { browser, element, by, ElementFinder } from 'protractor';
|
||||
|
||||
describe('Testing Example', () => {
|
||||
const expectedViewNames = ['Dashboard', 'Heroes', 'About'];
|
||||
|
||||
beforeAll(() => browser.get(''));
|
||||
|
||||
function getPageElts() {
|
||||
let navElts = element.all(by.css('app-root nav a'));
|
||||
|
||||
return {
|
||||
navElts: navElts,
|
||||
|
||||
appDashboard: element(by.css('app-root app-dashboard')),
|
||||
};
|
||||
}
|
||||
|
||||
it('has title', async() => {
|
||||
expect(await browser.getTitle()).toEqual('App Under Test');
|
||||
});
|
||||
|
||||
it(`has views ${expectedViewNames}`, async () => {
|
||||
let viewNames = getPageElts().navElts.map(async(el: ElementFinder) => await el.getText());
|
||||
|
||||
expect(viewNames).toEqual(expectedViewNames);
|
||||
});
|
||||
|
||||
it('has dashboard as the active view', () => {
|
||||
let page = getPageElts();
|
||||
|
||||
expect(page.appDashboard.isPresent()).toBeTruthy();
|
||||
});
|
||||
});
|
@ -20,7 +20,7 @@ describe('DashboardHeroComponent class only', () => {
|
||||
const hero: Hero = { id: 42, name: 'Test' };
|
||||
comp.hero = hero;
|
||||
|
||||
comp.selected.subscribe((selectedHero: Hero) => expect(selectedHero).toBe(hero));
|
||||
comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
|
||||
comp.click();
|
||||
});
|
||||
// #enddocregion class-only
|
||||
@ -95,7 +95,7 @@ describe('DashboardHeroComponent when tested directly', () => {
|
||||
// #docregion click-test-3
|
||||
it('should raise selected event when clicked (click helper)', () => {
|
||||
let selectedHero: Hero;
|
||||
comp.selected.subscribe((hero: Hero) => selectedHero = hero);
|
||||
comp.selected.subscribe(hero => selectedHero = hero);
|
||||
|
||||
click(heroDe); // click helper with DebugElement
|
||||
click(heroEl); // click helper with native element
|
||||
|
@ -19,7 +19,7 @@ export class Hero {
|
||||
// #docregion ValueService
|
||||
@Injectable()
|
||||
export class ValueService {
|
||||
value = 'real value';
|
||||
protected value = 'real value';
|
||||
|
||||
getValue() { return this.value; }
|
||||
setValue(value: string) { this.value = value; }
|
||||
|
@ -2,3 +2,7 @@ export interface Hero {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
// SystemJS bug:
|
||||
// TS file must export something real in JS, not just interfaces
|
||||
export const _dummy = undefined;
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
|
||||
import { Component, AfterViewInit, ViewChild } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sample-canvas',
|
||||
@ -6,7 +6,7 @@ import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
|
||||
})
|
||||
export class CanvasComponent implements AfterViewInit {
|
||||
blobSize: number;
|
||||
@ViewChild('sampleCanvas', {static: false}) sampleCanvas: ElementRef;
|
||||
@ViewChild('sampleCanvas', {static: false}) sampleCanvas;
|
||||
|
||||
constructor() { }
|
||||
|
||||
|
@ -4,7 +4,6 @@ import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { HighlightDirective } from './highlight.directive';
|
||||
import { TitleCasePipe } from './title-case.pipe';
|
||||
import { CanvasComponent } from './canvas.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [ CommonModule ],
|
||||
@ -13,9 +12,8 @@ import { CanvasComponent } from './canvas.component';
|
||||
// SharedModule importers won't have to import FormsModule too
|
||||
FormsModule,
|
||||
HighlightDirective,
|
||||
TitleCasePipe,
|
||||
CanvasComponent
|
||||
TitleCasePipe
|
||||
],
|
||||
declarations: [ HighlightDirective, TitleCasePipe, CanvasComponent ]
|
||||
declarations: [ HighlightDirective, TitleCasePipe ]
|
||||
})
|
||||
export class SharedModule { }
|
||||
|
@ -2,7 +2,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
||||
|
||||
import { Observable, of, throwError, Observer } from 'rxjs';
|
||||
import { Observable, of, throwError } from 'rxjs';
|
||||
import { concat, map, retryWhen, switchMap, take, tap } from 'rxjs/operators';
|
||||
|
||||
import { Quote } from './quote';
|
||||
@ -14,7 +14,7 @@ export class TwainService {
|
||||
private nextId = 1;
|
||||
|
||||
getQuote(): Observable<string> {
|
||||
return Observable.create((observer: Observer<number>) => observer.next(this.nextId++)).pipe(
|
||||
return Observable.create(observer => observer.next(this.nextId++)).pipe(
|
||||
|
||||
// tap((id: number) => console.log(id)),
|
||||
// tap((id: number) => { throw new Error('Simulated server error'); }),
|
||||
|
@ -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,79 +0,0 @@
|
||||
import { browser, element, by, ExpectedConditions } from 'protractor';
|
||||
|
||||
describe('Lazy Loading AngularJS Tests', function () {
|
||||
const pageElements = {
|
||||
homePageHref: element(by.cssContainingText('app-root nav a', 'Home')),
|
||||
homePageParagraph: element(by.css('app-root app-home p')),
|
||||
ajsUsersPageHref: element(by.cssContainingText('app-root nav a', 'Users')),
|
||||
ajsUsersPageParagraph: element(by.css('app-root app-angular-js div p')),
|
||||
notFoundPageHref: element(by.cssContainingText('app-root nav a', '404 Page')),
|
||||
notFoundPageParagraph: element(by.css('app-root app-app404 p')),
|
||||
};
|
||||
|
||||
beforeAll(async() => {
|
||||
await browser.get('/');
|
||||
});
|
||||
|
||||
it('should display \'Angular Home\' when visiting the home page', async() => {
|
||||
await pageElements.homePageHref.click();
|
||||
|
||||
const paragraphText = await pageElements.homePageParagraph.getText();
|
||||
|
||||
expect(paragraphText).toEqual('Angular Home');
|
||||
});
|
||||
|
||||
it('should display \'Users Page\' page when visiting the AngularJS page at /users', async() => {
|
||||
await pageElements.ajsUsersPageHref.click();
|
||||
await loadAngularJS();
|
||||
|
||||
const paragraphText = await pageElements.ajsUsersPageParagraph.getText();
|
||||
|
||||
expect(paragraphText).toEqual('Users Page');
|
||||
});
|
||||
|
||||
it('should display \'Angular 404\' when visiting an invalid URL', async() => {
|
||||
await pageElements.notFoundPageHref.click();
|
||||
|
||||
const paragraphText = await pageElements.notFoundPageParagraph.getText();
|
||||
|
||||
expect(paragraphText).toEqual('Angular 404');
|
||||
});
|
||||
|
||||
// Workaround for https://github.com/angular/protractor/issues/4724
|
||||
async function loadAngularJS() {
|
||||
// Abort if `resumeBootstrap` has already occured
|
||||
if (await browser.executeScript(`return '__TESTABILITY__NG1_APP_ROOT_INJECTOR__' in window;`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Might have to re-insert the 'NG_DEFER_BOOTSTRAP!' if the name has been changed since protractor loaded the page
|
||||
if (!await browser.executeScript('window.name.includes(\'NG_DEFER_BOOTSTRAP!\')')) {
|
||||
await browser.executeScript('window.name = \'NG_DEFER_BOOTSTRAP!\' + name');
|
||||
}
|
||||
|
||||
// Wait for the AngularJS bundle to download and initialize
|
||||
await browser.wait(ExpectedConditions.presenceOf(element(by.css('app-root app-angular-js'))), 5000, 'AngularJS app');
|
||||
|
||||
// Run the protractor pre-bootstrap logic and resumeBootstrap
|
||||
// Based on https://github.com/angular/protractor/blob/5.3.0/lib/browser.ts#L950-L969
|
||||
{
|
||||
let moduleNames = [];
|
||||
for (const {name, script, args} of browser.mockModules_) {
|
||||
moduleNames.push(name);
|
||||
await browser.executeScriptWithDescription(script, 'add mock module ' + name, ...args);
|
||||
}
|
||||
|
||||
await browser.executeScriptWithDescription(
|
||||
// TODO: must manually assign __TESTABILITY__NG1_APP_ROOT_INJECTOR__ (https://github.com/angular/angular/issues/22723)
|
||||
`window.__TESTABILITY__NG1_APP_ROOT_INJECTOR__ = angular.resumeBootstrap(arguments[0]) `
|
||||
+ `|| angular.element('app-angular-js').injector();`,
|
||||
'resume bootstrap',
|
||||
moduleNames
|
||||
);
|
||||
}
|
||||
|
||||
// Wait for the initial AngularJS page to finish loading
|
||||
await browser.waitForAngular();
|
||||
}
|
||||
});
|
||||
|
@ -1,3 +0,0 @@
|
||||
{
|
||||
"projectType": "cli-ajs"
|
||||
}
|
@ -1,22 +1,14 @@
|
||||
import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core';
|
||||
import { Component, OnInit, ElementRef } from '@angular/core';
|
||||
import { LazyLoaderService } from '../lazy-loader.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-angular-js',
|
||||
template: '<div ng-view></div>'
|
||||
})
|
||||
export class AngularJSComponent implements OnInit, OnDestroy {
|
||||
constructor(
|
||||
private lazyLoader: LazyLoaderService,
|
||||
private elRef: ElementRef
|
||||
) {}
|
||||
export class AngularJSComponent implements OnInit {
|
||||
constructor(private lazyLoader: LazyLoaderService, private elRef: ElementRef) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.lazyLoader.load(this.elRef.nativeElement);
|
||||
}
|
||||
|
||||
|
||||
ngOnDestroy() {
|
||||
this.lazyLoader.destroy();
|
||||
}
|
||||
}
|
||||
|
@ -19,6 +19,7 @@ import { App404Component } from './app404/app404.component';
|
||||
BrowserModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
@ -1,25 +1,23 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import * as angular from 'angular';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class LazyLoaderService {
|
||||
private app: angular.auto.IInjectorService;
|
||||
bootstrapped = false;
|
||||
|
||||
load(el: HTMLElement): void {
|
||||
if (this.bootstrapped) {
|
||||
return;
|
||||
}
|
||||
|
||||
import('./angularjs-app').then(app => {
|
||||
try {
|
||||
this.app = app.bootstrap(el);
|
||||
app.bootstrap(el);
|
||||
this.bootstrapped = true;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.app) {
|
||||
this.app.get('$rootScope').$destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,181 +0,0 @@
|
||||
# Accessibility in Angular
|
||||
|
||||
The web is used by a wide variety of people, including those who have visual or motor impairments.
|
||||
A variety of assistive technologies are available that make it much easier for these groups to
|
||||
interact with web-based software applications.
|
||||
In addition, designing an application to be more accessible generally improves the user experience for all users.
|
||||
|
||||
For an in-depth introduction to issues and techniques for designing accessible applications, see the [Accessibility](https://developers.google.com/web/fundamentals/accessibility/#what_is_accessibility) section of the Google's [Web Fundamentals](https://developers.google.com/web/fundamentals/).
|
||||
|
||||
This page discusses best practices for designing Angular applications that
|
||||
work well for all users, including those who rely on assistive technologies.
|
||||
|
||||
## Accessibility attributes
|
||||
|
||||
Building accessible web experience often involves setting [ARIA attributes](https://developers.google.com/web/fundamentals/accessibility/semantics-aria)
|
||||
to provide semantic meaning where it might otherwise be missing.
|
||||
Use [attribute binding](guide/template-syntax#attribute-binding) template syntax to control the values of accessibility-related attributes.
|
||||
|
||||
When binding to ARIA attributes in Angular, you must use the `attr.` prefix, as the ARIA
|
||||
specification depends specifically on HTML attributes rather than properties on DOM elements.
|
||||
|
||||
```html
|
||||
<!-- Use attr. when binding to an ARIA attribute -->
|
||||
<button [attr.aria-label]="myActionLabel">...</button>
|
||||
```
|
||||
|
||||
Note that this syntax is only necessary for attribute _bindings_.
|
||||
Static ARIA attributes require no extra syntax.
|
||||
|
||||
```html
|
||||
<!-- Static ARIA attributes require no extra syntax -->
|
||||
<button aria-label="Save document">...</button>
|
||||
```
|
||||
|
||||
NOTE:
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
By convention, HTML attributes use lowercase names (`tabindex`), while properties use camelCase names (`tabIndex`).
|
||||
|
||||
See the [Template Syntax](https://angular.io/guide/template-syntax#html-attribute-vs-dom-property) guide for more background on the difference between attributes and properties.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## Angular UI components
|
||||
|
||||
The [Angular Material](https://material.angular.io/) library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible.
|
||||
The [Component Development Kit (CDK)](https://material.angular.io/cdk/categories) includes the `a11y` package that provides tools to support various areas of accessibility.
|
||||
For example:
|
||||
|
||||
* `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region. See the W3C documentation for more information on [aria-live regions](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
|
||||
|
||||
* The `cdkTrapFocus` directive traps Tab-key focus within an element. Use it to create accessible experience for components like modal dialogs, where focus must be constrained.
|
||||
|
||||
For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.io/cdk/a11y/overview).
|
||||
|
||||
|
||||
### Augmenting native elements
|
||||
|
||||
Native HTML elements capture a number of standard interaction patterns that are important to accessibility.
|
||||
When authoring Angular components, you should re-use these native elements directly when possible, rather than re-implementing well-supported behaviors.
|
||||
|
||||
For example, instead of creating a custom element for a new variety of button, you can create a component that uses an attribute selector with a native `<button>` element.
|
||||
This most commonly applies to `<button>` and `<a>`, but can be used with many other types of element.
|
||||
|
||||
You can see examples of this pattern in Angular Material: [`MatButton`](https://github.com/angular/components/blob/master/src/material/button/button.ts#L66-L68), [`MatTabNav`](https://github.com/angular/components/blob/master/src/material/tabs/tab-nav-bar/tab-nav-bar.ts#L67), [`MatTable`](https://github.com/angular/components/blob/master/src/material/table/table.ts#L17).
|
||||
|
||||
### Using containers for native elements
|
||||
|
||||
Sometimes using the appropriate native element requires a container element.
|
||||
For example, the native `<input>` element cannot have children, so any custom text entry components need
|
||||
to wrap an `<input>` with additional elements.
|
||||
While you might just include the `<input>` in your custom component's template,
|
||||
this makes it impossible for users of the component to set arbitrary properties and attributes to the input element.
|
||||
Instead, you can create a container component that uses content projection to include the native control in the
|
||||
component's API.
|
||||
|
||||
You can see [`MatFormField`](https://material.angular.io/components/form-field/overview) as an example of this pattern.
|
||||
|
||||
## Case study: Building a custom progress bar
|
||||
|
||||
The following example shows how to make a simple progress bar accessible by using host binding to control accessibility-related attributes.
|
||||
|
||||
* The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes. The ARIA attribute `aria-valuenow` is bound to the user's input.
|
||||
|
||||
```ts
|
||||
import { Component, Input } from '@angular/core';
|
||||
/**
|
||||
* Example progressbar component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'example-progressbar',
|
||||
template: `<div class="bar" [style.width.%]="value"></div>`,
|
||||
styleUrls: ['./progress-bar.css'],
|
||||
host: {
|
||||
// Sets the role for this component to "progressbar"
|
||||
role: 'progressbar',
|
||||
|
||||
// Sets the minimum and maximum values for the progressbar role.
|
||||
'aria-valuemin': '0',
|
||||
'aria-valuemax': '0',
|
||||
|
||||
// Binding that updates the current value of the progressbar.
|
||||
'[attr.aria-valuenow]': 'value',
|
||||
}
|
||||
})
|
||||
export class ExampleProgressbar {
|
||||
/** Current value of the progressbar. */
|
||||
@Input() value: number = 0;
|
||||
}
|
||||
```
|
||||
|
||||
* In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
|
||||
|
||||
```html
|
||||
<label>
|
||||
Enter an example progress value
|
||||
<input type="number" min="0" max="100"
|
||||
[value]="progress" (input)="progress = $event.target.value">
|
||||
</label>
|
||||
|
||||
<!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
|
||||
<example-progressbar [value]="progress" aria-label="Example of a progress bar">
|
||||
</example-progressbar>
|
||||
```
|
||||
|
||||
[See the full example in StackBlitz](https://stackblitz.com/edit/angular-kn5jdi?file=src%2Fapp%2Fapp.component.html).
|
||||
|
||||
## Routing and focus management
|
||||
|
||||
Tracking and controlling [focus](https://developers.google.com/web/fundamentals/accessibility/focus/) in a UI is an important consideration in designing for accessibility.
|
||||
When using Angular routing, you should decide where page focus goes upon navigation.
|
||||
|
||||
To avoid relying solely on visual cues, you need to make sure your routing code updates focus after page navigation.
|
||||
Use the `NavigationEnd` event from the `Router` service to know when to update
|
||||
focus.
|
||||
|
||||
The following example shows how to find and focus the main content header in the DOM after navigation.
|
||||
|
||||
```ts
|
||||
|
||||
router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
|
||||
const mainHeader = document.querySelector('#main-content-header')
|
||||
if (mainHeader) {
|
||||
mainHeader.focus();
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
In a real application, the element that receives focus will depend on your specific
|
||||
application structure and layout.
|
||||
The focused element should put users in a position to immediately move into the main content that has just been routed into view.
|
||||
You should avoid situations where focus returns to the `body` element after a route change.
|
||||
|
||||
|
||||
## Additional resources
|
||||
|
||||
* [Accessibility - Google Web Fundamentals](https://developers.google.com/web/fundamentals/accessibility)
|
||||
|
||||
* [ARIA specification and authoring practices](https://www.w3.org/TR/wai-aria/)
|
||||
|
||||
* [Material Design - Accessibility](https://material.io/design/usability/accessibility.html)
|
||||
|
||||
* [Smashing Magazine](https://www.smashingmagazine.com/search/?q=accessibility)
|
||||
|
||||
* [Inclusive Components](https://inclusive-components.design/)
|
||||
|
||||
* [Accessibility Resources and Code Examples](https://dequeuniversity.com/resources/)
|
||||
|
||||
* [W3C - Web Accessibility Initiative](https://www.w3.org/WAI/people-use-web/)
|
||||
|
||||
* [Rob Dodson A11ycasts](https://www.youtube.com/watch?v=HtTyRajRuyY)
|
||||
|
||||
* [Codelyzer](http://codelyzer.com/rules/) provides linting rules that can help you make sure your code meets accessibility standards.
|
||||
|
||||
Books
|
||||
|
||||
* "A Web for Everyone: Designing Accessible User Experiences", Sarah Horton and Whitney Quesenbery
|
||||
|
||||
* "Inclusive Design Patterns", Heydon Pickering
|
@ -29,7 +29,7 @@ ng generate app-shell --client-project my-app --universal-project server-app
|
||||
|
||||
After running this command you will notice that the `angular.json` configuration file has been updated to add two new targets, with a few other changes.
|
||||
|
||||
<code-example format="." language="json" linenums="false">
|
||||
<code-example format="." language="none" linenums="false">
|
||||
"server": {
|
||||
"builder": "@angular-devkit/build-angular:server",
|
||||
"options": {
|
||||
|
@ -53,7 +53,7 @@ Angular supports most recent browsers. This includes the following specific vers
|
||||
IE
|
||||
</td>
|
||||
<td>
|
||||
11, 10, 9
|
||||
11<br>10<br>9
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -89,7 +89,7 @@ Angular supports most recent browsers. This includes the following specific vers
|
||||
</td>
|
||||
|
||||
<td>
|
||||
Nougat (7.0), Marshmallow (6.0), Lollipop (5.0, 5.1), KitKat (4.4)
|
||||
Nougat (7.0)<br>Marshmallow (6.0)<br>Lollipop (5.0, 5.1)<br>KitKat (4.4)
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -103,10 +103,12 @@ using <a href="https://saucelabs.com/">SauceLabs</a> and
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## Polyfills
|
||||
|
||||
Angular is built on the latest standards of the web platform.
|
||||
Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers.
|
||||
|
||||
You compensate by loading polyfill scripts ("polyfills") for the browsers that you must support.
|
||||
The [table below](#polyfill-libs) identifies most of the polyfills you might need.
|
||||
|
||||
@ -118,36 +120,25 @@ Note that polyfills cannot magically transform an old, slow browser into a moder
|
||||
|
||||
</div>
|
||||
|
||||
In Angular CLI version 8 and higher, applications are built using *differential loading*, a strategy where the CLI builds two separate bundles as part of your deployed application.
|
||||
## Enabling polyfills
|
||||
|
||||
* The first bundle contains modern ES2015 syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size.
|
||||
[Angular CLI](cli) users enable polyfills through the `src/polyfills.ts` file that
|
||||
the CLI created with your project.
|
||||
|
||||
* The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This results in a larger bundle size, but supports older browsers.
|
||||
|
||||
This strategy allows you to continue to build your web application to support multiple browsers, but only load the necessary code that the browser needs.
|
||||
For more information about how this works, see [Differential Loading](guide/deployment#differential-loading) in the [Deployment guide](guide/deployment).
|
||||
|
||||
## Enabling polyfills with CLI projects
|
||||
|
||||
The [Angular CLI](cli) provides support for polyfills.
|
||||
If you are not using the CLI to create your projects, see [Polyfill instructions for non-CLI users](#non-cli).
|
||||
|
||||
When you create a project with the `ng new` command, a `src/polyfills.ts` configuration file is created as part of your project folder.
|
||||
This file incorporates the mandatory and many of the optional polyfills as JavaScript `import` statements.
|
||||
|
||||
* The npm packages for the [_mandatory_ polyfills](#polyfill-libs) (such as `zone.js`) are installed automatically for you when you create your project with `ng new`, and their corresponding `import` statements are already enabled in the `src/polyfills.ts` configuration file.
|
||||
The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and their corresponding `import` statements are ready to go. You probably won't touch these.
|
||||
|
||||
* If you need an _optional_ polyfill, you must install its npm package, then uncomment or create the corresponding import statement in the `src/polyfills.ts` configuration file.
|
||||
|
||||
For example, if you need the optional [web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
|
||||
But if you need an optional polyfill, you'll have to install its npm package.
|
||||
For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
# install the optional web animations polyfill
|
||||
# note that the web-animations-js polyfill is only here as an example
|
||||
# it isn't a strict requirement of Angular anymore (more below)
|
||||
npm install --save web-animations-js
|
||||
</code-example>
|
||||
|
||||
You can then add the import statement in the `src/polyfills.ts` file.
|
||||
For many polyfills, you can simply un-comment the corresponding `import` statement in the file, as in the following example.
|
||||
Then open the `polyfills.ts` file and un-comment the corresponding `import` statement as in the following example:
|
||||
|
||||
<code-example header="src/polyfills.ts">
|
||||
/**
|
||||
@ -157,14 +148,23 @@ For many polyfills, you can simply un-comment the corresponding `import` stateme
|
||||
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
</code-example>
|
||||
|
||||
If the polyfill you want is not already in `polyfills.ts` file, add the `import` statement by hand.
|
||||
If you can't find the polyfill you want in `polyfills.ts`,
|
||||
add it yourself, following the same pattern:
|
||||
|
||||
1. install the npm package
|
||||
1. `import` the file in `polyfills.ts`
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
Non-CLI users should follow the instructions [below](#non-cli).
|
||||
</div>
|
||||
|
||||
{@a polyfill-libs}
|
||||
|
||||
### Mandatory polyfills
|
||||
These are the polyfills required to run an Angular application on each supported browser:
|
||||
|
||||
|
||||
<table>
|
||||
|
||||
<tr style="vertical-align: top">
|
||||
@ -182,13 +182,26 @@ These are the polyfills required to run an Angular application on each supported
|
||||
<tr style="vertical-align: top">
|
||||
|
||||
<td>
|
||||
Chrome, Firefox, Edge, <br>
|
||||
Safari, Android, IE10+
|
||||
Chrome, Firefox, Edge, Safari 9+
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
[ES2015](guide/browser-support#core-es6)
|
||||
[ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only)
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr style="vertical-align: top">
|
||||
|
||||
<td>
|
||||
Safari 7 & 8, IE10 & 11, Android 4.1+
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
[ES6](guide/browser-support#core-es6)
|
||||
|
||||
</td>
|
||||
|
||||
@ -202,7 +215,7 @@ These are the polyfills required to run an Angular application on each supported
|
||||
|
||||
<td>
|
||||
|
||||
ES2015<br>[classList](guide/browser-support#classlist)
|
||||
[ES6<br>classList](guide/browser-support#classlist)
|
||||
|
||||
</td>
|
||||
|
||||
@ -215,6 +228,12 @@ These are the polyfills required to run an Angular application on each supported
|
||||
|
||||
Some features of Angular may require additional polyfills.
|
||||
|
||||
For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today.
|
||||
(note that the dependency of web-animations-js in Angular is only necessary if `AnimationBuilder` is used.)
|
||||
|
||||
Here are the features which may require additional polyfills:
|
||||
|
||||
|
||||
<table>
|
||||
|
||||
<tr style="vertical-align: top">
|
||||
@ -237,8 +256,31 @@ Some features of Angular may require additional polyfills.
|
||||
|
||||
<td>
|
||||
|
||||
[AnimationBuilder](api/animations/AnimationBuilder).
|
||||
(Standard animation support does not require polyfills.)
|
||||
[JIT compilation](guide/aot-compiler).
|
||||
|
||||
Required to reflect for metadata.
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
[ES7/reflect](guide/browser-support#core-es7-reflect)
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
All current browsers. Enabled by default.
|
||||
Can remove if you always use AOT and only use Angular decorators.
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr style="vertical-align: top">
|
||||
|
||||
<td>
|
||||
|
||||
[Animations](guide/animations)
|
||||
<br>Only if `Animation Builder` is used within the application--standard
|
||||
animation support in Angular doesn't require any polyfills (as of NG6).
|
||||
|
||||
</td>
|
||||
|
||||
@ -249,9 +291,8 @@ Some features of Angular may require additional polyfills.
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<p>If AnimationBuilder is used, enables scrubbing
|
||||
support for IE/Edge and Safari.
|
||||
(Chrome and Firefox support this natively).</p>
|
||||
<p>If AnimationBuilder is used then the polyfill will enable scrubbing
|
||||
support for IE/Edge and Safari (Chrome and Firefox support this natively).</p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
@ -261,9 +302,14 @@ Some features of Angular may require additional polyfills.
|
||||
<td>
|
||||
|
||||
If you use the following deprecated i18n pipes:
|
||||
|
||||
|
||||
[date](api/common/DeprecatedDatePipe),
|
||||
|
||||
[currency](api/common/DeprecatedCurrencyPipe),
|
||||
|
||||
[decimal](api/common/DeprecatedDecimalPipe),
|
||||
|
||||
[percent](api/common/DeprecatedPercentPipe)
|
||||
|
||||
</td>
|
||||
@ -284,7 +330,9 @@ Some features of Angular may require additional polyfills.
|
||||
|
||||
<td>
|
||||
|
||||
[NgClass](api/common/NgClass) on SVG elements
|
||||
[NgClass](api/common/NgClass)
|
||||
|
||||
on SVG elements
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@ -303,7 +351,9 @@ Some features of Angular may require additional polyfills.
|
||||
|
||||
<td>
|
||||
|
||||
[Http](guide/http) when sending and receiving binary data
|
||||
[Http](guide/http)
|
||||
|
||||
when sending and receiving binary data
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@ -326,8 +376,9 @@ Some features of Angular may require additional polyfills.
|
||||
|
||||
<td>
|
||||
|
||||
[Router](guide/router) when using
|
||||
[hash-based routing](guide/router#appendix-locationstrategy-and-browser-url-styles)
|
||||
[Router](guide/router)
|
||||
|
||||
when using [hash-based routing](guide/router#appendix-locationstrategy-and-browser-url-styles)
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@ -346,9 +397,8 @@ Some features of Angular may require additional polyfills.
|
||||
|
||||
|
||||
|
||||
### Suggested polyfills
|
||||
|
||||
The following polyfills are used to test the framework itself. They are a good starting point for an application.
|
||||
### Suggested polyfills ##
|
||||
Below are the polyfills which are used to test the framework itself. They are a good starting point for an application.
|
||||
|
||||
|
||||
<table>
|
||||
@ -369,6 +419,24 @@ The following polyfills are used to test the framework itself. They are a good s
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
||||
<a id='core-es7-reflect' href="https://github.com/zloirock/core-js/tree/v2/fn/reflect">ES7/reflect</a>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
MIT
|
||||
</td>
|
||||
|
||||
<td>
|
||||
0.5KB
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
@ -391,7 +459,7 @@ The following polyfills are used to test the framework itself. They are a good s
|
||||
|
||||
<td>
|
||||
|
||||
<a id='core-es6' href="https://github.com/zloirock/core-js">ES2015</a>
|
||||
<a id='core-es6' href="https://github.com/zloirock/core-js">ES6</a>
|
||||
|
||||
</td>
|
||||
|
||||
@ -520,14 +588,11 @@ The following polyfills are used to test the framework itself. They are a good s
|
||||
computed with the <a href="http://closure-compiler.appspot.com/home">closure compiler</a>.
|
||||
|
||||
{@a non-cli}
|
||||
|
||||
## Polyfills for non-CLI users
|
||||
|
||||
If you are not using the CLI, add your polyfill scripts directly to the host web page (`index.html`).
|
||||
If you are not using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this.
|
||||
|
||||
For example:
|
||||
|
||||
<code-example header="src/index.html" language="html" linenums="false">
|
||||
<code-example header="src/index.html">
|
||||
<!-- pre-zone polyfills -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="node_modules/web-animations-js/web-animations.min.js"></script>
|
||||
|
@ -185,7 +185,8 @@ is available to <code>declarations</code> of this module.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@Injectable()</b><br>class MyService() {}</code></td>
|
||||
<td><p>Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere.</p>
|
||||
<td><p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
@ -30,9 +30,7 @@ You will need two terminals to get the live-reload experience.
|
||||
* On the first terminal, run the [`ng build` command](cli/build) in *watch* mode to compile the application to the `dist` folder.
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
ng build --watch
|
||||
|
||||
</code-example>
|
||||
|
||||
Like the `ng serve` command, this regenerates output files when source files change.
|
||||
@ -40,9 +38,7 @@ You will need two terminals to get the live-reload experience.
|
||||
* On the second terminal, install a web server (such as [lite-server](https://github.com/johnpapa/lite-server)), and run it against the output folder. For example:
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
lite-server --baseDir="dist"
|
||||
|
||||
</code-example>
|
||||
|
||||
The server will automatically reload your browser when new files are output.
|
||||
@ -60,9 +56,7 @@ For the simplest deployment, create a production build and copy the output direc
|
||||
1. Start with the production build:
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
ng build --prod
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
@ -83,11 +77,8 @@ Another simple way to deploy your Angular app is to use [GitHub Pages](https://h
|
||||
Make a note of the user name and project name in GitHub.
|
||||
|
||||
1. Build your project using Github project name, with the Angular CLI command [`ng build`](cli/build) and the options shown here:
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
ng build --prod --output-path docs --base-href /<project_name>/
|
||||
|
||||
ng build --prod --output-path docs --base-href /<project_name>/
|
||||
</code-example>
|
||||
|
||||
1. When the build is complete, make a copy of `docs/index.html` and name it `docs/404.html`.
|
||||
@ -157,7 +148,8 @@ The list is by no means exhaustive, but should provide you with a good starting
|
||||
# If an existing asset or directory is requested go to it as it is
|
||||
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
|
||||
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
|
||||
RewriteRule ^ - [L]<br>
|
||||
RewriteRule ^ - [L]
|
||||
|
||||
# If the requested resource doesn't exist, use index.html
|
||||
RewriteRule ^ /index.html
|
||||
</code-example>
|
||||
@ -167,15 +159,15 @@ The list is by no means exhaustive, but should provide you with a good starting
|
||||
[Front Controller Pattern Web Apps](https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/#front-controller-pattern-web-apps),
|
||||
modified to serve `index.html`:
|
||||
|
||||
```
|
||||
<code-example format=".">
|
||||
try_files $uri $uri/ /index.html;
|
||||
```
|
||||
</code-example>
|
||||
|
||||
|
||||
* [IIS](https://www.iis.net/): add a rewrite rule to `web.config`, similar to the one shown
|
||||
[here](http://stackoverflow.com/a/26152011/2116927):
|
||||
|
||||
<code-example format='.' language="xml" linenums="false">
|
||||
<code-example format='.'>
|
||||
<system.webServer>
|
||||
<rewrite>
|
||||
<rules>
|
||||
@ -190,6 +182,7 @@ modified to serve `index.html`:
|
||||
</rules>
|
||||
</rewrite>
|
||||
</system.webServer>
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
@ -207,11 +200,12 @@ and to
|
||||
* [Firebase hosting](https://firebase.google.com/docs/hosting/): add a
|
||||
[rewrite rule](https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites).
|
||||
|
||||
<code-example format="." language="json">
|
||||
<code-example format=".">
|
||||
"rewrites": [ {
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
} ]
|
||||
|
||||
</code-example>
|
||||
|
||||
{@a cors}
|
||||
@ -254,9 +248,7 @@ See [`ng build`](cli/build) for more about CLI build options and what they do.
|
||||
In addition to build optimizations, Angular also has a runtime production mode. Angular apps run in development mode by default, as you can see by the following message on the browser console:
|
||||
|
||||
<code-example format="nocode">
|
||||
|
||||
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
|
||||
|
||||
</code-example>
|
||||
|
||||
Switching to _production mode_ makes it run faster by disabling development specific checks such as the dual change detection cycles.
|
||||
@ -275,9 +267,9 @@ Configure the Angular Router to defer loading of all other modules (and their as
|
||||
or by [_lazy loading_](guide/router#asynchronous-routing "Lazy loading")
|
||||
them on demand.
|
||||
|
||||
<div class="callout is-helpful>
|
||||
<div class="alert is-helpful>
|
||||
|
||||
<header>Don't eagerly import something from a lazy-loaded module</header>
|
||||
#### Don't eagerly import something from a lazy-loaded module
|
||||
|
||||
If you mean to lazy-load a module, be careful not import it
|
||||
in a file that's eagerly loaded when the app starts (such as the root `AppModule`).
|
||||
@ -321,34 +313,26 @@ tool is a great way to inspect the generated JavaScript bundles after a producti
|
||||
Install `source-map-explorer`:
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
npm install source-map-explorer --save-dev
|
||||
|
||||
</code-example>
|
||||
|
||||
Build your app for production _including the source maps_
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
ng build --prod --source-map
|
||||
|
||||
</code-example>
|
||||
|
||||
List the generated bundles in the `dist/` folder.
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
ls dist/*.bundle.js
|
||||
|
||||
</code-example>
|
||||
|
||||
Run the explorer to generate a graphical representation of one of the bundles.
|
||||
The following example displays the graph for the _main_ bundle.
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
node_modules/.bin/source-map-explorer dist/main.*.bundle.js
|
||||
|
||||
</code-example>
|
||||
|
||||
The `source-map-explorer` analyzes the source map generated with the bundle and draws a map of all dependencies,
|
||||
@ -386,77 +370,56 @@ the subfolder is `my/app/` and you should add `<base href="/my/app/">` to the se
|
||||
When the `base` tag is mis-configured, the app fails to load and the browser console displays `404 - Not Found` errors
|
||||
for the missing files. Look at where it _tried_ to find those files and adjust the base tag appropriately.
|
||||
|
||||
{@a differential-loading}
|
||||
|
||||
## Differential Loading
|
||||
|
||||
When building web applications, making sure your application is compatible with the majority of browsers is a goal.
|
||||
Even as JavaScript continues to evolve, with new features being introduced, not all browsers are updated with support for these new features at the same pace.
|
||||
When building web applications, making sure your application is compatible with the majority of browsers is a goal. Even as JavaScript continues to evolve, with new features being introduced, not all browsers are updated with support for these new features at the same pace. This is where compilation and [polyfills](guide/browser-support#polyfills) come in. The code you write in development using TypeScript is compiled and bundled into a format that is compatible with most browsers, commonly known as ES5. Polyfills are used bridge the gap, providing functionality that simply doesn't exist in some legacy browsers.
|
||||
|
||||
The code you write in development using TypeScript is compiled and bundled into ES2015, the JavaScript syntax that is compatible with most browsers.
|
||||
All modern browsers support ES2015 and beyond, but in most cases, you still have to account for users accessing your application from a browser that doesn't.
|
||||
When targeting older browsers, [polyfills](guide/browser-support#polyfills) can bridge the gap by providing functionality that doesn't exist in the older versions of JavaScript supported by those browsers.
|
||||
There is a cost to ensure this browser compatibility, and it comes in the form of larger bundle size. All modern browsers support ES2015 and beyond, but in most cases, you still have to account for users accessing your application from a browser that doesn't. To maximize compatibility, you ship a single bundle that includes all your compiled code, plus any polyfills that may be needed. Users with modern browsers shouldn't pay the price of increased bundle size when used in a modern browser that supports many of the latest features in JavaScript. This is where differential loading comes into play.
|
||||
|
||||
To maximize compatibility, you could ship a single bundle that includes all your compiled code, plus any polyfills that may be needed.
|
||||
Users with modern browsers, however, shouldn't have to pay the price of increased bundle size that comes with polyfills they don't need.
|
||||
Differential loading, which is supported by default in Angular CLI version 8 and higher, solves this problem.
|
||||
|
||||
Differential loading is a strategy where the CLI builds two separate bundles as part of your deployed application.
|
||||
|
||||
* The first bundle contains modern ES2015 syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size.
|
||||
|
||||
* The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This results in a larger bundle size, but supports older browsers.
|
||||
|
||||
This strategy allows you to continue to build your web application to support multiple browsers, but only load the necessary code that the browser needs.
|
||||
Differential loading is a strategy where the CLI builds two separate bundles as part of your deployed application. The modern bundle contains modern syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size. The second bundle, includes the additional compiled code, all necessary polyfills, and results in a larger bundle size. This strategy allows you to continue to build your web application to support multiple browsers, but only load the necessary code that the browser needs.
|
||||
|
||||
### Differential builds
|
||||
|
||||
The Angular CLI handles differential loading for you as part of the _build_ process for deployment.
|
||||
The `ng build` command produces the necessary bundles used for differential loading, based on your browser support requirements and compilation target.
|
||||
The Angular CLI handles differential loading for you as part of the _build_ process for deployment. The Angular CLI will produce the necessary bundles used for differential loading, based on your browser support requirements and compilation target.
|
||||
|
||||
The Angular CLI uses two configurations for differential loading:
|
||||
|
||||
* Browsers list
|
||||
The `browserslist` configuration file is included in your application [project structure](guide/file-structure#application-configuration-files) and provides the minimum browsers your application supports. See the [Browserslist spec](https://github.com/browserslist/browserslist) for complete configuration options.
|
||||
|
||||
* TypeScript configuration
|
||||
In the TypeScript configuration file, `tsconfig.json`, the `target` in the `compilerOptions` section determines the ECMAScript target version that the code is compiled to.
|
||||
Modern browsers support ES2015 natively, while ES5 is more commonly used to support legacy browsers.
|
||||
- Browserslist - The `browserslist` configuration file is included in your application [project structure](guide/file-structure#application-configuration-files) and provides the minimum browsers your application supports. See the [Browserslist spec](https://github.com/browserslist/browserslist) for complete configuration options.
|
||||
- tsconfig.json - The `target` in the TypeScript `compilerOptions` determines the ECMAScript target version that the code is compiled to. Modern browsers support ES2015 natively, while ES5 is more commonly used to support legacy browsers.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
Differential loading is currently only supported when using `es2015` as a compilation `target`. When used with targets higher than `es2015`, a warning is emitted during build time.
|
||||
**Note:** Differential loading is currently only supported when using `es2015` as a compilation `target`. When used with targets higher than `es2015`, a warning is emitted during build time.
|
||||
|
||||
</div>
|
||||
|
||||
The CLI queries the Browserslist configuration, and checks the `target` to determine if support for legacy browsers is required.
|
||||
The combination of these two configurations determines whether multiple bundles are produced when you create a _build_.
|
||||
When you create a development build using [`ng build`](cli/build) and differential loading is enabled, the output produced is simpler and easier to debug, allowing you to rely less on sourcemaps of compiled code.
|
||||
When you create a production build using [`ng build --prod`](cli/build), the CLI uses the defined configurations above to determine the bundles to build for deployment of your application.
|
||||
The CLI queries the Browserslist configuration, and checks the `target` to determine if support for legacy browsers is required. The combination of these two configurations determines whether multiple bundles are produced when you create a _build_. When you create a development build using [`ng build`](cli/build) and differential loading is enabled, the output produced is simpler and easier to debug, allowing you to rely less on sourcemaps of compiled code. When you create a production build using [`ng build --prod`](cli/build), the CLI uses the defined configurations above to determine the bundles to build for deployment of your application.
|
||||
|
||||
The `index.html` file is also modified during the build process to include script tags that enable differential loading. See the sample output below from the `index.html` file produced during a build using `ng build`.
|
||||
|
||||
<code-example language="html" format="." linenums="false">
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
<script src="runtime-es2015.js" type="module"></script>
|
||||
<script src="runtime-es5.js" nomodule></script>
|
||||
<script src="polyfills-es2015.js" type="module"></script>
|
||||
<script src="polyfills-es5.js" nomodule></script>
|
||||
<script src="styles-es2015.js" type="module"></script>
|
||||
<script src="styles-es5.js" nomodule></script>
|
||||
<script src="vendor-es2015.js" type="module"></script>
|
||||
<script src="vendor-es5.js" nomodule></script>
|
||||
<script src="main-es2015.js" type="module"></script>
|
||||
<script src="main-es5.js" nomodule></script>
|
||||
</body>
|
||||
</code-example>
|
||||
```html
|
||||
<!-- ... -->
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
<script src="runtime-es2015.js" type="module"></script>
|
||||
<script src="runtime-es5.js" nomodule></script>
|
||||
<script src="polyfills-es2015.js" type="module"></script>
|
||||
<script src="polyfills-es5.js" nomodule></script>
|
||||
<script src="styles-es2015.js" type="module"></script>
|
||||
<script src="styles-es5.js" nomodule></script>
|
||||
<script src="vendor-es2015.js" type="module"></script>
|
||||
<script src="vendor-es5.js" nomodule></script>
|
||||
<script src="main-es2015.js" type="module"></script>
|
||||
<script src="main-es5.js" nomodule></script>
|
||||
</body>
|
||||
<!-- ... -->
|
||||
```
|
||||
|
||||
Each script tag has a `type="module"` or `nomodule` attribute. Browsers with native support for ES modules only load the scripts with the `module` type attribute and ignore scripts with the `nomodule` attribute. Legacy browsers only load the scripts with the `nomodule` attribute, and ignore the script tags with the `module` type that load ES modules.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
Some legacy browsers still download both bundles, but only execute the appropriate scripts based on the attributes mentioned above. You can read more on the issue [here](https://github.com/philipwalton/webpack-esnext-boilerplate/issues/1).
|
||||
**Note:** Some legacy browsers still download both bundles, but only execute the appropriate scripts based on the attributes mentioned above. You can read more on the issue [here](https://github.com/philipwalton/webpack-esnext-boilerplate/issues/1).
|
||||
|
||||
</div>
|
||||
|
||||
@ -464,10 +427,11 @@ See the [configuration table](#configuration-table) below for the configurations
|
||||
|
||||
### Configuring differential loading
|
||||
|
||||
Differential loading is supported by default with version 8 and later of the Angular CLI.
|
||||
For each application project in your workspace, you can configure how builds are produced based on the `browserslist` and `tsconfig.json` files in your application project.
|
||||
Differential loading for creating builds is already supported with version 8 and later of the Angular CLI. For each application project in your workspace, you can configure how builds are produced based on the mentioned `browserslist` and `tsconfig.json` files in your application project.
|
||||
|
||||
For a newly created Angular application, the default `browserslist` looks like this:
|
||||
Look at the default configuration for a newly created Angular application:
|
||||
|
||||
The `browserslist` looks like this:
|
||||
|
||||
```
|
||||
> 0.5%
|
||||
@ -479,8 +443,8 @@ not IE 9-11 # For IE 9-11 support, remove 'not'.
|
||||
|
||||
The `tsconfig.json` looks like this:
|
||||
|
||||
<code-example language="json" format="." linenums="false">
|
||||
|
||||
```
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
@ -503,14 +467,13 @@ The `tsconfig.json` looks like this:
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
</code-example>
|
||||
```
|
||||
|
||||
By default, legacy browsers such as IE 9-11 are ignored, and the compilation target is ES2015. As a result, this produces two builds, and differential loading is enabled. If you ignore browsers without ES2015 support, a single build is produced. To see the build result for differential loading based on different configurations, refer to the table below.
|
||||
|
||||
<div class="alert is-important">
|
||||
|
||||
To see which browsers are supported with the above configuration, see which settings meet to your browser support requirements, see the [Browserslist compatibility page](https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+not+dead%2C+not+IE+9-11).
|
||||
**Note:** To see which browsers are supported with the above configuration, see which settings meet to your browser support requirements, see the [Browserslist compatibility page](https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+Chrome+41%2C+not+dead%2C+not+IE+9-11).
|
||||
|
||||
</div>
|
||||
|
||||
@ -533,145 +496,3 @@ To explicitly disable differential loading:
|
||||
|
||||
- Enable the `dead` or `IE` browsers in the `browserslist` config file by removing the `not` keyword in front of them.
|
||||
- Set the `target` in the `compilerOptions` to `es5`.
|
||||
|
||||
{@a test-and-serve}
|
||||
|
||||
## Local development in older browsers
|
||||
|
||||
In Angular CLI version 8 and higher, differential loading is enabled by default for the `ng build` command.
|
||||
The `ng serve`, `ng test`, and `ng e2e` commands, however, generate a single ES2015 build which cannot run in older browsers that don't support the modules, such as IE 11.
|
||||
|
||||
If you want to run ES5 code during development, you could disable differential loading completely.
|
||||
To maintain the benefits of differential loading, however, a better option is to define multiple configurations for `ng serve`, `ng e2e`, and `ng test`.
|
||||
|
||||
{@a differential-serve}
|
||||
|
||||
### Configuring serve for ES5
|
||||
|
||||
To do this for `ng serve`, create a new file, `tsconfig-es5.app.json` next to `tsconfig.app.json` with the following content.
|
||||
|
||||
<code-example language="json" format="." linenums="false">
|
||||
|
||||
{
|
||||
"extends": "./tsconfig.app.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5"
|
||||
}
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
In `angular.json` add two new configuration sections under the `build` and `serve` targets to point to the new TypeScript configuration.
|
||||
|
||||
<code-example language="json" format="." linenums="false">
|
||||
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
...
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
...
|
||||
},
|
||||
"es5": {
|
||||
"tsConfig": "./tsconfig-es5.app.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
...
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
...
|
||||
},
|
||||
"es5": {
|
||||
"browserTarget": "app:build:es5"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
</code-example>
|
||||
|
||||
You can then run the serve with this configuration.
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
ng serve --configuration es5
|
||||
|
||||
</code-example>
|
||||
|
||||
{@a differential-test}
|
||||
|
||||
### Configuring the test command
|
||||
|
||||
Create a new file, `tsconfig-es5.spec.json` next to `tsconfig.spec.json` with the following content.
|
||||
|
||||
<code-example language="json" format="." linenums="false">
|
||||
|
||||
{
|
||||
"extends": "./tsconfig.spec.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5"
|
||||
}
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
<code-example language="json" format="." linenums="false">
|
||||
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
...
|
||||
},
|
||||
"configurations": {
|
||||
"es5": {
|
||||
"tsConfig": "./tsconfig-es5.spec.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
</code-example>
|
||||
|
||||
You can then run the tests with this configuration
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
ng test --configuration es5
|
||||
|
||||
</code-example>
|
||||
|
||||
### Configuring the e2e command
|
||||
|
||||
Create an [ES5 serve configuration](guide/deployment#configuring-serve-for-es5) as explained above, and configuration an ES5 configuration for the E2E target.
|
||||
|
||||
<code-example language="json" format="." linenums="false">
|
||||
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
...
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
...
|
||||
},
|
||||
"es5": {
|
||||
"devServerTarget": "app:serve:es5"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
</code-example>
|
||||
|
||||
You can then run the e2e's with this configuration
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
|
||||
ng e2e --configuration es5
|
||||
|
||||
</code-example>
|
||||
|
@ -465,99 +465,3 @@ For more information about using `@angular/common/http`, see the [HttpClient gui
|
||||
| `MockBackend` | [`HttpTestingController`](/api/common/http/testing/HttpTestingController) |
|
||||
| `MockConnection` | [`HttpTestingController`](/api/common/http/testing/HttpTestingController) |
|
||||
|
||||
## Renderer to Renderer2 migration
|
||||
|
||||
### Migration Overview
|
||||
|
||||
The `Renderer` class has been marked as deprecated since Angular version 4. This section provides guidance on migrating from this deprecated API to the newer `Renderer2` API and what it means for your app.
|
||||
|
||||
### Why should I migrate to Renderer2?
|
||||
|
||||
The deprecated `Renderer` class has been removed in version 9 of Angular, so it's necessary to migrate to a supported API. Using `Renderer2` is the recommended strategy because it supports a similar set of functionality to `Renderer`. The API surface is quite large (with 19 methods), but the schematic should simplify this process for your applications.
|
||||
|
||||
### Is there action required on my end?
|
||||
|
||||
No. The schematic should handle most cases with the exception of `Renderer.animate()` and `Renderer.setDebugInfo()`, which already aren’t supported.
|
||||
|
||||
### What are the `__ngRendererX` methods? Why are they necessary?
|
||||
|
||||
Some methods either don't have exact equivalents in `Renderer2`, or they correspond to more than one expression. For example, both renderers have a `createElement()` method, but they're not equal because a call such as `renderer.createElement(parentNode, namespaceAndName)` in the `Renderer` corresponds to the following block of code in `Renderer2`:
|
||||
|
||||
```ts
|
||||
const [namespace, name] = splitNamespace(namespaceAndName);
|
||||
const el = renderer.createElement(name, namespace);
|
||||
if (parentNode) {
|
||||
renderer.appendChild(parentNode, el);
|
||||
}
|
||||
return el;
|
||||
```
|
||||
|
||||
Migration has to guarantee that the return values of functions and types of variables stay the same. To handle the majority of cases safely, the schematic declares helper functions at the bottom of the user's file. These helpers encapsulate your own logic and keep the replacements inside your code down to a single function call. Here's an example of how the `createElement()` migration looks:
|
||||
|
||||
|
||||
**Before:**
|
||||
|
||||
```ts
|
||||
public createAndAppendElement() {
|
||||
const el = this.renderer.createElement('span');
|
||||
el.textContent = 'hello world';
|
||||
return el;
|
||||
}
|
||||
```
|
||||
|
||||
**After:**
|
||||
|
||||
<code-example linenums=false>
|
||||
|
||||
public createAndAppendElement() {
|
||||
const el = __ngRendererCreateElement(this.renderer, this.element, 'span');
|
||||
el.textContent = 'hello world';
|
||||
return el;
|
||||
}
|
||||
// Generated code at the bottom of the file
|
||||
__ngRendererCreateElement(renderer: any, parentNode: any, nameAndNamespace: any) {
|
||||
const [namespace, name] = __ngRendererSplitNamespace(namespaceAndName);
|
||||
const el = renderer.createElement(name, namespace);
|
||||
if (parentNode) {
|
||||
renderer.appendChild(parentNode, el);
|
||||
}
|
||||
return el;
|
||||
}
|
||||
__ngRendererSplitNamespace(nameAndNamespace: any) {
|
||||
// returns the split name and namespace
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
When implementing these helper functions, the schematic ensures that they're only declared once per file and that their names are unique enough that there's a small chance of colliding with pre-existing functions in your code. The schematic also keeps their parameter types as `any` so that it doesn't have to insert extra logic that ensures that their values have the correct type.
|
||||
|
||||
### I’m a library author. Should I run this migration?
|
||||
|
||||
**Library authors should definitely use this migration to move away from the `Renderer`. Otherwise, the libraries won't work with applications built with version 9.**
|
||||
|
||||
|
||||
### Full list of method migrations
|
||||
|
||||
The following table shows all methods that the migration maps from `Renderer` to `Renderer2`.
|
||||
|
||||
|Renderer|Renderer2|
|
||||
|---|---|
|
||||
|`listen(renderElement, name, callback)`|`listen(renderElement, name, callback)`|
|
||||
|`setElementProperty(renderElement, propertyName, propertyValue)`|`setProperty(renderElement, propertyName, propertyValue)`|
|
||||
|`setText(renderNode, text)`|`setValue(renderNode, text)`|
|
||||
|`listenGlobal(target, name, callback)`|`listen(target, name, callback)`|
|
||||
|`selectRootElement(selectorOrNode, debugInfo?)`|`selectRootElement(selectorOrNode)`|
|
||||
|`createElement(parentElement, name, debugInfo?)`|`appendChild(parentElement, createElement(name))`|
|
||||
|`setElementStyle(el, style, value?)`|`value == null ? removeStyle(el, style) : setStyle(el, style, value)`
|
||||
|`setElementAttribute(el, name, value?)`|`attributeValue == null ? removeAttribute(el, name) : setAttribute(el, name, value)`
|
||||
|`createText(parentElement, value, debugInfo?)`|`appendChild(parentElement, createText(value))`|
|
||||
|`createTemplateAnchor(parentElement)`|`appendChild(parentElement, createComment(''))`|
|
||||
|`setElementClass(renderElement, className, isAdd)`|`isAdd ? addClass(renderElement, className) : removeClass(renderElement, className)`|
|
||||
|`projectNodes(parentElement, nodes)`|`for (let i = 0; i < nodes.length; i<ins></ins>) { appendChild(parentElement, nodes<i>); }`|
|
||||
|`attachViewAfter(node, viewRootNodes)`|`const parentElement = parentNode(node); const nextSibling = nextSibling(node); for (let i = 0; i < viewRootNodes.length; i<ins></ins>) { insertBefore(parentElement, viewRootNodes<i>, nextSibling);}`|
|
||||
|`detachView(viewRootNodes)`|`for (let i = 0; i < viewRootNodes.length; i<ins></ins>) {const node = viewRootNodes<i>; const parentElement = parentNode(node); removeChild(parentElement, node);}`|
|
||||
|`destroyView(hostElement, viewAllNodes)`|`for (let i = 0; i < viewAllNodes.length; i<ins></ins>) { destroyNode(viewAllNodes<i>); }`|
|
||||
|`setBindingDebugInfo()`|This function is a noop in `Renderer2`.|
|
||||
|`createViewRoot(hostElement)`|Should be replaced with a reference to `hostElement`|
|
||||
|`invokeElementMethod(renderElement, methodName, args?)`|`(renderElement as any)<methodName>.apply(renderElement, args);`|
|
||||
|`animate(element, startingStyles, keyframes, duration, delay, easing, previousPlayers?)`|Throws an error (same behavior as `Renderer.animate()`)|
|
||||
|
@ -1,5 +1,12 @@
|
||||
# Entry Components
|
||||
|
||||
#### Prerequisites:
|
||||
|
||||
A basic understanding of the following concepts:
|
||||
* [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
<hr />
|
||||
|
||||
An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
@ -2,6 +2,12 @@
|
||||
|
||||
Feature modules are NgModules for the purpose of organizing code.
|
||||
|
||||
#### Prerequisites
|
||||
A basic understanding of the following:
|
||||
* [Bootstrapping](guide/bootstrapping).
|
||||
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
* [Frequently Used Modules](guide/frequent-ngmodules).
|
||||
|
||||
For the final sample app with a feature module that this page describes,
|
||||
see the <live-example></live-example>.
|
||||
|
||||
|
@ -1,5 +1,12 @@
|
||||
# Frequently Used Modules
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
A basic understanding of [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
An Angular app needs at least one module that serves as the root module.
|
||||
As you add features to your app, you can add them in modules.
|
||||
The following are frequently used Angular modules with examples
|
||||
|
@ -362,7 +362,7 @@ Compare to [custom element](#custom-element).
|
||||
|
||||
## entry point
|
||||
|
||||
A [JavaScript module](#module) that is intended to be imported by a user of [an
|
||||
A JavaScript module(#module) that is intended to be imported by a user of [an
|
||||
npm package](guide/npm-packages). An entry-point module typically re-exports
|
||||
symbols from other internal modules. A package can contain multiple
|
||||
entry points. For example, the `@angular/core` package has two entry-point
|
||||
@ -454,9 +454,10 @@ A form of property [data binding](#data-binding) in which a [template expression
|
||||
That text can be concatenated with neighboring text before it is assigned to an element property
|
||||
or displayed between element tags, as in this example.
|
||||
|
||||
```html
|
||||
<label>My current hero is {{hero.name}}</label>
|
||||
```
|
||||
<code-example language="html" escape="html">
|
||||
<label>My current hero is {{hero.name}}</label>
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
Read more about [interpolation](guide/template-syntax#interpolation) in [Template Syntax](guide/template-syntax).
|
||||
|
@ -1,13 +1,23 @@
|
||||
# Lazy Loading Feature Modules
|
||||
|
||||
#### Prerequisites
|
||||
A basic understanding of the following:
|
||||
* [Feature Modules](guide/feature-modules).
|
||||
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
* [Frequently Used Modules](guide/frequent-ngmodules).
|
||||
* [Types of Feature Modules](guide/module-types).
|
||||
* [Routing and Navigation](guide/router).
|
||||
|
||||
For the final sample app with two lazy loaded modules that this page describes, see the
|
||||
<live-example></live-example>.
|
||||
|
||||
<hr>
|
||||
|
||||
## High level view
|
||||
|
||||
By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial
|
||||
bundle sizes smaller, which in turn helps decrease load times.
|
||||
|
||||
For the final sample app with two lazy loaded modules that this page describes, see the
|
||||
<live-example></live-example>.
|
||||
|
||||
There are three main steps to setting up a lazy loaded feature module:
|
||||
|
||||
1. Create the feature module.
|
||||
|
@ -1,5 +1,16 @@
|
||||
|
||||
|
||||
# Types of Feature Modules
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
A basic understanding of the following concepts:
|
||||
* [Feature Modules](guide/feature-modules).
|
||||
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
* [Frequently Used Modules](guide/frequent-ngmodules).
|
||||
|
||||
<hr>
|
||||
|
||||
There are five general categories of feature modules which
|
||||
tend to fall into the following groups:
|
||||
|
||||
|
@ -1,5 +1,15 @@
|
||||
# NgModule API
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
A basic understanding of the following concepts:
|
||||
* [Bootstrapping](guide/bootstrapping).
|
||||
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
|
||||
<hr />
|
||||
|
||||
## Purpose of `@NgModule`
|
||||
|
||||
At a high level, NgModules are a way to organize Angular apps
|
||||
and they accomplish this through the metadata in the `@NgModule`
|
||||
decorator.
|
||||
|
@ -1,5 +1,13 @@
|
||||
# NgModule FAQs
|
||||
|
||||
|
||||
#### Prerequisites:
|
||||
|
||||
A basic understanding of the following concepts:
|
||||
* [NgModules](guide/ngmodules).
|
||||
|
||||
<hr />
|
||||
|
||||
NgModules help organize an application into cohesive blocks of functionality.
|
||||
|
||||
This page answers the questions many developers ask about NgModule design and implementation.
|
||||
|
@ -1,9 +1,13 @@
|
||||
# JavaScript Modules vs. NgModules
|
||||
|
||||
#### Prerequisites
|
||||
A basic understanding of [JavaScript/ECMAScript modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/).
|
||||
|
||||
<hr>
|
||||
|
||||
JavaScript and Angular use modules to organize code, and
|
||||
though they organize it differently, Angular apps rely on both.
|
||||
|
||||
|
||||
## JavaScript modules
|
||||
|
||||
In JavaScript, modules are individual files with JavaScript code in them. To make what’s in them available, you write an export statement, usually after the relevant code, like this:
|
||||
@ -20,8 +24,6 @@ import { AppComponent } from './app.component';
|
||||
|
||||
JavaScript modules help you namespace, preventing accidental global variables.
|
||||
|
||||
For more information on JavaScript modules, see [JavaScript/ECMAScript modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/).
|
||||
|
||||
## NgModules
|
||||
|
||||
<!-- KW-- perMisko: let's discuss. This does not answer the question why it is different. Also, last sentence is confusing.-->
|
||||
|
@ -1,5 +1,13 @@
|
||||
# NgModules
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
A basic understanding of the following concepts:
|
||||
* [Bootstrapping](guide/bootstrapping).
|
||||
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
|
||||
<hr>
|
||||
|
||||
**NgModules** configure the injector and the compiler and help organize related things together.
|
||||
|
||||
An NgModule is a class marked by the `@NgModule` decorator.
|
||||
@ -12,6 +20,7 @@ For an example app showcasing all the techniques that NgModules related pages
|
||||
cover, see the <live-example></live-example>. For explanations on the individual techniques, visit the relevant NgModule pages under the NgModules
|
||||
section.
|
||||
|
||||
|
||||
## Angular modularity
|
||||
|
||||
Modules are a great way to organize an application and extend it with capabilities from external libraries.
|
||||
@ -48,13 +57,12 @@ You then import these modules into the root module.
|
||||
|
||||
## The basic NgModule
|
||||
|
||||
The [Angular CLI](cli) generates the following basic `AppModule` when creating a new app.
|
||||
The [Angular CLI](cli) generates the following basic app module when creating a new app.
|
||||
|
||||
|
||||
<code-example path="ngmodules/src/app/app.module.1.ts" header="src/app/app.module.ts (default AppModule)" linenums="false"> // @NgModule decorator with its metadata
|
||||
<code-example path="bootstrapping/src/app/app.module.ts" region="whole-ngmodule" header="src/app/app.module.ts" linenums="false">
|
||||
</code-example>
|
||||
|
||||
At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). For more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping).
|
||||
At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). This page builds on [Bootstrapping](guide/bootstrapping), which covers the structure of an NgModule in detail. If you need more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
<hr />
|
||||
|
||||
|
@ -1,10 +1,16 @@
|
||||
# Providers
|
||||
|
||||
A provider is an instruction to the DI system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.
|
||||
#### Prerequisites:
|
||||
* A basic understanding of [Bootstrapping](guide/bootstrapping).
|
||||
* Familiarity with [Frequently Used Modules](guide/frequent-ngmodules).
|
||||
|
||||
For the final sample app using the provider that this page describes,
|
||||
see the <live-example></live-example>.
|
||||
|
||||
<hr>
|
||||
|
||||
A provider is an instruction to the DI system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.
|
||||
|
||||
## Providing a service
|
||||
|
||||
If you already have an app that was created with the [Angular CLI](cli), you can create a service using the [`ng generate`](cli/generate) CLI command in the root project directory. Replace _User_ with the name of your service.
|
||||
|
@ -1,5 +1,18 @@
|
||||
# Sharing Modules
|
||||
|
||||
#### Prerequisites
|
||||
A basic understanding of the following:
|
||||
* [Feature Modules](guide/feature-modules).
|
||||
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
* [Frequently Used Modules](guide/frequent-ngmodules).
|
||||
* [Routing and Navigation](guide/router).
|
||||
* [Lazy loading modules](guide/lazy-loading-ngmodules).
|
||||
|
||||
|
||||
<!--* Components (#TBD) We don’t have a page just on the concept of components, but I think one would be helpful for beginners.-->
|
||||
|
||||
<hr>
|
||||
|
||||
Creating shared modules allows you to organize and streamline your code. You can put commonly
|
||||
used directives, pipes, and components into one module and then import just that module wherever
|
||||
you need it in other parts of your app.
|
||||
@ -41,7 +54,7 @@ to import `FormsModule`, `SharedModule` can still export
|
||||
way, you can give other modules access to `FormsModule` without
|
||||
having to import it directly into the `@NgModule` decorator.
|
||||
|
||||
### Using components vs services from other modules
|
||||
### Using components vs services from other modules.
|
||||
|
||||
There is an important distinction between using another module's component and
|
||||
using a service from another module. Import modules when you want to use
|
||||
|
@ -1,10 +1,15 @@
|
||||
# Singleton services
|
||||
|
||||
A singleton service is a service for which only once instance exists in an app.
|
||||
#### Prerequisites:
|
||||
|
||||
* A basic understanding of [Bootstrapping](guide/bootstrapping).
|
||||
* Familiarity with [Providers](guide/providers).
|
||||
|
||||
For a sample app using the app-wide singleton service that this page describes, see the
|
||||
<live-example name="ngmodules"></live-example> showcasing all the documented features of NgModules.
|
||||
|
||||
<hr />
|
||||
|
||||
## Providing a singleton service
|
||||
|
||||
There are two ways to make a service a singleton in Angular:
|
||||
|
@ -156,12 +156,3 @@ In Angular version 9 and later, it will be safe to remove any `{static: false}`
|
||||
Yes, absolutely!
|
||||
Because we have not changed the default query behavior in version 8 (i.e. the compiler still chooses a timing if no flag is set), when your application runs with a library that has not updated to version 8, the library will run the same way it did in version 7.
|
||||
This guarantees your app will work in version 8 even if libraries take longer to update their code.
|
||||
|
||||
{@a update-library-to-use-static-flag}
|
||||
### Can I update my library to version 8 by adding the `static` flag to view queries, while still being compatible with Angular version 7 apps?
|
||||
|
||||
Yes, the Angular team's recommendation for libraries is to update to version 8 and add the `static` flag. Angular version 7 apps will continue to work with libraries that have this flag.
|
||||
|
||||
However, if you update your library to Angular version 8 and want to take advantage of the new version 8 APIs, or you want more recent dependencies (such as Typescript or RxJS) your library will become incompatible with Angular version 7 apps. If your goal is to make your library compatible with Angular versions 7 and 8, you should not update your lib at all—except for `peerDependencies` in `package.json`.
|
||||
|
||||
In general, the most efficient plan is for libraries to adopt a 6 month major version schedule and bump the major version after each Angular update. That way, libraries stay in the same release cadence as Angular.
|
||||
|
@ -275,179 +275,53 @@ In this example, the `[ngClass]="odd"` stays on the `<div>`.
|
||||
{@a microsyntax}
|
||||
|
||||
|
||||
## Microsyntax
|
||||
### Microsyntax
|
||||
|
||||
The Angular microsyntax lets you configure a directive in a compact, friendly string.
|
||||
The microsyntax parser translates that string into attributes on the `<ng-template>`:
|
||||
|
||||
* The `let` keyword declares a [_template input variable_](guide/structural-directives#template-input-variable)
|
||||
that you reference within the template. The input variables in this example are `hero`, `i`, and `odd`.
|
||||
The parser translates `let hero`, `let i`, and `let odd` into variables named
|
||||
The parser translates `let hero`, `let i`, and `let odd` into variables named,
|
||||
`let-hero`, `let-i`, and `let-odd`.
|
||||
|
||||
* The microsyntax parser title-cases all directives and prefixes them with the directive's
|
||||
attribute name, such as `ngFor`. For example, the `ngFor` input properties,
|
||||
`of` and `trackBy`, become `ngForOf` and `ngForTrackBy`, respectively.
|
||||
* The microsyntax parser takes `of` and `trackBy`, title-cases them (`of` -> `Of`, `trackBy` -> `TrackBy`),
|
||||
and prefixes them with the directive's attribute name (`ngFor`), yielding the names `ngForOf` and `ngForTrackBy`.
|
||||
Those are the names of two `NgFor` _input properties_ .
|
||||
That's how the directive learns that the list is `heroes` and the track-by function is `trackById`.
|
||||
|
||||
* As the `NgFor` directive loops through the list, it sets and resets properties of its own _context_ object.
|
||||
These properties can include, but aren't limited to, `index`, `odd`, and a special property
|
||||
named `$implicit`.
|
||||
These properties include `index` and `odd` and a special property named `$implicit`.
|
||||
|
||||
* The `let-i` and `let-odd` variables were defined as `let i=index` and `let odd=odd`.
|
||||
Angular sets them to the current value of the context's `index` and `odd` properties.
|
||||
|
||||
* The context property for `let-hero` wasn't specified.
|
||||
Its intended source is implicit.
|
||||
Angular sets `let-hero` to the value of the context's `$implicit` property,
|
||||
Angular sets `let-hero` to the value of the context's `$implicit` property
|
||||
which `NgFor` has initialized with the hero for the current iteration.
|
||||
|
||||
* The [`NgFor` API guide](api/common/NgForOf "API: NgFor")
|
||||
* The [API guide](api/common/NgForOf "API: NgFor")
|
||||
describes additional `NgFor` directive properties and context properties.
|
||||
|
||||
* The `NgForOf` directive implements `NgFor`. Read more about additional `NgForOf` directive properties and context properties in the [NgForOf API reference](api/common/NgForOf).
|
||||
|
||||
### Writing your own structural directives
|
||||
|
||||
These microsyntax mechanisms are also available to you when you write your own structural directives.
|
||||
For example, microsyntax in Angular allows you to write `<div *ngFor="let item of items">{{item}}</div>`
|
||||
instead of `<ng-template ngFor [ngForOf]="items"><div>{{item}}</div></ng-template`.
|
||||
The following sections provide detailed information on constraints, grammar,
|
||||
and translation of microsyntax.
|
||||
|
||||
### Constraints
|
||||
|
||||
Microsyntax must meet the following requirements:
|
||||
|
||||
- It must be known ahead of time so that IDEs can parse it without knowing the underlying semantics of the directive or what directives are present.
|
||||
- It must translate to key-value attributes in the DOM.
|
||||
|
||||
### Grammar
|
||||
|
||||
When you write your own structural directives, use the following grammar:
|
||||
|
||||
```
|
||||
*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"
|
||||
```
|
||||
|
||||
The following tables describe each portion of the microsyntax grammar.
|
||||
|
||||
<!-- What should I put in the table headers? -->
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>prefix</code></td>
|
||||
<td>HTML attribute key</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>key</code></td>
|
||||
<td>HTML attribute key</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>local</code></td>
|
||||
<td>local variable name used in the template</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>export</code></td>
|
||||
<td>value exported by the directive under a given name</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>expression</code></td>
|
||||
<td>standard Angular expression</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- The items in this table seem different. Is there another name for how we should describe them? -->
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><code>keyExp = :key ":"? :expression ("as" :local)? ";"? </code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><code>let = "let" :local "=" :export ";"?</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><code>as = :export "as" :local ";"?</code></td>
|
||||
</tr>
|
||||
</table>
|
||||
* `NgFor` is implemented by the `NgForOf` directive. Read more about additional `NgForOf` directive properties and context properties [NgForOf API reference](api/common/NgForOf).
|
||||
|
||||
|
||||
### Translation
|
||||
|
||||
A microsyntax is translated to the normal binding syntax as follows:
|
||||
|
||||
<!-- What to put in the table headers below? Are these correct?-->
|
||||
<table>
|
||||
<tr>
|
||||
<th>Microsyntax</th>
|
||||
<th>Translation</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>prefix</code> and naked <code>expression</code></td>
|
||||
<td><code>[prefix]="expression"</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>keyExp</code></td>
|
||||
<td><code>[prefixKey] "expression"
|
||||
(let-prefixKey="export")</code>
|
||||
<br />
|
||||
Notice that the <code>prefix</code>
|
||||
is added to the <code>key</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>let</code></td>
|
||||
<td><code>let-local="export"</code></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Microsyntax examples
|
||||
|
||||
The following table demonstrates how Angular desugars microsyntax.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Microsyntax</th>
|
||||
<th>Desugared</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>*ngFor="let item of [1,2,3]"</code></td>
|
||||
<td><code><ng-template ngFor let-item [ngForOf]="[1,2,3]"></code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>*ngFor="let item of [1,2,3] as items; trackBy: myTrack; index as i"</code></td>
|
||||
<td><code><ng-template ngFor let-item [ngForOf]="[1,2,3]" let-items="ngForOf" [ngForTrackBy]="myTrack" let-i="index"></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>*ngIf="exp"</code></td>
|
||||
<td><code><ng-template [ngIf]="exp"></code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>*ngIf="exp as value"</code></td>
|
||||
<td><code><ng-template [ngIf]="exp" let-value="ngIf"></code></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
These microsyntax mechanisms are available to you when you write your own structural directives.
|
||||
Studying the
|
||||
[source code for `NgIf`](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts "Source: NgIf")
|
||||
and [`NgForOf`](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts "Source: NgForOf")
|
||||
is a great way to learn more.
|
||||
|
||||
|
||||
|
||||
{@a template-input-variable}
|
||||
|
||||
|
||||
{@a template-input-variables}
|
||||
|
||||
|
||||
## Template input variable
|
||||
### Template input variable
|
||||
|
||||
A _template input variable_ is a variable whose value you can reference _within_ a single instance of the template.
|
||||
There are several such variables in this example: `hero`, `i`, and `odd`.
|
||||
@ -472,7 +346,7 @@ variable as the `hero` declared as `#hero`.
|
||||
{@a one-per-element}
|
||||
|
||||
|
||||
## One structural directive per host element
|
||||
### One structural directive per host element
|
||||
|
||||
Someday you'll want to repeat a block of HTML but only when a particular condition is true.
|
||||
You'll _try_ to put both an `*ngFor` and an `*ngIf` on the same host element.
|
||||
|
@ -1626,14 +1626,6 @@ Here is an illustration of the `trackBy` effect.
|
||||
<img src="generated/images/guide/built-in-directives/ngfor-trackby.gif" alt="Animation of trackBy">
|
||||
</figure>
|
||||
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
Built-in directives use only public APIs; that is,
|
||||
they do not have special access to any private APIs that other directives can't access.
|
||||
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
{@a ngSwitch}
|
||||
@ -1761,9 +1753,7 @@ This example declares the `fax` variable as `ref-fax` instead of `#fax`.
|
||||
|
||||
## `@Input()` and `@Output()` properties
|
||||
|
||||
`@Input()` and `@Output()` allow Angular to share data between the parent context
|
||||
and child directives or components. An `@Input()` property is writable
|
||||
while an `@Output()` property is observable.
|
||||
`@Input()` and `@Output()` allow Angular to share data between the parent context and child directives. An `@Input()` property is writable while an `@Output()` property is observable.
|
||||
|
||||
Consider this example of a child/parent relationship:
|
||||
|
||||
@ -1796,7 +1786,7 @@ Though `@Input()` and `@Output()` often appear together in apps, you can use
|
||||
them separately. If the nested
|
||||
component is such that it only needs to send data to its parent, you wouldn't
|
||||
need an `@Input()`, only an `@Output()`. The reverse is also true in that if the
|
||||
child only needs to receive data from the parent, you'd only need `@Input()`.
|
||||
child only needs to receive data from the parent, you'd only neeed `@Input()`.
|
||||
|
||||
</div>
|
||||
|
||||
@ -2063,14 +2053,14 @@ to declare inputs and outputs, you can identify
|
||||
members in the `inputs` and `outputs` arrays
|
||||
of the directive metadata, as in this example:
|
||||
|
||||
<code-example path="inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts" region="metadata" header="src/app/in-the-metadata/in-the-metadata.component.ts" linenums="false">
|
||||
<code-example path="inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts" region="metadata" header="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
While declaring `inputs` and `outputs` in the `@Directive` and `@Component`
|
||||
metadata is possible, it is a better practice to use the `@Input()` and `@Output()`
|
||||
class decorators instead, as follows:
|
||||
|
||||
<code-example path="inputs-outputs/src/app/input-output/input-output.component.ts" region="input-output" header="src/app/input-output/input-output.component.ts" linenums="false">
|
||||
<code-example path="inputs-outputs/src/app/input-output/input-output.component.ts" region="input-output" header="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
See the [Decorate input and output properties](guide/styleguide#decorate-input-and-output-properties) section of the
|
||||
@ -2104,7 +2094,7 @@ offer a solution.
|
||||
Alias inputs and outputs in the metadata using a colon-delimited (`:`) string with
|
||||
the directive property name on the left and the public alias on the right:
|
||||
|
||||
<code-example path="inputs-outputs/src/app/aliasing/aliasing.component.ts" region="alias" header="src/app/aliasing/aliasing.component.ts" linenums="false">
|
||||
<code-example path="inputs-outputs/src/app/aliasing/aliasing.component.ts" region="alias" header="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
|
||||
@ -2112,7 +2102,7 @@ the directive property name on the left and the public alias on the right:
|
||||
|
||||
You can specify the alias for the property name by passing the alias name to the `@Input()`/`@Output()` decorator. The internal name remains as usual.
|
||||
|
||||
<code-example path="inputs-outputs/src/app/aliasing/aliasing.component.ts" region="alias-input-output" header="src/app/aliasing/aliasing.component.ts" linenums="false">
|
||||
<code-example path="inputs-outputs/src/app/aliasing/aliasing.component.ts" region="alias-input-output" header="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
|
||||
@ -2273,27 +2263,3 @@ the component.
|
||||
</code-example>
|
||||
|
||||
The `$any()` cast function works anywhere in a binding expression where a method call is valid.
|
||||
|
||||
## SVG in templates
|
||||
|
||||
It is possible to use SVG as valid templates in Angular. All of the template syntax below is
|
||||
applicable to both SVG and HTML. Learn more in the SVG [1.1](https://www.w3.org/TR/SVG11/) and
|
||||
[2.0](https://www.w3.org/TR/SVG2/) specifications.
|
||||
|
||||
Why would you use SVG as template, instead of simply adding it as image to your application?
|
||||
|
||||
When you use an SVG as the template, you are able to use directives and bindings just like with HTML
|
||||
templates. This means that you will be able to dynamically generate interactive graphics.
|
||||
|
||||
Refer to the sample code snippet below for a syntax example:
|
||||
|
||||
<code-example path="template-syntax/src/app/svg.component.ts" header="src/app/svg.component.ts">
|
||||
</code-example>
|
||||
|
||||
Add the below code to your `svg.component.svg` file:
|
||||
|
||||
<code-example path="template-syntax/src/app/svg.component.svg" header="src/app/svg.component.svg">
|
||||
</code-example>
|
||||
|
||||
Here you can see the use of a `click()` event binding and the property binding syntax
|
||||
(`[attr.fill]="fillColor"`).
|
||||
|
@ -150,7 +150,7 @@ sudo: false
|
||||
|
||||
language: node_js
|
||||
node_js:
|
||||
- "10"
|
||||
- "8"
|
||||
|
||||
addons:
|
||||
apt:
|
||||
|
@ -868,8 +868,6 @@ As of Angular version 8, lazy loading code can be accomplished simply by using t
|
||||
|
||||
The service uses the `import()` method to load your bundled AngularJS application lazily. This decreases the initial bundle size of your application as you're not loading code your user doesn't need yet. You also need to provide a way to _bootstrap_ the application manually after it has been loaded. AngularJS provides a way to manually bootstrap an application using the [angular.bootstrap()](https://docs.angularjs.org/api/ng/function/angular.bootstrap) method with a provided HTML element. Your AngularJS app should also expose a `bootstrap` method that bootstraps the AngularJS app.
|
||||
|
||||
To ensure any necessary teardown is triggered in the AngularJS app, such as removal of global listeners, you also implement a method to call the `$rootScope.destroy()` method.
|
||||
|
||||
<code-example path="upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts" header="angularjs-app">
|
||||
</code-example>
|
||||
|
||||
@ -888,7 +886,7 @@ In your Angular application, you need a component as a placeholder for your Angu
|
||||
<code-example path="upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts" header="src/app/angular-js/angular-js.component.ts">
|
||||
</code-example>
|
||||
|
||||
When the Angular Router matches a route that uses AngularJS, the `AngularJSComponent` is rendered, and the content is rendered within the AngularJS [`ng-view`](https://docs.angularjs.org/api/ngRoute/directive/ngView) directive. When the user navigates away from the route, the `$rootScope` is destroyed on the AngularJS application.
|
||||
When the Angular Router matches a route that uses AngularJS, the `AngularJSComponent` is rendered, and the content is rendered within the AngularJS [`ng-view`](https://docs.angularjs.org/api/ngRoute/directive/ngView) directive.
|
||||
|
||||
### Configure a custom route matcher for AngularJS routes
|
||||
|
||||
|
@ -27,7 +27,7 @@ Running this command will:
|
||||
// Create a new
|
||||
const worker = new Worker('./app.worker', { type: 'module' });
|
||||
worker.onmessage = ({ data }) => {
|
||||
console.log(`page got message: ${data}`);
|
||||
console.log('page got message: $\{data\}');
|
||||
};
|
||||
worker.postMessage('hello');
|
||||
} else {
|
||||
|
@ -227,107 +227,3 @@ The following example uses the `ignore` field to exclude certain files in the as
|
||||
{ "glob": "**/*", "input": "src/assets/", "ignore": ["**/*.svg"], "output": "/assets/" },
|
||||
]
|
||||
</code-example>
|
||||
|
||||
{@a style-script-config}
|
||||
|
||||
### Styles and scripts configuration
|
||||
|
||||
An array entry for the `styles` and `scripts` options can be a simple path string, or an object that points to an extra entry-point file.
|
||||
The associated builder will load that file and its dependencies as a separate bundle during the build.
|
||||
With a configuration object, you have the option of naming the bundle for the entry point, using a `bundleName` field.
|
||||
|
||||
The bundle is injected by default, but you can set `inject` to false to exclude the bundle from injection.
|
||||
For example, the following object values create and name a bundle that contains styles and scripts, and excludes it from injection:
|
||||
|
||||
<code-example format="." language="json" linenums="false">
|
||||
|
||||
"styles": [
|
||||
{ "input": "src/external-module/styles.scss", "inject": false, "bundleName": "external-module" }
|
||||
],
|
||||
"scripts": [
|
||||
{ "input": "src/external-module/main.js", "inject": false, "bundleName": "external-module" }
|
||||
]
|
||||
|
||||
</code-example>
|
||||
|
||||
You can mix simple and complex file references for styles and scripts.
|
||||
|
||||
<code-example format="." language="json" linenums="false">
|
||||
|
||||
"styles": [
|
||||
"src/styles.css",
|
||||
"src/more-styles.css",
|
||||
{ "input": "src/lazy-style.scss", "inject": false },
|
||||
{ "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" },
|
||||
]
|
||||
|
||||
</code-example>
|
||||
|
||||
{@a style-preprocessor}
|
||||
|
||||
#### Style preprocessor options
|
||||
|
||||
In Sass and Stylus you can make use of the `includePaths` functionality for both component and global styles, which allows you to add extra base paths that will be checked for imports.
|
||||
|
||||
To add paths, use the `stylePreprocessorOptions` option:
|
||||
|
||||
<code-example format="." language="json" linenums="false">
|
||||
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"src/style-paths"
|
||||
]
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
Files in that folder, such as `src/style-paths/_variables.scss`, can be imported from anywhere in your project without the need for a relative path:
|
||||
|
||||
```ts
|
||||
// src/app/app.component.scss
|
||||
// A relative path works
|
||||
@import '../style-paths/variables';
|
||||
// But now this works as well
|
||||
@import 'variables';
|
||||
```
|
||||
|
||||
Note that you will also need to add any styles or scripts to the `test` builder if you need them for unit tests.
|
||||
See also [Using runtime-global libraries inside your app](guide/using-libraries#using-runtime-global-libraries-inside-your-app).
|
||||
|
||||
|
||||
{@a optimize-and-srcmap}
|
||||
|
||||
### Optimization and source map configuration
|
||||
|
||||
The `optimization` and `sourceMap` command options are simple Boolean flags.
|
||||
You can supply an object as a configuration value for either of these to provide more detailed instruction.
|
||||
|
||||
* The flag `--optimization="true"` applies to both scripts and styles. You can supply a value such as the following to apply optimization to one or the other:
|
||||
|
||||
<code-example format="." language="json" linenums="false">
|
||||
|
||||
"optimization": { "scripts": true, "styles": false }
|
||||
|
||||
</code-example>
|
||||
|
||||
* The flag `--sourceMap="true"` outputs source maps for both scripts and styles.
|
||||
You can configure the option to apply to one or the other.
|
||||
You can also choose to output hidden source maps, or resolve vendor package source maps.
|
||||
For example:
|
||||
|
||||
<code-example format="." language="json" linenums="false">
|
||||
|
||||
"sourceMaps": { "scripts": true, "styles": false, "hidden": true, "vendor": true }
|
||||
|
||||
</code-example>
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
When using hidden source maps, source maps will not be referenced in the bundle.
|
||||
These are useful if you only want source maps to map error stack traces in error reporting tools,
|
||||
but don't want to expose your source maps in the browser developer tools.
|
||||
|
||||
For [Universal](guide/glossary#universal), you can reduce the code rendered in the HTML page by
|
||||
setting styles optimization to `true` and styles source maps to `false`.
|
||||
|
||||
</div>
|
||||
|
@ -34,12 +34,23 @@
|
||||
"url": "https://dev.to/t/angular",
|
||||
"rev": true,
|
||||
"title": "DEV Community"
|
||||
}
|
||||
}
|
||||
},
|
||||
"angular-in-depth" : {
|
||||
"desc": "The place where advanced Angular concepts are explained",
|
||||
"url": "https://blog.angularindepth.com",
|
||||
"Groups": {
|
||||
"order": 2,
|
||||
"resources": {
|
||||
"sldkjfslkjfslkjdsklj": {
|
||||
"desc": "Meetup in Barcelona, Spain. Express your motivations, share your ideas and play together creating awesome things in team.",
|
||||
"rev": true,
|
||||
"title": "Angular In Depth"
|
||||
"title": "Angular Beers",
|
||||
"url": "http://www.meetup.com/AngularJS-Beers/"
|
||||
},
|
||||
"sldkjfslkjfslkjdskzzzlj": {
|
||||
"desc": "Angular Conferences and Angular Camps in Barcelona, Spain.",
|
||||
"rev": true,
|
||||
"title": "Angular Camp",
|
||||
"url": "http://angularcamp.org/"
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -51,7 +62,7 @@
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "Adventures in Angular",
|
||||
"url": "https://devchat.tv/adv-in-angular/"
|
||||
"url": "https://devchat.tv/adventures-in-angular"
|
||||
},
|
||||
"sdlkfjsldfkj": {
|
||||
"desc": "Weekly video podcast hosted by Jeff Whelpley with all the latest and greatest happenings in the wild world of Angular.",
|
||||
@ -66,6 +77,13 @@
|
||||
"rev": true,
|
||||
"title": "Happy Angular Podcast",
|
||||
"url": "https://happy-angular.de/"
|
||||
},
|
||||
"sldkfjsldjf": {
|
||||
"desc": "The live broadcast podcast all about JavaScript",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "Javascript Air",
|
||||
"url": "https://javascriptair.com/"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -77,26 +95,40 @@
|
||||
"Cross-Platform Development": {
|
||||
"order": 5,
|
||||
"resources": {
|
||||
"a2b": {
|
||||
"desc": "Angular and React Native to build applications for Android and iOS",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "ReactNative",
|
||||
"url": "http://angular.github.io/react-native-renderer/"
|
||||
},
|
||||
"a3b": {
|
||||
"desc": "Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive web apps.",
|
||||
"logo": "http://ionicframework.com/img/ionic-logo-white.svg",
|
||||
"rev": true,
|
||||
"title": "Ionic",
|
||||
"url": "https://ionicframework.com/docs"
|
||||
"url": "http://ionicframework.com/docs/v2/"
|
||||
},
|
||||
"a4b": {
|
||||
"desc": "Electron Platform for Angular.",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "Electron",
|
||||
"url": "https://github.com/maximegris/angular-electron"
|
||||
"url": "http://github.com/angular/angular-electron"
|
||||
},
|
||||
"ab": {
|
||||
"desc": "NativeScript is how you build cross-platform, native iOS and Android apps with Angular and TypeScript. Get 100% access to native APIs via JavaScript and reuse of packages from NPM, CocoaPods and Gradle. Open source and backed by Telerik.",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "NativeScript",
|
||||
"url": "https://docs.nativescript.org/angular/start/introduction"
|
||||
"url": "https://github.com/NativeScript/nativescript-angular"
|
||||
},
|
||||
"ab5": {
|
||||
"desc": "An Universal Windows App (uwp) powered by Angular",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "Windows (UWP)",
|
||||
"url": "http://github.com/preboot/angular2-universal-windows-app"
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -107,7 +139,7 @@
|
||||
"desc": "Reactive Extensions for Angular",
|
||||
"rev": true,
|
||||
"title": "ngrx",
|
||||
"url": "https://ngrx.io/"
|
||||
"url": "http://github.com/ngrx"
|
||||
},
|
||||
"ab": {
|
||||
"desc": "The official library for Firebase and Angular",
|
||||
@ -121,14 +153,21 @@
|
||||
"logo": "http://www.angular-meteor.com/images/logo.png",
|
||||
"rev": true,
|
||||
"title": "Meteor",
|
||||
"url": "https://github.com/urigo/angular-meteor"
|
||||
"url": "http://www.angular-meteor.com/angular2"
|
||||
},
|
||||
"ab3": {
|
||||
"desc": "Apollo is a data stack for modern apps, built with GraphQL.",
|
||||
"logo": "http://docs.apollostack.com/logo/large.png",
|
||||
"rev": true,
|
||||
"title": "Apollo",
|
||||
"url": "https://www.apollographql.com/docs/angular/"
|
||||
"url": "http://docs.apollostack.com/apollo-client/angular2.html"
|
||||
},
|
||||
"ab4": {
|
||||
"desc": "Angular Commerce is a solution for building modern e-commerce applications with power of Google Firebase. Set of components is design agnostic and allows to easily extend functionality.",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "AngularCommerce",
|
||||
"url": "https://github.com/NodeArt/angular-commerce"
|
||||
},
|
||||
"ngx-api-utils": {
|
||||
"desc": "ngx-api-utils is a lean library of utilities and helpers to quickly integrate any HTTP API (REST, Ajax, and any other) with Angular.",
|
||||
@ -180,6 +219,12 @@
|
||||
"Tooling": {
|
||||
"order": 2,
|
||||
"resources": {
|
||||
"-KLIzHfBEr1qMMUDxfq3": {
|
||||
"desc": "Generate an Angular CRUD application from an existing database schema",
|
||||
"rev": true,
|
||||
"title": "Celerio Angular Quickstart",
|
||||
"url": "https://github.com/jaxio/celerio-angular-quickstart"
|
||||
},
|
||||
"a1": {
|
||||
"desc": "A Google Chrome Dev Tools extension for debugging Angular applications.",
|
||||
"logo": "https://augury.angular.io/images/augury-logo.svg",
|
||||
@ -214,6 +259,13 @@
|
||||
"title": "Codelyzer",
|
||||
"url": "https://github.com/mgechev/codelyzer"
|
||||
},
|
||||
"e1": {
|
||||
"desc": "This package provides facilities for developers building Angular applications on ASP.NET.",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "Universal for ASP.NET",
|
||||
"url": "https://github.com/aspnet/nodeservices"
|
||||
},
|
||||
"f1": {
|
||||
"desc": "This tool generates dedicated documentation for Angular applications.",
|
||||
"logo": "",
|
||||
@ -221,6 +273,13 @@
|
||||
"title": "Compodoc",
|
||||
"url": "https://github.com/compodoc/compodoc"
|
||||
},
|
||||
"ncg": {
|
||||
"desc": "Generate several types of CRUD apps complete with e2e testing using template-sets for Angular, Material Design, Bootstrap, Kendo UI, Ionic, ...",
|
||||
"logo": "https://avatars3.githubusercontent.com/u/27976684",
|
||||
"rev": true,
|
||||
"title": "NinjaCodeGen - Angular CRUD Generator",
|
||||
"url": "https://ninjaCodeGen.com"
|
||||
},
|
||||
"angular-playground": {
|
||||
"desc": "UI development environment for building, testing, and documenting Angular applications.",
|
||||
"rev": true,
|
||||
@ -271,6 +330,12 @@
|
||||
"title": "Clarity Design System",
|
||||
"url": "https://vmware.github.io/clarity/"
|
||||
},
|
||||
"-KLIzI9BTvvP_hUwutXk": {
|
||||
"desc": "UI components for Angular using Semantic UI",
|
||||
"rev": true,
|
||||
"title": "Semantic UI",
|
||||
"url": "https://github.com/vladotesanovic/ngSemantic"
|
||||
},
|
||||
"-KMVB8P4TDfht8c0L1AE": {
|
||||
"desc": "The Angular version of the Angular UI Bootstrap library. This library is being built from scratch in Typescript using the Bootstrap 4 CSS framework.",
|
||||
"rev": true,
|
||||
@ -339,13 +404,6 @@
|
||||
"title": "Material Community Components",
|
||||
"url": "https://github.com/tiaguinho/material-community-components"
|
||||
},
|
||||
"mosaic": {
|
||||
"desc": "Positive Technologies UI components based on Angular",
|
||||
"logo": "https://i.ibb.co/fQNPgv6/logo-png-200.png",
|
||||
"rev": true,
|
||||
"title": "Mosaic - Angular UI Components",
|
||||
"url": "https://github.com/positive-js/mosaic"
|
||||
},
|
||||
"ngzorro": {
|
||||
"desc": "A set of enterprise-class UI components based on Ant Design and Angular",
|
||||
"rev": true,
|
||||
@ -455,6 +513,12 @@
|
||||
"Books": {
|
||||
"order": 1,
|
||||
"resources": {
|
||||
"-KLI8vJ0ZkvWhqPembZ7": {
|
||||
"desc": "A guide that helps developers get up to speed quickly on Angular and its accompanying technologies.",
|
||||
"rev": true,
|
||||
"title": "How to Get Started and Productive in Angular Fast",
|
||||
"url": "http://www.amazon.com/How-Started-Productive-Angular-Fast-ebook/dp/B01D3B0ET4/ref=sr_1_1_twi_kin_2?ie=UTF8&qid=1462381159&sr=8-1"
|
||||
},
|
||||
"-KLIzGEp8Mh5W-FkiQnL": {
|
||||
"desc": "Your quick, no-nonsense guide to building real-world apps with Angular",
|
||||
"rev": true,
|
||||
@ -465,7 +529,25 @@
|
||||
"desc": "More than 15 books from O'Reilly about Angular",
|
||||
"rev": true,
|
||||
"title": "O'Reilly Media",
|
||||
"url": "https://ssearch.oreilly.com/?q=angular"
|
||||
"url": "https://ssearch.oreilly.com/?q=angular+2&x=0&y=0"
|
||||
},
|
||||
"8ab": {
|
||||
"desc": "This books shows all the steps necessary for the development of SPA (Single Page Application) applications with the brand new Angular",
|
||||
"rev": true,
|
||||
"title": "Practical Angular",
|
||||
"url": "https://leanpub.com/practical-angular-2"
|
||||
},
|
||||
"a2b": {
|
||||
"desc": "Publications and books from Manning about Angular",
|
||||
"rev": true,
|
||||
"title": "Manning Publications",
|
||||
"url": "https://www.manning.com/search?q=angular"
|
||||
},
|
||||
"a4b": {
|
||||
"desc": "From getting started with the Angular toolchain to writing applications with scalable front end architectures, this book walks you through everything you need to know.",
|
||||
"rev": true,
|
||||
"title": "Rangle's Angular Training Book",
|
||||
"url": "http://ngcourse.rangle.io/"
|
||||
},
|
||||
"a5b": {
|
||||
"desc": "The in-depth, complete, and up-to-date book on Angular. Become an Angular expert today.",
|
||||
@ -473,6 +555,12 @@
|
||||
"title": "ng-book",
|
||||
"url": "https://www.ng-book.com/2/"
|
||||
},
|
||||
"a6b": {
|
||||
"desc": "A Practical Introduction to the new Web Development Platform Angular",
|
||||
"rev": true,
|
||||
"title": "Angular Book",
|
||||
"url": "https://leanpub.com/angular2-book"
|
||||
},
|
||||
"a7b": {
|
||||
"desc": "This ebook will help you getting the philosophy of the framework: what comes from 1.x, what has been introduced and why",
|
||||
"rev": true,
|
||||
@ -483,13 +571,13 @@
|
||||
"desc": "More than 10 books from Packt Publishing about Angular",
|
||||
"rev": true,
|
||||
"title": "Packt Publishing",
|
||||
"url": "https://www.packtpub.com/catalogsearch/result/?q=angular"
|
||||
"url": "https://www.packtpub.com/all/?search=angular%202#"
|
||||
},
|
||||
"cnoring-rxjs-fundamentals": {
|
||||
"desc": "A free book that covers all facets of working with Rxjs from your first Observable to how to make your code run at optimal speed with Schedulers.",
|
||||
"rev": true,
|
||||
"title": "RxJS Ultimate",
|
||||
"url": "https://chrisnoring.gitbooks.io/rxjs-5-ultimate/content/"
|
||||
"title": "RxJS 5 Ultimate",
|
||||
"url": "https://www.gitbook.com/book/chrisnoring/rxjs-5-ultimate/details"
|
||||
},
|
||||
"vsavkin-angular-router": {
|
||||
"desc": "This book is a comprehensive guide to the Angular router written by its designer. The book explores the library in depth, including the mental model, design constraints, subtleties of the API.",
|
||||
@ -547,6 +635,18 @@
|
||||
"title": "Academia Binaria (español)",
|
||||
"url": "http://academia-binaria.com/"
|
||||
},
|
||||
"-KLIzIOgdPXzI4LMOzYP": {
|
||||
"desc": "In this course, you will learn the features listed above and so much more. This amazing Angular tutorial will cover the fundamentals of Angular (you don’t even need to know Angular), TypeScript, and introduction to the programming concepts such as conditions, arrays, functions, directives, pipes, etc.",
|
||||
"rev": true,
|
||||
"title": "Eduonix Angular Fundamentals",
|
||||
"url": "https://www.eduonix.com/courses/Web-Development/angular-2-fundamentals-for-web-developers"
|
||||
},
|
||||
"-KMUuOWwciL_S_o0fzFO": {
|
||||
"desc": "The ngMigrate project is brought to you by Todd Motto, a Developer Advocate at Telerik, spreading the good word of Kendo UI, NativeScript and Angular & AngularJS. You can follow him on Twitter for questions, or even requests about this guide.",
|
||||
"rev": true,
|
||||
"title": "ngMigrate",
|
||||
"url": "http://ngmigrate.telerik.com/"
|
||||
},
|
||||
"-KN3uNQvxifu26D6WKJW": {
|
||||
"category": "Education",
|
||||
"desc": "Create the future of web applications by taking Angular for a test drive.",
|
||||
@ -567,14 +667,14 @@
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "Pluralsight",
|
||||
"url": "https://www.pluralsight.com/paths/angular"
|
||||
"url": "https://www.pluralsight.com/search?q=angular+2&categories=all"
|
||||
},
|
||||
"ab3": {
|
||||
"desc": "Angular courses hosted by Udemy",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "Udemy",
|
||||
"url": "https://www.udemy.com/courses/search/?q=angular"
|
||||
"url": "https://www.udemy.com/courses/search/?ref=home&src=ukw&q=angular+2&lang=en"
|
||||
},
|
||||
"ab4": {
|
||||
"desc": "Angular Fundamentals and advanced topics focused on Redux Style Angular Applications",
|
||||
@ -588,7 +688,13 @@
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "Frontend Masters",
|
||||
"url": "https://frontendmasters.com/courses/angular-core/"
|
||||
"url": "https://frontendmasters.com/courses/angular-2/"
|
||||
},
|
||||
"ac6": {
|
||||
"desc": "French language Angular course covering TypeScript, ES6, Dependency Injection, Observables, and more.",
|
||||
"rev": true,
|
||||
"title": "Wishtack's Angular Course (francais)",
|
||||
"url": "http://courses.wishtack.com/angular-2/ecmascript-6"
|
||||
},
|
||||
"angular-love": {
|
||||
"desc": "Polish language Angular articles and information",
|
||||
@ -596,6 +702,12 @@
|
||||
"title": "angular.love (Polski)",
|
||||
"url": "http://www.angular.love/"
|
||||
},
|
||||
"angular2forms": {
|
||||
"desc": "Learn about how to use Reactive Forms with Angular.",
|
||||
"rev": true,
|
||||
"title": "Angular Forms: Data Binding and Validation",
|
||||
"url": "https://www.lynda.com/AngularJS-tutorials/Angular-2-Forms-Data-Binding-Validation/461451-2.html"
|
||||
},
|
||||
"learn-angular-fr": {
|
||||
"desc": "French language Angular content.",
|
||||
"rev": true,
|
||||
@ -671,7 +783,7 @@
|
||||
"desc": "Basic and Advanced training across Europe in German",
|
||||
"rev": true,
|
||||
"title": "TheCodeCampus (German)",
|
||||
"url": "https://www.thecodecampus.de/schulungen/angular"
|
||||
"url": "https://www.thecodecampus.de/#!/angularjs"
|
||||
},
|
||||
"-KLIzFhfGKi1xttqJ7Uh": {
|
||||
"desc": "4 day in-depth Angular training in Israel",
|
||||
@ -704,6 +816,13 @@
|
||||
"title": "Angular Boot Camp",
|
||||
"url": "https://angularbootcamp.com"
|
||||
},
|
||||
"ab": {
|
||||
"desc": "With Rangle’s Custom Training, you can cover Angular in comprehensive detail, on your premises or theirs. Learn directly from Angular experts who will tailor course material to suit your specific application needs.",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "Rangle.io",
|
||||
"url": "http://rangle.io/services/javascript-training/angular2-training/"
|
||||
},
|
||||
"ab3": {
|
||||
"desc": "Trainings & Code Reviews. We help people to get a deep understanding of different technologies through trainings and code reviews. Our services can be arranged online, making it possible to join in from anywhere in the world, or on-site to get the best experience possible.",
|
||||
"logo": "",
|
||||
@ -718,6 +837,12 @@
|
||||
"title": "Learn Javascript (Russian)",
|
||||
"url": "https://learn.javascript.ru/courses/angular"
|
||||
},
|
||||
"sa200": {
|
||||
"desc": "Free Angular training delivered by SFEIR in France",
|
||||
"rev": true,
|
||||
"title": "SFEIR School (French)",
|
||||
"url": "https://school.sfeir.com/project/sa200/"
|
||||
},
|
||||
"zenika-angular": {
|
||||
"desc": "Angular trainings delivered by Zenika (FRANCE)",
|
||||
"rev": true,
|
||||
|
@ -208,16 +208,16 @@
|
||||
"title": "Component Styles",
|
||||
"tooltip": "Add CSS styles that are specific to a component."
|
||||
},
|
||||
{
|
||||
"url": "guide/dynamic-component-loader",
|
||||
"title": "Dynamic Components",
|
||||
"tooltip": "Load components dynamically."
|
||||
},
|
||||
{
|
||||
"url": "guide/elements",
|
||||
"title": "Angular Elements",
|
||||
"tooltip": "Convert components to Custom Elements."
|
||||
},
|
||||
{
|
||||
"url": "guide/dynamic-component-loader",
|
||||
"title": "Dynamic Components",
|
||||
"tooltip": "Load components dynamically."
|
||||
},
|
||||
{
|
||||
"url": "guide/attribute-directives",
|
||||
"title": "Attribute Directives",
|
||||
@ -456,11 +456,6 @@
|
||||
"title": "Internationalization (i18n)",
|
||||
"tooltip": "Translate the app's template text into multiple languages."
|
||||
},
|
||||
{
|
||||
"url": "guide/accessibility",
|
||||
"title": "Accessibility",
|
||||
"tooltip": "Design apps to be accessible to all users."
|
||||
},
|
||||
{
|
||||
"title": "Service Workers & PWA",
|
||||
"tooltip": "Angular service workers: Controlling caching of application resources.",
|
||||
|
@ -6,11 +6,6 @@ This tutorial introduces you to the essentials of Angular.
|
||||
It leverages what you already know about HTML and JavaScript—plus some useful Angular features—to build a simple online store application, with a catalog, shopping cart, and check-out form.
|
||||
You don't need to install anything: you'll build the app using the [StackBlitz](https://stackblitz.com/ "StackBlitz web site") online development environment.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
We are using the StackBlitz Generator to show you a ready-made, simple application that you can examine and play with interactively. In actual development you will typically use the [Angular CLI](guide/glossary#command-line-interface-cli), a powerful command-line tool that lets you generate and modify applications. For more information, see the [CLI Overview](cli).
|
||||
|
||||
</div>
|
||||
|
||||
<div class="callout is-helpful">
|
||||
<header>New to web development?</header>
|
||||
|
@ -19,7 +19,7 @@
|
||||
"build-local": "yarn ~~build",
|
||||
"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 823731f6e",
|
||||
"extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js 7da10691d",
|
||||
"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",
|
||||
@ -33,10 +33,8 @@
|
||||
"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",
|
||||
"smoke-tests": "protractor tests/deployment/e2e/protractor.conf.js --suite smoke --baseUrl",
|
||||
"test-a11y-score": "node scripts/test-aio-a11y",
|
||||
"test-a11y-score-localhost": "run-p --race \"~~light-server -s dist -p 4200 --quiet\" \"test-a11y-score http://localhost:4200\" --",
|
||||
"test-pwa-score": "run-s \"~~audit-web-app {1} all:0,pwa:{2} {3}\" --",
|
||||
"test-pwa-score-localhost": "run-p --race \"~~light-server -s dist -p 4200 --quiet\" \"test-pwa-score http://localhost:4200 {1} {2}\" --",
|
||||
"test-pwa-score": "node scripts/test-pwa-score",
|
||||
"test-pwa-score-localhost": "run-p --race \"~~http-server dist -p 4200 --silent\" \"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",
|
||||
@ -66,16 +64,15 @@
|
||||
"generate-zips": "node ./tools/example-zipper/generateZips",
|
||||
"build-404-page": "node scripts/build-404-page",
|
||||
"update-webdriver": "webdriver-manager update --standalone false --gecko false $CI_CHROMEDRIVER_VERSION_ARG",
|
||||
"~~audit-web-app": "node scripts/audit-web-app",
|
||||
"~~check-env": "node scripts/check-environment",
|
||||
"~~clean-generated": "node --eval \"require('shelljs').rm('-rf', 'src/generated')\"",
|
||||
"~~build": "ng build --configuration=stable",
|
||||
"post~~build": "yarn build-404-page",
|
||||
"~~light-server": "light-server --bind=localhost --historyindex=/index.html --no-reload"
|
||||
"~~http-server": "http-server"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.9.0 <11.0.0",
|
||||
"yarn": ">=1.12.1 <=1.16.0"
|
||||
"yarn": ">=1.12.1 <=1.14.0"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
@ -96,8 +93,8 @@
|
||||
"zone.js": "^0.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "0.801.0-beta.2",
|
||||
"@angular/cli": "8.1.0-beta.2",
|
||||
"@angular-devkit/build-angular": "0.800.2",
|
||||
"@angular/cli": "8.0.2",
|
||||
"@angular/compiler": "^8.1.0-next.1",
|
||||
"@angular/compiler-cli": "^8.1.0-next.1",
|
||||
"@angular/language-service": "^8.1.0-next.1",
|
||||
@ -109,13 +106,13 @@
|
||||
"archiver": "^1.3.0",
|
||||
"canonical-path": "1.0.0",
|
||||
"chalk": "^2.1.0",
|
||||
"chrome-launcher": "^0.10.7",
|
||||
"chrome-launcher": "^0.10.5",
|
||||
"cjson": "^0.5.0",
|
||||
"codelyzer": "^5.0.0",
|
||||
"cross-spawn": "^5.1.0",
|
||||
"css-selector-parser": "^1.3.0",
|
||||
"dgeni": "^0.4.11",
|
||||
"dgeni-packages": "^0.27.5",
|
||||
"dgeni-packages": "^0.27.1",
|
||||
"entities": "^1.1.1",
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-plugin-jasmine": "^2.2.0",
|
||||
@ -126,6 +123,7 @@
|
||||
"hast-util-is-element": "^1.0.0",
|
||||
"hast-util-to-string": "^1.0.0",
|
||||
"html": "^1.0.0",
|
||||
"http-server": "^0.11.1",
|
||||
"ignore": "^3.3.3",
|
||||
"image-size": "^0.5.1",
|
||||
"jasmine": "^2.6.0",
|
||||
@ -142,8 +140,7 @@
|
||||
"karma-coverage-istanbul-reporter": "^1.3.0",
|
||||
"karma-jasmine": "^1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"light-server": "^2.6.2",
|
||||
"lighthouse": "^5.1.0",
|
||||
"lighthouse": "^4.3.0",
|
||||
"lighthouse-logger": "^1.2.0",
|
||||
"lodash": "^4.17.4",
|
||||
"lunr": "^2.1.0",
|
||||
|
@ -2,36 +2,36 @@
|
||||
"aio": {
|
||||
"master": {
|
||||
"uncompressed": {
|
||||
"runtime-es5": 3042,
|
||||
"runtime-es2015": 3048,
|
||||
"main-es5": 511036,
|
||||
"main-es2015": 450486,
|
||||
"polyfills-es5": 130136,
|
||||
"polyfills-es2015": 52931
|
||||
"runtime-es5": 3005,
|
||||
"runtime-es2015": 3011,
|
||||
"main-es5": 511054,
|
||||
"main-es2015": 450560,
|
||||
"polyfills-es5": 129161,
|
||||
"polyfills-es2015": 53295
|
||||
}
|
||||
}
|
||||
},
|
||||
"aio-local": {
|
||||
"master": {
|
||||
"uncompressed": {
|
||||
"runtime-es5": 3042,
|
||||
"runtime-es2015": 3048,
|
||||
"main-es5": 511036,
|
||||
"main-es2015": 450486,
|
||||
"polyfills-es5": 130136,
|
||||
"polyfills-es2015": 52931
|
||||
"runtime-es5": 3005,
|
||||
"runtime-es2015": 3011,
|
||||
"main-es5": 511054,
|
||||
"main-es2015": 450560,
|
||||
"polyfills-es5": 129161,
|
||||
"polyfills-es2015": 53295
|
||||
}
|
||||
}
|
||||
},
|
||||
"aio-local-ivy": {
|
||||
"master": {
|
||||
"uncompressed": {
|
||||
"runtime-es5": 2932,
|
||||
"runtime-es2015": 2938,
|
||||
"main-es5": 565073,
|
||||
"main-es2015": 583108,
|
||||
"polyfills-es5": 130136,
|
||||
"polyfills-es2015": 52931
|
||||
"runtime-es5": 2895,
|
||||
"runtime-es2015": 2901,
|
||||
"main-es5": 564586,
|
||||
"main-es2015": 582731,
|
||||
"polyfills-es5": 129161,
|
||||
"polyfills-es2015": 53295
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,179 +0,0 @@
|
||||
#!/bin/env node
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Usage:
|
||||
* ```sh
|
||||
* node scripts/audit-web-app <url> <min-scores> [<log-file>]
|
||||
* ```
|
||||
*
|
||||
* Runs audits against the specified URL on specific categories (accessibility, best practices, performance, PWA, SEO).
|
||||
* It fails, if the score in any category is below the score specified in `<min-scores>`. (Only runs audits for the
|
||||
* specified categories.)
|
||||
*
|
||||
* `<min-scores>` is either a number (in which case it is interpreted as `all:<min-score>`) or a list of comma-separated
|
||||
* strings of the form `key:value`, where `key` is one of `accessibility`, `best-practices`, `performance`, `pwa`, `seo`
|
||||
* or `all` and `value` is a number (between 0 and 100).
|
||||
*
|
||||
* Examples:
|
||||
* - `95` _(Same as `all:95`.)_
|
||||
* - `all:95` _(Run audits for all categories and require a score of 95 or higher.)_
|
||||
* - `all:95,pwa:100` _(Same as `all:95`, except that a scope of 100 is required for the `pwa` category.)_
|
||||
* - `performance:90` _(Only run audits for the `performance` category and require a score of 90 or higher.)_
|
||||
*
|
||||
* If `<log-file>` is defined, the full results will be logged there.
|
||||
*
|
||||
* (Skips HTTPS-related audits, when run for an HTTP URL.)
|
||||
*/
|
||||
|
||||
// Imports
|
||||
const chromeLauncher = require('chrome-launcher');
|
||||
const lighthouse = require('lighthouse');
|
||||
const printer = require('lighthouse/lighthouse-cli/printer');
|
||||
const logger = require('lighthouse-logger');
|
||||
|
||||
// Constants
|
||||
const AUDIT_CATEGORIES = ['accessibility', 'best-practices', 'performance', 'pwa', 'seo'];
|
||||
const CHROME_LAUNCH_OPTS = {chromeFlags: ['--headless']};
|
||||
const LIGHTHOUSE_FLAGS = {logLevel: process.env.CI ? 'error' : 'info'}; // Be less verbose on CI.
|
||||
const SKIPPED_HTTPS_AUDITS = ['redirects-http', 'uses-http2'];
|
||||
const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer';
|
||||
const WAIT_FOR_SW_DELAY = 5000;
|
||||
|
||||
// Run
|
||||
_main(process.argv.slice(2));
|
||||
|
||||
// Functions - Definitions
|
||||
async function _main(args) {
|
||||
const {url, minScores, logFile} = parseInput(args);
|
||||
const isOnHttp = /^http:/.test(url);
|
||||
const lhFlags = {...LIGHTHOUSE_FLAGS, onlyCategories: Object.keys(minScores).sort()};
|
||||
const lhConfig = {
|
||||
extends: 'lighthouse:default',
|
||||
// Since the Angular ServiceWorker waits for the app to stabilize before registering,
|
||||
// wait a few seconds after load to allow Lighthouse to reliably detect it.
|
||||
passes: [{passName: 'defaultPass', pauseAfterLoadMs: WAIT_FOR_SW_DELAY}],
|
||||
};
|
||||
|
||||
console.log(`Running web-app audits for '${url}'...`);
|
||||
console.log(` Audit categories: ${lhFlags.onlyCategories.join(', ')}`);
|
||||
|
||||
// If testing on HTTP, skip HTTPS-specific tests.
|
||||
// (Note: Browsers special-case localhost and run ServiceWorker even on HTTP.)
|
||||
if (isOnHttp) skipHttpsAudits(lhConfig);
|
||||
|
||||
logger.setLevel(lhFlags.logLevel);
|
||||
|
||||
try {
|
||||
console.log('');
|
||||
const startTime = Date.now();
|
||||
const results = await launchChromeAndRunLighthouse(url, lhFlags, lhConfig);
|
||||
const success = await processResults(results, minScores, logFile);
|
||||
console.log(`\n(Completed in ${((Date.now() - startTime) / 1000).toFixed(1)}s.)\n`);
|
||||
|
||||
if (!success) {
|
||||
throw new Error('One or more scores are too low.');
|
||||
}
|
||||
} catch (err) {
|
||||
onError(err);
|
||||
}
|
||||
}
|
||||
|
||||
function formatScore(score) {
|
||||
return `${(score * 100).toFixed(0).padStart(3)}`;
|
||||
}
|
||||
|
||||
async function launchChromeAndRunLighthouse(url, flags, config) {
|
||||
const chrome = await chromeLauncher.launch(CHROME_LAUNCH_OPTS);
|
||||
flags.port = chrome.port;
|
||||
|
||||
try {
|
||||
return await lighthouse(url, flags, config);
|
||||
} finally {
|
||||
await chrome.kill();
|
||||
}
|
||||
}
|
||||
|
||||
function onError(err) {
|
||||
console.error(err);
|
||||
console.error('');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
function parseInput(args) {
|
||||
const [url, minScoresRaw, logFile] = args;
|
||||
|
||||
if (!url) {
|
||||
onError('Invalid arguments: <url> not specified.');
|
||||
} else if (!minScoresRaw) {
|
||||
onError('Invalid arguments: <min-scores> not specified.');
|
||||
}
|
||||
|
||||
const minScores = parseMinScores(minScoresRaw || '');
|
||||
const unknownCategories = Object.keys(minScores).filter(cat => !AUDIT_CATEGORIES.includes(cat));
|
||||
const allValuesValid = Object.values(minScores).every(x => (0 <= x) && (x <= 1));
|
||||
|
||||
if (unknownCategories.length > 0) {
|
||||
onError(`Invalid arguments: <min-scores> contains unknown category(-ies): ${unknownCategories.join(', ')}`);
|
||||
} else if (!allValuesValid) {
|
||||
onError(`Invalid arguments: <min-scores> has non-numeric or out-of-range values: ${minScoresRaw}`);
|
||||
}
|
||||
|
||||
return {url, minScores, logFile};
|
||||
}
|
||||
|
||||
function parseMinScores(raw) {
|
||||
const minScores = {};
|
||||
|
||||
if (/^\d+$/.test(raw)) {
|
||||
raw = `all:${raw}`;
|
||||
}
|
||||
|
||||
raw.
|
||||
split(',').
|
||||
map(x => x.split(':')).
|
||||
forEach(([key, val]) => minScores[key] = Number(val) / 100);
|
||||
|
||||
if (minScores.hasOwnProperty('all')) {
|
||||
AUDIT_CATEGORIES.forEach(cat => minScores.hasOwnProperty(cat) || (minScores[cat] = minScores.all));
|
||||
delete minScores.all;
|
||||
}
|
||||
|
||||
return minScores;
|
||||
}
|
||||
|
||||
async function processResults(results, minScores, logFile) {
|
||||
const lhVersion = results.lhr.lighthouseVersion;
|
||||
const categories = results.lhr.categories;
|
||||
const report = results.report;
|
||||
|
||||
if (logFile) {
|
||||
console.log(`\nSaving results in '${logFile}'...`);
|
||||
console.log(` LightHouse viewer: ${VIEWER_URL}`);
|
||||
|
||||
await printer.write(report, printer.OutputMode.json, logFile);
|
||||
}
|
||||
|
||||
console.log(`\nLighthouse version: ${lhVersion}`);
|
||||
console.log('\nAudit results:');
|
||||
|
||||
const maxTitleLen = Math.max(...Object.values(categories).map(({title}) => title.length));
|
||||
const success = Object.keys(categories).sort().reduce((aggr, cat) => {
|
||||
const {title, score} = categories[cat];
|
||||
const paddedTitle = `${title}:`.padEnd(maxTitleLen + 1);
|
||||
const minScore = minScores[cat];
|
||||
const passed = !isNaN(score) && (score >= minScore);
|
||||
|
||||
console.log(
|
||||
` - ${paddedTitle} ${formatScore(score)} (Required: ${formatScore(minScore)}) ${passed ? 'OK' : 'FAILED'}`);
|
||||
|
||||
return aggr && passed;
|
||||
}, true);
|
||||
|
||||
return success;
|
||||
}
|
||||
|
||||
function skipHttpsAudits(config) {
|
||||
console.log(` Skipping HTTPS-related audits: ${SKIPPED_HTTPS_AUDITS.join(', ')}`);
|
||||
config.settings = {...config.settings, skipAudits: SKIPPED_HTTPS_AUDITS};
|
||||
}
|
@ -1,38 +0,0 @@
|
||||
#!/bin/env node
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Usage:
|
||||
* ```sh
|
||||
* node scripts/test-aio-a11y <origin>
|
||||
* ```
|
||||
*
|
||||
* Runs accessibility audits on several (pre-defined) pages on the specified origin. It fails, if
|
||||
* the score for any page is below the minimum (see `MIN_SCORES_PER_PAGE` below).
|
||||
*
|
||||
* `<origin>` is the origin (scheme + hostname + port) of an angular.io deployment. It can be remote
|
||||
* (e.g. `https://next.angular.io`) or local (e.g. `http://localhost:4200`).
|
||||
*/
|
||||
|
||||
// Imports
|
||||
const sh = require('shelljs');
|
||||
sh.set('-e');
|
||||
|
||||
// Constants
|
||||
const MIN_SCORES_PER_PAGE = {
|
||||
'': 100,
|
||||
'api': 100,
|
||||
'api/core/Directive': 90,
|
||||
'cli': 91,
|
||||
'cli/add': 91,
|
||||
'docs': 100,
|
||||
'guide/docs-style-guide': 88,
|
||||
'start': 90,
|
||||
};
|
||||
|
||||
// Run
|
||||
const auditWebAppCmd = `"${process.execPath}" "${__dirname}/audit-web-app"`;
|
||||
const origin = process.argv[2];
|
||||
for (const [page, minScore] of Object.entries(MIN_SCORES_PER_PAGE)) {
|
||||
sh.exec(`${auditWebAppCmd} ${origin}/${page} accessibility:${minScore}`);
|
||||
}
|
@ -25,8 +25,5 @@ set +x -eu -o pipefail
|
||||
# Run PWA-score tests.
|
||||
yarn test-pwa-score "$targetUrl" "$minPwaScore"
|
||||
|
||||
# Run a11y tests.
|
||||
yarn test-a11y-score "$targetUrl"
|
||||
|
||||
echo -e "\nAll checks passed!"
|
||||
)
|
||||
|
135
aio/scripts/test-pwa-score.js
Normal file
135
aio/scripts/test-pwa-score.js
Normal file
@ -0,0 +1,135 @@
|
||||
#!/bin/env node
|
||||
|
||||
/**
|
||||
* Usage:
|
||||
* ```sh
|
||||
* node scripts/test-pwa-score <url> <min-score> [<log-file>]
|
||||
* ```
|
||||
*
|
||||
* Fails if the score is below `<min-score>`.
|
||||
* If `<log-file>` is defined, the full results will be logged there.
|
||||
*
|
||||
* (Skips HTTPS-related audits, when run for HTTP URL.)
|
||||
*/
|
||||
|
||||
// Imports
|
||||
const chromeLauncher = require('chrome-launcher');
|
||||
const lighthouse = require('lighthouse');
|
||||
const printer = require('lighthouse/lighthouse-cli/printer');
|
||||
const logger = require('lighthouse-logger');
|
||||
|
||||
// Constants
|
||||
const CHROME_LAUNCH_OPTS = {};
|
||||
const LIGHTHOUSE_FLAGS = {logLevel: 'info'};
|
||||
const SKIPPED_HTTPS_AUDITS = ['redirects-http'];
|
||||
const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/';
|
||||
const WAIT_FOR_SW_DELAY = 5000;
|
||||
|
||||
// Be less verbose on CI.
|
||||
if (process.env.CI) {
|
||||
LIGHTHOUSE_FLAGS.logLevel = 'error';
|
||||
}
|
||||
|
||||
// Run
|
||||
_main(process.argv.slice(2));
|
||||
|
||||
// Functions - Definitions
|
||||
async function _main(args) {
|
||||
const {url, minScore, logFile} = parseInput(args);
|
||||
const isOnHttp = /^http:/.test(url);
|
||||
const config = {
|
||||
extends: 'lighthouse:default',
|
||||
// Since the Angular ServiceWorker waits for the app to stabilize before registering,
|
||||
// wait a few seconds after load to allow Lighthouse to reliably detect it.
|
||||
passes: [{passName: 'defaultPass', pauseAfterLoadMs: WAIT_FOR_SW_DELAY}],
|
||||
}
|
||||
|
||||
console.log(`Running PWA audit for '${url}'...`);
|
||||
|
||||
// If testing on HTTP, skip HTTPS-specific tests.
|
||||
// (Note: Browsers special-case localhost and run ServiceWorker even on HTTP.)
|
||||
if (isOnHttp) skipHttpsAudits(config);
|
||||
|
||||
logger.setLevel(LIGHTHOUSE_FLAGS.logLevel);
|
||||
|
||||
try {
|
||||
const results = await launchChromeAndRunLighthouse(url, LIGHTHOUSE_FLAGS, config);
|
||||
const score = await processResults(results, logFile);
|
||||
evaluateScore(minScore, score);
|
||||
} catch (err) {
|
||||
onError(err);
|
||||
}
|
||||
}
|
||||
|
||||
function evaluateScore(expectedScore, actualScore) {
|
||||
console.log('\nLighthouse PWA score:');
|
||||
console.log(` - Expected: ${expectedScore.toFixed(0).padStart(3)} / 100 (or higher)`);
|
||||
console.log(` - Actual: ${actualScore.toFixed(0).padStart(3)} / 100\n`);
|
||||
|
||||
if (isNaN(actualScore) || (actualScore < expectedScore)) {
|
||||
throw new Error(`PWA score is too low. (${actualScore} < ${expectedScore})`);
|
||||
}
|
||||
}
|
||||
|
||||
async function launchChromeAndRunLighthouse(url, flags, config) {
|
||||
const chrome = await chromeLauncher.launch(CHROME_LAUNCH_OPTS);
|
||||
flags.port = chrome.port;
|
||||
|
||||
try {
|
||||
return await lighthouse(url, flags, config);
|
||||
} finally {
|
||||
await chrome.kill();
|
||||
}
|
||||
}
|
||||
|
||||
function onError(err) {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
function parseInput(args) {
|
||||
const url = args[0];
|
||||
const minScore = Number(args[1]);
|
||||
const logFile = args[2];
|
||||
|
||||
if (!url) {
|
||||
onError('Invalid arguments: <URL> not specified.');
|
||||
} else if (isNaN(minScore)) {
|
||||
onError('Invalid arguments: <MIN_SCORE> not specified or not a number.');
|
||||
}
|
||||
|
||||
return {url, minScore, logFile};
|
||||
}
|
||||
|
||||
async function processResults(results, logFile) {
|
||||
const lhVersion = results.lhr.lighthouseVersion;
|
||||
const categories = results.lhr.categories;
|
||||
const report = results.report;
|
||||
|
||||
if (logFile) {
|
||||
console.log(`\nSaving results in '${logFile}'...`);
|
||||
console.log(`(LightHouse viewer: ${VIEWER_URL})`);
|
||||
|
||||
await printer.write(report, printer.OutputMode.json, logFile);
|
||||
}
|
||||
|
||||
const categoryData = Object.keys(categories).map(name => categories[name]);
|
||||
const maxTitleLen = Math.max(...categoryData.map(({title}) => title.length));
|
||||
|
||||
console.log(`\nLighthouse version: ${lhVersion}`);
|
||||
|
||||
console.log('\nAudit scores:');
|
||||
categoryData.forEach(({title, score}) => {
|
||||
const paddedTitle = `${title}:`.padEnd(maxTitleLen + 1);
|
||||
const paddedScore = (score * 100).toFixed(0).padStart(3);
|
||||
console.log(` - ${paddedTitle} ${paddedScore} / 100`);
|
||||
});
|
||||
|
||||
return categories.pwa.score * 100;
|
||||
}
|
||||
|
||||
function skipHttpsAudits(config) {
|
||||
console.info(`Skipping HTTPS-related audits (${SKIPPED_HTTPS_AUDITS.join(', ')})...`);
|
||||
const settings = config.settings || (config.settings = {});
|
||||
settings.skipAudits = SKIPPED_HTTPS_AUDITS;
|
||||
}
|
@ -15,7 +15,7 @@
|
||||
</aio-select>
|
||||
|
||||
<div class="form-search">
|
||||
<input #filter placeholder="Filter" (input)="setQuery($event.target.value)" aria-label="Filter Search">
|
||||
<input #filter placeholder="Filter" (input)="setQuery($event.target.value)">
|
||||
<i class="material-icons">search</i>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -4,9 +4,9 @@ import { VersionInfo } from 'app/navigation/navigation.service';
|
||||
@Component({
|
||||
selector: 'aio-mode-banner',
|
||||
template: `
|
||||
<div *ngIf="mode == 'archive'" class="mode-banner alert archive-warning">
|
||||
<p>This is the <strong>archived documentation for Angular v{{version?.major}}.</strong>
|
||||
Please visit <a href="https://angular.io/">angular.io</a> to see documentation for the current version of Angular.</p>
|
||||
<div *ngIf="mode == 'archive'" class="mode-banner">
|
||||
This is the <strong>archived documentation for Angular v{{version?.major}}.</strong>
|
||||
Please visit <a href="https://angular.io/">angular.io</a> to see documentation for the current version of Angular.
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
@ -1,21 +1,21 @@
|
||||
<div *ngIf="!node.children">
|
||||
<a href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
|
||||
class="vertical-menu-item">
|
||||
<span>{{node.title}}</span>
|
||||
{{node.title}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div *ngIf="node.children">
|
||||
<a *ngIf="node.url != null" href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
|
||||
(click)="headerClicked()" class="vertical-menu-item heading">
|
||||
<span>{{node.title}}</span>
|
||||
{{node.title}}
|
||||
<mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
|
||||
</a>
|
||||
|
||||
<button *ngIf="node.url == null" type="button" [ngClass]="classes" title="{{node.tooltip}}"
|
||||
(click)="headerClicked()" class="vertical-menu-item heading"
|
||||
[attr.aria-pressed]="isExpanded">
|
||||
<span>{{node.title}}</span>
|
||||
{{node.title}}
|
||||
<mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
|
||||
</button>
|
||||
|
||||
|
@ -51,8 +51,6 @@ describe('ScrollService', () => {
|
||||
spyOn(window, 'scrollBy');
|
||||
});
|
||||
|
||||
afterEach(() => scrollService.ngOnDestroy());
|
||||
|
||||
it('should debounce `updateScrollPositonInHistory()`', fakeAsync(() => {
|
||||
const updateScrollPositionInHistorySpy = spyOn(scrollService, 'updateScrollPositionInHistory');
|
||||
|
||||
@ -67,25 +65,6 @@ describe('ScrollService', () => {
|
||||
expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(1);
|
||||
}));
|
||||
|
||||
it('should stop updating scroll position once destroyed', fakeAsync(() => {
|
||||
const updateScrollPositionInHistorySpy = spyOn(scrollService, 'updateScrollPositionInHistory');
|
||||
|
||||
window.dispatchEvent(new Event('scroll'));
|
||||
tick(250);
|
||||
expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(1);
|
||||
|
||||
window.dispatchEvent(new Event('scroll'));
|
||||
tick(250);
|
||||
expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(2);
|
||||
|
||||
updateScrollPositionInHistorySpy.calls.reset();
|
||||
scrollService.ngOnDestroy();
|
||||
|
||||
window.dispatchEvent(new Event('scroll'));
|
||||
tick(250);
|
||||
expect(updateScrollPositionInHistorySpy).not.toHaveBeenCalled();
|
||||
}));
|
||||
|
||||
it('should set `scrollRestoration` to `manual` if supported', () => {
|
||||
if (scrollService.supportManualScrollRestoration) {
|
||||
expect(window.history.scrollRestoration).toBe('manual');
|
||||
@ -133,23 +112,6 @@ describe('ScrollService', () => {
|
||||
expect(scrollService.topOffset).toBe(100 + topMargin);
|
||||
expect(document.querySelector).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should stop updating on resize once destroyed', () => {
|
||||
let clientHeight = 50;
|
||||
(document.querySelector as jasmine.Spy).and.callFake(() => ({clientHeight}));
|
||||
|
||||
expect(scrollService.topOffset).toBe(50 + topMargin);
|
||||
|
||||
clientHeight = 100;
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
expect(scrollService.topOffset).toBe(100 + topMargin);
|
||||
|
||||
scrollService.ngOnDestroy();
|
||||
|
||||
clientHeight = 200;
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
expect(scrollService.topOffset).toBe(100 + topMargin);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#topOfPageElement', () => {
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { DOCUMENT, Location, PlatformLocation, PopStateEvent, ViewportScroller } from '@angular/common';
|
||||
import { Injectable, Inject, OnDestroy } from '@angular/core';
|
||||
import { fromEvent, Subject } from 'rxjs';
|
||||
import { debounceTime, takeUntil } from 'rxjs/operators';
|
||||
import { Injectable, Inject } from '@angular/core';
|
||||
import { fromEvent } from 'rxjs';
|
||||
import { debounceTime } from 'rxjs/operators';
|
||||
|
||||
type ScrollPosition = [number, number];
|
||||
interface ScrollPositionPopStateEvent extends PopStateEvent {
|
||||
@ -14,11 +14,10 @@ export const topMargin = 16;
|
||||
* A service that scrolls document elements into view
|
||||
*/
|
||||
@Injectable()
|
||||
export class ScrollService implements OnDestroy {
|
||||
export class ScrollService {
|
||||
|
||||
private _topOffset: number | null;
|
||||
private _topOfPageElement: Element;
|
||||
private onDestroy = new Subject<void>();
|
||||
|
||||
// The scroll position which has to be restored, after a `popstate` event.
|
||||
poppedStateScrollPosition: ScrollPosition | null = null;
|
||||
@ -50,13 +49,10 @@ export class ScrollService implements OnDestroy {
|
||||
private viewportScroller: ViewportScroller,
|
||||
private location: Location) {
|
||||
// On resize, the toolbar might change height, so "invalidate" the top offset.
|
||||
fromEvent(window, 'resize')
|
||||
.pipe(takeUntil(this.onDestroy))
|
||||
.subscribe(() => this._topOffset = null);
|
||||
fromEvent(window, 'resize').subscribe(() => this._topOffset = null);
|
||||
|
||||
fromEvent(window, 'scroll')
|
||||
.pipe(debounceTime(250), takeUntil(this.onDestroy))
|
||||
.subscribe(() => this.updateScrollPositionInHistory());
|
||||
.pipe(debounceTime(250)).subscribe(() => this.updateScrollPositionInHistory());
|
||||
|
||||
// Change scroll restoration strategy to `manual` if it's supported
|
||||
if (this.supportManualScrollRestoration) {
|
||||
@ -79,10 +75,6 @@ export class ScrollService implements OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.onDestroy.next();
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to the element with id extracted from the current location hash fragment.
|
||||
* Scroll to top if no hash.
|
||||
|
@ -26,5 +26,5 @@
|
||||
</ng-template>
|
||||
|
||||
<ng-template #notFound>
|
||||
<p class="not-found">{{notFoundMessage}}</p>
|
||||
<p>{{notFoundMessage}}</p>
|
||||
</ng-template>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<div class="form-select-menu">
|
||||
<button class="form-select-button" (click)="toggleOptions()" [disabled]="disabled">
|
||||
<span><strong>{{label}}</strong></span><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span><span>{{selected?.title}}</span>
|
||||
<strong>{{label}}</strong><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span>{{selected?.title}}
|
||||
</button>
|
||||
<ul class="form-select-dropdown" *ngIf="showOptions">
|
||||
<li *ngFor="let option of options; index as i"
|
||||
@ -10,7 +10,7 @@
|
||||
(click)="select(option, i)"
|
||||
(keydown.enter)="select(option, i)"
|
||||
(keydown.space)="select(option, i); $event.preventDefault()">
|
||||
<span *ngIf="showSymbol" class="symbol {{option.value}}"></span><span>{{option.title}}</span>
|
||||
<span *ngIf="showSymbol" class="symbol {{option.value}}"></span>{{option.title}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -41,11 +41,13 @@ describe('SelectComponent', () => {
|
||||
expect(getButton().textContent!.trim()).toEqual('Label:');
|
||||
});
|
||||
|
||||
it('should contain a symbol if hasSymbol is true', () => {
|
||||
expect(getButtonSymbol()).toEqual(null);
|
||||
it('should contain a symbol `<span>` if hasSymbol is true', () => {
|
||||
expect(getButton().querySelector('span')).toEqual(null);
|
||||
host.showSymbol = true;
|
||||
fixture.detectChanges();
|
||||
expect(getButtonSymbol()).not.toEqual(null);
|
||||
const span = getButton().querySelector('span');
|
||||
expect(span).not.toEqual(null);
|
||||
expect(span!.className).toContain('symbol');
|
||||
});
|
||||
|
||||
it('should display the selected option, if there is one', () => {
|
||||
@ -53,7 +55,7 @@ describe('SelectComponent', () => {
|
||||
host.selected = options[0];
|
||||
fixture.detectChanges();
|
||||
expect(getButton().textContent).toContain(options[0].title);
|
||||
expect(getButtonSymbol()!.className).toContain(options[0].value);
|
||||
expect(getButton().querySelector('span')!.className).toContain(options[0].value);
|
||||
});
|
||||
|
||||
it('should toggle the visibility of the options list when clicked', () => {
|
||||
@ -108,7 +110,7 @@ describe('SelectComponent', () => {
|
||||
fixture.detectChanges();
|
||||
expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
|
||||
expect(getButton().textContent).toContain(options[0].title);
|
||||
expect(getButtonSymbol()!.className).toContain(options[0].value);
|
||||
expect(getButton().querySelector('span')!.className).toContain(options[0].value);
|
||||
});
|
||||
|
||||
it('should select the current option when enter is pressed', () => {
|
||||
@ -117,7 +119,7 @@ describe('SelectComponent', () => {
|
||||
fixture.detectChanges();
|
||||
expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
|
||||
expect(getButton().textContent).toContain(options[0].title);
|
||||
expect(getButtonSymbol()!.className).toContain(options[0].value);
|
||||
expect(getButton().querySelector('span')!.className).toContain(options[0].value);
|
||||
});
|
||||
|
||||
it('should select the current option when space is pressed', () => {
|
||||
@ -126,7 +128,7 @@ describe('SelectComponent', () => {
|
||||
fixture.detectChanges();
|
||||
expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
|
||||
expect(getButton().textContent).toContain(options[0].title);
|
||||
expect(getButtonSymbol()!.className).toContain(options[0].value);
|
||||
expect(getButton().querySelector('span')!.className).toContain(options[0].value);
|
||||
});
|
||||
|
||||
it('should hide when an option is clicked', () => {
|
||||
@ -175,10 +177,6 @@ function getButton(): HTMLButtonElement {
|
||||
return element.query(By.css('button')).nativeElement;
|
||||
}
|
||||
|
||||
function getButtonSymbol(): HTMLElement | null {
|
||||
return getButton().querySelector('.symbol');
|
||||
}
|
||||
|
||||
function getOptionContainer(): HTMLUListElement|null {
|
||||
const de = element.query(By.css('ul'));
|
||||
return de && de.nativeElement;
|
||||
|
@ -1,12 +1,8 @@
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $main-font;
|
||||
margin: 0;
|
||||
color: $darkgray;
|
||||
@include font-size(14);
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@ -16,9 +12,9 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(24);
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@ -27,37 +23,37 @@ h1 {
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font-size(22);
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin: 32px 0px 24px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font-size(20);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
margin: 24px 0px 12px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include font-size(18);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include font-size(16);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include font-size(16);
|
||||
font-weight: 500;
|
||||
color: $mediumgray;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
@ -87,13 +83,13 @@ ol,
|
||||
li,
|
||||
input,
|
||||
a {
|
||||
@include font-size(14);
|
||||
@include line-height(24);
|
||||
@include letter-spacing(0.3);
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.3px;
|
||||
font-weight: 400;
|
||||
color: $darkgray;
|
||||
& > em {
|
||||
@include letter-spacing(0.3);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -133,7 +129,7 @@ a {
|
||||
}
|
||||
|
||||
.app-toolbar a {
|
||||
@include font-size(16);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
font-family: $main-font;
|
||||
@ -161,7 +157,7 @@ table tbody th {
|
||||
td {
|
||||
font-weight: 400;
|
||||
padding: 8px 30px;
|
||||
@include letter-spacing(0.3);
|
||||
letter-spacing: 0.3px;
|
||||
|
||||
> p,
|
||||
ul {
|
||||
@ -175,7 +171,7 @@ td {
|
||||
}
|
||||
|
||||
th {
|
||||
@include font-size(16);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 13px 32px;
|
||||
text-align: left;
|
||||
|
@ -1,6 +1,6 @@
|
||||
footer {
|
||||
position: relative;
|
||||
@include line-height(24);
|
||||
line-height: 24px;
|
||||
flex: 1;
|
||||
padding: 48px;
|
||||
z-index: 0;
|
||||
@ -37,7 +37,7 @@ footer {
|
||||
cursor: pointer;
|
||||
}
|
||||
h3 {
|
||||
@include font-size(16);
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
margin: 0 0 16px;
|
||||
@ -82,15 +82,23 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 700px) {
|
||||
h3 {
|
||||
font-size: 110%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
h3 {
|
||||
@include font-size(14);
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
|
@ -22,9 +22,9 @@
|
||||
|
||||
.hero-title {
|
||||
display: inline-block;
|
||||
@include font-size(28);
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
@include line-height(48);
|
||||
line-height: 48px;
|
||||
margin: 0 8px 0 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -76,8 +76,8 @@ section#intro {
|
||||
}
|
||||
|
||||
.hero-headline {
|
||||
@include font-size(40);
|
||||
@include line-height(64);
|
||||
font-size: 40px;
|
||||
line-height: 64px;
|
||||
font-weight: 500;
|
||||
margin: 32px 0;
|
||||
|
||||
@ -90,8 +90,8 @@ section#intro {
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
@include font-size(32);
|
||||
@include line-height(50);
|
||||
font-size: 32px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,7 +154,7 @@ section#intro {
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
min-width: 160px;
|
||||
@include font-size(16);
|
||||
font-size: 16px;
|
||||
color: $white;
|
||||
background-color: $blue;
|
||||
border-radius: 48px;
|
||||
@ -172,11 +172,11 @@ section#intro {
|
||||
right: 0;
|
||||
position: static;
|
||||
transition: all 0.3s ease-in;
|
||||
@include font-size(16);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font-size(16);
|
||||
font-size: 16px;
|
||||
margin: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -246,10 +246,15 @@ section#intro {
|
||||
}
|
||||
|
||||
.button.hero-cta {
|
||||
padding: 2px 34px 0;
|
||||
@include font-size(18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 184px;
|
||||
height: 40px;
|
||||
padding: 0 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
@include line-height(40);
|
||||
line-height: 40px;
|
||||
background-color: $white;
|
||||
border-radius: 48px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
|
||||
@ -320,7 +325,7 @@ aio-shell {
|
||||
}
|
||||
|
||||
.text-headline {
|
||||
@include font-size(20);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: $blue;
|
||||
margin-top: 10px;
|
||||
@ -419,7 +424,7 @@ div[layout=row]{
|
||||
|
||||
.banner-headline {
|
||||
text-transform: uppercase;
|
||||
@include font-size(24);
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
color: $white;
|
||||
margin: 0;
|
||||
@ -427,7 +432,7 @@ div[layout=row]{
|
||||
-webkit-margin-after: 0;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@include font-size(18);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
@ -1,3 +1,7 @@
|
||||
#file-not-found {
|
||||
padding: 3rem 3rem 3rem;
|
||||
}
|
||||
|
||||
.nf-container {
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
@ -9,7 +13,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
h1 {
|
||||
@include font-size(48);
|
||||
font-size: 48px;
|
||||
color: $blue;
|
||||
text-transform: uppercase;
|
||||
margin: 8px 0;
|
||||
@ -18,6 +22,6 @@
|
||||
|
||||
.nf-icon.material-icons {
|
||||
color: $blue;
|
||||
@include font-size(100);
|
||||
font-size: 100px;
|
||||
position: static;
|
||||
}
|
||||
|
@ -6,10 +6,9 @@
|
||||
aio-nav-menu {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 260px;
|
||||
@include font-size(13);
|
||||
|
||||
font-size: 13px;
|
||||
ul, a {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -62,14 +61,14 @@ mat-sidenav-container div.mat-sidenav-content {
|
||||
box-sizing: border-box;
|
||||
color: $darkgray;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: block;
|
||||
max-width: 260px;
|
||||
overflow-wrap: break-word;
|
||||
padding: 8px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
width: 93%;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:hover {
|
||||
@ -82,33 +81,26 @@ mat-sidenav-container div.mat-sidenav-content {
|
||||
outline: $accentblue auto 2px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
&.level-2 {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
//icons _within_ nav
|
||||
.mat-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-menu-item.selected {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
button.vertical-menu-item {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding-top: 10px;
|
||||
margin-right: 0;
|
||||
padding-left: 6px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 10px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@ -118,73 +110,62 @@ button.vertical-menu-item {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.heading-children {
|
||||
&.expanded {
|
||||
.heading-children.expanded {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
padding-left: 0;
|
||||
max-height: 4000px; // Arbitrary max-height. Can increase if needed. Must have measurement to transition height.
|
||||
transition: visibility 500ms, opacity 500ms, max-height 500ms;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.heading-children.collapsed {
|
||||
overflow: hidden; // Needed to prevent unnecessary sidenav scrollbar.
|
||||
visibility: hidden;
|
||||
padding-left: 0;
|
||||
opacity: 0;
|
||||
max-height: 1px; // Must have measurement to transition height.
|
||||
transition: visibility 275ms, opacity 275ms, max-height 280ms;
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.no-animations {
|
||||
.heading-children.expanded,
|
||||
.heading-children.collapsed {
|
||||
.heading-children.expanded, .heading-children.collapsed {
|
||||
transition: none! important;
|
||||
}
|
||||
}
|
||||
|
||||
.level-1 {
|
||||
font-family: $main-font;
|
||||
@include font-size(14);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding-left: 20px;
|
||||
margin: 0;
|
||||
margin-left: 14px;
|
||||
transition: background-color 0.2s;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.expanded .mat-icon,
|
||||
.level-2.expanded .mat-icon {
|
||||
@include rotate(90deg);
|
||||
}
|
||||
|
||||
&:not(.expanded) .mat-icon,
|
||||
.level-2:not(.expanded) .mat-icon {
|
||||
@include rotate(0deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.level-2 {
|
||||
color: $mediumgray;
|
||||
font-family: $main-font;
|
||||
@include font-size(14);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
padding-left: 32px;
|
||||
margin-left: 12px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.level-3 {
|
||||
color: $mediumgray;
|
||||
font-family: $main-font;
|
||||
@include font-size(14);
|
||||
margin: 0;
|
||||
padding-left: 40px;
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
|
||||
@include rotate(90deg);
|
||||
}
|
||||
|
||||
.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
|
||||
@include rotate(0deg);
|
||||
}
|
||||
|
||||
aio-nav-menu.top-menu {
|
||||
@ -214,7 +195,7 @@ mat-sidenav .doc-version {
|
||||
|
||||
option {
|
||||
font-family: $main-font;
|
||||
@include font-size(14);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -192,11 +192,6 @@ aio-search-box.search-container {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@include placeholder {
|
||||
@include font-size(14);
|
||||
color: $mediumgray;
|
||||
}
|
||||
|
||||
@include bp(big) {
|
||||
transition: width 0.4s ease-in-out;
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
.alert {
|
||||
padding: 16px;
|
||||
margin: 24px 0px;
|
||||
@include font-size(14);
|
||||
font-size: 14px;
|
||||
color: $darkgray;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -38,26 +38,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.archive-warning {
|
||||
background-color: $darkred;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
* {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
margin: 8px 16px;
|
||||
}
|
||||
|
@ -15,17 +15,12 @@ aio-api-list {
|
||||
|
||||
.form-search input {
|
||||
width: 182px;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.api-list-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
padding-left: 0;
|
||||
|
||||
h2 {
|
||||
margin-top: 16px;
|
||||
@ -42,17 +37,8 @@ aio-api-list {
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
.form-select-menu,
|
||||
.form-search {
|
||||
.form-select-menu, .form-search {
|
||||
margin: 8px;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
aio-select:first-child .form-select-menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,17 +69,30 @@ aio-api-list {
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $white;
|
||||
border-radius: 4px;
|
||||
color: $darkgray;
|
||||
@include font-size(14);
|
||||
@include line-height(32);
|
||||
color: $blue-600;
|
||||
font-size: 16px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
outline: none;
|
||||
padding: 4px 16px 4px 32px;
|
||||
padding: 0 16px 0 32px;
|
||||
transition: all .2s;
|
||||
|
||||
@include placeholder {
|
||||
@include font-size(14);
|
||||
color: $mediumgray;
|
||||
// PLACEHOLDER TEXT
|
||||
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: $blue-grey-100;
|
||||
font-size: 14px;
|
||||
}
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
color: $blue-grey-100;
|
||||
font-size: 14px;
|
||||
}
|
||||
&:-ms-input-placeholder { /* IE 10+ */
|
||||
color: $blue-grey-100;
|
||||
font-size: 14px;
|
||||
}
|
||||
&:-moz-placeholder { /* Firefox 18- */
|
||||
color: $blue-grey-100;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@ -104,10 +103,10 @@ aio-api-list {
|
||||
|
||||
.material-icons {
|
||||
color: $blue-grey-100;
|
||||
@include font-size(20);
|
||||
font-size: 20px;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
top: 6px;
|
||||
z-index: $layer-1;
|
||||
}
|
||||
}
|
||||
@ -121,9 +120,9 @@ aio-api-list {
|
||||
box-shadow: 0 1px 2px rgba($black, .24);
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
@include font-size(10);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
@include line-height(16);
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
|
||||
@ -148,10 +147,6 @@ aio-api-list {
|
||||
aio-select {
|
||||
width: 200px;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
margin-right: 8px;
|
||||
}
|
||||
@ -175,9 +170,9 @@ aio-api-list {
|
||||
}
|
||||
|
||||
li {
|
||||
@include font-size(14);
|
||||
font-size: 14px;
|
||||
margin: 8px 0;
|
||||
@include line-height(14);
|
||||
line-height: 14px;
|
||||
padding: 0;
|
||||
float: left;
|
||||
width: 33%;
|
||||
@ -189,11 +184,10 @@ aio-api-list {
|
||||
.symbol {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue-grey-600;
|
||||
display: inline-block;
|
||||
@include line-height(16);
|
||||
line-height: 16px;
|
||||
padding: 0 16px 0;
|
||||
text-decoration: none;
|
||||
transition: all .3s;
|
||||
@ -214,8 +208,8 @@ aio-api-list {
|
||||
|
||||
.docs-content .h2-api-docs,
|
||||
.docs-content .h2-api-docs:first-of-type {
|
||||
@include font-size(18);
|
||||
@include line-height(24);
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -236,6 +230,7 @@ aio-api-list {
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
&.selector {
|
||||
margin: 0;
|
||||
}
|
||||
@ -256,7 +251,7 @@ p {
|
||||
.row-margin {
|
||||
margin-bottom: 36px;
|
||||
h2 {
|
||||
@include line-height(28);
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -297,7 +292,7 @@ p {
|
||||
}
|
||||
|
||||
.api-doc-code {
|
||||
@include font-size(14);
|
||||
font-size: 14px;
|
||||
color: #1a2326;
|
||||
|
||||
// the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
|
||||
@ -319,11 +314,11 @@ p {
|
||||
}
|
||||
|
||||
.api-doc-code {
|
||||
@include font-size(12);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
p.location-badge {
|
||||
position: relative;
|
||||
@include font-size(11);
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user