Compare commits

...

108 Commits

Author SHA1 Message Date
Andrew Kushnir d9d70f0a6f release: cut the v16.1.3 release 2023-06-28 08:04:36 -07:00
Angular Robot 520a1b5fe1 build: update eslint dependencies to v5.60.1 (#50859)
See associated pull request for more information.

PR Close #50859
2023-06-27 15:59:54 -07:00
Scott Fredericksen 5e5851d315 docs: clarify lesson 3, step 1 (#50849)
Unlike other steps of the tutorial, Lesson 3, Step 1 of the tutorial does not specify that the user should be in the project directory before creating the new component.

PR Close #50849
2023-06-27 15:59:14 -07:00
Angular Robot fcaeeff217 build: update all non-major dependencies (#50826)
See associated pull request for more information.

PR Close #50826
2023-06-27 15:58:36 -07:00
Angular Robot 9662d6f3c8 build: update actions/checkout digest to c85c95e (#50640)
See associated pull request for more information.

PR Close #50640
2023-06-27 15:57:59 -07:00
Matthieu Riegler f1d01dfd1c docs: Add a doc for NG5014 (#50567)
Short explanation this help fix the `Root node not found` error

PR Close #50567
2023-06-27 15:57:24 -07:00
Alan Agius 52f1dd9aaa refactor(animations): remove redundant castings (#50860)
This commit removes unnecessary castings.

PR Close #50860
2023-06-27 06:27:16 -07:00
Alan Agius a797f41d1b fix(platform-browser): wait until animation completion before destroying renderer (#50860)
Prior to this commit, the renderer destroy method was being called before the animation complete. This is problematic when using `REMOVE_STYLES_ON_COMPONENT_DESTROY` as it causes the styles to be removed too early.

This commit, updates this destroy logic to be call the render destroy once the animations complete.

This has been reported internally in:
- http://b/271251353#comment12
- http://b/282004950#comment5

PR Close #50860
2023-06-27 06:27:16 -07:00
Paul Gschwendtner ec1f6e3a5e build: do not attempt deflaking locally (#50852)
We've recently marked the ngtsc test as flaky for the Windows
job. We should not attempt running tests 3 times locally. This
negatively impacts the debugging/developer workflow.

Instead, flaky test attempts can still be made on CI. Using the
default attempt count of 3.

PR Close #50852
2023-06-26 13:38:19 -07:00
Paul Gschwendtner b958f4d38b build: allow for compliance specs only using template pipeline (#50835)
When writing signal compliance tests, we need to limit these to only the
template pipeline.

PR Close #50835
2023-06-26 13:36:07 -07:00
sunilbaba 5fecaad159 docs: Updating index.md to remove alert message which no longer applicable after version 15 (#50832)
amending commit message to fix lint

PR Close #50832
2023-06-26 13:35:12 -07:00
Nicolai Czempin a844249c7f docs: fix minor typo in tutorial (#50795)
PR Close #50795
2023-06-26 13:13:42 -07:00
Andrew Kushnir 9b7bc801f6 Revert "fix(platform-browser): wait until animation completion before destroying renderer (#50677)" (#50857)
This reverts commit 2b55103e94.

PR Close #50857
2023-06-26 12:18:40 -07:00
Andrew Kushnir 5a83c0c156 Revert "refactor(animations): remove redundant castings (#50677)" (#50857)
This reverts commit d22734766b.

PR Close #50857
2023-06-26 12:18:39 -07:00
Alan Agius 21ced23c7c refactor(animations): remove redundant castings (#50677)
This commit removes unnecessary castings.

PR Close #50677
2023-06-26 09:02:44 -07:00
Alan Agius 79dd6a847a fix(platform-browser): wait until animation completion before destroying renderer (#50677)
Prior to this commit, the renderer destroy method was being called before the animation complete. This is problematic when using `REMOVE_STYLES_ON_COMPONENT_DESTROY` as it causes the styles to be removed too early.

This commit, updates this destroy logic to be call the render destroy once the animations complete.

This has been reported internally in:
- http://b/271251353#comment12
- http://b/282004950#comment5

PR Close #50677
2023-06-26 09:02:43 -07:00
Alan Agius f9891c0a47 ci: re-enable RBE for http tests (#50741)
This commit enables RBE for common http tests which is now possible as the latest version of build-tooling supports Node.js 18.

PR Close #50741
2023-06-23 09:37:49 -07:00
Maciej Wojcik 52bd52477d docs: invert logic for disabled in getting started docs (#50822)
invert disabled logic, so it is clear that the button is disabled when canClick is set to false, not the other way around, as before

PR Close #50822
2023-06-23 09:37:11 -07:00
Paul Gschwendtner 2c2db2f349 docs: update bio for devversion (#50831)
Updates biography for Paul Gschwendtner. This will be the 1000th
commit in the `main` branch, aside from the other Angular projects.

PR Close #50831
2023-06-23 09:36:23 -07:00
mgechev ea38aee82a docs: update invalid links to the new http guides (#49456)
We don't have `guide/http` anymore, so this PR updates the invalid links

PR Close #49456
2023-06-22 17:07:00 -07:00
mgechev d39639d957 docs: use the updated http guides and remove the monolithic docs page (#49456)
This PR connects the navigation with the HTTP guides that originate
from the monolithic documentation page for the client.

PR Close #49456
2023-06-22 17:07:00 -07:00
Kristiyan Kostadinov e1bbe47c23 fix(elements): support input transform functions (#50713)
Fixes that `@angular/elements` didn't support input transform functions.

Fixes #50708.

PR Close #50713
2023-06-22 09:47:17 -07:00
Kristiyan Kostadinov dd6fc5785f fix(core): expose input transform function on ComponentFactory and ComponentMirror (#50713)
Exposes the function used to transform an input on `ComponentFactory.inputs` and `ComponentMirror.inputs`. We'll need this to support input transforms in `elements`.

PR Close #50713
2023-06-22 09:47:16 -07:00
alkavats1 8fdcb78c87 docs: improved standalone and workspace config guide (#50672)
PR Close #50672
2023-06-22 09:46:16 -07:00
Dawid Stawiszyński 5e0ba01f7c docs: fix typo in first-app-lesson-02 (#50817)
PR Close #50817
2023-06-22 09:45:28 -07:00
aanchal 89e9aebb6b docs: update the html tags (#50808)
PR Close #50808
2023-06-22 09:44:51 -07:00
Matthieu Riegler 8825d0d0f5 docs(docs-infra): remove transitions on sidenav (#50803)
The style of the side can be breaking when height > 4000. Lets remove this transition to not depend on a max height.

fixes #50537

PR Close #50803
2023-06-22 09:44:14 -07:00
Angular Robot a2e7b50b0e build: update io_bazel_rules_sass digest to f89fc59 (#50802)
See associated pull request for more information.

PR Close #50802
2023-06-22 09:43:23 -07:00
Aristeidis Bampakos 08b7242e4f docs: fix typos in signals guide (#50789)
PR Close #50789
2023-06-22 09:42:47 -07:00
Aristeidis Bampakos 9df0fdf93d docs: make review adjustments in the SSR guide (#50785)
PR Close #50785
2023-06-22 09:42:07 -07:00
alkavats1 89d9b98385 docs: updating the contribution guidline docs with the secure tag (#50618)
PR Close #50618
2023-06-22 09:41:27 -07:00
alkavats1 34605720d5 refactor: removed the unused declaration in the import statement (#50616)
ngmodule and httpclient modeule is removed from the provider.ts file from the import statement

PR Close #50616
2023-06-22 09:39:59 -07:00
Alan Agius 174f66952b refactor(core): fix typo Destory -> Destroy (#50676)
Just a typo fix `Destory` -> `Destroy`

PR Close #50676
2023-06-21 11:53:36 -07:00
Aristeidis Bampakos b90fbd9aba docs: review hydration guide (#50788)
PR Close #50788
2023-06-21 11:48:09 -07:00
Pawel Kozlowski 11d5c07d95 test(core): remove microbenchmarks (#50786)
The existing microbenchmarks are not widely known
and are not used to drive design / coding decissions.
At the same time those test add to the maintanance cost:
- use hand-written instructions;
- plug into runtime internals and are fragile;
- require development of mocks for the runtime internals.

Those tests are removed since they are costly to maintain
and, at the same, don't provide enough value.

PR Close #50786
2023-06-21 11:47:26 -07:00
Angular Robot 383f0dae17 build: update io_bazel_rules_sass digest to e141d5a (#50784)
See associated pull request for more information.

PR Close #50784
2023-06-21 11:46:31 -07:00
aanchal ca314961bf docs: updating the docs with the http secure tag (#50696)
PR Close #50696
2023-06-21 11:45:51 -07:00
Angular Robot 9148d62aae build: update babel dependencies (#50509)
See associated pull request for more information.

PR Close #50509
2023-06-21 11:45:00 -07:00
Matthieu Riegler 672409f9e5 refactor(platform-browser): remove #9100 todos. (#49406)
This commit assigns the correct type instead of `any`.

PR Close #49406
2023-06-21 11:43:45 -07:00
Andrew Kushnir 00f293c35f release: cut the v16.1.2 release 2023-06-21 11:25:30 -07:00
Heo Sangmin 5ae001829c fix(http): use serializeBody to support JSON payload in FetchBackend (#50776)
`HttpRequest.serializeBody` was used in HttpXhrBackend. `fetch` also needs to serialize request body.

Close #50775

PR Close #50776
2023-06-20 13:31:26 -07:00
Charles Lyding 6f443a9a8d refactor(compiler-cli): remove unused HandlerFlags enum (#50604)
The `HandlerFlags` enum is a leftover remnant of ngcc and is no longer used.

PR Close #50604
2023-06-20 13:01:49 -07:00
Charles Lyding 70e7ac56c8 refactor(compiler-cli): add internal compiler option to control class metadata emit (#50604)
An internal compiler option named `supportTestBed` is now available for use by the
Angular CLI. This option currently controls the extraction and emit of Angular class
metadata. This emitted information is only needed in AOT mode when using certain
TestBed APIs. However, AOT mode is currently not available for unit testing within
the Angular CLI. As a result, the metadata is not used within CLI generation applications
and in particular production applications. Without this option, the CLI needs to
manually perform a code transform to remove the metadata and also replicate TypeScript's
import eliding. This is can be a complicated operation and must be continually kept
up to date with any changes to both the Angular compiler and TypeScript. The introduction
of this new option alleviates these concerns.

PR Close #50604
2023-06-20 13:01:49 -07:00
Paul Gschwendtner 769a6f20f3 ci: update codeowners for benchpress (#50769)
Pawel and myself have investigated benchpress for quite some
time now, and I believe we have the most up-to-date understanding
in the team- so it would make sense to add us to the owners.

PR Close #50769
2023-06-20 13:00:37 -07:00
Paul Gschwendtner 78ece3149e build: speed up remote execution by allowing more concurrent jobs (#50734)
Bazel detects maximum number of jobs based on host resources.
Since we run remotely, we can increase this number significantly.

PR Close #50734
2023-06-20 18:05:24 +02:00
Paul Gschwendtner 44b7a73efb build: update browserslist db for integration tests (#50779)
Since we updated the devkit dependencies, we need to update
the browserslist DB versions in integration tests to avoid
browser mismatches causing errors like the following:

```
BrowserslistError:
[BABEL] /tmp/ng-integration-test-91jP3g/test-sandbox/node_modules/zone.js/fesm2015/zone.js: Unknown version 114 of edge (While processing: "base$0$0")
```

PR Close #50779
2023-06-20 18:04:52 +02:00
Paul Gschwendtner 945c900466 build: update angular dev-infra and chromium (#50779)
Updates Angular dev-infra and Chromium. Fixed up version of
https://github.com/angular/angular/pull/50111

PR Close #50779
2023-06-20 18:04:51 +02:00
Pawel Kozlowski 60b160f497 build: remove AngularJS benchmarks (#50730)
This change removes benchmark scenarios written in AngularJS
as the framework reached EOL and those numbers are no longer
relevant.

PR Close #50730
2023-06-20 14:57:06 +02:00
Angular Robot 7316f9655c build: update github/codeql-action action to v2.20.0 (#50774)
See associated pull request for more information.

PR Close #50774
2023-06-20 14:55:37 +02:00
Matthieu Riegler 9488a3fd46 fix(http): Send query params on fetch request (#50740)
QueryParams were missing when using the `FetchBackend`.

Fixes #50728

PR Close #50740
2023-06-20 12:59:27 +02:00
aanchal d274afc1a3 docs: included title attribute in the iframe tag (#50698)
PR Close #50698
2023-06-20 11:03:23 +02:00
Mladen Jakovljević 297b8e14e4 feat(docs-infra): add option to filter docs with developer preview status (#50142)
Add a feature to the ApiListComponent with which users can filter documents based on the "developer preview" status.

PR Close #50142
2023-06-20 11:01:32 +02:00
arturovt 1397721ed4 refactor(common): do not run CD when verifying image distortion (#50723)
This commit wraps the `assertNonZeroRenderedHeight` and `assertNoImageDistortion`
with `runOutsideAngular` to setup the `load` event listener outside of the Angular zone.
This was previously causing extra change detection cycles in development mode and
interfered debugging stuff.

PR Close #50723
2023-06-20 10:59:36 +02:00
Angular Robot 1bfde8c86c build: update eslint dependencies to v5.60.0 (#50690)
See associated pull request for more information.

PR Close #50690
2023-06-20 10:57:37 +02:00
Alan Agius 463e04ca22 refactor: use queueMicrotask to schedule micro tasks instead of various helpers (#50485)
`queueMicrotask` is an API which is supported by all browser and Node.js versions.

PR Close #50485
2023-06-15 16:38:21 +02:00
Paul Gschwendtner 1d3e96b7d9 test: mark ngtsc test target as flaky (#50718)
A larger investigation on why this is flaky is needed. Currently the
test is flaky with around 77% sucess rate and negatively impacts team
productivity. Subjectively, as reported by team members this it's much
more flaky than a success rate of 77%.

PR Close #50718
2023-06-15 15:34:43 +02:00
Angular Robot fd519b00dc build: update io_bazel_rules_sass digest to 13ff55c (#50717)
See associated pull request for more information.

PR Close #50717
2023-06-15 10:25:47 +02:00
Paul Gschwendtner 67e205ba13 ci: enable colors for bazel in CircleCi (#50720)
Enables colors for Bazel in CircleCI. Bazel does not seem to
detect color support properly, but CircleCI does support such.

Colors make debugging a little easier with larger Bazel logs.

PR Close #50720
2023-06-15 10:19:27 +02:00
Pawel Kozlowski e5c2271972 release: cut the v16.1.1 release 2023-06-14 18:41:34 +02:00
Paul Gschwendtner 71360b3a3e fix(compiler-cli): libraries compiled with v16.1+ breaking with Angular framework v16.0.x (#50715)
If a library is compiling with Angular v16.1.0, the library will break
for users that are still on Angular v16.0.x. This happens because the
`DirectiveDeclaration` or `ComponentDeclaration` types are not expecting
an extra field for `signals` metadata. This field was only added to the
generic types in `16.1.0`- so compilations fail with errors like this:

```
Error: node_modules/@angular/material/icon/index.d.ts:204:18 -
  error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 9 type arguments.
```

To fix this, we quickly roll back the code for inserting this metadata
field. That way, libraries remain compatible with all v16.x framework
versions.

We continue to include the `signals` metadata if `signals: true` is set.
This is not public API anyway right now- so cannot happen- but imagine
we expose some signal APIs in e.g. 16.2.x, then we'd need this metadata
and can reasonably expect signal-component library users to use a more
recent framework core version.

PR Close #50715
2023-06-14 16:36:18 +02:00
Matthieu Riegler 5e1d8444ae fix(migrations): Prevent a component from importing itself. (#50554)
This commit fixes the migrations for recursive components.

fixes #50525

PR Close #50554
2023-06-14 15:44:35 +02:00
alkavats1 934f260914 docs: added the alt attribute to the imag tag and replaced the i tag with the em tag (#50570)
PR Close #50570
2023-06-14 15:28:22 +02:00
Paul Gschwendtner 8b09c74f47 refactor(compiler-cli): fix incremental compilation breaking when running compiler through closure (#50673)
If the compiler CLI is running through closure compiler, the trait
decorator handlers are converted from classes to functions as ES5
is picked as default output target for the bundled version.

The problem is that currently all trait handlers end up having the
same `name`. i.e. an empty string, and therefore adopting previous
traits from a previous build iteration result in the incorrect handler
being used for e.g. registrering, compiling etc- causing
ambiguous/confusing errors down the line in other parts.

We can look into changing the output target in the future, but even
then we are safer using an actual literal due to property renaming.

```$$closure$$NgModuleDecoratorHandler = function() {}`.

It is is questionable if we should just simply NOT run the compiler
through JSCompiler.

PR Close #50673
2023-06-14 15:26:00 +02:00
Angular Robot e94f3874aa docs: update Angular CLI help [16.1.x] (#50710)
Updated Angular CLI help contents.

PR Close #50710
2023-06-14 13:27:09 +02:00
Matthieu Riegler 9ff5572b9f refactor(core): handle #24571 todos. (#49221)
This commit removes the remaining TODO(issue/24571) in core code base.

PR Close #49221
2023-06-14 12:33:45 +02:00
Matthieu Riegler 0a72df6037 docs: remove allowEmptyCodegenFiles. (#50379)
`allowEmptyCodegenFiles` serves no purpose, no need to mention it.

PR Close #50379
2023-06-14 11:19:47 +02:00
Matthieu Riegler d2186e4f16 refactor(compiler-cli): deprecate allowEmptyCodegenFiles (#50379)
The `allowEmptyCodegenFiles` is not used anymore.

PR Close #50379
2023-06-14 11:19:47 +02:00
Matthieu Riegler 9c13901ee9 refactor(platform-browser): remove unused polyfill (#50661)
The `jasmineToString` on Map isn't used anymore.

PR Close #50661
2023-06-14 10:58:05 +02:00
Matthieu Riegler 00bc813199 refactor(platform-browser): replace our own toBeAnInstanceOf with toBeInstanceOf (#50661)
There is no need to maintain that matcher since jasmine provides its own !

PR Close #50661
2023-06-14 10:58:04 +02:00
Matthieu Riegler c74af838b1 refactor(platform-browser): remove unused testing matcher (#50661)
We has some custom matchers that aren't used anymore:

* `toContainError`
* `toBePromise`

PR Close #50661
2023-06-14 10:58:04 +02:00
Matthieu Riegler 57de6284ad docs(platform-server): Make links out of @see tags (#50110)
This commit is part of the work for angular#50097 to improve the linking on the online documentation.

PR Close #50110
2023-06-14 10:54:40 +02:00
Matthieu Riegler e0552c0d29 docs(localize): Make links out of @see tags (#50110)
This commit is part of the work for angular#50097 to improve the linking on the online documentation.

PR Close #50110
2023-06-14 10:54:40 +02:00
Matthieu Riegler 5fa1111eeb docs(docs-infra): throw an error when @link is used with a backtick reference (#50110)
As part of #50097, we'll add this constraint to the @see comments

PR Close #50110
2023-06-14 10:54:40 +02:00
Matthieu Riegler b6e31be059 docs(animations): Make links out of @see tags (#50110)
This commit is part of the work for #50097 to improve the linking on the online documentation.

PR Close #50110
2023-06-14 10:54:40 +02:00
Matthieu Riegler 737729f930 docs(common): Make links out of @see tags (#50110)
This commit is part of the work for #50097 to improve the linking on the online documentation.

PR Close #50110
2023-06-14 10:54:40 +02:00
Matthieu Riegler 497f94eda0 docs(core): Make links out of @see tags (#50110)
This commit is part of the work for #50097 to improve the linking on the online documentation.

PR Close #50110
2023-06-14 10:54:40 +02:00
Matthieu Riegler 633aeb0c5f docs(forms): Make links out of @see tags (#50110)
This commit is part of the work for #50097 to improve the linking on the online documentation.

PR Close #50110
2023-06-14 10:54:39 +02:00
Matthieu Riegler b42b682391 docs(platform-browser): Make links out of @see tags (#50110)
This commit is part of the work for #50097 to improve the linking on the online documentation.

PR Close #50110
2023-06-14 10:54:39 +02:00
Matthieu Riegler 22c95a2194 docs(router): Make links out of @see tags (#50110)
This commit is part of the work for #50097 to improve the linking on the online documentation.

PR Close #50110
2023-06-14 10:54:39 +02:00
Matthieu Riegler ffabe64242 docs(docs-infra): create code block for links to methods (#50110)
Before this commit, links to methods had to rely on a custom title (or the method name would be displayed).

With this commit, {@link MyClass#myMethod} will ouput a link as `MyClass#myMethod`.
This has a 2nd advantage : We can now rely on the validation by the `checkAnchorLinksProcessor` to ensure the method actually exist.

This commit is part of #50110 to improve linking in the documentation.

PR Close #50110
2023-06-14 10:54:39 +02:00
David-Emmanuel DIVERNOIS d9bed48eb5 fix(core): extend toSignal to accept any Subscribable (#50162)
Extend toSignal to accept any Subscribable (instead of only Observable)
for consistency with AsyncPipe and for broader compatibility with any
observable library (that is compatible with the Subscribable interface).
This is only a type change as the implementation does not use anything
else than the Subscribable interface anyway.

PR Close #50162
2023-06-14 10:49:56 +02:00
Pawel Kozlowski f48c0bc4e3 release: cut the v16.1.0 release 2023-06-13 17:08:46 +02:00
Angular Robot fa3b7332a9 build: update actions/checkout action to v3.5.3 (#50689)
See associated pull request for more information.

PR Close #50689
2023-06-13 14:48:02 +02:00
Andrew Kushnir b90f2b1d66 refactor(common): use transform functions in NgOptimizedImage inputs (#50580)
This commit refactors the code of NgOptimizedImage directive to switch from getter/setter approach to convers inputs to use the `transform` function instead.

PR Close #50580
2023-06-13 13:20:50 +02:00
Andrew Kushnir a2bfb62afb fix(core): avoid duplicated content during hydration while processing a component with i18n (#50644)
This commit updates an internal hydration logic to make sure that the content of components with i18n blocks is cleaned up before we start rendering it.

Resolves #50627.

PR Close #50644
2023-06-13 13:12:08 +02:00
Nikolas Kazepis 8203b1f810 docs: update an example in the RouterEvent description (#50526)
PR Close #50526
2023-06-13 13:08:15 +02:00
Angular Robot f13ecd5fad build: update all non-major dependencies (#50583)
See associated pull request for more information.

PR Close #50583
2023-06-13 12:45:13 +02:00
Angular Robot 7abb71609b build: lock file maintenance (#50532)
See associated pull request for more information.

PR Close #50532
2023-06-13 11:46:08 +02:00
Russ 6b1669f3bb docs: fix "After you finish" description of first-app-lesson-05.md (#50645)
Lesson 5 previously had the same "After you finish" description as Lesson 4.

PR Close #50645
2023-06-13 11:36:46 +02:00
Kristiyan Kostadinov 57f9efe200 docs: update schematic authoring guide to use new utilities (#50667)
Updates the guide for writing `ng add` schematics to include the new authoring utilities. I've also removed the `NodePackageInstallTask` because it's redundant.

PR Close #50667
2023-06-12 19:15:46 +02:00
Kristiyan Kostadinov 78837878c8 build: update AIO to Angular 16.1 (#50667)
Updates AIO to Angular 16.1.0 to allow for some docs to be updated.

PR Close #50667
2023-06-12 19:15:46 +02:00
Miles Malerba ecbdb24694 test(compiler): Prevent back-sliding on already passing template pipeline tests (#50582)
Add a flag to disable specific tests when testing the template pipeline

Mark the currently failing tests

Add the template pipeline tests to CI

Update package.json

Co-authored-by: Paul Gschwendtner <paulgschwendtner@gmail.com>

PR Close #50582
2023-06-12 18:25:43 +02:00
Angular Robot ffdc1304d6 build: update io_bazel_rules_sass digest to 6e0915e (#50605)
See associated pull request for more information.

PR Close #50605
2023-06-12 15:36:33 +02:00
alkavats1 381137905b refactor: removed the unused contructor in lazyModule (#50536)
empty constructor removed and reduced the codesmells

PR Close #50536
2023-06-12 15:35:36 +02:00
Kevin Gay 59bc1a2439 build: Update Glob to fast-glob to remove Inflight due to memory leak (#50632)
Update Glob to fast-glob to remove the dependence of Inflight that contains a memory leak

Signed-off-by: Kevin Gay <5970002+GayKevin@users.noreply.github.com>

PR Close #50632
2023-06-12 15:33:47 +02:00
Angular Robot d8c41fd44c build: update dependency build_bazel_rules_nodejs to v5.8.3 (#50666)
See associated pull request for more information.

PR Close #50666
2023-06-12 15:28:52 +02:00
Matthieu Riegler dfb4d32d55 docs: update first-app (#50663)
This commit updates the first-app demo to v16.

PR Close #50663
2023-06-12 15:22:28 +02:00
Nate Radebaugh 03e7952f4c docs(core): Add note about testing to NG0203 (#50620)
When running into NG0203 while testing, a solution can be to wrap the
function in the TestBed.runInInjectionContext method.

PR Close #50620
2023-06-12 15:21:11 +02:00
Hadi 3247a46485 docs: update first-app-lesson-11.md to include info about routerLink (#50348)
Add info about importing RouterLink and RouterOutlet.

The existing document results in an error. The error indicates that the anchor element doesn't have the binding property for routerLink.

The corresponding module (RouterModule) should be imported in the component template.

Add description for RouterModule in housing-location component

The description is added to fix the issue with the anchor element tag binding.

PR Close #50348
2023-06-12 14:26:04 +02:00
Manuel Timelthaler 3b2f119f57 docs: add missing navigation item (#50113)
PR Close #50113
2023-06-12 12:39:02 +02:00
aanchal 7c7a4a273a docs: added lang attributes in html files (#50588)
PR Close #50588
2023-06-12 12:08:10 +02:00
aanchal 8234738120 docs: removed duplicated words (#50648)
PR Close #50648
2023-06-12 11:43:43 +02:00
alkavats1 2d66e933c7 docs: added title attribute to the iframe tag (#50569)
PR Close #50569
2023-06-12 11:24:36 +02:00
Shadab Ansari d6f26a9d39 docs(packaging): Clarify the necessity of dev-dependencies (#50619)
Clarify the role of dev-dependencies. Dependencies are required for production
ie, execution of an application, whereas devDependencies are required for
developing as well as *building* the application (dev and prod build both)

PR Close #50619
2023-06-12 11:19:12 +02:00
Jessica Janiuk 2738c7b00d docs: add information about usage of innerHTML and outerHTML (#50643)
Usage of innerHTML and outerHTML will cause the same problem as using direct DOM manipulation.

PR Close #50643
2023-06-12 11:17:53 +02:00
aanchal 7ca5cb4969 docs: removed unused methods (#50631)
PR Close #50631
2023-06-09 17:41:56 +02:00
Pham Huu Hien 59e29fd6e6 docs: remove repeated word (#50614)
PR Close #50614
2023-06-09 17:39:15 +02:00
Alex Rickabaugh a66608a13c release: cut the v16.1.0-rc.0 release 2023-06-08 13:41:36 -07:00
463 changed files with 20603 additions and 21830 deletions
+8 -3
View File
@@ -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
+5 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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 }}
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
View File
@@ -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
View File
@@ -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
+6 -6
View File
@@ -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",
],
)
+2 -2
View File
@@ -1,4 +1,4 @@
{
"branchName": "refs/heads/main",
"sha": "7b7b06a029295715b57b1a602b5021d0d0853bb3"
"branchName": "refs/heads/16.1.x",
"sha": "5f659f810481aa2b71b54e0856cbfd6f126ea68e"
}
+1 -1
View File
@@ -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
}
]
+25 -15
View File
@@ -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"
]
}
}
+20 -19
View File
@@ -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 -1
View File
@@ -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';
+1 -1
View File
@@ -10,7 +10,7 @@
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"target": "es2022",
"typeRoots": [
"node_modules/@types"
],
File diff suppressed because it is too large Load Diff
+8
View File
@@ -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 -->
+1 -1
View File
@@ -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).
+33
View File
@@ -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",
@@ -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"
}
}
}
@@ -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.",
@@ -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')}`);
}
@@ -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"
}
}
}
}
@@ -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,7 +1,7 @@
<!-- #docregion event-binding -->
<button
type="button"
[disabled]="canClick"
[disabled]="!canClick"
(click)="sayMessage()">
Trigger alert message
</button>
@@ -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.
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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. |
+1 -1
View File
@@ -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
+14 -4
View File
@@ -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
+1 -1
View File
@@ -2,7 +2,7 @@
This topic lists localized versions of the Angular documentation.
* [Espa&ntilde;ol](http://docs.angular.lat) <!-- Español -->
* [Espa&ntilde;ol](https://docs.angular.lat) <!-- Español -->
* [简体中文版](https://angular.cn) <!-- 简体中文版 -->
* [正體中文版](https://angular.tw) <!-- 正體中文版 -->
* [日本語版](https://angular.jp) <!-- 日本語版 -->
+2 -2
View File
@@ -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). |
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+4 -2
View File
@@ -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
+3 -3
View File
@@ -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.
+2 -2
View File
@@ -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 -->
+15 -15
View File
@@ -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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // &lt; client-side application configuration (standalone app only)
app.config.ts &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // &lt;-- client-side application configuration (standalone app only)
</div>
<div class='file'>
app.module.ts &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // &lt; client-side application module (NgModule app only)
app.module.ts &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // &lt;-- 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
+1 -1
View File
@@ -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. |
+6 -6
View File
@@ -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:
-1
View File
@@ -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`.
+12 -14
View File
@@ -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",
+83 -2
View File
@@ -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",
-7
View File
@@ -258,13 +258,6 @@ The Phone XL price is over &dollar;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>
+1 -1
View File
@@ -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
View File
@@ -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
View File
@@ -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",
+1 -1
View File
@@ -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
View File
@@ -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 -19
View File
@@ -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",
File diff suppressed because it is too large Load Diff
+1
View File
@@ -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
View File
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