mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Compare commits
108 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d9d70f0a6f | |||
| 520a1b5fe1 | |||
| 5e5851d315 | |||
| fcaeeff217 | |||
| 9662d6f3c8 | |||
| f1d01dfd1c | |||
| 52f1dd9aaa | |||
| a797f41d1b | |||
| ec1f6e3a5e | |||
| b958f4d38b | |||
| 5fecaad159 | |||
| a844249c7f | |||
| 9b7bc801f6 | |||
| 5a83c0c156 | |||
| 21ced23c7c | |||
| 79dd6a847a | |||
| f9891c0a47 | |||
| 52bd52477d | |||
| 2c2db2f349 | |||
| ea38aee82a | |||
| d39639d957 | |||
| e1bbe47c23 | |||
| dd6fc5785f | |||
| 8fdcb78c87 | |||
| 5e0ba01f7c | |||
| 89e9aebb6b | |||
| 8825d0d0f5 | |||
| a2e7b50b0e | |||
| 08b7242e4f | |||
| 9df0fdf93d | |||
| 89d9b98385 | |||
| 34605720d5 | |||
| 174f66952b | |||
| b90fbd9aba | |||
| 11d5c07d95 | |||
| 383f0dae17 | |||
| ca314961bf | |||
| 9148d62aae | |||
| 672409f9e5 | |||
| 00f293c35f | |||
| 5ae001829c | |||
| 6f443a9a8d | |||
| 70e7ac56c8 | |||
| 769a6f20f3 | |||
| 78ece3149e | |||
| 44b7a73efb | |||
| 945c900466 | |||
| 60b160f497 | |||
| 7316f9655c | |||
| 9488a3fd46 | |||
| d274afc1a3 | |||
| 297b8e14e4 | |||
| 1397721ed4 | |||
| 1bfde8c86c | |||
| 463e04ca22 | |||
| 1d3e96b7d9 | |||
| fd519b00dc | |||
| 67e205ba13 | |||
| e5c2271972 | |||
| 71360b3a3e | |||
| 5e1d8444ae | |||
| 934f260914 | |||
| 8b09c74f47 | |||
| e94f3874aa | |||
| 9ff5572b9f | |||
| 0a72df6037 | |||
| d2186e4f16 | |||
| 9c13901ee9 | |||
| 00bc813199 | |||
| c74af838b1 | |||
| 57de6284ad | |||
| e0552c0d29 | |||
| 5fa1111eeb | |||
| b6e31be059 | |||
| 737729f930 | |||
| 497f94eda0 | |||
| 633aeb0c5f | |||
| b42b682391 | |||
| 22c95a2194 | |||
| ffabe64242 | |||
| d9bed48eb5 | |||
| f48c0bc4e3 | |||
| fa3b7332a9 | |||
| b90f2b1d66 | |||
| a2bfb62afb | |||
| 8203b1f810 | |||
| f13ecd5fad | |||
| 7abb71609b | |||
| 6b1669f3bb | |||
| 57f9efe200 | |||
| 78837878c8 | |||
| ecbdb24694 | |||
| ffdc1304d6 | |||
| 381137905b | |||
| 59bc1a2439 | |||
| d8c41fd44c | |||
| dfb4d32d55 | |||
| 03e7952f4c | |||
| 3247a46485 | |||
| 3b2f119f57 | |||
| 7c7a4a273a | |||
| 8234738120 | |||
| 2d66e933c7 | |||
| d6f26a9d39 | |||
| 2738c7b00d | |||
| 7ca5cb4969 | |||
| 59e29fd6e6 | |||
| a66608a13c |
@@ -1,6 +1,10 @@
|
||||
# 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
|
||||
|
||||
# Do not attempt to de-flake locally.
|
||||
# On CI we might set this to `3` to run with deflaking.
|
||||
test --flaky_test_attempts=1
|
||||
|
||||
###############################
|
||||
# Filesystem interactions #
|
||||
###############################
|
||||
@@ -108,9 +112,10 @@ build:remote --define=EXECUTOR=remote
|
||||
# Set a higher timeout value, just in case.
|
||||
build:remote --remote_timeout=600
|
||||
|
||||
# Increase the default number of jobs by 50% because our build has lots of
|
||||
# parallelism
|
||||
build:remote --jobs=150
|
||||
# Bazel detects maximum number of jobs based on host resources.
|
||||
# Since we run remotely, we can increase this number significantly.
|
||||
common:remote --jobs=200
|
||||
|
||||
build:remote --google_default_credentials
|
||||
|
||||
# Limit the number of test jobs for on an AIO local deps build. The example tests running
|
||||
|
||||
@@ -6,7 +6,11 @@
|
||||
build --announce_rc
|
||||
|
||||
# Retry in the event of flakes, eg. https://circleci.com/gh/angular/angular/31309
|
||||
test --flaky_test_attempts=2
|
||||
# By default this is set in the project `.bazelrc` to `1`.
|
||||
test --flaky_test_attempts=3
|
||||
|
||||
# More details on failures
|
||||
build --verbose_failures=true
|
||||
|
||||
# CI supports colors but Bazel does not detect it.
|
||||
common --color=yes
|
||||
|
||||
@@ -22,7 +22,7 @@ jobs:
|
||||
(github.event.action == 'labeled' && github.event.label.name == 'aio: preview') ||
|
||||
(github.event.action == 'synchronize' && contains(github.event.pull_request.labels.*.name, 'aio: preview'))
|
||||
steps:
|
||||
- uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
|
||||
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
|
||||
- uses: ./.github/actions/yarn-install
|
||||
|
||||
- uses: angular/dev-infra/github-actions/setup-bazel-remote-exec@5f06c4774df908ed69e1441f4ec63b898acf0c68
|
||||
|
||||
@@ -25,7 +25,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
if: ${{ github.event.workflow_run.conclusion == 'success' }}
|
||||
steps:
|
||||
- uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3
|
||||
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3
|
||||
|
||||
- name: Configure Firebase deploy target
|
||||
working-directory: aio/
|
||||
|
||||
@@ -13,7 +13,7 @@ jobs:
|
||||
assistant_to_the_branch_manager:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
|
||||
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: angular/dev-infra/github-actions/branch-manager@5f06c4774df908ed69e1441f4ec63b898acf0c68
|
||||
|
||||
@@ -12,14 +12,14 @@ jobs:
|
||||
labels:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
|
||||
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
|
||||
- uses: angular/dev-infra/github-actions/commit-message-based-labels@5f06c4774df908ed69e1441f4ec63b898acf0c68
|
||||
with:
|
||||
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
|
||||
post_approval_changes:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
|
||||
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
|
||||
- uses: angular/dev-infra/github-actions/post-approval-changes@5f06c4774df908ed69e1441f4ec63b898acf0c68
|
||||
with:
|
||||
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
|
||||
|
||||
@@ -12,7 +12,7 @@ jobs:
|
||||
trigger:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
|
||||
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
|
||||
- uses: angular/dev-infra/github-actions/google-internal-tests@5f06c4774df908ed69e1441f4ec63b898acf0c68
|
||||
with:
|
||||
run-tests-guide-url: http://go/angular-g3sync-start
|
||||
|
||||
@@ -25,7 +25,7 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: 'Checkout code'
|
||||
uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
|
||||
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
|
||||
with:
|
||||
persist-credentials: false
|
||||
|
||||
@@ -47,6 +47,6 @@ jobs:
|
||||
|
||||
# Upload the results to GitHub's code scanning dashboard.
|
||||
- name: 'Upload to code-scanning'
|
||||
uses: github/codeql-action/upload-sarif@83f0fe6c4988d98a455712a27f0255212bba9bd4 # v2.3.6
|
||||
uses: github/codeql-action/upload-sarif@6c089f53dd51dc3fc7e599c3cb5356453a52ca9e # v2.20.0
|
||||
with:
|
||||
sarif_file: results.sarif
|
||||
|
||||
@@ -19,7 +19,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout the repository
|
||||
uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
|
||||
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
|
||||
with:
|
||||
# Setting `persist-credentials: false` prevents the github-action account from being the
|
||||
# account that is attempted to be used for authentication, instead the remote is set to
|
||||
|
||||
@@ -24,7 +24,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout the repository
|
||||
uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
|
||||
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
|
||||
with:
|
||||
# Setting `persist-credentials: false` prevents the github-action account from being the
|
||||
# account that is attempted to be used for authentication, instead the remote is set to
|
||||
|
||||
+2
-2
@@ -378,7 +378,6 @@ groups:
|
||||
contains_any_globs(files, [
|
||||
'packages/common/http/**/{*,.*}',
|
||||
'packages/examples/http/**/{*,.*}',
|
||||
'aio/content/guide/http.md',
|
||||
'aio/content/guide/understanding-communicating-with-http.md',
|
||||
'aio/content/guide/http-configure-http-url-parameters.md',
|
||||
'aio/content/guide/http-handle-request-errors.md',
|
||||
@@ -781,8 +780,9 @@ groups:
|
||||
])
|
||||
reviewers:
|
||||
users:
|
||||
- alxhub
|
||||
- devversion
|
||||
- josephperrott
|
||||
- pkozlowski-opensource
|
||||
|
||||
# =========================================================
|
||||
# Integration Tests
|
||||
|
||||
+56
-43
@@ -1,22 +1,69 @@
|
||||
<a name="16.1.0-next.3"></a>
|
||||
# 16.1.0-next.3 (2023-06-01)
|
||||
### animations
|
||||
<a name="16.1.3"></a>
|
||||
# 16.1.3 (2023-06-28)
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [bada9199f5](https://github.com/angular/angular/commit/bada9199f53cb631d065a961427a3a1a8d9762f1) | fix | Trigger leave animation when ViewContainerRef is injected ([#48705](https://github.com/angular/angular/pull/48705)) |
|
||||
| [dd6fc5785f](https://github.com/angular/angular/commit/dd6fc5785fcf10b88db8b87d726af604668bc143) | fix | expose input transform function on ComponentFactory and ComponentMirror ([#50713](https://github.com/angular/angular/pull/50713)) |
|
||||
### elements
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [e1bbe47c23](https://github.com/angular/angular/commit/e1bbe47c234a495766cc07a9741a194954a6b9b4) | fix | support input transform functions ([#50713](https://github.com/angular/angular/pull/50713)) |
|
||||
### platform-browser
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [79dd6a847a](https://github.com/angular/angular/commit/79dd6a847a742ccf69597b122026758ad2b0b629) | fix | wait until animation completion before destroying renderer ([#50677](https://github.com/angular/angular/pull/50677)) |
|
||||
| [a797f41d1b](https://github.com/angular/angular/commit/a797f41d1bcf11945673ef6d0474f33ad4614602) | fix | wait until animation completion before destroying renderer ([#50860](https://github.com/angular/angular/pull/50860)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="16.1.2"></a>
|
||||
# 16.1.2 (2023-06-21)
|
||||
### http
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [9488a3fd46](https://github.com/angular/angular/commit/9488a3fd4640b902243f441cf54776160da1a0fe) | fix | Send query params on fetch request ([#50740](https://github.com/angular/angular/pull/50740)) |
|
||||
| [5ae001829c](https://github.com/angular/angular/commit/5ae001829c3f3594e3c10f30e0b89ea1eb2b84fb) | fix | use serializeBody to support JSON payload in FetchBackend ([#50776](https://github.com/angular/angular/pull/50776)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="16.1.1"></a>
|
||||
# 16.1.1 (2023-06-14)
|
||||
### compiler-cli
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [71360b3a3e](https://github.com/angular/angular/commit/71360b3a3e7cb3419176c89f8c78ebd2e14ff880) | fix | libraries compiled with v16.1+ breaking with Angular framework v16.0.x ([#50715](https://github.com/angular/angular/pull/50715)) |
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [d9bed48eb5](https://github.com/angular/angular/commit/d9bed48eb590bc4a45769835bccc206d418f620c) | fix | extend toSignal to accept any Subscribable ([#50162](https://github.com/angular/angular/pull/50162)) |
|
||||
### migrations
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [5e1d8444ae](https://github.com/angular/angular/commit/5e1d8444ae2952b4e9e5d7089200e7a3ac700e0d) | fix | Prevent a component from importing itself. ([#50554](https://github.com/angular/angular/pull/50554)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="16.1.0"></a>
|
||||
# 16.1.0 (2023-06-13)
|
||||
### common
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [72b4ff4b9e](https://github.com/angular/angular/commit/72b4ff4b9ea8bd77ab74f9834727390c82acb28d) | fix | untrack subscription and unsubscription in async pipe ([#50522](https://github.com/angular/angular/pull/50522)) |
|
||||
| [f3867597f0](https://github.com/angular/angular/commit/f3867597f079794ae9c7ed8be3788c9cea5123a3) | feat | add component input binding support for NgComponentOutlet ([#49735](https://github.com/angular/angular/pull/49735)) |
|
||||
### compiler
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [4e663297c5](https://github.com/angular/angular/commit/4e663297c564078c8185c6a73e2baa844406a315) | fix | error when reading compiled input transforms metadata in JIT mode ([#50600](https://github.com/angular/angular/pull/50600)) |
|
||||
| [721bc72649](https://github.com/angular/angular/commit/721bc72649b7d73f730298e04a4606a8bfd53011) | fix | resolve deprecation warning with TypeScript 5.1 ([#50460](https://github.com/angular/angular/pull/50460)) |
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [68017d4e75](https://github.com/angular/angular/commit/68017d4e75abed78b378dce54f860cfa0d0fa42f) | feat | add ability to transform input values ([#50420](https://github.com/angular/angular/pull/50420)) |
|
||||
| [28c68f709c](https://github.com/angular/angular/commit/28c68f709cdc930e12bac51a266e7bf790656034) | fix | update `ApplicationRef.isStable` to account for rendering pending tasks ([#50425](https://github.com/angular/angular/pull/50425)) |
|
||||
| [69dadd2502](https://github.com/angular/angular/commit/69dadd25020ee84364466c0740f695984dd8c84d) | feat | support TypeScript 5.1 ([#50156](https://github.com/angular/angular/pull/50156)) |
|
||||
| [c0ebe34cbd](https://github.com/angular/angular/commit/c0ebe34cbd235dc0b5e56fbe37429b77c0d91170) | fix | add additional component metadata to component ID generation ([#50336](https://github.com/angular/angular/pull/50336)) |
|
||||
### http
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [85c5427582](https://github.com/angular/angular/commit/85c54275825a57fd3c7055a99e58bb211e085af9) | feat | Introduction of the `fetch` Backend for the `HttpClient` ([#50247](https://github.com/angular/angular/pull/50247)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
@@ -37,20 +84,6 @@
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="16.1.0-next.2"></a>
|
||||
# 16.1.0-next.2 (2023-05-24)
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [75fdbcb8f2](https://github.com/angular/angular/commit/75fdbcb8f285ef17b5a73fb820b983137e40cab7) | fix | fix `Self` flag inside embedded views with custom injectors ([#50270](https://github.com/angular/angular/pull/50270)) |
|
||||
| [8b44ba3170](https://github.com/angular/angular/commit/8b44ba31701a1c1cf1ec92d2a26f9cf657f5408b) | fix | host directives incorrectly validating aliased bindings ([#50364](https://github.com/angular/angular/pull/50364)) |
|
||||
### http
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [2cdb4c5911](https://github.com/angular/angular/commit/2cdb4c5911965aa273f11432e04502e52b5e1b9b) | fix | create macrotask during request handling instead of load start ([#50406](https://github.com/angular/angular/pull/50406)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="16.0.3"></a>
|
||||
# 16.0.3 (2023-05-24)
|
||||
### core
|
||||
@@ -66,17 +99,6 @@
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="16.1.0-next.1"></a>
|
||||
# 16.1.0-next.1 (2023-05-17)
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [c0ebe34cbd](https://github.com/angular/angular/commit/c0ebe34cbd235dc0b5e56fbe37429b77c0d91170) | fix | add additional component metadata to component ID generation ([#50336](https://github.com/angular/angular/pull/50336)) |
|
||||
| [03f1e240b3](https://github.com/angular/angular/commit/03f1e240b368c4c87fd8412605bf0eff9adc153d) | fix | allow onDestroy unregistration while destroying ([#50237](https://github.com/angular/angular/pull/50237)) |
|
||||
| [165b8b647c](https://github.com/angular/angular/commit/165b8b647c39503b9fefd00188948cdc522c2c10) | fix | allow passing value of any type to `isSignal` function ([#50035](https://github.com/angular/angular/pull/50035)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="16.0.2"></a>
|
||||
# 16.0.2 (2023-05-17)
|
||||
### core
|
||||
@@ -88,15 +110,6 @@
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="16.1.0-next.0"></a>
|
||||
# 16.1.0-next.0 (2023-05-10)
|
||||
### core
|
||||
| Commit | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| [69dadd2502](https://github.com/angular/angular/commit/69dadd25020ee84364466c0740f695984dd8c84d) | feat | support TypeScript 5.1 ([#50156](https://github.com/angular/angular/pull/50156)) |
|
||||
|
||||
<!-- CHANGELOG SPLIT MARKER -->
|
||||
|
||||
<a name="16.0.1"></a>
|
||||
# 16.0.1 (2023-05-10)
|
||||
### core
|
||||
@@ -113,7 +126,7 @@
|
||||
<a name="16.0.0"></a>
|
||||
# 16.0.0 (2023-05-03)
|
||||
|
||||
[Blog post "Angular v16 is now available"](http://goo.gle/angular-v16).
|
||||
[Blog post "Angular v16 is now available"](https://goo.gle/angular-v16).
|
||||
|
||||
## Breaking Changes
|
||||
###
|
||||
@@ -963,7 +976,7 @@ Andrew Kushnir
|
||||
<a name="15.0.0"></a>
|
||||
# 15.0.0 (2022-11-16)
|
||||
|
||||
[Blog post "Angular v15 is now available"](http://goo.gle/angular-v15).
|
||||
[Blog post "Angular v15 is now available"](https://goo.gle/angular-v15).
|
||||
|
||||
## Breaking Changes
|
||||
### compiler
|
||||
@@ -1626,7 +1639,7 @@ Adrien Crivelli, Alan Agius, Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Dyla
|
||||
<a name="14.0.0"></a>
|
||||
# 14.0.0 (2022-06-02)
|
||||
|
||||
[Blog post "Angular v14 is now available"](http://goo.gle/angular-v14).
|
||||
[Blog post "Angular v14 is now available"](https://goo.gle/angular-v14).
|
||||
|
||||
## Breaking Changes
|
||||
### animations
|
||||
|
||||
@@ -28,8 +28,8 @@ http_archive(
|
||||
patches = [
|
||||
"//tools/esm-interop:patches/bazel/nodejs_binary_esm_support.patch",
|
||||
],
|
||||
sha256 = "94070eff79305be05b7699207fbac5d2608054dd53e6109f7d00d923919ff45a",
|
||||
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/5.8.2/rules_nodejs-5.8.2.tar.gz"],
|
||||
sha256 = "5dd1e5dea1322174c57d3ca7b899da381d516220793d0adef3ba03b9d23baa8e",
|
||||
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/5.8.3/rules_nodejs-5.8.3.tar.gz"],
|
||||
)
|
||||
|
||||
load("@build_bazel_rules_nodejs//:repositories.bzl", "build_bazel_rules_nodejs_dependencies")
|
||||
@@ -84,7 +84,7 @@ yarn_install(
|
||||
YARN_LABEL,
|
||||
"//:.yarnrc",
|
||||
"//tools:postinstall-patches.js",
|
||||
"//tools/esm-interop:patches/npm/@angular+build-tooling+0.0.0-e859696da7af56c811b6589f1ae888222d93d797.patch",
|
||||
"//tools/esm-interop:patches/npm/@angular+build-tooling+0.0.0-8d4803573edc70b90a1134ffa996303d1dcc18a9.patch",
|
||||
"//tools/esm-interop:patches/npm/@bazel+concatjs+5.8.1.patch",
|
||||
"//tools/esm-interop:patches/npm/@bazel+esbuild+5.7.1.patch",
|
||||
"//tools/esm-interop:patches/npm/@bazel+protractor+5.7.1.patch",
|
||||
@@ -199,10 +199,10 @@ cldr_xml_data_repository(
|
||||
# sass rules
|
||||
http_archive(
|
||||
name = "io_bazel_rules_sass",
|
||||
sha256 = "44e325c09a8a97c0b6f918400c10836fa61753c576e77ca74ec682c6ecc518c0",
|
||||
strip_prefix = "rules_sass-236d2fc016738820e8dc6bea483074034c66ec0a",
|
||||
sha256 = "4bb36a654166e1b629717e55a9c0cc30590f6615c122c054f38409c20ee5ec6f",
|
||||
strip_prefix = "rules_sass-f89fc59345a5074cf184ec215e9858152b7258e7",
|
||||
urls = [
|
||||
"https://github.com/bazelbuild/rules_sass/archive/236d2fc016738820e8dc6bea483074034c66ec0a.zip",
|
||||
"https://github.com/bazelbuild/rules_sass/archive/f89fc59345a5074cf184ec215e9858152b7258e7.zip",
|
||||
],
|
||||
)
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"branchName": "refs/heads/main",
|
||||
"sha": "7b7b06a029295715b57b1a602b5021d0d0853bb3"
|
||||
"branchName": "refs/heads/16.1.x",
|
||||
"sha": "5f659f810481aa2b71b54e0856cbfd6f126ea68e"
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
{
|
||||
"name": "target",
|
||||
"type": "string",
|
||||
"description": "The Architect target to run provided in the the following format `project:target[:configuration]`.",
|
||||
"description": "The Architect target to run provided in the following format `project:target[:configuration]`.",
|
||||
"positional": 0
|
||||
}
|
||||
]
|
||||
|
||||
@@ -23,16 +23,13 @@
|
||||
],
|
||||
"styles": [
|
||||
],
|
||||
"scripts": []
|
||||
"scripts": [],
|
||||
"polyfills": [
|
||||
"zone.js"
|
||||
]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
@@ -42,6 +39,14 @@
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -53,8 +58,12 @@
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "addOneButton:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "addOneButton:build:development"
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
@@ -74,18 +83,19 @@
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"builder": "@angular-eslint/builder:lint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
"lintFilePatterns": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.html"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,15 +3,13 @@
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~15.2.0",
|
||||
"@angular/common": "~15.2.0",
|
||||
"@angular/compiler": "~15.2.0",
|
||||
"@angular/core": "~15.2.0",
|
||||
"@angular/platform-browser": "~15.2.0",
|
||||
"@angular/platform-browser-dynamic": "~15.2.0",
|
||||
"rxjs": "^7.5.2",
|
||||
"tslib": "^2.3.1",
|
||||
"zone.js": "^0.12.0"
|
||||
"@angular/common": "^16.0.0",
|
||||
"@angular/compiler": "^16.0.0",
|
||||
"@angular/core": "^16.0.0",
|
||||
"@angular/platform-browser": "^16.0.0",
|
||||
"rxjs": "^7.8.0",
|
||||
"tslib": "^2.5.3",
|
||||
"zone.js": "^0.13.0"
|
||||
},
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
@@ -22,12 +20,18 @@
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~15.2.0",
|
||||
"@angular/cli": "~15.2.0",
|
||||
"@angular/compiler-cli": "~15.2.0",
|
||||
"@angular-devkit/build-angular": "^16.0.0",
|
||||
"@angular-eslint/builder": "16.0.3",
|
||||
"@angular-eslint/eslint-plugin": "16.0.3",
|
||||
"@angular-eslint/eslint-plugin-template": "16.0.3",
|
||||
"@angular-eslint/schematics": "16.0.3",
|
||||
"@angular-eslint/template-parser": "16.0.3",
|
||||
"@angular/cli": "^16.0.0",
|
||||
"@angular/compiler-cli": "^16.0.0",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "5.59.7",
|
||||
"@typescript-eslint/parser": "5.59.7",
|
||||
"eslint": "^8.40.0",
|
||||
"jasmine-core": "~4.5.0",
|
||||
"jasmine-spec-reporter": "~7.0.0",
|
||||
"karma": "~6.4.1",
|
||||
@@ -35,9 +39,6 @@
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "^2.0.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~10.9.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~5.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
// import required packages
|
||||
import 'zone.js/dist/zone';
|
||||
import 'zone.js';
|
||||
import { Component } from '@angular/core';
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
import 'zone.js/dist/zone';
|
||||
@@ -10,7 +10,7 @@
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"target": "es2022",
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
|
||||
+2660
-1636
File diff suppressed because it is too large
Load Diff
@@ -54,6 +54,14 @@ Work backwards from the stack trace of the error to identify a place where the d
|
||||
|
||||
To fix the error move the `inject()` call to an allowed place (usually a class constructor or a field initializer).
|
||||
|
||||
**Note:** If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed.
|
||||
|
||||
```typescript
|
||||
TestBed.runInInjectionContext(() => {
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
<!-- links -->
|
||||
|
||||
<!-- external links -->
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
@description
|
||||
This error means that during the hydration process, Angular expected a DOM structure as rendered and annotated during server side rendering. However, on the client, the DOM tree was different than the server rendered DOM tree.
|
||||
|
||||
This error typically happens due to direct DOM manipulation using native browser APIs that alter the DOM structure outside of what Angular produced. You can resolve this by refactoring the component to use native Angular APIs instead of native APIs. If that's not possible, you can add the `ngSkipHydration` attribute to your component's host node, which will disable hydration for the component and its children. `ngSkipHydration` should only be used as a last resort and should be considered a bug that needs to be fixed.
|
||||
This error typically happens due to direct DOM manipulation using native browser APIs that alter the DOM structure outside of what Angular produced. It will also occur if you use `innerHTML` or `outerHTML` to set HTML content, which similarly alters the DOM structure outside of what Angular produced. You can resolve this by refactoring the component to use native Angular APIs instead of native APIs. If that's not possible, you can add the `ngSkipHydration` attribute to your component's host node, which will disable hydration for the component and its children. `ngSkipHydration` should only be used as a last resort and should be considered a bug that needs to be fixed.
|
||||
|
||||
More information about hydration can be found in [this guide](guide/hydration).
|
||||
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
@name Root element was not found.
|
||||
@category runtime
|
||||
@shortDescription Root element was not found during bootstrap.
|
||||
|
||||
@description
|
||||
Boostraped components are defined in the `bootstrap` property of an `@NgModule` decorator or as the first parameter of `boopstrapApplication` for standalone components.
|
||||
|
||||
This error happens when Angular tries to boostrap one of these components but cannot find its corresponing node in the DOM.
|
||||
|
||||
@debugging
|
||||
|
||||
This issue occurs when the selector mismatches the tag
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
...
|
||||
})
|
||||
class AppComponent {}
|
||||
```
|
||||
|
||||
```html
|
||||
<html>
|
||||
<app-root></app-root> <!-- Doesn't match the selector -->
|
||||
</html>
|
||||
```
|
||||
Replace the tag with the correct one:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<my-app></my-app> <!-- OK -->
|
||||
</html>
|
||||
```
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Accessibility Example</title>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<base href="/">
|
||||
<title>Angular binding syntax example</title>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>NgmoduleDemo</title>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Built-in Template Functions Example</title>
|
||||
|
||||
@@ -18,16 +18,13 @@ import { BROWSER_STORAGE, BrowserStorageService } from './storage.service';
|
||||
{ provide: BROWSER_STORAGE, useFactory: () => sessionStorage }
|
||||
]
|
||||
})
|
||||
export class StorageComponent implements OnInit {
|
||||
export class StorageComponent {
|
||||
|
||||
constructor(
|
||||
@Self() private sessionStorageService: BrowserStorageService,
|
||||
@SkipSelf() private localStorageService: BrowserStorageService,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
setSession() {
|
||||
this.sessionStorageService.set('hero', 'Dr Nice - Session');
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Feature Modules</title>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy loading feature modules</title>
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
"postbuild": "copyfiles schematics/*/schema.json schematics/*/files/** schematics/collection.json ../../dist/my-lib/"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^7.2.0",
|
||||
"@angular/core": "^7.2.0"
|
||||
"@angular/common": "^16.1.0",
|
||||
"@angular/core": "^16.1.0"
|
||||
},
|
||||
// #docregion collection
|
||||
"schematics": "./schematics/collection.json",
|
||||
|
||||
+2
-1
@@ -3,7 +3,8 @@
|
||||
"schematics": {
|
||||
"ng-add": {
|
||||
"description": "Add my library to the project.",
|
||||
"factory": "./ng-add/index#ngAdd"
|
||||
"factory": "./ng-add/index#ngAdd",
|
||||
"schema": "./ng-add/schema.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
+2
-1
@@ -3,7 +3,8 @@
|
||||
"schematics": {
|
||||
"ng-add": {
|
||||
"description": "Add my library to the project.",
|
||||
"factory": "./ng-add/index#ngAdd"
|
||||
"factory": "./ng-add/index#ngAdd",
|
||||
"schema": "./ng-add/schema.json"
|
||||
},
|
||||
"my-service": {
|
||||
"description": "Generate a service in the project.",
|
||||
|
||||
+7
-8
@@ -1,10 +1,9 @@
|
||||
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
|
||||
import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
|
||||
import { Rule } from '@angular-devkit/schematics';
|
||||
import { addRootImport } from '@schematics/angular/utility';
|
||||
import { Schema } from './schema';
|
||||
|
||||
// Just return the tree
|
||||
export function ngAdd(): Rule {
|
||||
return (tree: Tree, context: SchematicContext) => {
|
||||
context.addTask(new NodePackageInstallTask());
|
||||
return tree;
|
||||
};
|
||||
export function ngAdd(options: Schema): Rule {
|
||||
// Add an import `MyLibModule` from `my-lib` to the root of the user's project.
|
||||
return addRootImport(options.project, ({code, external}) =>
|
||||
code`${external('MyLibModule', 'my-lib')}`);
|
||||
}
|
||||
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"$schema": "http://json-schema.org/schema",
|
||||
"$id": "SchematicsMyLibNgAdd",
|
||||
"title": "MyLib ng add Schema",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"project": {
|
||||
"type": "string",
|
||||
"description": "Name of the project.",
|
||||
"$default": {
|
||||
"$source": "projectName"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export interface Schema {
|
||||
// Name of the project.
|
||||
project: string;
|
||||
}
|
||||
@@ -12,6 +12,6 @@
|
||||
<h4>Resource URL:</h4>
|
||||
<p>Showing: {{dangerousVideoUrl}}</p>
|
||||
<p>Trusted:</p>
|
||||
<iframe class="e2e-iframe-trusted-src" width="640" height="390" [src]="videoUrl"></iframe>
|
||||
<iframe class="e2e-iframe-trusted-src" width="640" height="390" [src]="videoUrl" title="trusted video url"></iframe>
|
||||
<p>Untrusted:</p>
|
||||
<iframe class="e2e-iframe-untrusted-src" width="640" height="390" [src]="dangerousVideoUrl"></iframe>
|
||||
<iframe class="e2e-iframe-untrusted-src" width="640" height="390" [src]="dangerousVideoUrl" title="unTrusted video url"></iframe>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Template Reference Variables Example</title>
|
||||
|
||||
@@ -34,8 +34,8 @@
|
||||
<a href="#ref-vars">Template reference variables</a><br>
|
||||
<a href="#inputs-and-outputs">Inputs and outputs</a><br>
|
||||
<a href="#pipes">Pipes</a><br>
|
||||
<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="#safe-navigation-operator">Safe navigation operator <em>?.</em></a><br>
|
||||
<a href="#non-null-assertion-operator">Non-null assertion operator <em>!.</em></a><br>
|
||||
<a href="#enums">Enums</a><br>
|
||||
<a href="#svg-templates">SVG Templates</a><br>
|
||||
|
||||
@@ -185,12 +185,12 @@ button</button>
|
||||
<hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
|
||||
<!-- examine the following <img> tag in the browser tools -->
|
||||
<img src="images/ng-logo.svg"
|
||||
[src]="heroImageUrl">
|
||||
[src]="heroImageUrl" [alt]="hero.name">
|
||||
|
||||
<br><br>
|
||||
|
||||
<img [src]="iconUrl"/>
|
||||
<img [attr.src]="villainImageUrl"/>
|
||||
<img [src]="iconUrl" alt="icon"/>
|
||||
<img [attr.src]="villainImageUrl" alt="villain-image"/>
|
||||
<!-- eslint-enable @angular-eslint/template/alt-text -->
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
@@ -223,22 +223,22 @@ button</button>
|
||||
|
||||
<p>
|
||||
<img src="{{heroImageUrl}}" alt="interpolated image of {{currentHero.name}}">
|
||||
is the <i>interpolated</i> image.
|
||||
is the <em>interpolated</em> image.
|
||||
</p>
|
||||
<p>
|
||||
<img [src]="heroImageUrl" [alt]="'property bounded image of ' + currentHero.name">
|
||||
is the <i>property bound</i> image.
|
||||
is the <em>property bound</em> image.
|
||||
</p>
|
||||
|
||||
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
|
||||
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
|
||||
<p><span>"{{title}}" is the <em>interpolated</em> title.</span></p>
|
||||
<p>"<span [innerHTML]="title"></span>" is the <em>property bound</em> title.</p>
|
||||
|
||||
<!--
|
||||
Angular generates warnings for these two lines as it sanitizes them
|
||||
WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
|
||||
-->
|
||||
<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
|
||||
<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
|
||||
<p><span>"{{evilTitle}}" is the <em>interpolated</em> evil title.</span></p>
|
||||
<p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p>
|
||||
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
@@ -484,12 +484,12 @@ without NgModel
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
<h4 id="ngFor-index">*ngFor with index</h4>
|
||||
<p>with <i>semi-colon</i> separator</p>
|
||||
<p>with <em>semi-colon</em> separator</p>
|
||||
<div class="box">
|
||||
<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
|
||||
</div>
|
||||
|
||||
<p>with <i>comma</i> separator</p>
|
||||
<p>with <em>comma</em> separator</p>
|
||||
<div class="box">
|
||||
<!-- Ex: "1 - Hercules" -->
|
||||
<div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.name}}</div>
|
||||
@@ -502,7 +502,7 @@ without NgModel
|
||||
<button type="button" (click)="changeIds()">Change ids</button>
|
||||
<button type="button" (click)="clearTrackByCounts()">Clear counts</button>
|
||||
|
||||
<p><i>without</i> trackBy</p>
|
||||
<p><em>without</em> trackBy</p>
|
||||
<div class="box">
|
||||
<div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
|
||||
|
||||
@@ -522,24 +522,24 @@ without NgModel
|
||||
|
||||
<br><br><br>
|
||||
|
||||
<p>with trackBy and <i>semi-colon</i> separator</p>
|
||||
<p>with trackBy and <em>semi-colon</em> separator</p>
|
||||
<div class="box">
|
||||
<div *ngFor="let hero of heroes; trackBy: trackByHeroes">
|
||||
({{hero.id}}) {{hero.name}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>with trackBy and <i>comma</i> separator</p>
|
||||
<p>with trackBy and <em>comma</em> separator</p>
|
||||
<div class="box">
|
||||
<div *ngFor="let hero of heroes, trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
|
||||
</div>
|
||||
|
||||
<p>with trackBy and <i>space</i> separator</p>
|
||||
<p>with trackBy and <em>space</em> separator</p>
|
||||
<div class="box">
|
||||
<div *ngFor="let hero of heroes trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
|
||||
</div>
|
||||
|
||||
<p>with <i>generic</i> trackById function</p>
|
||||
<p>with <em>generic</em> trackById function</p>
|
||||
<div class="box">
|
||||
<div *ngFor="let hero of heroes, trackBy: trackById">({{hero.id}}) {{hero.name}}</div>
|
||||
</div>
|
||||
@@ -624,7 +624,7 @@ without NgModel
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
<!-- Null values and the safe navigation operator -->
|
||||
<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
|
||||
<hr><h2 id="safe-navigation-operator">Safe navigation operator <em>?.</em></h2>
|
||||
|
||||
<div>
|
||||
The title is {{title}}
|
||||
@@ -662,7 +662,7 @@ The null hero's name is {{nullHero && nullHero.name}}
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
<!-- non-null assertion operator -->
|
||||
<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
|
||||
<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <em>!.</em></h2>
|
||||
|
||||
<div>
|
||||
<!--No hero, no text -->
|
||||
@@ -674,7 +674,7 @@ The null hero's name is {{nullHero && nullHero.name}}
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
<!-- non-null assertion operator -->
|
||||
<hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
|
||||
<hr><h2 id="any-type-cast-function">$any type cast function <em>$any( )</em>.</h2>
|
||||
|
||||
<div>
|
||||
<!-- Accessing an undeclared member -->
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
<!-- #docregion event-binding -->
|
||||
<button
|
||||
type="button"
|
||||
[disabled]="canClick"
|
||||
[disabled]="!canClick"
|
||||
(click)="sayMessage()">
|
||||
Trigger alert message
|
||||
</button>
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
|
||||
export class HelloWorldBindingsComponent {
|
||||
fontColor = 'blue';
|
||||
sayHelloId = 1;
|
||||
canClick = false;
|
||||
canClick = true;
|
||||
message = 'Hello, World';
|
||||
|
||||
// #docregion method
|
||||
|
||||
@@ -26,13 +26,6 @@ For more information, see the [TypeScript Handbook](https://www.typescriptlang.o
|
||||
|
||||
The following options are available for configuring the AOT template compiler.
|
||||
|
||||
### `allowEmptyCodegenFiles`
|
||||
|
||||
When `true`, create all possible files even if they are empty.
|
||||
Default is `false`.
|
||||
Used by the Bazel build rules to simplify how Bazel rules track file dependencies.
|
||||
Do not use this option outside of the Bazel rules.
|
||||
|
||||
### `annotationsAs`
|
||||
|
||||
Modifies how Angular-specific annotations are emitted to improve tree-shaking.
|
||||
|
||||
@@ -33,7 +33,7 @@ Angular provides a framework for single-page applications, where most of the log
|
||||
Most applications still need to access a server using the `HttpClient` to access and save data.
|
||||
For some platforms and applications, you might also want to use the PWA \(Progressive Web App\) model to improve the user experience.
|
||||
|
||||
* [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
|
||||
* [HTTP](guide/understanding-communicating-with-http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
|
||||
* [Server-side rendering](guide/universal): Angular Universal generates static application pages on the server through server-side rendering \(SSR\). This allows you to run your Angular application on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers.
|
||||
* [Service workers and PWA](guide/service-worker-intro): Use a service worker to reduce dependency on the network and significantly improve the user experience.
|
||||
* [Web workers](guide/web-worker): Learn how to run CPU-intensive computations in a background thread.
|
||||
|
||||
@@ -27,7 +27,7 @@ To get the most out of these developer guides, you should review the following t
|
||||
<p>Learn about the two approaches to forms in Angular: template-driven and reactive.</p>
|
||||
<p class="card-footer">Forms</p>
|
||||
</a>
|
||||
<a href="guide/http" class="docs-card" title="Angular HTTP client developer guide">
|
||||
<a href="guide/understanding-communicating-with-http" class="docs-card" title="Angular HTTP client developer guide">
|
||||
<section>HTTP</section>
|
||||
<p>Learn how to connect to a server using the HTTP client service in Angular.</p>
|
||||
<p class="card-footer">HTTP client</p>
|
||||
|
||||
@@ -21,7 +21,7 @@ The categories of Angular documentation include:
|
||||
|
||||
| Angular documentation categories | Details |
|
||||
|:--- |:--- |
|
||||
| [Guides](docs) | Much of what's in the [documentation section of angular.io](docs). Guides walk the reader step-by-step through tasks to demonstrate concepts and are often accompanied by a working example. These include [Getting Started](start), [Tour of Heroes](tutorial/tour-of-heroes), and pages about [Forms](guide/forms-overview), [Dependency Injection](guide/dependency-injection), and [HttpClient](guide/http). Contributing members of the community and Angular team members maintain this documentation in [Markdown](https://daringfireball.net/projects/markdown/syntax "Markdown"). |
|
||||
| [Guides](docs) | Much of what's in the [documentation section of angular.io](docs). Guides walk the reader step-by-step through tasks to demonstrate concepts and are often accompanied by a working example. These include [Getting Started](start), [Tour of Heroes](tutorial/tour-of-heroes), and pages about [Forms](guide/forms-overview), [Dependency Injection](guide/dependency-injection), and [HttpClient](guide/understanding-communicating-with-http). Contributing members of the community and Angular team members maintain this documentation in [Markdown](https://daringfireball.net/projects/markdown/syntax "Markdown"). |
|
||||
| [API documentation](api) | Reference documents for the [Angular Application Programming Interface, or API](api). These are more succinct than guides and serve as a reference for Angular features. They are especially helpful for people already acquainted with Angular concepts. The [angular.io](https://angular.io) infrastructure generates these documents from source code and comments that contributors edit. |
|
||||
| [CLI documentation](cli) | The [angular.io](https://angular.io) infrastructure generates these documents from CLI source code. |
|
||||
|
||||
|
||||
@@ -408,7 +408,7 @@ For more information, see [Angular documentation style guide](guide/docs-style-g
|
||||
<live-example name="http"></live-example>
|
||||
|
||||
Demonstrates server interaction using HTTP.
|
||||
For more information, see [Communicating with backend services using HTTP](guide/http).
|
||||
For more information, see [Communicating with backend services using HTTP](guide/understanding-communicating-with-http).
|
||||
|
||||
## Workflow
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -65,7 +65,13 @@ After you've followed these steps and have started up your server, load your app
|
||||
|
||||
</div>
|
||||
|
||||
While running an application in dev mode, you can confirm hydration is enabled by opening the Developer Tools in your browser and viewing the console. You should see a message that includes hydration-related stats, such as the number of components and nodes hydrated. Note: Angular calculates the stats based on all components rendered on a page, including those that come from third-party libraries.
|
||||
While running an application in dev mode, you can confirm hydration is enabled by opening the Developer Tools in your browser and viewing the console. You should see a message that includes hydration-related stats, such as the number of components and nodes hydrated.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
Angular calculates the stats based on all components rendered on a page, including those that come from third-party libraries.
|
||||
|
||||
</div>
|
||||
|
||||
<a id="constraints"></a>
|
||||
|
||||
@@ -85,12 +91,14 @@ If there is a mismatch between server and client DOM tree structures, the hydrat
|
||||
|
||||
### Direct DOM Manipulation
|
||||
|
||||
If you have components that manipulate the DOM using native DOM APIs, the hydration process will encounter errors. Specific cases where DOM manipulation is a problem are situations like accessing the `document`, querying for specific elements, and injecting additional nodes using `appendChild`. Detaching DOM nodes and moving them to other locations will also result in errors.
|
||||
If you have components that manipulate the DOM using native DOM APIs or use `innerHTML` or `outerHTML`, the hydration process will encounter errors. Specific cases where DOM manipulation is a problem are situations like accessing the `document`, querying for specific elements, and injecting additional nodes using `appendChild`. Detaching DOM nodes and moving them to other locations will also result in errors.
|
||||
|
||||
This is because Angular is unaware of these DOM changes and cannot resolve them during the hydration process. Angular will expect a certain structure, but it will encounter a different structure when attempting to hydrate. This mismatch will result in hydration failure and throw a DOM mismatch error ([see below](#errors)).
|
||||
|
||||
It is best to refactor your component to avoid this sort of DOM manipulation. Try to use Angular APIs to do this work, if you can. If you cannot refactor this behavior, use the `ngSkipHydration` attribute ([described below](#ngskiphydration)) until you can refactor into a hydration friendly solution.
|
||||
|
||||
<a id="valid-html"></a>
|
||||
|
||||
### Valid HTML structure
|
||||
|
||||
There are a few cases where if you have a component template that does not have valid HTML structure, this could result in a DOM mismatch error during hydration.
|
||||
@@ -128,7 +136,7 @@ Providing a custom or a "noop" Zone.js implementation may lead to a different ti
|
||||
|
||||
## Errors
|
||||
|
||||
There are several hydration related errors you may encounter ranging from node mismatches to cases when the `ngSkipHydration` was used on an invalid host node. The most common error case that may occur is due to direct DOM manipulation using native APIs that results in hydration being unable to find or match the expected DOM tree structure on the client that was rendered by the server. The other case you may encounter this type of error was mentioned in the prior section on Valid HTML structures. So, make sure the HTML in your templates are using valid structure, and you'll avoid that error case.
|
||||
There are several hydration related errors you may encounter ranging from node mismatches to cases when the `ngSkipHydration` was used on an invalid host node. The most common error case that may occur is due to direct DOM manipulation using native APIs that results in hydration being unable to find or match the expected DOM tree structure on the client that was rendered by the server. The other case you may encounter this type of error was mentioned in the [Valid HTML structure](#valid-html) section earlier. So, make sure the HTML in your templates are using valid structure, and you'll avoid that error case.
|
||||
|
||||
For a full reference on hydration related errors, visit the [Errors Reference Guide](/errors).
|
||||
|
||||
@@ -136,7 +144,7 @@ For a full reference on hydration related errors, visit the [Errors Reference Gu
|
||||
|
||||
## How to skip hydration for particular components
|
||||
|
||||
Some components may not work properly with hydration enabled due to some of the aforementioned issues, like direct DOM manipulation. As a workaround, you can add the `ngSkipHydration` attribute to a component's tag in order to skip hydrating the entire component.
|
||||
Some components may not work properly with hydration enabled due to some of the aforementioned issues, like [Direct DOM Manipulation](#dom-manipulation). As a workaround, you can add the `ngSkipHydration` attribute to a component's tag in order to skip hydrating the entire component.
|
||||
|
||||
```html
|
||||
<example-cmp ngSkipHydration />
|
||||
@@ -175,3 +183,5 @@ re-rendering those components from scratch.
|
||||
## Third Party Libraries with DOM Manipulation
|
||||
|
||||
There are a number of third party libraries that depend on DOM manipulation to be able to render. D3 charts is a prime example. These libraries worked without hydration, but they may cause DOM mismatch errors when hydration is enabled. For now, if you encounter DOM mismatch errors using one of these libraries, you can add the `ngSkipHydration` attribute to the component that renders using that library.
|
||||
|
||||
@reviewed 2023-06-21
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
This topic lists localized versions of the Angular documentation.
|
||||
|
||||
* [Español](http://docs.angular.lat) <!-- Español -->
|
||||
* [Español](https://docs.angular.lat) <!-- Español -->
|
||||
* [简体中文版](https://angular.cn) <!-- 简体中文版 -->
|
||||
* [正體中文版](https://angular.tw) <!-- 正體中文版 -->
|
||||
* [日本語版](https://angular.jp) <!-- 日本語版 -->
|
||||
|
||||
@@ -31,7 +31,7 @@ The `package.json` is organized into two groups of packages:
|
||||
| Packages | Details |
|
||||
|:--- |:--- |
|
||||
| [Dependencies](guide/npm-packages#dependencies) | Essential to *running* applications. |
|
||||
| [DevDependencies](guide/npm-packages#dev-dependencies) | Only necessary to *develop* applications. |
|
||||
| [DevDependencies](guide/npm-packages#dev-dependencies) | Only necessary to *develop* and *build* applications. |
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
@@ -68,7 +68,7 @@ For a complete list of Angular packages, see the [API reference](api?type=packag
|
||||
| Package name | Details |
|
||||
|:--- |:--- |
|
||||
| [`@angular/animations`](api/animations) | Angular's animations library makes it easy to define and apply animation effects such as page and list transitions. For more information, see the [Animations guide](guide/animations). |
|
||||
| [`@angular/common`](api/common) | The commonly-needed services, pipes, and directives provided by the Angular team. The [`HttpClientModule`](api/common/http/HttpClientModule) is also here, in the [`@angular/common/http`](api/common/http) subfolder. For more information, see the [HttpClient guide](guide/http). |
|
||||
| [`@angular/common`](api/common) | The commonly-needed services, pipes, and directives provided by the Angular team. The [`HttpClientModule`](api/common/http/HttpClientModule) is also here, in the [`@angular/common/http`](api/common/http) subfolder. For more information, see the [HttpClient guide](guide/understanding-communicating-with-http). |
|
||||
| `@angular/compiler` | Angular's template compiler. It understands templates and can convert them to code that makes the application run and render. Typically you don't interact with the compiler directly; rather, you use it indirectly using `platform-browser-dynamic` when JIT compiling in the browser. For more information, see the [Ahead-of-time Compilation guide](guide/aot-compiler). |
|
||||
| [`@angular/core`](api/core) | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators, `Component`, `Directive`, dependency injection, and the component lifecycle hooks. |
|
||||
| [`@angular/forms`](api/forms) | Support for both [template-driven](guide/forms) and [reactive forms](guide/reactive-forms). For information about choosing the best forms approach for your app, see [Introduction to forms](guide/forms-overview). |
|
||||
|
||||
@@ -335,7 +335,7 @@ The following code example binds an observable of message strings
|
||||
|
||||
## Caching HTTP requests
|
||||
|
||||
To [communicate with backend services using HTTP](guide/http "Communicating with backend services using HTTP"), the `HttpClient` service uses observables and offers the `HttpClient.get()` method to fetch data from a server.
|
||||
To [communicate with backend services using HTTP](guide/understanding-communicating-with-http "Communicating with backend services using HTTP"), the `HttpClient` service uses observables and offers the `HttpClient.get()` method to fetch data from a server.
|
||||
The asynchronous method sends an HTTP request, and returns an observable that emits the requested data for the response.
|
||||
|
||||
As shown in the previous section, use the impure `AsyncPipe` to accept an observable as input and subscribe to the input automatically.
|
||||
|
||||
@@ -29,7 +29,7 @@ export class Ticker {
|
||||
```
|
||||
|
||||
Like the `async` pipe, `toSignal` subscribes to the Observable immediately, which may trigger side effects. The subscription created by
|
||||
`toSignal` automatically unsubscribes from the given Observable upon destruction of the the component in which `toSignal` is called.
|
||||
`toSignal` automatically unsubscribes from the given Observable upon destruction of the component in which `toSignal` is called.
|
||||
|
||||
### Initial values
|
||||
|
||||
|
||||
@@ -214,7 +214,7 @@ By using the long form, the schematic can provide more explicit formatting of th
|
||||
{ "value": "css", "label": "CSS" },
|
||||
{ "value": "scss", "label": "SCSS [ https://sass-lang.com/documentation/syntax#scss ]" },
|
||||
{ "value": "sass", "label": "Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]" },
|
||||
{ "value": "less", "label": "Less [ http://lesscss.org/ ]" }
|
||||
{ "value": "less", "label": "Less [ https://lesscss.org/ ]" }
|
||||
]
|
||||
},
|
||||
},
|
||||
|
||||
@@ -44,11 +44,7 @@ The following steps define this type of schematic.
|
||||
|
||||
<code-example header="projects/my-lib/schematics/ng-add/index.ts (ng-add Rule Factory)" path="schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts"></code-example>
|
||||
|
||||
The only step needed to provide initial `ng add` support is to trigger an installation task using the `SchematicContext`.
|
||||
The task uses the user's preferred package manager to add the library to the project's `package.json` configuration file, and install it in the project's `node_modules` directory.
|
||||
|
||||
In this example, the function receives the current `Tree` and returns it without any modifications.
|
||||
If you need to, do additional setup when your package is installed, such as generating files, updating configuration, or any other initial setup your library requires.
|
||||
The Angular CLI will install the latest version of the library automatically, and this example is taking it a step further by adding the `MyLibModule` to the root of the application. The `addRootImport` function accepts a callback that needs to return a code block. You can write any code inside of the string tagged with the `code` function and any external symbol have to be wrapped with the `external` function to ensure that the appropriate import statements are generated.
|
||||
|
||||
### Define dependency type
|
||||
|
||||
|
||||
@@ -344,7 +344,7 @@ That means only your application can read this cookie token and set the custom h
|
||||
The malicious code on `evil.com` can't.
|
||||
|
||||
Angular's `HttpClient` has built-in support for the client-side half of this technique.
|
||||
Read about it more in the [HttpClient guide](guide/http#security-xsrf-protection).
|
||||
Read about it more in the [HttpClient guide](guide/http-security-xsrf-protection).
|
||||
|
||||
For information about CSRF at the Open Web Application Security Project \(OWASP\), see [Cross-Site Request Forgery (CSRF)](https://owasp.org/www-community/attacks/csrf) and [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html).
|
||||
The Stanford University paper [Robust Defenses for Cross-Site Request Forgery](https://seclab.stanford.edu/websec/csrf/csrf.pdf) is a rich source of detail.
|
||||
|
||||
@@ -65,7 +65,7 @@ const doubleCount: Signal<number> = computed(() => count() * 2);
|
||||
|
||||
The `doubleCount` signal depends on `count`. Whenever `count` updates, Angular knows that anything which depends on either `count` or `doubleCount` needs to update as well.
|
||||
|
||||
#### Computeds are both lazily evaluated and memoized
|
||||
#### Computed signals are both lazily evaluated and memoized
|
||||
|
||||
`doubleCount`'s derivation function does not run to calculate its value until the first time `doubleCount` is read. Once calculated, this value is cached, and future reads of `doubleCount` will return the cached value without recalculating.
|
||||
|
||||
@@ -123,7 +123,7 @@ Effects always run **at least once.** When an effect runs, it tracks any signal
|
||||
|
||||
Effects always execute **asynchronously**, during the change detection process.
|
||||
|
||||
### Uses for effects
|
||||
### Use cases for effects
|
||||
|
||||
Effects are rarely needed in most application code, but may be useful in specific circumstances. Here are some examples of situations where an `effect` might be a good solution:
|
||||
|
||||
@@ -263,3 +263,5 @@ effect((onCleanup) => {
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
@reviewed 2023-06-21
|
||||
|
||||
@@ -273,7 +273,7 @@ bootstrapApplication(PhotoAppComponent, {
|
||||
});
|
||||
```
|
||||
|
||||
The new bootstrap API gives us back the means of configuring “module injectors” without using `NgModule`s. In this sense, the “module” part of the name is no longer relevant and we’ve decided to introduce a new term: “environment injectors”.
|
||||
The new bootstrap API gives us back the means of configuring “module injectors” without using `NgModule`s. In this sense, the “module” part of the name is no longer relevant, and we’ve decided to introduce a new term: “environment injectors”.
|
||||
|
||||
Environment injectors can be configured using one of the following:
|
||||
|
||||
@@ -320,7 +320,7 @@ class DatePickerComponent {
|
||||
|
||||
@NgModule({
|
||||
declarations: [DatePickerComponent],
|
||||
exports: [DatePickerComponent]
|
||||
exports: [DatePickerComponent],
|
||||
providers: [CalendarService],
|
||||
})
|
||||
class DatePickerModule {
|
||||
@@ -338,7 +338,7 @@ class DateModalComponent {
|
||||
|
||||
In the above example, the component `DateModalComponent` is standalone - it can be consumed directly and has no NgModule which needs to be imported in order to use it. However, `DateModalComponent` has a dependency, the `DatePickerComponent,` which is imported via its NgModule (the `DatePickerModule`). This NgModule may declare providers (in this case: `CalendarService`) which are required for the `DatePickerComponent` to function correctly.
|
||||
|
||||
When Angular creates a standalone component, it needs to know that the current injector has all of the necessary services for the standalone component's dependencies, including those based on NgModules. To guarantee that, in some cases Angular will create a new "standalone injector" as a child of the current environment injector. Today, this happens for all bootstrapped standalone components: it will be a child of the root environment injector. The same rule applies to the dynamically created (for example, by the router or the `ViewContainerRef` API) standalone components.
|
||||
When Angular creates a standalone component, it needs to know that the current injector has all the necessary services for the standalone component's dependencies, including those based on NgModules. To guarantee that, in some cases Angular will create a new "standalone injector" as a child of the current environment injector. Today, this happens for all bootstrapped standalone components: it will be a child of the root environment injector. The same rule applies to the dynamically created (for example, by the router or the `ViewContainerRef` API) standalone components.
|
||||
|
||||
A separate standalone injector is created to ensure that providers imported by a standalone component are “isolated” from the rest of the application. This lets us think of standalone components as truly self-contained pieces that can’t “leak” their implementation details to the rest of the application.
|
||||
|
||||
|
||||
@@ -605,7 +605,7 @@ Each symbol \(`-`, `x`, `|`, `#`\) marks the passing of one frame.
|
||||
|
||||
A *cold* observable doesn't produce values until you subscribe to it.
|
||||
Most of your application observables are cold.
|
||||
All [*HttpClient*](guide/http) methods return cold observables.
|
||||
All [*HttpClient*](guide/understanding-communicating-with-http) methods return cold observables.
|
||||
|
||||
A *hot* observable is already producing values *before* you subscribe to it.
|
||||
The [`Router.events`](api/router/Router#events) observable, which reports router activity, is a *hot* observable.
|
||||
|
||||
@@ -129,7 +129,7 @@ Although this testing guide follows the traditional style and the default [CLI s
|
||||
|
||||
## Testing HTTP services
|
||||
|
||||
Data services that make HTTP calls to remote servers typically inject and delegate to the Angular [`HttpClient`](guide/http) service for XHR calls.
|
||||
Data services that make HTTP calls to remote servers typically inject and delegate to the Angular [`HttpClient`](guide/http-test-requests) service for XHR calls.
|
||||
|
||||
You can test a data service with an injected `HttpClient` spy as you would test any service with a dependency.
|
||||
|
||||
@@ -152,7 +152,7 @@ Extended interactions between a data service and the `HttpClient` can be complex
|
||||
|
||||
The `HttpClientTestingModule` can make these testing scenarios more manageable.
|
||||
|
||||
While the *code sample* accompanying this guide demonstrates `HttpClientTestingModule`, this page defers to the [Http guide](guide/http#testing-http-requests), which covers testing with the `HttpClientTestingModule` in detail.
|
||||
While the *code sample* accompanying this guide demonstrates `HttpClientTestingModule`, this page defers to the [Http guide](guide/http-test-requests), which covers testing with the `HttpClientTestingModule` in detail.
|
||||
|
||||
<!-- links -->
|
||||
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
|
||||
This guide describes **Angular Universal**, a technology that allows Angular to render applications on the server.
|
||||
|
||||
By default, Angular renders applications only in a *browser*. Angular Universal allows Angular to render an application on the *server*, generating *static* HTML contents, which represents an application state. Once the HTML contents is rendered in a browser, Angular bootstraps an application and reuses the information available in the server-generated HTML.
|
||||
By default, Angular renders applications only in a *browser*. Angular Universal allows Angular to render an application on the *server*, generating *static* HTML content, which represents an application state. Once the HTML content is rendered in a browser, Angular bootstraps an application and reuses the information available in the server-generated HTML.
|
||||
|
||||
With server-side rendering an application generally renders in a browser faster, giving users a chance to view the application UI before it becomes fully interactive. See ([the "Why use Server-Side Rendering?" section](#why-do-it)) below for addition information.
|
||||
With server-side rendering an application generally renders in a browser faster, giving users a chance to view the application UI before it becomes fully interactive. See the ["Why use Server-Side Rendering?"](#why-do-it) section below for additional information.
|
||||
|
||||
Also for a more detailed look at different techniques and concepts surrounding SSR, check out this [article](https://developers.google.com/web/updates/2019/02/rendering-on-the-web).
|
||||
|
||||
You can enable server-side rendering in your Angular application using the `@nguniversal/express-engine` schematic as described below.
|
||||
You can enable server-side rendering in your Angular application using the `@nguniversal/express-engine` package as described below.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
@@ -66,10 +66,10 @@ The command updates the application code to enable SSR and adds extra files to t
|
||||
</div>
|
||||
<div class='children'>
|
||||
<div class='file'>
|
||||
app.config.ts // < client-side application configuration (standalone app only)
|
||||
app.config.ts // <-- client-side application configuration (standalone app only)
|
||||
</div>
|
||||
<div class='file'>
|
||||
app.module.ts // < client-side application module (NgModule app only)
|
||||
app.module.ts // <-- client-side application module (NgModule app only)
|
||||
</div>
|
||||
</div>
|
||||
<div class='children'>
|
||||
@@ -226,9 +226,9 @@ Universal applications use the Angular `platform-server` package \(as opposed to
|
||||
server implementations of the DOM, `XMLHttpRequest`, and other low-level features that don't rely on a browser.
|
||||
|
||||
The server \([Node.js Express](https://expressjs.com) in this guide's example\) passes client requests for application pages to the NgUniversal `ngExpressEngine`.
|
||||
Under the hood, the render functions, while providing caching and other helpful utilities.
|
||||
Under the hood, the engine renders the app, while also providing caching and other helpful utilities.
|
||||
|
||||
The render functions takes as inputs a *template* HTML page \(usually `index.html`\), and Angular *module* containing components or a function that when invoked returns a `Promise` that resolves to an `ApplicationRef`, and a *route* that determines which components to display. The route comes from the client's request to the server.
|
||||
The render function takes as inputs a *template* HTML page \(usually `index.html`\), and an Angular *module* containing components. Alternatively, it can take a function that when invoked returns a `Promise` that resolves to an `ApplicationRef`, and a *route* that determines which components to display. The route comes from the client's request to the server.
|
||||
|
||||
Each request results in the appropriate view for the requested route.
|
||||
The render function renders the view within the `<app>` tag of the template, creating a finished HTML page for the client.
|
||||
@@ -279,8 +279,8 @@ This engine's `Promise` callback returns the rendered page to the web server, wh
|
||||
<div class="alert is-helpful">
|
||||
|
||||
**NOTE**: <br />
|
||||
The basic behavior described below is handled automatically when using the NgUniversal Express schematic.
|
||||
This is helpful when trying to understand the underlying behavior or replicate it without using the schematic.
|
||||
The basic behavior described below is handled automatically when using the NgUniversal Express package.
|
||||
This is helpful when trying to understand the underlying behavior or replicate it without using the package.
|
||||
|
||||
</div>
|
||||
|
||||
@@ -298,12 +298,12 @@ Because you use routing, you can recognize the three types of requests and handl
|
||||
|
||||
| Routing request types | Details |
|
||||
|:--- |:--- |
|
||||
| Data request | Request URL that begins `/api`. |
|
||||
| App navigation | Request URL with no file extension. |
|
||||
| Static asset | All other requests. |
|
||||
| Data request | Request URL that begins `/api` |
|
||||
| App navigation | Request URL with no file extension |
|
||||
| Static asset | All other requests |
|
||||
|
||||
A Node.js Express server is a pipeline of middleware that filters and processes requests one after the other.
|
||||
You configure the Node.js Express server pipeline with calls to `server.get()` like this one for data requests.
|
||||
You configure the Node.js Express server pipeline with calls to `server.get()` like this one for data requests:
|
||||
|
||||
<code-example header="server.ts (data URL)" path="universal/server.ts" region="data-request"></code-example>
|
||||
|
||||
@@ -317,7 +317,7 @@ In practice, you would remove that module and register your web API middleware o
|
||||
|
||||
</div>
|
||||
|
||||
The following code filters for request URLs with no extensions and treats them as navigation requests.
|
||||
The following code filters for request URLs with no extensions and treats them as navigation requests:
|
||||
|
||||
<code-example header="server.ts (navigation)" path="universal/server.ts" region="navigation-request"></code-example>
|
||||
|
||||
@@ -366,4 +366,4 @@ Now, on every HTTP request made as part of rendering the application on the serv
|
||||
|
||||
<!-- end links -->
|
||||
|
||||
@reviewed 2023-04-25
|
||||
@reviewed 2023-06-21
|
||||
|
||||
@@ -190,7 +190,7 @@ Some of the libraries available to you include:
|
||||
|:--- |:--- |
|
||||
| [Angular Router](guide/router) | Advanced client-side navigation and routing based on Angular components. Supports lazy-loading, nested routes, custom path matching, and more. |
|
||||
| [Angular Forms](guide/forms-overview) | Uniform system for form participation and validation. |
|
||||
| [Angular HttpClient](guide/http) | Robust HTTP client that can power more advanced client-server communication. |
|
||||
| [Angular HttpClient](guide/understanding-communicating-with-http) | Robust HTTP client that can power more advanced client-server communication. |
|
||||
| [Angular Animations](guide/animations) | Rich system for driving animations based on application state. |
|
||||
| [Angular PWA](guide/service-worker-intro) | Tools for building Progressive Web Applications \(PWA\) including a service worker and Web application manifest. |
|
||||
| [Angular Schematics](guide/schematics) | Automated scaffolding, refactoring, and update tools that simplify development at large scale. |
|
||||
|
||||
@@ -235,15 +235,15 @@ For details of those options and their possible values, see the [Angular CLI Ref
|
||||
|
||||
Some extra options can only be set through the configuration file, either by direct editing or with the [`ng config`](cli/config) command.
|
||||
|
||||
| Options properties | Details |
|
||||
|:--- |:--- |
|
||||
| `assets` | An object containing paths to static assets to add to the global context of the project. The default paths point to the project's icon file and its `assets` directory. See more in the [Assets configuration](#asset-config) section. |
|
||||
| `styles` | An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: [sass/scss](https://sass-lang.com) and [less](http://lesscss.org). See more in the [Styles and scripts configuration](#style-script-config) section. |
|
||||
| Options properties | Details |
|
||||
|:--- |:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| `assets` | An object containing paths to static assets to add to the global context of the project. The default paths point to the project's icon file and its `assets` directory. See more in the [Assets configuration](#asset-config) section. |
|
||||
| `styles` | An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: [sass/scss](https://sass-lang.com) and [less](https://lesscss.org). See more in the [Styles and scripts configuration](#style-script-config) section. |
|
||||
| `stylePreprocessorOptions` | An object containing option-value pairs to pass to style preprocessors. See more in the [Styles and scripts configuration](#style-script-config) section. |
|
||||
| `scripts` | An object containing JavaScript script files to add to the global context of the project. The scripts are loaded exactly as if you had added them in a `<script>` tag inside `index.html`. See more in the [Styles and scripts configuration](#style-script-config) section. |
|
||||
| `budgets` | Default size-budget type and thresholds for all or parts of your application. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See [Configure size budgets](guide/build#configure-size-budgets). \(Not available in `test` section.\) |
|
||||
| `fileReplacements` | An object containing files and their compile-time replacements. See more in [Configure target-specific file replacements](guide/build#configure-target-specific-file-replacements). |
|
||||
`index` | Configures the generation of the application's HTML index. See more in [Index configuration](#index-config). \(Only available in `browser` section.\) | |
|
||||
`index` | Configures the generation of the application's HTML index. See more in [Index configuration](#index-config). \(Only available in `browser` section.\) | |
|
||||
|
||||
|
||||
<a id="complex-config"></a>
|
||||
@@ -390,7 +390,7 @@ You can mix simple and complex file references for styles and scripts.
|
||||
|
||||
#### Style preprocessor options
|
||||
|
||||
In Sass you can make use of the `includePaths` feature for both component and global styles. This allows you to add extra base paths that are checked for imports.
|
||||
In Sass, you can make use of the `includePaths` feature for both component and global styles. This allows you to add extra base paths that are checked for imports.
|
||||
|
||||
To add paths, use the `stylePreprocessorOptions` option:
|
||||
|
||||
|
||||
@@ -9,7 +9,6 @@ The `contributors.json` should be maintained to keep our "org chart" in a single
|
||||
There are two pages:
|
||||
|
||||
* https://developers.google.com/experts/all/technology/angular
|
||||
(Googlers: source at http://google3/googledata/devsite/content/en/experts/all/technology/angular.html) which is maintained by Dawid Ostrowski based on a spreadsheet https://docs.google.com/spreadsheets/d/1_Ls2Kle7NxPBIG8f3OEVZ4gJZ8OCTtBxGYwMPb1TUVE/edit#gid=0.
|
||||
<!-- gkalpak: That URL doesn't seem to work anymore. New URL: https://developers.google.com/programs/experts/directory/ (?) -->
|
||||
|
||||
* [Ours](/about?group=GDE) which is derived from `contributors.json`.
|
||||
|
||||
@@ -307,9 +307,9 @@
|
||||
"devversion": {
|
||||
"name": "Paul Gschwendtner",
|
||||
"picture": "devversion.jpg",
|
||||
"twitter": "DevVersion",
|
||||
"website": "https://github.com/DevVersion",
|
||||
"bio": "Paul is a 17-year-old developer living in Germany. While he attends school, Paul works as a core team member on Angular Material. Paul focuses on tooling and building components for Angular.",
|
||||
"twitter": "devversion",
|
||||
"website": "https://github.com/devversion",
|
||||
"bio": "Paul is a Software Engineer at Google. He is part of the Angular team since 2016.",
|
||||
"groups": ["Angular"],
|
||||
"lead": "jelbourn"
|
||||
},
|
||||
@@ -421,7 +421,7 @@
|
||||
},
|
||||
"jeanmeche": {
|
||||
"name": "Matthieu Riegler",
|
||||
"picture":"jeanmeche.jpg",
|
||||
"picture": "jeanmeche.jpg",
|
||||
"twitter": "jean__meche",
|
||||
"bio": "Software engineer from the french Alps. Matthieu was born and raised with the web and now he love's building it! He currently works for Viseo.",
|
||||
"groups": ["Collaborators"]
|
||||
@@ -652,9 +652,7 @@
|
||||
"twitter": "mwycliffe_dev",
|
||||
"website": "https://mainawycliffe.dev/",
|
||||
"bio": "Wycliffe is a Software Engineer from Kenya passionate about Teaching, Speaking, Writing, Open Source, and Mentorship. On top of that, he is passionate about Typescript and loves teaching developers how to get the most out of it.",
|
||||
"groups": [
|
||||
"GDE"
|
||||
]
|
||||
"groups": ["GDE"]
|
||||
},
|
||||
"manekinekko": {
|
||||
"name": "Wassim Chegham",
|
||||
@@ -886,12 +884,12 @@
|
||||
"groups": ["GDE"]
|
||||
},
|
||||
"selintunc": {
|
||||
"name": "Selin Tunc",
|
||||
"picture": "selin.jpeg",
|
||||
"twitter": "selintunc_",
|
||||
"website": "https://www.linkedin.com/in/selinkaragulletunc",
|
||||
"bio": "Selin is a Software Developer Expert using Angular and Java at Garanti BBVA Technology in Turkey. She is the first woman Angular GDE in Turkey. She spends her spare time with her family, especially her little son, and by keeping herself up-to-date.",
|
||||
"groups": ["GDE"]
|
||||
"name": "Selin Tunc",
|
||||
"picture": "selin.jpeg",
|
||||
"twitter": "selintunc_",
|
||||
"website": "https://www.linkedin.com/in/selinkaragulletunc",
|
||||
"bio": "Selin is a Software Developer Expert using Angular and Java at Garanti BBVA Technology in Turkey. She is the first woman Angular GDE in Turkey. She spends her spare time with her family, especially her little son, and by keeping herself up-to-date.",
|
||||
"groups": ["GDE"]
|
||||
},
|
||||
"shairez": {
|
||||
"name": "Shai Reznik",
|
||||
@@ -916,7 +914,7 @@
|
||||
"bio": "Siddharth is a Full Stack JavaScript Developer and a GDE in Angular. He's passionate about sharing his knowledge on Angular, Firebase and the Web in general. He's the organizer of WebStack, a local community of developers focused on Web, Mobile, Voice and Server related technologies in general. WebStack hosts free monthly meetups every 2nd or 3rd Saturday of the month. Siddharth is also an avid photographer and loves traveling. Find him anywhere on the Web with `SiddAjmera`.",
|
||||
"groups": ["GDE"]
|
||||
},
|
||||
"simonaco": {
|
||||
"simonaco": {
|
||||
"name": "Simona Cotin",
|
||||
"picture": "simonacotin.jpg",
|
||||
"twitter": "simona_cotin",
|
||||
|
||||
@@ -426,9 +426,85 @@
|
||||
"tooltip": "Getting started with the CLI's esbuild-based build system."
|
||||
},
|
||||
{
|
||||
"url": "guide/http",
|
||||
"title": "HTTP client",
|
||||
"tooltip": "Use HTTP to talk to a remote server."
|
||||
"tooltip": "Use HTTP to talk to a remote server.",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/understanding-communicating-with-http",
|
||||
"title": "Understanding HTTP",
|
||||
"tooltip": "Understanding communicating with backend services using HTTP"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-setup-server-communication",
|
||||
"title": "Setup for server communication",
|
||||
"tooltip": "Setup a server communication for HTTP"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-server-communication",
|
||||
"title": "Communicating with backend services",
|
||||
"tooltip": "Understanding communicating with backend services using HTTP"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-request-data-from-server",
|
||||
"title": "Request data from a server",
|
||||
"tooltip": "Learn how to request data from the server via the HTTP client"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-make-jsonp-request",
|
||||
"title": "Make a JSONP request",
|
||||
"tooltip": "Make a cross-origin request via JSONP"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-handle-request-errors",
|
||||
"title": "Handle request errors",
|
||||
"tooltip": "Error handling"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-send-data-to-server",
|
||||
"title": "Send data to a server",
|
||||
"tooltip": "Learn how to send data to a server via the HTTP client"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-configure-http-url-parameters",
|
||||
"title": "Configure URL parameters",
|
||||
"tooltip": "Learn how to configure parameters of the URL when sending requests over HTTP"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-intercept-requests-and-responses",
|
||||
"title": "Intercept requests and responses",
|
||||
"tooltip": "Learn how to use HTTP interceptors to transform requests and responses"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-interceptor-use-cases",
|
||||
"title": "Interceptor use-cases",
|
||||
"tooltip": "Learn when to use HTTP interceptors"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-pass-metadata-to-interceptors",
|
||||
"title": "Pass metadata to interceptors",
|
||||
"tooltip": "Learn how to pass metadata to interceptors"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-track-show-request-progress",
|
||||
"title": "Track and show request progress",
|
||||
"tooltip": "Learn how to track and show progress when sending HTTP requests"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-optimize-server-interaction",
|
||||
"title": "Optimize server communication",
|
||||
"tooltip": "Learn how to use debouncing to optimize server interaction"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-security-xsrf-protection",
|
||||
"title": "Cross-Site Request Forgery (XSRF) protection",
|
||||
"tooltip": "Learn how to secure your website against Cross-Site Request Forgery"
|
||||
},
|
||||
{
|
||||
"url": "guide/http-test-requests",
|
||||
"title": "Test requests",
|
||||
"tooltip": "Learn how to test logic that uses the HTTP client"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "guide/hydration",
|
||||
@@ -1057,6 +1133,11 @@
|
||||
"title": "Intro to components",
|
||||
"tooltip": "About Components, Templates, and Views."
|
||||
},
|
||||
{
|
||||
"url": "guide/architecture-services",
|
||||
"title": "Intro to services and DI",
|
||||
"tooltip": "About services and dependency injection."
|
||||
},
|
||||
{
|
||||
"url": "guide/architecture-next-steps",
|
||||
"title": "Next steps",
|
||||
|
||||
@@ -258,13 +258,6 @@ The Phone XL price is over $700, so the **Notify Me** button appears on t
|
||||
To make the **Notify Me** button work, the child component needs to notify and pass the data to the parent component.
|
||||
The `ProductAlertsComponent` needs to emit an event when the user clicks **Notify Me** and the `ProductListComponent` needs to respond to the event.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
In new components, the Angular Generator includes an empty `constructor()`, the `OnInit` interface, and the `ngOnInit()` method.
|
||||
Since these steps don't use them, the following code examples omit them for brevity.
|
||||
|
||||
</div>
|
||||
|
||||
1. In `product-alerts.component.ts`, import `Output` and `EventEmitter` from `@angular/core`.
|
||||
|
||||
<code-example header="src/app/product-alerts/product-alerts.component.ts" path="getting-started/src/app/product-alerts/product-alerts.component.ts" region="imports"></code-example>
|
||||
|
||||
@@ -225,7 +225,7 @@ To get shipping data, from `shipping.json`, You can use the `HttpClient` `get()`
|
||||
|
||||
<code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.ts" region="get-shipping"></code-example>
|
||||
|
||||
For more information about Angular's `HttpClient`, see the [Client-Server Interaction](guide/http "Server interaction through HTTP") guide.
|
||||
For more information about Angular's `HttpClient`, see the [Client-Server Interaction](guide/understanding-communicating-with-http "Server interaction through HTTP") guide.
|
||||
|
||||
## Create a shipping component
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ If you have any trouble during this lesson, you can review the completed code fo
|
||||
|
||||
Angular apps are built around components, which are Angular's building blocks.
|
||||
Components contain the code, HTML layout, and CSS style information that provide the function and appearance of an element in the app.
|
||||
In Angular, components can contain other components. An app's functions and appearance can divided and partitioned into components.
|
||||
In Angular, components can contain other components. An app's functions and appearance can be divided and partitioned into components.
|
||||
|
||||
In [Lesson 1](tutorial/first-app/first-app-lesson-01), you updated the `AppComponent`, whose function is to contain all the other components.
|
||||
In this lesson, you create a `HomeComponent` to display the home page of the app.
|
||||
@@ -38,7 +38,7 @@ When you create your `HomeComponent`, you use these properties:
|
||||
* `standalone`: to describe whether the component requires a `ngModule`.
|
||||
* `imports`: to describe the component's dependencies.
|
||||
* `template`: to describe the component's HTML markup and layout.
|
||||
* `styleUrls`: to list the URLs of the CSS files that the component users in an array.
|
||||
* `styleUrls`: to list the URLs of the CSS files that the component uses in an array.
|
||||
|
||||
Components have other [properties](/api/core/Component), but these are the ones used by `HomeComponent`.
|
||||
|
||||
|
||||
@@ -30,6 +30,8 @@ In this step, you create a new component for your app.
|
||||
|
||||
In the **Terminal** pane of your IDE:
|
||||
|
||||
1. In your project directory, navigate to the `first-app` directory.
|
||||
|
||||
1. Run this command to create a new `HousingLocationComponent`
|
||||
|
||||
<code-example format="shell" language="shell">
|
||||
@@ -92,4 +94,4 @@ If you are having any trouble with this lesson, you can review the completed cod
|
||||
|
||||
## Next steps
|
||||
|
||||
* [First Angular app lesson 4 - Add a housing location interface to the application](tutorial/first-app/first-app-lesson-04)
|
||||
* [First Angular app lesson 4 - Add a housing location interface to the application](tutorial/first-app/first-app-lesson-04)
|
||||
|
||||
@@ -19,8 +19,7 @@ If you have any trouble during this lesson, you can review the completed code fo
|
||||
|
||||
## After you finish
|
||||
|
||||
* Your app has a new interface that it can use as a data type.
|
||||
* Your app has an instance of the new interface with sample data.
|
||||
* Your app's `HousingLocationComponent` template has a `HousingLocation` property to receive input.
|
||||
|
||||
## Conceptual preview of Inputs
|
||||
[Inputs](api/core/Input) allow components to share data. The direction of the data sharing is from parent component to child component.
|
||||
@@ -66,4 +65,4 @@ If you are having any trouble with this lesson, you can review the completed cod
|
||||
* [Lesson 6 - Add a property binding to an component’s template](tutorial/first-app/first-app-lesson-06)
|
||||
|
||||
## For more information about the topics covered in this lesson, visit:
|
||||
* [Sharing data between child and parent directives and components](guide/inputs-outputs)
|
||||
* [Sharing data between child and parent directives and components](guide/inputs-outputs)
|
||||
|
||||
@@ -43,6 +43,8 @@ In this case, `:id` is dynamic and will change based on how the route is request
|
||||
<code-example header="Add anchor with a routerLink directive to housing-location.component.ts" path="first-app-lesson-11/src/app/housing-location/housing-location.component.ts" region="add-router-link"></code-example>
|
||||
|
||||
The `routerLink` directive enables Angular's router to create dynamic links in the application. The value assigned to the `routerLink` is an array with two entries: the static portion of the path and the dynamic data.
|
||||
|
||||
For the routerLink to work in the template, add a file level import of RouterLink and RouterOutlet from '@angular/router', then update the component imports array to include both RouterLink and RouterOutlet
|
||||
|
||||
1. At this point you can confirm that the routing is working in your app. In the browser, refresh the home page and click the "learn more" button for a housing location.
|
||||
|
||||
|
||||
@@ -168,7 +168,7 @@ synchronous, because that would block the browser as it waits to return data.
|
||||
|
||||
In this tutorial, `HeroService.getHeroes()` returns an `Observable` so that it can
|
||||
use the Angular `HttpClient.get` method to fetch the heroes
|
||||
and have [`HttpClient.get()`](guide/http) return an `Observable`.
|
||||
and have [`HttpClient.get()`](guide/understanding-communicating-with-http) return an `Observable`.
|
||||
|
||||
### Observable `HeroService`
|
||||
|
||||
|
||||
+2
-1
@@ -58,7 +58,7 @@
|
||||
{"type": 301, "source": "/docs/*/latest/cli-quickstart.html", "destination": "/start"},
|
||||
{"type": 301, "source": "/docs/*/latest/glossary.html", "destination": "/guide/glossary"},
|
||||
{"type": 301, "source": "/docs/*/latest/quickstart.html", "destination": "/start"},
|
||||
{"type": 301, "source": "/docs/*/latest/guide/server-communication.html", "destination": "/guide/http"},
|
||||
{"type": 301, "source": "/docs/*/latest/guide/server-communication.html", "destination": "/guide/understanding-communicating-with-http"},
|
||||
{"type": 301, "source": "/docs/*/latest/guide/style-guide.html", "destination": "/guide/styleguide"},
|
||||
{"type": 301, "source": "/guide/bazel", "destination": "https://github.com/angular/angular/blob/main/packages/bazel/docs/BAZEL_SCHEMATICS.md"},
|
||||
{"type": 301, "source": "/guide", "destination": "/docs"},
|
||||
@@ -68,6 +68,7 @@
|
||||
{"type": 301, "source": "/guide/service-worker-comm", "destination": "/guide/service-worker-communications"},
|
||||
{"type": 301, "source": "/guide/service-worker-configref", "destination": "/guide/service-worker-config"},
|
||||
{"type": 301, "source": "/guide/webpack", "destination": "https://v5.angular.io/guide/webpack"},
|
||||
{"type": 301, "source": "/guide/http", "destination": "/guide/understanding-communicating-with-http"},
|
||||
{"type": 301, "source": "/guide/setup", "destination": "/guide/setup-local"},
|
||||
{"type": 301, "source": "/guide/setup-systemjs-anatomy", "destination": "/guide/file-structure"},
|
||||
{"type": 301, "source": "/guide/change-log", "destination": "https://github.com/angular/angular/blob/main/CHANGELOG.md"},
|
||||
|
||||
+23
-23
@@ -61,33 +61,33 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "16.0.0",
|
||||
"@angular/cdk": "16.0.0-rc.2",
|
||||
"@angular/common": "16.0.0",
|
||||
"@angular/compiler": "16.0.0",
|
||||
"@angular/core": "16.0.0",
|
||||
"@angular/elements": "16.0.0",
|
||||
"@angular/forms": "16.0.0",
|
||||
"@angular/material": "16.0.0",
|
||||
"@angular/platform-browser": "16.0.0",
|
||||
"@angular/platform-browser-dynamic": "16.0.0",
|
||||
"@angular/router": "16.0.0",
|
||||
"@angular/service-worker": "16.0.0",
|
||||
"@angular/animations": "16.1.0-rc.0",
|
||||
"@angular/cdk": "16.1.0-rc.0",
|
||||
"@angular/common": "16.1.0-rc.0",
|
||||
"@angular/compiler": "16.1.0-rc.0",
|
||||
"@angular/core": "16.1.0-rc.0",
|
||||
"@angular/elements": "16.1.0-rc.0",
|
||||
"@angular/forms": "16.1.0-rc.0",
|
||||
"@angular/material": "16.1.0-rc.0",
|
||||
"@angular/platform-browser": "16.1.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "16.1.0-rc.0",
|
||||
"@angular/router": "16.1.0-rc.0",
|
||||
"@angular/service-worker": "16.1.0-rc.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"safevalues": "^0.4.2",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/architect-cli": "0.1600.0",
|
||||
"@angular-devkit/build-angular": "16.0.0",
|
||||
"@angular-devkit/architect-cli": "0.1601.0-rc.0",
|
||||
"@angular-devkit/build-angular": "16.1.0-rc.0",
|
||||
"@angular-eslint/builder": "16.0.3",
|
||||
"@angular-eslint/eslint-plugin": "16.0.3",
|
||||
"@angular-eslint/eslint-plugin-template": "16.0.3",
|
||||
"@angular-eslint/template-parser": "^16.0.3",
|
||||
"@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#7dad055464ea9847e4870b9e3baad1f0c417bdf7",
|
||||
"@angular/cli": "16.0.0",
|
||||
"@angular/compiler-cli": "16.0.0",
|
||||
"@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#cf8e57fef4c3cc567b2877dff99db8e828cb70ae",
|
||||
"@angular/cli": "16.1.0-rc.0",
|
||||
"@angular/compiler-cli": "16.1.0-rc.0",
|
||||
"@bazel/bazelisk": "^1.7.5",
|
||||
"@bazel/buildozer": "^6.0.0",
|
||||
"@bazel/ibazel": "^0.16.2",
|
||||
@@ -98,8 +98,8 @@
|
||||
"@types/lunr": "^2.3.3",
|
||||
"@types/node": "^12.7.9",
|
||||
"@types/trusted-types": "^2.0.2",
|
||||
"@typescript-eslint/eslint-plugin": "5.59.9",
|
||||
"@typescript-eslint/parser": "5.59.9",
|
||||
"@typescript-eslint/eslint-plugin": "5.60.1",
|
||||
"@typescript-eslint/parser": "5.60.1",
|
||||
"archiver": "^5.3.0",
|
||||
"assert": "^2.0.0",
|
||||
"canonical-path": "1.0.0",
|
||||
@@ -110,10 +110,10 @@
|
||||
"dgeni": "^0.4.14",
|
||||
"dgeni-packages": "^0.30.0",
|
||||
"entities": "^4.0.0",
|
||||
"eslint": "8.41.0",
|
||||
"eslint": "8.43.0",
|
||||
"eslint-plugin-import": "2.27.5",
|
||||
"eslint-plugin-jasmine": "4.1.3",
|
||||
"eslint-plugin-jsdoc": "46.1.0",
|
||||
"eslint-plugin-jsdoc": "46.3.0",
|
||||
"eslint-plugin-prefer-arrow": "1.2.3",
|
||||
"find-free-port": "^2.0.0",
|
||||
"firebase-tools": "^12.0.0",
|
||||
@@ -136,7 +136,7 @@
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"light-server": "^2.9.1",
|
||||
"lighthouse": "^9.0.0",
|
||||
"lighthouse-logger": "^1.3.0",
|
||||
@@ -144,7 +144,7 @@
|
||||
"lunr": "^2.3.9",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"protractor": "~7.0.0",
|
||||
"puppeteer-core": "20.4.0",
|
||||
"puppeteer-core": "20.7.3",
|
||||
"rehype-slug": "^4.0.1",
|
||||
"remark": "^12.0.0",
|
||||
"remark-html": "^13.0.0",
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<aio-notification notificationId="survey-january-2023" expirationDate="2023-02-15" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
|
||||
<a href="https://goo.gle/angular-devsat-q1-2023">
|
||||
<mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
|
||||
<span class="message">Help Angular by taking a <b>quick survey</b>!</span>
|
||||
<span class="message">Help Angular by taking a <strong>quick survey</strong>!</span>
|
||||
<span class="action-button">Go to survey</span>
|
||||
</a>
|
||||
</aio-notification>
|
||||
|
||||
@@ -90,6 +90,11 @@ describe('ApiListComponent', () => {
|
||||
expectFilteredResult('status: security-risk', item => item.securityRisk);
|
||||
});
|
||||
|
||||
it('should be visible if they have the selected developer preview status', () => {
|
||||
component.setStatus({value: 'developer-preview', title: 'Developer Preview'});
|
||||
expectFilteredResult('status: developer-preview', item => item.developerPreview);
|
||||
});
|
||||
|
||||
it('should be visible if they match the selected API type', () => {
|
||||
component.setType({value: 'class', title: 'Class'});
|
||||
expectFilteredResult('type: class', item => item.docType === 'class');
|
||||
@@ -146,6 +151,12 @@ describe('ApiListComponent', () => {
|
||||
expectFilteredResult('security-risk', item => item.securityRisk);
|
||||
});
|
||||
|
||||
it('should filter as expected when status is developer-preview', () => {
|
||||
locationService.query = {status: 'developer-preview'};
|
||||
fixture.detectChanges();
|
||||
expectFilteredResult('developer-preview', item => item.developerPreview);
|
||||
});
|
||||
|
||||
it('should filter as expected for ?type', () => {
|
||||
locationService.query = {type: 'pipe'};
|
||||
expectOneItem('pipe_1', 'common', 'pipe', 'stable');
|
||||
@@ -235,6 +246,7 @@ const apiSections: ApiSection[] = [
|
||||
docType: 'class',
|
||||
stability: 'experimental',
|
||||
securityRisk: false,
|
||||
developerPreview: false
|
||||
},
|
||||
{
|
||||
name: 'class_2',
|
||||
@@ -243,6 +255,7 @@ const apiSections: ApiSection[] = [
|
||||
docType: 'class',
|
||||
stability: 'stable',
|
||||
securityRisk: false,
|
||||
developerPreview: false
|
||||
},
|
||||
{
|
||||
name: 'directive_1',
|
||||
@@ -251,6 +264,7 @@ const apiSections: ApiSection[] = [
|
||||
docType: 'directive',
|
||||
stability: 'stable',
|
||||
securityRisk: true,
|
||||
developerPreview: false
|
||||
},
|
||||
{
|
||||
name: 'pipe_1',
|
||||
@@ -259,6 +273,7 @@ const apiSections: ApiSection[] = [
|
||||
docType: 'pipe',
|
||||
stability: 'stable',
|
||||
securityRisk: true,
|
||||
developerPreview: false
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -275,6 +290,7 @@ const apiSections: ApiSection[] = [
|
||||
docType: 'class',
|
||||
stability: 'experimental',
|
||||
securityRisk: false,
|
||||
developerPreview: false
|
||||
},
|
||||
{
|
||||
name: 'function_1',
|
||||
@@ -283,6 +299,7 @@ const apiSections: ApiSection[] = [
|
||||
docType: 'function',
|
||||
stability: 'deprecated',
|
||||
securityRisk: true,
|
||||
developerPreview: false
|
||||
},
|
||||
{
|
||||
name: 'const_1',
|
||||
@@ -291,6 +308,7 @@ const apiSections: ApiSection[] = [
|
||||
docType: 'const',
|
||||
stability: 'stable',
|
||||
securityRisk: false,
|
||||
developerPreview: true
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -59,6 +59,7 @@ export class ApiListComponent implements OnInit {
|
||||
statuses: Option[] = [
|
||||
{ value: 'all', title: 'All' },
|
||||
{ value: 'stable', title: 'Stable'},
|
||||
{ value: 'developer-preview', title: 'Developer Preview'},
|
||||
{ value: 'deprecated', title: 'Deprecated' },
|
||||
{ value: 'security-risk', title: 'Security Risk' }
|
||||
];
|
||||
@@ -119,7 +120,10 @@ export class ApiListComponent implements OnInit {
|
||||
const matchesQuery = (item: ApiItem) =>
|
||||
sectionNameMatches || item.name.indexOf(query) !== -1;
|
||||
const matchesStatus = (item: ApiItem) =>
|
||||
status === 'all' || status === item.stability || (status === 'security-risk' && item.securityRisk);
|
||||
status === 'all' ||
|
||||
status === item.stability ||
|
||||
(status === 'security-risk' && item.securityRisk) ||
|
||||
(status === 'developer-preview' && item.developerPreview);
|
||||
const matchesType = (item: ApiItem) =>
|
||||
type === 'all' || type === item.docType;
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@ export interface ApiItem {
|
||||
docType: string;
|
||||
stability: string;
|
||||
securityRisk: boolean;
|
||||
developerPreview: boolean;
|
||||
}
|
||||
|
||||
export interface ApiSection {
|
||||
|
||||
@@ -136,7 +136,7 @@ export class LiveExampleComponent implements AfterContentInit {
|
||||
*/
|
||||
@Component({
|
||||
selector: 'aio-embedded-stackblitz',
|
||||
template: '<iframe #iframe style="border: 0" width="100%" height="100%"></iframe>',
|
||||
template: '<iframe #iframe style="border: 0" width="100%" height="100%" title="live example"></iframe>',
|
||||
styles: [ 'iframe { min-height: 400px; }' ]
|
||||
})
|
||||
export class EmbeddedStackblitzComponent implements AfterViewInit {
|
||||
|
||||
+1
-1
@@ -81,7 +81,7 @@
|
||||
</div>
|
||||
</section>
|
||||
<h2 style="color: red; margin-top: 40px; position: relative; text-align: center; text-shadow: 1px 1px #fafafa; border-top: none;">
|
||||
<b><i>This website requires JavaScript.</i></b>
|
||||
<strong><i>This website requires JavaScript.</i></strong>
|
||||
</h2>
|
||||
</noscript>
|
||||
|
||||
|
||||
@@ -108,7 +108,6 @@ aio-nav-menu {
|
||||
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;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ aio-api-list {
|
||||
|
||||
/* API FILTER MENU */
|
||||
aio-select {
|
||||
width: 200px;
|
||||
width: 220px;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 100%;
|
||||
|
||||
@@ -42,7 +42,7 @@ describe(browser.baseUrl, () => {
|
||||
const textPerUrl: { [key: string]: string } = {
|
||||
api: 'api list',
|
||||
'guide/architecture': 'architecture',
|
||||
'guide/http': 'httpclient',
|
||||
'guide/understanding-communicating-with-http': 'httpclient',
|
||||
'guide/security': 'security',
|
||||
tutorial: 'tutorial',
|
||||
start: 'getting started',
|
||||
|
||||
@@ -186,7 +186,8 @@
|
||||
/docs/ts/latest/cookbook/someCookbook.html --> /guide/someCookbook
|
||||
/docs/ts/latest/cookbook/ts-to-js.html --> https://v2.angular.io/docs/ts/latest/cookbook/ts-to-js.html
|
||||
/docs/ts/latest/glossary.html --> /guide/glossary
|
||||
/docs/ts/latest/guide/server-communication.html --> /guide/http
|
||||
/docs/ts/latest/guide/http --> /guide/understanding-communicating-with-http
|
||||
/docs/ts/latest/guide/server-communication.html --> /guide/understanding-communicating-with-http
|
||||
/docs/ts/latest/guide/style-guide.html --> /guide/styleguide
|
||||
/docs/ts/latest/quickstart.html --> /start
|
||||
/foo/bar/some-file.html --> /foo/bar/some-file
|
||||
|
||||
@@ -13,14 +13,14 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.0.0",
|
||||
"@angular/common": "^16.0.0",
|
||||
"@angular/compiler": "^16.0.0",
|
||||
"@angular/core": "^16.0.0",
|
||||
"@angular/forms": "^16.0.0",
|
||||
"@angular/platform-browser": "^16.0.0",
|
||||
"@angular/platform-browser-dynamic": "^16.0.0",
|
||||
"@angular/router": "^16.0.0",
|
||||
"@angular/animations": "^16.1.0-rc.0",
|
||||
"@angular/common": "^16.1.0-rc.0",
|
||||
"@angular/compiler": "^16.1.0-rc.0",
|
||||
"@angular/core": "^16.1.0-rc.0",
|
||||
"@angular/forms": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "^16.1.0-rc.0",
|
||||
"@angular/router": "^16.1.0-rc.0",
|
||||
"angular": "^1.8.3",
|
||||
"angular-in-memory-web-api": "~0.16.0",
|
||||
"angular-route": "1.8.3",
|
||||
@@ -29,9 +29,9 @@
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.0.0",
|
||||
"@angular/cli": "^16.0.0",
|
||||
"@angular/compiler-cli": "^16.0.0",
|
||||
"@angular-devkit/build-angular": "^16.1.0-rc.0",
|
||||
"@angular/cli": "^16.1.0-rc.0",
|
||||
"@angular/compiler-cli": "^16.1.0-rc.0",
|
||||
"@types/angular": "^1.8.4",
|
||||
"@types/angular-route": "^1.7.2",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
@@ -43,7 +43,7 @@
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~10.9.0",
|
||||
"typescript": "~4.9.3"
|
||||
|
||||
@@ -13,23 +13,23 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.0.0",
|
||||
"@angular/common": "^16.0.0",
|
||||
"@angular/compiler": "^16.0.0",
|
||||
"@angular/core": "^16.0.0",
|
||||
"@angular/forms": "^16.0.0",
|
||||
"@angular/platform-browser": "^16.0.0",
|
||||
"@angular/platform-browser-dynamic": "^16.0.0",
|
||||
"@angular/router": "^16.0.0",
|
||||
"@angular/animations": "^16.1.0-rc.0",
|
||||
"@angular/common": "^16.1.0-rc.0",
|
||||
"@angular/compiler": "^16.1.0-rc.0",
|
||||
"@angular/core": "^16.1.0-rc.0",
|
||||
"@angular/forms": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "^16.1.0-rc.0",
|
||||
"@angular/router": "^16.1.0-rc.0",
|
||||
"angular-in-memory-web-api": "~0.16.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.0.0",
|
||||
"@angular/cli": "^16.0.0",
|
||||
"@angular/compiler-cli": "^16.0.0",
|
||||
"@angular-devkit/build-angular": "^16.1.0-rc.0",
|
||||
"@angular/cli": "^16.1.0-rc.0",
|
||||
"@angular/compiler-cli": "^16.1.0-rc.0",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
"@types/node": "^16.11.35",
|
||||
"copyfiles": "^2.4.1",
|
||||
@@ -40,7 +40,7 @@
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~10.9.0",
|
||||
"typescript": "~4.9.3"
|
||||
|
||||
@@ -13,24 +13,24 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.0.0",
|
||||
"@angular/common": "^16.0.0",
|
||||
"@angular/compiler": "^16.0.0",
|
||||
"@angular/core": "^16.0.0",
|
||||
"@angular/elements": "^16.0.0",
|
||||
"@angular/forms": "^16.0.0",
|
||||
"@angular/platform-browser": "^16.0.0",
|
||||
"@angular/platform-browser-dynamic": "^16.0.0",
|
||||
"@angular/router": "^16.0.0",
|
||||
"@angular/animations": "^16.1.0-rc.0",
|
||||
"@angular/common": "^16.1.0-rc.0",
|
||||
"@angular/compiler": "^16.1.0-rc.0",
|
||||
"@angular/core": "^16.1.0-rc.0",
|
||||
"@angular/elements": "^16.1.0-rc.0",
|
||||
"@angular/forms": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "^16.1.0-rc.0",
|
||||
"@angular/router": "^16.1.0-rc.0",
|
||||
"angular-in-memory-web-api": "~0.16.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.0.0",
|
||||
"@angular/cli": "^16.0.0",
|
||||
"@angular/compiler-cli": "^16.0.0",
|
||||
"@angular-devkit/build-angular": "^16.1.0-rc.0",
|
||||
"@angular/cli": "^16.1.0-rc.0",
|
||||
"@angular/compiler-cli": "^16.1.0-rc.0",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
"@types/node": "^16.11.35",
|
||||
"jasmine-core": "~4.6.0",
|
||||
@@ -40,7 +40,7 @@
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~10.9.0",
|
||||
"typescript": "~4.9.3"
|
||||
|
||||
@@ -15,24 +15,24 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.0.0",
|
||||
"@angular/common": "^16.0.0",
|
||||
"@angular/compiler": "^16.0.0",
|
||||
"@angular/core": "^16.0.0",
|
||||
"@angular/forms": "^16.0.0",
|
||||
"@angular/localize": "^16.0.0",
|
||||
"@angular/platform-browser": "^16.0.0",
|
||||
"@angular/platform-browser-dynamic": "^16.0.0",
|
||||
"@angular/router": "^16.0.0",
|
||||
"@angular/animations": "^16.1.0-rc.0",
|
||||
"@angular/common": "^16.1.0-rc.0",
|
||||
"@angular/compiler": "^16.1.0-rc.0",
|
||||
"@angular/core": "^16.1.0-rc.0",
|
||||
"@angular/forms": "^16.1.0-rc.0",
|
||||
"@angular/localize": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "^16.1.0-rc.0",
|
||||
"@angular/router": "^16.1.0-rc.0",
|
||||
"angular-in-memory-web-api": "~0.16.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.0.0",
|
||||
"@angular/cli": "^16.0.0",
|
||||
"@angular/compiler-cli": "^16.0.0",
|
||||
"@angular-devkit/build-angular": "^16.1.0-rc.0",
|
||||
"@angular/cli": "^16.1.0-rc.0",
|
||||
"@angular/compiler-cli": "^16.1.0-rc.0",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
"@types/node": "^16.11.35",
|
||||
"jasmine-core": "~4.6.0",
|
||||
@@ -42,7 +42,7 @@
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~10.9.0",
|
||||
"typescript": "~4.9.3"
|
||||
|
||||
@@ -13,24 +13,24 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.0.0",
|
||||
"@angular/common": "^16.0.0",
|
||||
"@angular/compiler": "^16.0.0",
|
||||
"@angular/core": "^16.0.0",
|
||||
"@angular/forms": "^16.0.0",
|
||||
"@angular/platform-browser": "^16.0.0",
|
||||
"@angular/platform-browser-dynamic": "^16.0.0",
|
||||
"@angular/router": "^16.0.0",
|
||||
"@angular/service-worker": "^16.0.0",
|
||||
"@angular/animations": "^16.1.0-rc.0",
|
||||
"@angular/common": "^16.1.0-rc.0",
|
||||
"@angular/compiler": "^16.1.0-rc.0",
|
||||
"@angular/core": "^16.1.0-rc.0",
|
||||
"@angular/forms": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "^16.1.0-rc.0",
|
||||
"@angular/router": "^16.1.0-rc.0",
|
||||
"@angular/service-worker": "^16.1.0-rc.0",
|
||||
"angular-in-memory-web-api": "~0.16.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.0.0",
|
||||
"@angular/cli": "^16.0.0",
|
||||
"@angular/compiler-cli": "^16.0.0",
|
||||
"@angular-devkit/build-angular": "^16.1.0-rc.0",
|
||||
"@angular/cli": "^16.1.0-rc.0",
|
||||
"@angular/compiler-cli": "^16.1.0-rc.0",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
"@types/node": "^16.11.35",
|
||||
"jasmine-core": "~4.6.0",
|
||||
@@ -40,7 +40,7 @@
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~10.9.0",
|
||||
"typescript": "~4.9.3"
|
||||
|
||||
@@ -25,15 +25,15 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.0.0",
|
||||
"@angular/common": "^16.0.0",
|
||||
"@angular/compiler": "^16.0.0",
|
||||
"@angular/core": "^16.0.0",
|
||||
"@angular/forms": "^16.0.0",
|
||||
"@angular/platform-browser": "^16.0.0",
|
||||
"@angular/platform-browser-dynamic": "^16.0.0",
|
||||
"@angular/router": "^16.0.0",
|
||||
"@angular/upgrade": "^16.0.0",
|
||||
"@angular/animations": "^16.1.0-rc.0",
|
||||
"@angular/common": "^16.1.0-rc.0",
|
||||
"@angular/compiler": "^16.1.0-rc.0",
|
||||
"@angular/core": "^16.1.0-rc.0",
|
||||
"@angular/forms": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "^16.1.0-rc.0",
|
||||
"@angular/router": "^16.1.0-rc.0",
|
||||
"@angular/upgrade": "^16.1.0-rc.0",
|
||||
"core-js": "^2.5.4",
|
||||
"rxjs": "~7.8.0",
|
||||
"systemjs": "~0.19.39",
|
||||
@@ -42,7 +42,7 @@
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/compiler-cli": "^16.0.0",
|
||||
"@angular/compiler-cli": "^16.1.0-rc.0",
|
||||
"@rollup/plugin-commonjs": "^25.0.0",
|
||||
"@rollup/plugin-node-resolve": "^13.2.0",
|
||||
"@types/angular": "^1.8.4",
|
||||
@@ -58,7 +58,7 @@
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"lite-server": "^2.6.1",
|
||||
"protractor": "~7.0.0",
|
||||
"rollup": "^2.70.1",
|
||||
|
||||
@@ -17,16 +17,16 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.0.0",
|
||||
"@angular/common": "^16.0.0",
|
||||
"@angular/compiler": "^16.0.0",
|
||||
"@angular/core": "^16.0.0",
|
||||
"@angular/forms": "^16.0.0",
|
||||
"@angular/platform-browser": "^16.0.0",
|
||||
"@angular/platform-browser-dynamic": "^16.0.0",
|
||||
"@angular/platform-server": "^16.0.0",
|
||||
"@angular/router": "^16.0.0",
|
||||
"@nguniversal/express-engine": "^16.0.0",
|
||||
"@angular/animations": "^16.1.0-rc.0",
|
||||
"@angular/common": "^16.1.0-rc.0",
|
||||
"@angular/compiler": "^16.1.0-rc.0",
|
||||
"@angular/core": "^16.1.0-rc.0",
|
||||
"@angular/forms": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "^16.1.0-rc.0",
|
||||
"@angular/platform-server": "^16.1.0-rc.0",
|
||||
"@angular/router": "^16.1.0-rc.0",
|
||||
"@nguniversal/express-engine": "^16.1.0-rc.0",
|
||||
"angular-in-memory-web-api": "~0.16.0",
|
||||
"express": "^4.18.1",
|
||||
"rxjs": "~7.8.0",
|
||||
@@ -34,10 +34,10 @@
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.0.0",
|
||||
"@angular/cli": "^16.0.0",
|
||||
"@angular/compiler-cli": "^16.0.0",
|
||||
"@nguniversal/builders": "^16.0.0",
|
||||
"@angular-devkit/build-angular": "^16.1.0-rc.0",
|
||||
"@angular/cli": "^16.1.0-rc.0",
|
||||
"@angular/compiler-cli": "^16.1.0-rc.0",
|
||||
"@nguniversal/builders": "^16.1.0-rc.0",
|
||||
"@types/express": "^4.17.13",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
"@types/node": "^16.11.35",
|
||||
@@ -48,7 +48,7 @@
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~10.9.0",
|
||||
"typescript": "~4.9.3"
|
||||
|
||||
@@ -19,20 +19,20 @@
|
||||
"license": "MIT",
|
||||
"repository": {},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.0.0",
|
||||
"@angular/common": "^16.0.0",
|
||||
"@angular/compiler": "^16.0.0",
|
||||
"@angular/core": "^16.0.0",
|
||||
"@angular/elements": "^16.0.0",
|
||||
"@angular/forms": "^16.0.0",
|
||||
"@angular/localize": "^16.0.0",
|
||||
"@angular/platform-browser": "^16.0.0",
|
||||
"@angular/platform-browser-dynamic": "^16.0.0",
|
||||
"@angular/platform-server": "^16.0.0",
|
||||
"@angular/router": "^16.0.0",
|
||||
"@angular/service-worker": "^16.0.0",
|
||||
"@angular/upgrade": "^16.0.0",
|
||||
"@nguniversal/express-engine": "^16.0.0",
|
||||
"@angular/animations": "^16.1.0-rc.0",
|
||||
"@angular/common": "^16.1.0-rc.0",
|
||||
"@angular/compiler": "^16.1.0-rc.0",
|
||||
"@angular/core": "^16.1.0-rc.0",
|
||||
"@angular/elements": "^16.1.0-rc.0",
|
||||
"@angular/forms": "^16.1.0-rc.0",
|
||||
"@angular/localize": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser": "^16.1.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "^16.1.0-rc.0",
|
||||
"@angular/platform-server": "^16.1.0-rc.0",
|
||||
"@angular/router": "^16.1.0-rc.0",
|
||||
"@angular/service-worker": "^16.1.0-rc.0",
|
||||
"@angular/upgrade": "^16.1.0-rc.0",
|
||||
"@nguniversal/express-engine": "^16.1.0-rc.0",
|
||||
"angular": "^1.8.3",
|
||||
"angular-in-memory-web-api": "~0.16.0",
|
||||
"angular-route": "1.8.3",
|
||||
@@ -45,10 +45,10 @@
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.0.0",
|
||||
"@angular/cli": "^16.0.0",
|
||||
"@angular/compiler-cli": "^16.0.0",
|
||||
"@nguniversal/builders": "^16.0.0",
|
||||
"@angular-devkit/build-angular": "^16.1.0-rc.0",
|
||||
"@angular/cli": "^16.1.0-rc.0",
|
||||
"@angular/compiler-cli": "^16.1.0-rc.0",
|
||||
"@nguniversal/builders": "^16.1.0-rc.0",
|
||||
"@rollup/plugin-commonjs": "^25.0.0",
|
||||
"@rollup/plugin-node-resolve": "^13.2.0",
|
||||
"@types/angular": "^1.8.4",
|
||||
@@ -71,7 +71,7 @@
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"lite-server": "^2.6.1",
|
||||
"lodash": "^4.16.2",
|
||||
"protractor": "~7.0.0",
|
||||
|
||||
+1236
-985
File diff suppressed because it is too large
Load Diff
@@ -17,6 +17,7 @@ module.exports =
|
||||
|
||||
// Register the processors
|
||||
.processor(require('./processors/mergeParameterInfo'))
|
||||
.processor(require('./processors/processSeeTags'))
|
||||
.processor(require('./processors/processPseudoClasses'))
|
||||
.processor(require('./processors/convertPrivateClassesToInterfaces'))
|
||||
.processor(require('./processors/generateApiListDoc'))
|
||||
|
||||
@@ -40,7 +40,8 @@ function getExportInfo(exportDoc) {
|
||||
path: exportDoc.path,
|
||||
docType: getDocType(exportDoc),
|
||||
stability: getStability(exportDoc),
|
||||
securityRisk: !!exportDoc.security
|
||||
securityRisk: !!exportDoc.security,
|
||||
developerPreview: !!exportDoc.developerPreview
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -67,17 +67,17 @@ describe('generateApiListDoc processor', () => {
|
||||
];
|
||||
processor.$process(docs);
|
||||
expect(docs[2].data[0].items).toEqual([
|
||||
{ docType: 'directive', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: '', securityRisk: false },
|
||||
{ docType: 'pipe', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false },
|
||||
{ docType: 'decorator', title: 'CccCcc', name: 'cccccc', path: 'ccc', stability: '', securityRisk: false },
|
||||
{ docType: 'class', title: 'DddDdd', name: 'dddddd', path: 'ddd', stability: '', securityRisk: false }
|
||||
{ docType: 'directive', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'pipe', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'decorator', title: 'CccCcc', name: 'cccccc', path: 'ccc', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'class', title: 'DddDdd', name: 'dddddd', path: 'ddd', stability: '', securityRisk: false, developerPreview: false }
|
||||
]);
|
||||
expect(docs[2].data[1].items).toEqual([
|
||||
{ docType: 'interface', title: 'EeeEee', name: 'eeeeee', path: 'eee', stability: '', securityRisk: false },
|
||||
{ docType: 'function', title: 'FffFff', name: 'ffffff', path: 'fff', stability: '', securityRisk: false },
|
||||
{ docType: 'enum', title: 'GggGgg', name: 'gggggg', path: 'ggg', stability: '', securityRisk: false },
|
||||
{ docType: 'type-alias', title: 'HhhHhh', name: 'hhhhhh', path: 'hhh', stability: '', securityRisk: false },
|
||||
{ docType: 'const', title: 'IiiIii', name: 'iiiiii', path: 'iii', stability: '', securityRisk: false },
|
||||
{ docType: 'interface', title: 'EeeEee', name: 'eeeeee', path: 'eee', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'function', title: 'FffFff', name: 'ffffff', path: 'fff', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'enum', title: 'GggGgg', name: 'gggggg', path: 'ggg', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'type-alias', title: 'HhhHhh', name: 'hhhhhh', path: 'hhh', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'const', title: 'IiiIii', name: 'iiiiii', path: 'iii', stability: '', securityRisk: false, developerPreview: false },
|
||||
]);
|
||||
});
|
||||
|
||||
@@ -92,7 +92,7 @@ describe('generateApiListDoc processor', () => {
|
||||
];
|
||||
processor.$process(docs);
|
||||
expect(docs[1].data[0].items).toEqual([
|
||||
{ docType: 'pipe', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false },
|
||||
{ docType: 'pipe', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false, developerPreview: false },
|
||||
]);
|
||||
});
|
||||
|
||||
@@ -106,8 +106,8 @@ describe('generateApiListDoc processor', () => {
|
||||
];
|
||||
processor.$process(docs);
|
||||
expect(docs[1].data[0].items).toEqual([
|
||||
{ docType: 'const', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: '', securityRisk: false },
|
||||
{ docType: 'const', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false },
|
||||
{ docType: 'const', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'const', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false, developerPreview: false },
|
||||
]);
|
||||
});
|
||||
|
||||
@@ -121,8 +121,23 @@ describe('generateApiListDoc processor', () => {
|
||||
];
|
||||
processor.$process(docs);
|
||||
expect(docs[1].data[0].items).toEqual([
|
||||
{ docType: 'class', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: '', securityRisk: true },
|
||||
{ docType: 'class', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false },
|
||||
{ docType: 'class', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: '', securityRisk: true, developerPreview: false },
|
||||
{ docType: 'class', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false, developerPreview: false },
|
||||
]);
|
||||
});
|
||||
|
||||
it('should convert developerPreview to a boolean developerPreview', () => {
|
||||
const processor = processorFactory();
|
||||
const docs = [
|
||||
{ docType: 'package', id: '@angular/common/index', exports: [
|
||||
{ docType: 'class', name: 'AaaAaa', path: 'aaa', developerPreview: true },
|
||||
{ docType: 'class', name: 'BbbBbb', path: 'bbb' },
|
||||
]}
|
||||
];
|
||||
processor.$process(docs);
|
||||
expect(docs[1].data[0].items).toEqual([
|
||||
{ docType: 'class', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: '', securityRisk: false, developerPreview: true },
|
||||
{ docType: 'class', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false, developerPreview: false },
|
||||
]);
|
||||
});
|
||||
|
||||
@@ -138,10 +153,10 @@ describe('generateApiListDoc processor', () => {
|
||||
];
|
||||
processor.$process(docs);
|
||||
expect(docs[1].data[0].items).toEqual([
|
||||
{ docType: 'class', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: 'stable', securityRisk: false },
|
||||
{ docType: 'class', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: 'experimental', securityRisk: false },
|
||||
{ docType: 'class', title: 'CccCcc', name: 'cccccc', path: 'ccc', stability: 'deprecated', securityRisk: false },
|
||||
{ docType: 'class', title: 'DddDdd', name: 'dddddd', path: 'ddd', stability: '', securityRisk: false },
|
||||
{ docType: 'class', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: 'stable', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'class', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: 'experimental', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'class', title: 'CccCcc', name: 'cccccc', path: 'ccc', stability: 'deprecated', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'class', title: 'DddDdd', name: 'dddddd', path: 'ddd', stability: '', securityRisk: false, developerPreview: false },
|
||||
]);
|
||||
});
|
||||
|
||||
@@ -157,10 +172,10 @@ describe('generateApiListDoc processor', () => {
|
||||
];
|
||||
processor.$process(docs);
|
||||
expect(docs[1].data[0].items).toEqual([
|
||||
{ docType: 'class', title: 'AaaAaa', name: 'aaaaaa', path: 'xxx', stability: '', securityRisk: false },
|
||||
{ docType: 'class', title: 'BbbBbb', name: 'bbbbbb', path: 'vvv', stability: '', securityRisk: false },
|
||||
{ docType: 'class', title: 'CccCcc', name: 'cccccc', path: 'yyy', stability: '', securityRisk: false },
|
||||
{ docType: 'class', title: 'DddDdd', name: 'dddddd', path: 'uuu', stability: '', securityRisk: false },
|
||||
{ docType: 'class', title: 'AaaAaa', name: 'aaaaaa', path: 'xxx', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'class', title: 'BbbBbb', name: 'bbbbbb', path: 'vvv', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'class', title: 'CccCcc', name: 'cccccc', path: 'yyy', stability: '', securityRisk: false, developerPreview: false },
|
||||
{ docType: 'class', title: 'DddDdd', name: 'dddddd', path: 'uuu', stability: '', securityRisk: false, developerPreview: false },
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* @dgProcessor
|
||||
*
|
||||
* @description
|
||||
* Throws an error when @See is used with a backtick (`) reference.
|
||||
*/
|
||||
module.exports = function processSeeTags(createDocMessage) {
|
||||
return {
|
||||
$runAfter: ['tags-extracted'],
|
||||
$runBefore: [],
|
||||
$process(docs) {
|
||||
docs.forEach((doc) => {
|
||||
const backtick = doc.see?.find((see) => see.startsWith('`'));
|
||||
if (backtick) {
|
||||
throw new Error(createDocMessage(`@ "Use @link to create a link for ${backtick}`, doc));
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
@@ -49,6 +49,7 @@ module.exports = function getLinkInfo(getDocFromAlias, encodeCodeBlock, log) {
|
||||
} else if (url.indexOf('#') > 0) {
|
||||
var pathAndHash = url.split('#');
|
||||
linkInfo = getLinkInfoImpl(pathAndHash[0], title, currentDoc);
|
||||
linkInfo.title = encodeCodeBlock(pathAndHash.slice(-2).join('#'), true);
|
||||
linkInfo.url = linkInfo.url + '#' + pathAndHash[1];
|
||||
return linkInfo;
|
||||
|
||||
|
||||
+2516
-2253
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user