Compare commits

..

157 Commits

Author SHA1 Message Date
Dylan Hunn e41245b344 release: cut the v16.1.5 release 2023-07-13 10:54:33 -07:00
Angular Robot d0a9f029d9 build: update dependency prettier to v3 (#50945)
See associated pull request for more information.

PR Close #50945
2023-07-13 09:38:16 -07:00
Mark Thompson e170c10567 docs: fix image issues by hosting them on aio, refactor content (#51014)
PR Close #51014
2023-07-13 09:36:57 -07:00
Mark Thompson 92a03c4b63 docs: delete the files from each of the directories. (#51014)
PR Close #51014
2023-07-13 09:36:57 -07:00
Mark Thompson cb741a201e docs: reformat the first-app tutorial to be less verbose, add image hosting (#51014)
PR Close #51014
2023-07-13 09:36:57 -07:00
Jared Bada d0c0b0276c docs(docs-infra): typo fix in aot-metadata-errors (#51017)
PR Close #51017
2023-07-13 09:36:25 -07:00
Angular Robot b355fb5f25 build: update github/codeql-action action to v2.20.3 (#50930)
See associated pull request for more information.

PR Close #50930
2023-07-13 09:33:54 -07:00
Charles Lyding b97f02c489 docs: update esbuild developer preview known issues (#51006)
Updates the esbuild-based browser application builder developer preview guide's known issue section as follows:
* Removed global script/style hashing problem (fixed)
* Added long build times with Sass and pnpm/Yarn PnP

PR Close #51006
2023-07-13 09:33:21 -07:00
Joey Perrott 52749db653 ci: use frozen-lockfile in CI (#51012)
Use frozen-lockfile for the CI yarn install

PR Close #51012
2023-07-11 19:05:30 +00:00
Joey Perrott f31141c0d8 ci: remove GHA lint job from required statuses (#51011)
Remove the GHA lint job from required statuses as it is a Github Check and Angular Robot doesn't find it

PR Close #51011
2023-07-11 18:01:43 +00:00
Alan Agius 31419f6a3b perf(platform-browser): do not remove renderer from cache when REMOVE_STYLES_ON_COMPONENT_DESTROY is enabled. (#51005)
Removing the renderer from cache is not needed when `REMOVE_STYLES_ON_COMPONENT_DESTROY` is enabled. This change retains the behaviour of keeping the renderer cached for the entire lifecycle of the application the same way it is done when `REMOVE_STYLES_ON_COMPONENT_DESTROY` is disabled.

This seems to have be causing an increase in scripting. See: http://b/290666638

PR Close #51005
2023-07-11 10:11:51 -07:00
Joey Perrott a4b0d29696 ci: migrate lint job from CircleCI to GHA (#50891)
Migrate the lint job to Github Actions

PR Close #50891
2023-07-11 17:06:16 +00:00
Matthieu Riegler de01f75c21 refactor(core): Log a warning when multiple pipes match a name (#50389)
Since this might be too breaking, let's log for now and wait for a major to throw an actual error.

Fixes #13569

PR Close #50389
2023-07-11 08:29:08 -07:00
Antonio Pekeljevic c8e451606a docs: add missing jsdocs for static ngzone methods (#50924)
PR Close #50924
2023-07-11 08:28:39 -07:00
Matthieu Riegler f920fcbd94 fix(animations): Ensure elements are removed from the cache after leave animation. (#50929)
This commit fixes a memory leak.

`_namespaceLookup` was cleared before the call to `processLeaveNode()` which was using the lookup.
Without that lookup `clearElementCache()` wasn't called thus keeping a reference to the element.

Fixes #24197 & #50533

PR Close #50929
2023-07-11 08:28:11 -07:00
Aristeidis Bampakos c48d1e3f55 docs: fix typos in tutorial lesson 1 (#50986)
PR Close #50986
2023-07-11 08:27:43 -07:00
Aristeidis Bampakos bba36ab4de docs: fix typos in tutorial lesson 2 (#50987)
PR Close #50987
2023-07-11 08:27:16 -07:00
Aristeidis Bampakos 0542e1f34d docs: fix styling in tutorial lesson 3 (#50999)
PR Close #50999
2023-07-11 08:26:48 -07:00
Aristeidis Bampakos c194d34bb1 docs: fix styling in tutorial lesson 5 (#51001)
PR Close #51001
2023-07-11 08:26:19 -07:00
Aristeidis Bampakos 302f857d51 docs: fix typo in tutorial lesson 6 (#51002)
PR Close #51002
2023-07-11 08:25:49 -07:00
Matthieu Riegler 3efb577cf3 fix(upgrade): Use takeUntil on leaky subscription. (#50901)
Using the life cycling hook `onDestroy` to end the subscription.

fixes #48032

PR Close #50901
2023-07-11 08:24:31 -07:00
Dzhavat Ushev 32e74bec37 docs: add missing backtick character (#50908)
PR Close #50908
2023-07-11 08:23:49 -07:00
Matthieu Riegler 8c9377c779 refactor(core): fix Tnode/TView assertion. (#50914)
The debug data structure was removed in #48281. Before this fix the assertion relied on it.

PR Close #50914
2023-07-11 08:23:19 -07:00
Matthieu Riegler c65913ecb7 fix(core): handle deref returning null on RefactiveNode. (#50992)
On Safari <16.1 there is a bug where `deref` can return `null`.

Fixes #50989

PR Close #50992
2023-07-11 08:22:48 -07:00
alkavats1 e35cc07a1e docs: updated the i tag with the em tag (#50923)
PR Close #50923
2023-07-10 07:15:49 -07:00
Matthieu Riegler 4c4c3bda4e docs: remove mention of deprecated providedIn: module. (#50925)
Only 'any' and 'platform' are valid values.

PR Close #50925
2023-07-10 07:12:36 -07:00
Matthieu Riegler ee8fb520bf docs: Improve documentation about Injection context / inject (#49782)
Injection context has gain public visibility with the exposure of `inject`. Lets provide some insights.

Closes  #49774

PR Close #49782
2023-07-10 07:09:32 -07:00
aanchal 45fab0fa8d docs: omit repetitions (#50629)
PR Close #50629
2023-07-10 07:09:00 -07:00
Paul Gschwendtner 18b36d7ff7 refactor: improve type safety of interpolation AST (#50903)
Instead of using `any`, we should use the actual types that
are available from the parser.

PR Close #50903
2023-07-10 07:08:29 -07:00
Andrew Kushnir 499fb5c772 fix(core): ensure that standalone components get correct injector instances (#50954)
Prior to this change, we've used `componentDef.id` as a key in a Map that acts as a cache to avoid re-creating injector instances for standalone components. In v16, the logic that generates the id has changed from an auto-incremental to a generation based on metadata. If multiple components have similar metadata, their ids might overlap.

This commit updates the logic to stop using `componentDef.id` as a key and instead, use the `componentDef` itself. This would ensure that we always have a correct instance of an injector associated with a standalone component instance.

Resolves #50724.

PR Close #50954
2023-07-10 07:07:44 -07:00
Alan Agius c0865695a6 docs: add link to critters (#50958)
This commit add a link to critters which is used by the CLI to perform inlining of critical CSS.

PR Close #50958
2023-07-10 07:06:43 -07:00
Alex Rickabaugh 1bf99e2f92 release: cut the v16.1.4 release 2023-07-06 16:48:09 -07:00
Matthieu Riegler 7aa6e580c9 docs: update link to the TS config. (#50933)
This TS config doc is now at https://angular.io/guide/typescript-configuration

PR Close #50933
2023-07-05 13:58:35 +02:00
Muhammed Umar 963bfaf84b docs: Router tutorial tour of heroes - doc bug fix suggestion #50794 (#50846)
:#

PR Close #50846
2023-07-05 13:57:31 +02:00
alkavats1 2f2781065c docs: updated the b tag with the strong tag (#50921)
PR Close #50921
2023-07-05 13:55:52 +02:00
Angular Robot 722f4b7dc9 build: update eslint dependencies to v5.61.0 (#50931)
See associated pull request for more information.

PR Close #50931
2023-07-05 13:53:59 +02:00
Terry d555a33761 docs(forms): FormBuilder is not associated with ReactiveFormsModule (#50941)
PR Close #50941
2023-07-05 13:53:11 +02:00
Alex cb1331b01c docs: corrected line 4 by adding 'to' (#50937)
PR Close #50937
2023-07-05 13:51:18 +02:00
Matthieu Riegler b9c28ca997 refactor(platform-browser-dynamic): Fix JSDoc comment (#50893)
JSDoc comments should start with 2 stars or the annotations would not be picked up by the AIO workflow.

With this fix, the internal methods are no longer visible in the doc.

PR Close #50893
2023-06-30 11:49:30 -07:00
Matthieu Riegler 33fea8e2fe refactor(animations): Fix JSDoc comment (#50893)
JSDoc comments should start with 2 stars or the annotations would not be picked up by the AIO workflow.

With this fix, the internal methods are no longer visible in the doc.

PR Close #50893
2023-06-30 11:49:30 -07:00
Angular Robot d31322f4a7 build: update scorecard action dependencies (#50880)
See associated pull request for more information.

PR Close #50880
2023-06-30 11:42:49 -07:00
Angular Robot 2b6227050d build: update all non-major dependencies (#50879)
See associated pull request for more information.

PR Close #50879
2023-06-30 11:41:52 -07:00
Payam Valadkhan 392d9446af test(compiler-cli): add compliance tests for NgModule only scenarios in local mode (#50577)
Reused the existing compliance tests for full compilation.

PR Close #50577
2023-06-30 11:38:36 -07:00
Payam Valadkhan 99936345ad refactor(compiler-cli): add local option to compliance test infra (#50577)
The option 'local compile' is added for the test cases, and the locally compiled file for an input `abc.ts` is compared by default with the file `abc.local.js`. This allows to use the same input `abc.ts` for both full compilation (compared with `abc.js`) and local compilation (compared with `abc.local.js`). An example is provided in the next commit when compliance tests are added for the NgModule local compilation.

PR Close #50577
2023-06-30 11:38:36 -07:00
Payam Valadkhan b8c3656cb5 refactor(compiler): add a new interface for NgModule metadata to t rebase be used in local compilation mode (#50577)
The new interface is discrete-unioned with the existing interface to cover the cases for local and global (i.e., full and partial) compilation modes.

This change of interface required some adjustmeents cross repo which explains the changes made to other files.

PR Close #50577
2023-06-30 11:38:36 -07:00
Payam Valadkhan d9947ebf5e refactor(compiler-cli): circuit out reference resolving in NgModule annotation handler in local compilation mode (#50577)
All attempts related to obtaining R3Reference for bootstrap, imports, exports and declarations are cut in local compilation mode.

This will allow the analysis to pass without any error diagnostics, but the result is a quite empty meta info. Next commits will add data to the meta so that the NgModule can be compiled more accurately.

PR Close #50577
2023-06-30 11:38:36 -07:00
Paul Gschwendtner a4348355ce fix(upgrade): allow for downgraded components to work with component-router (#50871)
In the past, we had an implementation of the "Angular 2" router that
also worked with AngularJS. Published as `@angular/router`. We continued
to expose that router implementation in G3 and some applications still
use it. Now, when upgrading, they are seeing issues where the router
throws because it cannot find a route config/ or `$canActivate` on the
controller- simply because there is no `controller` function for
downgraded components.

We can fix this and unblock the update by simply ensuring a controller
function is defined.

PR Close #50871
2023-06-30 11:36:57 -07:00
arturovt 4ba5850ba6 fix(core): use setTimeout when coalescing tasks in Node.js (#50820)
This commit updates the implementation of the `getNativeRequestAnimationFrame`
and checks whether the current code runs in the browser before retrieving
`requestAnimationFrame`. `requestAnimationFrame` is not available when the code
is running in the Node.js environment. We have to fallback to `setTimeout` for
delaying the change detection.

PR Close #50820
2023-06-30 11:32:39 -07:00
Angular Robot 4073cc04b3 build: lock file maintenance (#50877)
See associated pull request for more information.

PR Close #50877
2023-06-28 13:33:23 -07:00
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
6557 changed files with 230082 additions and 531670 deletions
+1 -3
View File
@@ -6,6 +6,7 @@
node_modules
dist
aio/node_modules
aio/content/example-playground
aio/tools/examples/shared/node_modules
aio/tools/examples/shared/example-scaffold
@@ -16,8 +17,6 @@ integration/cli-hello-world/node_modules
integration/cli-hello-world-ivy-i18n/node_modules
integration/cli-hello-world-lazy/node_modules
integration/cli-hello-world-mocha/node_modules
integration/cli-signal-inputs/node_modules
integration/defer/node_modules
integration/dynamic-compiler/node_modules
integration/forms/node_modules
integration/injectable-def/node_modules
@@ -38,4 +37,3 @@ integration/typings_test_rxjs7/node_modules
integration/typings_test_ts49/node_modules
integration/typings_test_ts50/node_modules
integration/typings_test_ts51/node_modules
integration/typings_test_ts52/node_modules
+1 -7
View File
@@ -135,16 +135,10 @@ build:remote --platforms=@npm//@angular/build-tooling/bazel/remote-execution:pla
# Remote instance and caching
build:remote --remote_instance_name=projects/internal-200822/instances/primary_instance
build:remote --bes_instance_name=internal-200822
build:remote --project_id=internal-200822
build:remote --remote_cache=remotebuildexecution.googleapis.com
build:remote --remote_executor=remotebuildexecution.googleapis.com
# Use HTTP remote cache
build:remote-cache --remote_cache=https://storage.googleapis.com/angular-team-cache
build:remote-cache --remote_accept_cached=true
build:remote-cache --remote_upload_local_results=true
build:remote-cache --google_default_credentials
# Ensure that tags like "no-remote-exec" get propagated to actions created by rules,
# even if the rule implementation does not explicitly pass them to the execution requirements.
# https://bazel.build/reference/command-line-reference#flag--experimental_allow_tags_propagation
+713 -6
View File
@@ -1,16 +1,723 @@
# This config is remaining in place to prevent pull requests failing because of CircleCI config missing.
# Configuration file for https://circleci.com/gh/angular/angular
# Note: YAML anchors allow an object to be re-used, reducing duplication.
# The ampersand declares an alias for an object, then later the `<<: *name`
# syntax dereferences it.
# See https://blog.daemonl.com/2016/02/yaml.html
# To validate changes, use an online parser, eg.
# https://yaml-online-parser.appspot.com/
# CircleCI configuration version
# Version 2.1 allows for extra config reuse features
# https://circleci.com/docs/2.0/reusing-config/#getting-started-with-config-reuse
version: 2.1
jobs:
pass:
# We don't want to include the current branch name in the cache key because that would prevent
# PRs from being able to restore the cache since the branch names are always different for PRs.
# The cache key should only consist of dynamic values that change whenever something in the
# cache changes. For example:
# 1) yarn lock file changes --> cached "node_modules" are different.
# 2) bazel repository definitions change --> cached bazel repositories are different.
# Windows needs its own cache key because binaries in node_modules are different.
# **NOTE 1 **: In order to avoid the cache from growing indefinitely and causing slow-downs, we invalidate the cache monthly.
# (See https://support.circleci.com/hc/en-us/articles/360012618473-Creating-a-daily-cache.)
# **NOTE 2 **: If you change the cache key prefix, also sync the cache_key_fallback to match.
# **NOTE 3 **: Keep the static part of the cache key as prefix to enable correct fallbacks.
# **NOTE 4 **: To make sure modified patches can be applied without needing to manually update the cache key,
# the fallback cache key will not match if patches have been modified.
# See https://circleci.com/docs/2.0/caching/#restoring-cache for how prefixes work in CircleCI.
var_3: &cache_key v8-angular-node-16-{{ checksum "month.txt" }}-{{ checksum "patches.hash"}}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
# We invalidate the cache if the Bazel version changes because otherwise the `bazelisk` cache
# folder will contain all previously used versions and ultimately cause the cache restoring to
# be slower due to its growing size.
var_4: &cache_key_fallback v8-angular-node-16-{{ checksum "month.txt" }}-{{ checksum "patches.hash"}}-{{ checksum ".bazelversion" }}
# Windows needs its own cache key because binaries in node_modules are different.
var_3_win: &cache_key_win v10-angular-win-node-16-{{ checksum "month.txt" }}-{{ checksum "patches.hash"}}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}
var_4_win: &cache_key_win_fallback v10-angular-win-node-16-{{ checksum "month.txt" }}-{{ checksum "patches.hash"}}-{{ checksum ".bazelversion" }}
# Workspace initially persisted by the `setup` job, and then enhanced by `build-npm-packages`.
# https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
# https://circleci.com/blog/deep-diving-into-circleci-workspaces/
var_5: &workspace_location ~/
# Filter to run a job on builds for pull requests only.
var_6: &only_on_pull_requests
filters:
branches:
only:
- /pull\/\d+/
# Filter to skip a job on builds for pull requests.
var_7: &skip_on_pull_requests
filters:
branches:
ignore:
- /pull\/\d+/
# Filter to run a job on builds for the main branch only.
var_8: &only_on_main_branch
filters:
branches:
only:
- main
# Filter to run a job on all releasable branches.
var_9: &only_release_branches
filters:
branches:
only:
- main
- /\d+\.\d+\.x/
# CircleCI orbs
# https://circleci.com/developer/orbs.
orbs:
node: circleci/node@5.0.1
devinfra: angular/dev-infra@1.0.8
# Executor Definitions
# https://circleci.com/docs/2.0/reusing-config/#authoring-reusable-executors
# **NOTE 1**: Pin to exact images using an ID (SHA). See https://circleci.com/docs/2.0/circleci-images/#using-a-docker-image-id-to-pin-an-image-to-a-fixed-version.
# (Using the tag in not necessary when pinning by ID, but include it anyway for documentation purposes.)
# **NOTE 2**: If you change the version of the docker images, also change the `cache_key` suffix.
# **NOTE 3**: If you change the version of Node.js provided by the docker images, also update `.devcontainer/recommended-Dockerfile` to match the new version.
executors:
default-executor:
parameters:
resource_class:
type: string
default: medium
docker:
- image: cimg/base:2022.05
- image: cimg/node:16.14.0
resource_class: << parameters.resource_class >>
working_directory: ~/ng
test-browser-executor:
parameters:
resource_class:
type: string
default: medium
docker:
- image: cimg/node:16.14.0-browsers
resource_class: << parameters.resource_class >>
working_directory: ~/ng
windows-executor:
working_directory: ~/ng
resource_class: windows.2xlarge
shell: bash
machine:
image: windows-server-2019-vs2019:201908-02
# Command Definitions
# https://circleci.com/docs/2.0/reusing-config/#authoring-reusable-commands
commands:
custom_attach_workspace:
description: Attach workspace at a predefined location
steps:
- run: echo "This too shall pass (always)"
- attach_workspace:
at: *workspace_location
# Install java runtime which is required by some integration tests such as
# //integration:hello_world__closure_test, //integration:i18n_test and
# //integration:ng_elements_test to run the closure compiler
install_java:
description: Install java
steps:
- run:
name: Install java
command: |
sudo apt-get update
# Install java runtime
sudo apt-get install default-jre
# Initializes the CI environment by setting up common environment variables.
init_environment:
description: Initializing environment (setting up variables)
steps:
- run:
name: Set up environment
environment:
CIRCLE_GIT_BASE_REVISION: << pipeline.git.base_revision >>
CIRCLE_GIT_REVISION: << pipeline.git.revision >>
command: ./.circleci/env.sh
- devinfra/setup-bazel-remote-exec
- run:
# Configure git as the CircleCI `checkout` command does.
# This is needed because we only checkout on the setup job.
# Add GitHub to known hosts
name: Configure git
command: |
mkdir -p ~/.ssh
echo 'github.com ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQCj7ndNxQowgcQnjshcLrqPEiiphnt+VTTvDP6mHBL9j1aNUkY4Ue1gvwnGLVlOhGeYrnZaMgRK6+PKCUXaDbC7qtbW8gIkhL7aGCsOr/C56SJMy/BCZfxd1nWzAOxSDPgVsmerOBYfNqltV9/hWCqBywINIR+5dIg6JTJ72pcEpEjcYgXkE2YEFXV1JHnsKgbLWNlhScqb2UmyRkQyytRLtL+38TGxkxCflmO+5Z8CSSNY7GidjMIZ7Q4zMjA2n1nGrlTDkzwDCsw+wqFPGQA179cnfGWOWRVruj16z6XyvxvjJwbz0wQZ75XK5tKSb7FNyeIEs4TT4jk+S4dhPeAUC5y+bDYirYgM4GC7uEnztnZyaVWQ7B381AK4Qdrwt51ZqExKbQpTUNn+EjqoTwvqNj4kqx5QUCI0ThS/YkOxJCXmPUWZbhjpCg56i+2aB6CmK2JGhn57K5mj0MNdBXA4/WnwH6XoPWJzK5Nyu2zB3nAZp+S5hpQs+p1vN1/wsjk=' >> ~/.ssh/known_hosts
git config --global url."ssh://git@github.com".insteadOf "https://github.com" || true
git config --global gc.auto 0 || true
init_saucelabs_environment:
description: Sets up a domain that resolves to the local host.
steps:
- run:
name: Preparing environment for running tests on Sauce Labs.
command: |
# For SauceLabs jobs, we set up a domain which resolves to the machine which launched
# the tunnel. We do this because devices are sometimes not able to properly resolve
# `localhost` or `127.0.0.1` through the SauceLabs tunnel. Using a domain that does not
# resolve to anything on SauceLabs VMs ensures that such requests are always resolved
# through the tunnel, and resolve to the actual tunnel host machine (i.e. the CircleCI VM).
# More context can be found in: https://github.com/angular/angular/pull/35171.
setPublicVar SAUCE_LOCALHOST_ALIAS_DOMAIN "angular-ci.local"
setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)
- run:
# Sets up a local domain in the machine's host file that resolves to the local
# host. This domain is helpful in Sauce Labs tests where devices are not able to
# properly resolve `localhost` or `127.0.0.1` through the sauce-connect tunnel.
name: Setting up alias domain for local host.
command: echo "127.0.0.1 $SAUCE_LOCALHOST_ALIAS_DOMAIN" | sudo tee -a /etc/hosts
save_month_to_file:
description: Store the current year and month in a file, so that it can be used for computing the cache key.
steps:
- run:
name: Save month to file
# Note: Make sure this file is excluded in the `.gitignore` as otherwise the
# snapshot stamping would have the `-with-local-changes` suffix.
command: date +%Y-%m > month.txt
capture_patches_for_cache_key:
description: Hashes all patches so that the cache can be reset upon changes.
steps:
- run: |
md5sum tools/esm-interop/patches/npm/* > patches.hash
yarn_install:
description: Install dependencies
steps:
- run:
name: Running Yarn install
command: yarn install --frozen-lockfile --non-interactive --cache-folder ~/.cache/yarn
# Yarn's requests sometimes take more than 10mins to complete (especially on Windows).
no_output_timeout: 45m
notify_webhook_on_fail:
description: Notify a webhook about failure
parameters:
# `webhook_url_env_var` are secret env vars defined in CircleCI project settings.
# The URLs come from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
webhook_url_env_var:
type: env_var_name
steps:
- run:
when: on_fail
command: |
notificationJson="{\"text\":\":x: \`$CIRCLE_JOB\` job for $CIRCLE_BRANCH branch failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}"
curl --request POST --header "Content-Type: application/json" --data "$notificationJson" ${<< parameters.webhook_url_env_var >>}
# Job definitions
# Jobs can include parameters that are passed in the workflow job invocation.
# https://circleci.com/docs/2.0/reusing-config/#authoring-parameterized-jobs
jobs:
setup:
executor: default-executor
steps:
- checkout
- save_month_to_file
- capture_patches_for_cache_key
- init_environment
- devinfra/rebase-pr-on-target-branch:
base_revision: << pipeline.git.base_revision >>
head_revision: << pipeline.git.revision >>
# This cache is saved in the build-npm-packages so that Bazel cache is also included.
- restore_cache:
keys:
- *cache_key
- *cache_key_fallback
- yarn_install
- run: yarn --cwd aio install --frozen-lockfile --non-interactive --cache-folder ~/.cache/yarn
# Make the bazel directories and add a file to them if they don't exist already so that
# persist_to_workspace does not fail.
- run: |
if [ ! -d ~/bazel_repository_cache ]; then
mkdir ~/bazel_repository_cache
touch ~/bazel_repository_cache/MARKER
fi
# Persist any changes at this point to be reused by further jobs.
# **NOTE**: To add new content to the workspace, always persist on the same root.
- persist_to_workspace:
root: *workspace_location
paths:
- ./ng
- ./bazel_repository_cache
test:
executor:
name: test-browser-executor
# Now that large integration tests are running locally in parallel (they can't run on RBE yet
# as they require network access for yarn install), this test is running out of memory
# consistently with the xlarge machine.
# TODO: switch back to xlarge once integration tests are running on remote-exec
resource_class: 2xlarge+
steps:
- custom_attach_workspace
- init_environment
- run:
# We need to explicitly specify the --symlink_prefix option because otherwise we would
# not be able to easily find the output bin directory when uploading artifacts for size
# measurements.
command: yarn test:ci
no_output_timeout: 20m
# Publish bundle artifacts which will be used to calculate the size change. **Note**: Make
# sure that the size plugin from the Angular robot fetches the artifacts from this CircleCI
# job (see .github/angular-robot.yml). Additionally any artifacts need to be stored with the
# following path format: "{projectName}/{context}/{fileName}". This format is necessary
# because otherwise the bot is not able to pick up the artifacts from CircleCI. See:
# https://github.com/angular/github-robot/blob/master/functions/src/plugins/size.ts#L392-L394
- store_artifacts:
path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js
destination: core/hello_world/bundle
- store_artifacts:
path: dist/bin/packages/core/test/bundling/todo/bundle.min.js
destination: core/todo/bundle
- store_artifacts:
path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js.br
destination: core/hello_world/bundle.br
- store_artifacts:
path: dist/bin/packages/core/test/bundling/todo/bundle.min.js.br
destination: core/todo/bundle.br
# NOTE: This is currently limited to main builds only. See the `monitoring` configuration.
saucelabs:
executor:
name: default-executor
# In order to avoid the bottleneck of having a slow host machine, we acquire a better
# container for this job. This is necessary because we launch a lot of browsers concurrently
# and therefore the tunnel and Karma need to process a lot of file requests and tests.
resource_class: xlarge
environment:
NUMBER_OF_PARALLEL_BROWSERS: 2
steps:
- custom_attach_workspace
- init_environment
- init_saucelabs_environment
- run:
name: Start Saucelabs daemon service
command: yarn bazel run //tools/saucelabs-daemon/background-service -- ${NUMBER_OF_PARALLEL_BROWSERS}
background: true
- run:
name: Run Bazel tests on Saucelabs
command: |
TESTS=$(./node_modules/.bin/bazelisk query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "fixme-saucelabs", ...)')
yarn bazel test --config=saucelabs --jobs=${NUMBER_OF_PARALLEL_BROWSERS} ${TESTS}
no_output_timeout: 40m
- notify_webhook_on_fail:
webhook_url_env_var: SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL
test_aio:
executor:
name: test-browser-executor
resource_class: 2xlarge+
steps:
- custom_attach_workspace
- init_environment
# Run all aio tests
- run:
command: yarn --cwd aio test:ci
no_output_timeout: 20m
# Check the bundle sizes.
- run: yarn --cwd aio payload-size
deploy_aio:
executor:
name: test-browser-executor
resource_class: 2xlarge+
steps:
- custom_attach_workspace
- init_environment
# Deploy angular.io to production (if necessary)
- run: setPublicVar_CI_STABLE_BRANCH
- run: yarn --cwd aio deploy-production
test_aio_local:
executor:
name: test-browser-executor
resource_class: 2xlarge+
steps:
- custom_attach_workspace
- init_environment
# Run all aio tests (with local Angular packages)
- run:
command: yarn --cwd aio test-local:ci
no_output_timeout: 20m
# Check the bundle sizes.
- run: yarn --cwd aio payload-size aio-local
# The `build-npm-packages` tasks exist for backwards-compatibility with old scripts and
# tests that rely on the pre-Bazel `dist/packages-dist` output structure (build.sh).
# Having multiple jobs that independently build in this manner duplicates some work; we build
# the bazel packages more than once. Even though we have a remote cache, these jobs will
# typically run in parallel so up-to-date outputs will not be available at the time the build
# starts.
build-npm-packages:
executor:
name: default-executor
resource_class: xlarge
steps:
- custom_attach_workspace
- init_environment
- run: yarn build
# Save the npm packages from //packages/... for other workflow jobs to read
- persist_to_workspace:
root: *workspace_location
paths:
- ng/dist/packages-dist
- ng/dist/angular-in-memory-web-api-dist
- ng/dist/zone.js-dist
# Save dependencies and bazel repository cache to use on subsequent runs.
- save_cache:
key: *cache_key
paths:
- ~/.cache/yarn
- ~/bazel_repository_cache
- ~/.cache/bazelisk
# This job creates compressed tarballs (`.tgz` files) for all Angular packages and stores them as
# build artifacts. This makes it easy to try out changes from a PR build for testing purposes.
# More info CircleCI build artifacts: https://circleci.com/docs/2.0/artifacts
#
# NOTE: Currently, this job only runs for PR builds. See `publish_snapshot` for non-PR builds.
publish_packages_as_artifacts:
executor: default-executor
environment:
AIMWA_PACKAGES_DIR: &aimwa_packages_dir 'dist/angular-in-memory-web-api-dist'
AIMWA_PACKAGES_ARCHIVES_DIR: &aimwa_packages_archives_dir 'dist/angular-in-memory-web-api-dist-archives'
NG_PACKAGES_DIR: &ng_packages_dir 'dist/packages-dist'
NG_PACKAGES_ARCHIVES_DIR: &ng_packages_archives_dir 'dist/packages-dist-archives'
ZONEJS_PACKAGES_DIR: &zonejs_packages_dir 'dist/zone.js-dist'
ZONEJS_PACKAGES_ARCHIVES_DIR: &zonejs_packages_archives_dir 'dist/zone.js-dist-archives'
steps:
- custom_attach_workspace
- init_environment
# Publish `@angular/*` packages.
- run:
name: Create artifacts for @angular/* packages
command: ./scripts/ci/create-package-archives.sh $CI_BRANCH $CI_COMMIT $NG_PACKAGES_DIR $NG_PACKAGES_ARCHIVES_DIR
- store_artifacts:
path: *ng_packages_archives_dir
destination: angular
# Publish the `angular-in-memory-web-api` package.
- run:
name: Create artifacts for the `angular-in-memory-web-api` package
# Need to remove the zone.js.tgz before archive
command: ./scripts/ci/create-package-archives.sh $CI_BRANCH $CI_COMMIT $AIMWA_PACKAGES_DIR $AIMWA_PACKAGES_ARCHIVES_DIR
- store_artifacts:
path: *aimwa_packages_archives_dir
destination: angular-in-memory-web-api
# Publish the `zone.js` package.
- run:
name: Create artifacts for the `zone.js` package
# Need to remove the zone.js.tgz before archive
command: rm -rf $ZONEJS_PACKAGES_DIR/archive && ./scripts/ci/create-package-archives.sh $CI_BRANCH $CI_COMMIT $ZONEJS_PACKAGES_DIR $ZONEJS_PACKAGES_ARCHIVES_DIR
- store_artifacts:
path: *zonejs_packages_archives_dir
destination: zone.js
# This job updates the content of repos like github.com/angular/core-builds
# for every green build on angular/angular.
publish_snapshot:
executor: default-executor
steps:
- custom_attach_workspace
- init_environment
# CircleCI has a config setting to force SSH for all github connections
# This is not compatible with our mechanism of using a Personal Access Token
# Clear the global setting
- run: git config --global --unset "url.ssh://git@github.com.insteadof"
- run:
name: Prepare GitHub credentials
command: echo "https://${SNAPSHOT_BUILDS_GITHUB_TOKEN}:@github.com" > ${HOME}/.git_credentials
- run: ./scripts/ci/publish-build-artifacts.sh
aio_misc:
executor: default-executor
steps:
- custom_attach_workspace
- run:
name: Check website provided in contributors.json file
command: yarn node aio/scripts/test-external-urls.js
aio_monitoring_stable:
executor: test-browser-executor
steps:
- custom_attach_workspace
- init_environment
- run: setPublicVar_CI_STABLE_BRANCH
- run:
name: Check out `aio/` and yarn from the stable branch
command: |
git fetch origin $CI_STABLE_BRANCH
git checkout --force origin/$CI_STABLE_BRANCH -- aio/ .yarn/ .yarnrc
# Ignore yarn's engines check, because we checked out `aio/package.json` from the stable
# branch and there could be a node version skew, which is acceptable in this monitoring job.
- run: yarn config set ignore-engines true
- run:
name: Run tests against https://angular.io/
command: ./aio/scripts/test-production.sh https://angular.io/ $CI_AIO_MIN_PWA_SCORE
- notify_webhook_on_fail:
webhook_url_env_var: SLACK_CARETAKER_WEBHOOK_URL
- notify_webhook_on_fail:
webhook_url_env_var: SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL
aio_monitoring_next:
executor: test-browser-executor
steps:
- custom_attach_workspace
- init_environment
- run:
name: Run tests against https://next.angular.io/
command: ./aio/scripts/test-production.sh https://next.angular.io/ $CI_AIO_MIN_PWA_SCORE
- notify_webhook_on_fail:
webhook_url_env_var: SLACK_CARETAKER_WEBHOOK_URL
- notify_webhook_on_fail:
webhook_url_env_var: SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL
legacy-unit-tests-saucelabs:
executor:
name: default-executor
# In order to avoid the bottleneck of having a slow host machine, we acquire a better
# container for this job. This is necessary because we launch a lot of browsers concurrently
# and therefore the tunnel and Karma need to process a lot of file requests and tests.
resource_class: xlarge
steps:
- custom_attach_workspace
- init_environment
- init_saucelabs_environment
- run:
name: Starting Saucelabs tunnel service
command: ./tools/saucelabs/sauce-service.sh run
background: true
# Build test fixtures for a test that rely on Bazel-generated fixtures. Note that disabling
# specific tests which are reliant on such generated fixtures is not an option as SystemJS
# in the Saucelabs legacy job always fetches referenced files, even if the imports would be
# guarded by an check to skip in the Saucelabs legacy job. We should be good running such
# test in all supported browsers on Saucelabs anyway until this job can be removed.
- run:
name: Preparing Bazel-generated fixtures required in legacy tests
command: |
yarn bazel build \
//packages/core/test:downleveled_es5_fixture \
//packages/common/locales
# Needed for the ES5 downlevel reflector test in `packages/core/test/reflection`.
mkdir -p dist/legacy-test-out/core/test/reflection/
cp dist/bin/packages/core/test/reflection/es5_downleveled_inheritance_fixture.js \
dist/legacy-test-out/core/test/reflection/es5_downleveled_inheritance_fixture.js
# Locale files are needed for i18n tests running within Saucelabs. These are added
# directly as sources so that the TypeScript compilation of `/packages/tsconfig.json`
# can succeed. Note that the base locale and currencies files are checked-in, so
# we do not need to re-generate those through Bazel.
mkdir -p packages/common/locales/extra
cp dist/bin/packages/common/locales/*.ts packages/common/locales
cp dist/bin/packages/common/locales/extra/*.ts packages/common/locales/extra
# Build the bundle for all tests to run within Saucelabs
- run: node tools/legacy-saucelabs/build-saucelabs-test-bundle.mjs
- run:
# Waiting on ready ensures that we don't run tests too early without Saucelabs not being ready.
name: Waiting for Saucelabs tunnel to connect
command: ./tools/saucelabs/sauce-service.sh ready-wait
- run:
name: Running tests on Saucelabs.
command: |
KARMA_WEB_TEST_MODE=SL_REQUIRED yarn karma start ./karma-js.conf.js --single-run
- run:
name: Stop Saucelabs tunnel service
command: ./tools/saucelabs/sauce-service.sh stop
test_zonejs:
executor:
name: default-executor
resource_class: xlarge
steps:
- custom_attach_workspace
- init_environment
- install_java
- run: |
yarn bazel build -- \
//packages/zone.js/bundles:zone.umd.js \
//packages/zone.js:npm_package \
//packages/zone.js/test/closure:closure_js \
//packages/zone.js:zone_externs
- run: |
mkdir -p packages/zone.js/build/
mkdir -p packages/zone.js/build/test/
mkdir -p packages/zone.js/test/
cp dist/bin/packages/zone.js/bundles/zone.umd.js packages/zone.js/build/zone.umd.js
cp dist/bin/packages/zone.js/npm_package/bundles/zone-mix.umd.js ./packages/zone.js/test/extra/
cp dist/bin/packages/zone.js/npm_package/bundles/zone-patch-electron.umd.js ./packages/zone.js/test/extra/
cp dist/bin/packages/zone.js/test/closure/zone.closure.mjs ./packages/zone.js/build/test/zone.closure.mjs
cp dist/bin/packages/zone.js/zone_externs.js ./packages/zone.js/build/zone_externs.js
# Install
- run: yarn --cwd packages/zone.js install --frozen-lockfile --non-interactive --cache-folder ~/.cache/yarn
# Run zone.js tools tests
- run: yarn --cwd packages/zone.js promisetest
- run: yarn --cwd packages/zone.js promisefinallytest
- run: yarn --cwd packages/zone.js jest:test
- run: yarn --cwd packages/zone.js jest:nodetest
- run: yarn --cwd packages/zone.js electrontest
- run: yarn --cwd packages/zone.js closuretest
- run: yarn --cwd packages/zone.js/test/typings install --frozen-lockfile --non-interactive --cache-folder ~/.cache/yarn
- run: yarn --cwd packages/zone.js/test/typings test
# Windows jobs
# Docs: https://circleci.com/docs/2.0/hello-world-windows/
test_win:
executor: windows-executor
steps:
- checkout
# Setup the proper NodeJS version. The image comes pre-installed with `nvm-windows`.
# Note: This happens immediately after checkout because environment initialization logic
# might rely on Node and shouldn't use the older image-provided NodeJS version.
- run:
name: Install NodeJS version from `.nvmrc`.
command: |
nvm on
nvm install $(cat .nvmrc)
nvm use $(cat .nvmrc)
- run:
name: Debug information for flakiness of Windows job
command: |
node -v
yarn -v
which node
which yarn
echo "Path: $PATH"
yarn node -v
- save_month_to_file
- capture_patches_for_cache_key
- init_environment
- restore_cache:
keys:
- *cache_key_win
- *cache_key_win_fallback
# Install project dependencies, and install Bazelisk globally. This is necessary as
# Windows might error when `bazel` is invoked from the project node modules. The Bazel
# invocation might modify the symlinked project `node_modules` again, causing failures.
- yarn_install
- run: yarn global add @bazel/bazelisk@${BAZELISK_VERSION}
- run:
name: Build all windows CI targets
command: |
$(yarn global bin)/bazelisk build //packages/compiler-cli/...
no_output_timeout: 15m
- run:
name: Test all windows CI targets
command: |
$(yarn global bin)/bazelisk test --test_tag_filters="-browser:chromium-local" //packages/compiler-cli/...
no_output_timeout: 15m
- save_cache:
key: *cache_key_win
paths:
- node_modules
- ~/AppData/Local/bazelisk
test_angular_devtools:
executor: test-browser-executor
steps:
- custom_attach_workspace
- init_environment
- run:
name: Run unit tests
command: yarn devtools:test
- run:
name: Test production build
command: yarn devtools:build:chrome
workflows:
version: 2
default_workflow:
jobs:
- pass
- setup:
filters:
branches:
ignore: g3
- test:
requires:
- setup
- build-npm-packages:
requires:
- setup
- legacy-unit-tests-saucelabs:
requires:
- setup
- test_aio:
requires:
- setup
- deploy_aio:
requires:
- test_aio
- test_aio_local:
requires:
- setup
- publish_packages_as_artifacts:
requires:
- build-npm-packages
- publish_snapshot:
<<: *only_release_branches
requires:
# Only publish if tests and integration tests pass
- test
# Only publish if `aio`/`docs` tests using the locally built Angular packages pass
- test_aio_local
# Get the artifacts to publish from the build-packages-dist job
# since the publishing script expects the legacy outputs layout.
- build-npm-packages
- legacy-unit-tests-saucelabs
- test_zonejs:
requires:
- setup
- test_win:
requires:
- setup
- test_angular_devtools:
requires:
- setup
monitoring:
jobs:
- setup
- aio_misc:
requires:
- setup
- aio_monitoring_stable:
requires:
- setup
- aio_monitoring_next:
requires:
- setup
- saucelabs:
# Testing saucelabs via Bazel currently taking longer than the legacy saucelabs job as it
# each karma_web_test target is provisioning and tearing down browsers which is adding
# a lot of overhead. Running once daily in the main branch to avoid wasting resources and
# slowing down CI for PRs.
# TODO: Run this job on all branches (including PRs) once karma_web_test targets can
# share provisioned browsers and we can remove the legacy saucelabs job.
requires:
- setup
triggers:
- schedule:
<<: *only_on_main_branch
# Runs monitoring jobs at 10:00AM every day.
cron: '0 10 * * *'
+1 -1
View File
@@ -1,7 +1,7 @@
# Image metadata and config.
# Ideally, the Node.js version should match what we use on CI.
# See `executors > default-executor` in `.circleci/config.yml`.
FROM cimg/node:18.13.0@sha256:45d0ee279f522c4562a464df71108104cc9b2187205333ffd0707d4f05589731
FROM cimg/node:16.13-browsers
LABEL name="Angular dev environment" \
+1 -1
View File
@@ -4,7 +4,7 @@ description: 'Installs the dependencies using Yarn'
runs:
using: 'composite'
steps:
- uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3
- uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3
with:
path: |
./node_modules/
+1
View File
@@ -68,6 +68,7 @@ merge:
# list of PR statuses that need to be successful
requiredStatuses:
- 'ci/circleci: build'
- 'google-internal-tests'
- 'pullapprove'
-38
View File
@@ -1,38 +0,0 @@
# This workflow builds the previews for pull requests when a certain label is applied.
# The actual deployment happens as part of a dedicated second workflow to avoid security
# issues where the building would otherwise occur in an authorized context where secrets
# could be leaked. More details can be found here:
# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/.
name: Build adev for preview deployment
on:
pull_request:
types: [synchronize, labeled]
permissions: read-all
jobs:
adev-build:
runs-on: ubuntu-latest
if: |
(github.event.action == 'labeled' && github.event.label.name == 'adev: preview') ||
(github.event.action == 'synchronize' && contains(github.event.pull_request.labels.*.name, 'adev: preview'))
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Install node modules
run: yarn install --frozen-lockfile
- name: Build adev to ensure it continues to work
run: yarn bazel build --config=aio_local_deps //adev:build
- uses: angular/dev-infra/github-actions/previews/pack-and-upload-artifact@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
workflow-artifact-name: 'adev-preview'
pull-number: '${{github.event.pull_request.number}}'
artifact-build-revision: '${{github.event.pull_request.head.sha}}'
deploy-directory: './dist/bin/adev/build/browser'
-50
View File
@@ -1,50 +0,0 @@
# This workflow runs whenever the ADEV build workflow has completed. Deployment happens
# as part of a dedicated second workflow to avoid security issues where the building would
# otherwise occur in an authorized context where secrets could be leaked.
#
# More details can be found here:
# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/.
name: Deploying adev preview to Firebase
on:
workflow_run:
workflows: ['Build adev for preview deployment']
types: [completed]
permissions:
# Needed in order to be able to comment on the pull request.
pull-requests: write
# Needed in order to checkout the repository
contents: read
# Needed in order to retrieve the artifacts from the previous job
actions: read
env:
PREVIEW_PROJECT: ng-dev-previews
PREVIEW_SITE: ng-dev-previews-fw
jobs:
deploy:
runs-on: ubuntu-latest
if: ${{ github.event.workflow_run.conclusion == 'success' }}
steps:
- uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # tag=v3
with:
token: '${{secrets.GITHUB_TOKEN}}'
- name: Configure Firebase deploy target
working-directory: ./
run: |
# We can use `npx` as the Firebase deploy actions uses it too.
npx -y firebase-tools@latest target:clear --config adev/firebase.json --project ${{env.PREVIEW_PROJECT}} hosting angular-docs
npx -y firebase-tools@latest target:apply --config adev/firebase.json --project ${{env.PREVIEW_PROJECT}} hosting angular-docs ${{env.PREVIEW_SITE}}
- uses: angular/dev-infra/github-actions/previews/upload-artifacts-to-firebase@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
github-token: '${{secrets.GITHUB_TOKEN}}'
workflow-artifact-name: 'adev-preview'
firebase-config-dir: './adev'
firebase-public-dir: './adev/build/browser'
firebase-project-id: '${{env.PREVIEW_PROJECT}}'
firebase-service-key: '${{secrets.FIREBASE_PREVIEW_SERVICE_TOKEN}}'
+3 -3
View File
@@ -22,10 +22,10 @@ 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@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- uses: ./.github/actions/yarn-install
- uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- uses: angular/dev-infra/github-actions/setup-bazel-remote-exec@5f06c4774df908ed69e1441f4ec63b898acf0c68
with:
bazelrc: ./.bazelrc.user
@@ -34,7 +34,7 @@ jobs:
# the number of concurrent actions is determined based on the host resources.
- run: bazel build //aio:build --jobs=32 --announce_rc --verbose_failures
- uses: angular/dev-infra/github-actions/previews/pack-and-upload-artifact@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- uses: angular/dev-infra/github-actions/deploy-previews/pack-and-upload-artifact@5f06c4774df908ed69e1441f4ec63b898acf0c68
with:
workflow-artifact-name: 'aio'
pull-number: '${{github.event.pull_request.number}}'
+2 -2
View File
@@ -25,7 +25,7 @@ jobs:
runs-on: ubuntu-latest
if: ${{ github.event.workflow_run.conclusion == 'success' }}
steps:
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3
- name: Configure Firebase deploy target
working-directory: aio/
@@ -34,7 +34,7 @@ jobs:
npx -y firebase-tools@latest target:clear --project ${{env.PREVIEW_PROJECT}} hosting aio
npx -y firebase-tools@latest target:apply --project ${{env.PREVIEW_PROJECT}} hosting aio ${{env.PREVIEW_SITE}}
- uses: angular/dev-infra/github-actions/previews/upload-artifacts-to-firebase@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- uses: angular/dev-infra/github-actions/deploy-previews/upload-artifacts-to-firebase@5f06c4774df908ed69e1441f4ec63b898acf0c68
with:
github-token: '${{secrets.GITHUB_TOKEN}}'
workflow-artifact-name: 'aio'
@@ -13,9 +13,9 @@ jobs:
assistant_to_the_branch_manager:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
with:
persist-credentials: false
- uses: angular/dev-infra/github-actions/branch-manager@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- uses: angular/dev-infra/github-actions/branch-manager@5f06c4774df908ed69e1441f4ec63b898acf0c68
with:
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
-68
View File
@@ -1,68 +0,0 @@
name: Run benchmark comparison
on:
issue_comment:
types: [created]
permissions: read-all
jobs:
benchmark-compare:
runs-on: ubuntu-latest
if: ${{ github.event.issue.pull_request && startsWith(github.event.comment.body, '/benchmark-compare ')}}
steps:
- uses: TheModdingInquisition/actions-team-membership@a69636a92bc927f32c3910baac06bacc949c984c # v1.0
with:
team: 'team'
organization: angular
token: ${{secrets.BENCHMARK_COMPARE_MEMBERSHIP_GITHUB_TOKEN}}
exit: true
# Indicate that the benchmark command was received.
- uses: peter-evans/create-or-update-comment@23ff15729ef2fc348714a3bb66d2f655ca9066f2 # v3
with:
comment-id: ${{github.event.comment.id}}
token: '${{secrets.BENCHMARK_POST_RESULTS_GITHUB_TOKEN}}'
reactions: 'rocket'
- uses: alessbell/pull-request-comment-branch@aad01d65d6982b8eacabed5e9a684cd8ceb98da6 # v1.1
id: comment-branch
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
with:
# Specify repository as the PR branch might be from a fork.
repository: ${{steps.comment-branch.outputs.head_owner}}/${{steps.comment-branch.outputs.head_repo}}
# Checkout the pull request and assume it being trusted given we've checked
# that the action was triggered by a team member.
ref: ${{steps.comment-branch.outputs.head_ref}}
- uses: ./.github/actions/yarn-install
- uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
bazelrc: ./.bazelrc.user
- name: Preparing benchmark for GitHub action
id: info
env:
# Untrusted input used in an executable code, must be wrapped as an env var to prevent injections
COMMENT_BODY: ${{ github.event.comment.body }}
run: yarn benchmarks prepare-for-github-action "$COMMENT_BODY"
- run: yarn benchmarks run-compare ${{steps.info.outputs.compareSha}} ${{steps.info.outputs.benchmarkTarget}}
id: benchmark
name: Running benchmark
- uses: peter-evans/create-or-update-comment@23ff15729ef2fc348714a3bb66d2f655ca9066f2 # v3
with:
issue-number: ${{github.event.issue.number}}
token: '${{secrets.BENCHMARK_POST_RESULTS_GITHUB_TOKEN}}'
body: |
## Benchmark Test Results
**Test**: `${{steps.info.outputs.benchmarkTarget}}`
### PR (${{steps.info.outputs.prHeadSha}})
${{steps.benchmark.outputs.workingStageResultsText}}
### Compare Ref (${{steps.info.outputs.compareSha}})
${{steps.benchmark.outputs.comparisonResultsText}}
-64
View File
@@ -1,64 +0,0 @@
name: CI
on:
pull_request_target:
types: [opened, synchronize, reopened]
concurrency:
group: ${{ github.workflow }}-${{ github.head_ref }}
cancel-in-progress: true
permissions: {}
defaults:
run:
shell: bash
jobs:
saucelabs:
runs-on: ubuntu-latest-4core
env:
SAUCE_TUNNEL_IDENTIFIER: angular-framework-${{ github.run_number }}
SAUCE_USERNAME: ${{ vars.SAUCE_USERNAME }}
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
# Checking out the pull request commit is intended here as we need to run the changed code tests.
ref: ${{ github.event.pull_request.head.sha }}
- name: Install node modules
run: yarn install --frozen-lockfile
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Starting Saucelabs tunnel service
run: ./tools/saucelabs/sauce-service.sh run &
# Build test fixtures for a test that rely on Bazel-generated fixtures. Note that disabling
# specific tests which are reliant on such generated fixtures is not an option as SystemJS
# in the Saucelabs legacy job always fetches referenced files, even if the imports would be
# guarded by an check to skip in the Saucelabs legacy job. We should be good running such
# test in all supported browsers on Saucelabs anyway until this job can be removed.
- name: Preparing Bazel-generated fixtures required in legacy tests
run: |
yarn bazel build //packages/core/test:downleveled_es5_fixture //packages/common/locales
# Needed for the ES5 downlevel reflector test in `packages/core/test/reflection`.
mkdir -p dist/legacy-test-out/core/test/reflection/
cp dist/bin/packages/core/test/reflection/es5_downleveled_inheritance_fixture.js \
dist/legacy-test-out/core/test/reflection/es5_downleveled_inheritance_fixture.js
# Locale files are needed for i18n tests running within Saucelabs. These are added
# directly as sources so that the TypeScript compilation of `/packages/tsconfig.json`
# can succeed. Note that the base locale and currencies files are checked-in, so
# we do not need to re-generate those through Bazel.
mkdir -p packages/common/locales/extra
cp dist/bin/packages/common/locales/*.ts packages/common/locales
cp dist/bin/packages/common/locales/extra/*.ts packages/common/locales/extra
- name: Build bundle of tests to run on Saucelabs
run: node tools/legacy-saucelabs/build-saucelabs-test-bundle.mjs
- name: Wait and confirm Saucelabs tunnel has connected
run: ./tools/saucelabs/sauce-service.sh ready-wait
timeout-minutes: 3
- name: Running tests on Saucelabs.
run: KARMA_WEB_TEST_MODE=SL_REQUIRED yarn karma start ./karma-js.conf.js --single-run
- name: Stop Saucelabs tunnel service
run: ./tools/saucelabs/sauce-service.sh stop
+1 -229
View File
@@ -23,7 +23,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@852c3d1898775ec9fbc87213e519f16e78805b57
with:
cache-node-modules: true
node-module-directories: |
@@ -55,231 +55,3 @@ jobs:
# it has been merged.
if: github.event_name == 'pull_request'
run: yarn ng-dev format changed --check ${{ github.event.pull_request.base.sha }}
devtools:
runs-on: ubuntu-latest
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Install node modules
run: yarn install --frozen-lockfile
- name: Run unit tests
run: yarn devtools:test
- name: Test build
run: yarn devtools:build:chrome
test:
runs-on: ubuntu-latest-4core
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel Remote Caching
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Install node modules
run: yarn install --frozen-lockfile --network-timeout 100000
- name: Run CI tests for framework
run: yarn test:ci
aio:
runs-on: ubuntu-latest-4core
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
node-module-directories: |
./aio/node_modules
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Install node modules for aio
run: yarn install --cwd aio --frozen-lockfile
- name: Run AIO tests with upstream packages
run: yarn --cwd aio test:ci
- name: Check generated bundle sizes
run: yarn --cwd aio payload-size
adev:
runs-on:
labels: ubuntu-latest-4core
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Install node modules
run: yarn install --frozen-lockfile
- name: Build adev to ensure it continues to work
run: yarn bazel test --config=aio_local_deps //adev:test
aio-local:
runs-on:
labels: ubuntu-latest-4core
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
node-module-directories: |
./aio/node_modules
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Install node modules
run: yarn install --cwd aio --frozen-lockfile
- name: Run AIO tests with local packages
run: yarn --cwd aio test-local:ci
- name: Check generated bundle sizes
run: yarn --cwd aio payload-size aio-local
aio-deploy:
needs: [aio]
if: needs.aio.result == 'success' && github.event_name == 'push'
runs-on:
labels: ubuntu-latest
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
node-module-directories: |
./aio/node_modules
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Install node modules for aio
run: yarn install --cwd aio --frozen-lockfile
- name: Set the stable branch environment variable
id: latest_version
run: |
echo "CI_STABLE_BRANCH=$(npm info @angular/core dist-tags.latest | sed -r 's/^\s*([0-9]+\.[0-9]+)\.[0-9]+.*$/\1.x/')" >> $GITHUB_OUTPUT
echo "CI_BRANCH=$(echo ${{ github.event.ref }} | cut -d '/' -f 3)" >> $GITHUB_OUTPUT
- name: Deploy aio to production
env:
CI_AIO_MIN_PWA_SCORE: '95'
CI_COMMIT: ${{ github.event.after }}
CI_REPO_NAME: 'angular'
CI_PULL_REQUEST: 'false'
CI_REPO_OWNER: 'angular'
CI_BUILD_URL: '${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}'
CI_STABLE_BRANCH: ${{ steps.latest_version.outputs.CI_STABLE_BRANCH }}
CI_BRANCH: ${{ steps.latest_version.outputs.CI_BRANCH }}
CI_SECRET_AIO_DEPLOY_FIREBASE_TOKEN: ${{ secrets.AIO_DEPLOY_TOKEN }}
CI_SECRET_PAYLOAD_FIREBASE_TOKEN: ${{ secrets.AIO_PAYLOAD_TOKEN }}
run: yarn --cwd aio deploy-production
- name: Notify about failed deployment
if: ${{ failure() }}
uses: slackapi/slack-github-action@e28cf165c92ffef168d23c5c9000cffc8a25e117 # v=v1.24.0
with:
channel-id: 'C07DT5M6V,CKV1F72BG'
slack-message: 'Deploy to aio job failed for ${{ github.base_ref }} branch failed on build ${{ github.event.after }}: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}'
env:
SLACK_BOT_TOKEN: ${{ secrets.ANGULAR_ROBOT_SLACK_TOKEN }}
publish-snapshots:
if: github.event_name == 'push'
runs-on:
labels: ubuntu-latest
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Install node modules
run: yarn install --frozen-lockfile
- run: echo "https://${{secrets.SNAPSHOT_BUILDS_GITHUB_TOKEN}}:@github.com" > ${HOME}/.git_credentials
- run: yarn build
- run: ./scripts/ci/publish-build-artifacts.sh
zone-js:
runs-on:
labels: ubuntu-latest-4core
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
node-module-directories: |
./node_modules
./packages/zone.js/node_modules
./packages/zone.js/test/typings/node_modules
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Install node modules
run: yarn install --frozen-lockfile
- run: |
yarn bazel build \
//packages/zone.js/bundles:zone.umd.js \
//packages/zone.js:npm_package \
//packages/zone.js/test/closure:closure_js \
- run: |
mkdir -p packages/zone.js/build/
mkdir -p packages/zone.js/build/test/
mkdir -p packages/zone.js/test/
cp dist/bin/packages/zone.js/bundles/zone.umd.js packages/zone.js/build/zone.umd.js
cp dist/bin/packages/zone.js/npm_package/bundles/zone-mix.umd.js ./packages/zone.js/test/extra/
cp dist/bin/packages/zone.js/npm_package/bundles/zone-patch-electron.umd.js ./packages/zone.js/test/extra/
cp dist/bin/packages/zone.js/test/closure/zone.closure.mjs ./packages/zone.js/build/test/zone.closure.mjs
# Install
- run: yarn --cwd packages/zone.js install --frozen-lockfile --non-interactive
# Run zone.js tools tests
- run: yarn --cwd packages/zone.js promisefinallytest
- run: yarn --cwd packages/zone.js jest:test
- run: yarn --cwd packages/zone.js jest:nodetest
- run: yarn --cwd packages/zone.js electrontest
- run: yarn --cwd packages/zone.js/test/typings install --frozen-lockfile --non-interactive
- run: yarn --cwd packages/zone.js/test/typings test
bazel-saucelabs:
# TODO: Replace legacy job with Bazel saucelabs job.
if: github.event_name == 'push'
runs-on: ubuntu-latest-4core
env:
JOBS: 2
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
# Checking out the pull request commit is intended here as we need to run the changed code tests.
ref: ${{ github.event.pull_request.head.sha }}
- name: Install node modules
run: yarn install --frozen-lockfile
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel Remote Caching
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Set up Sauce Tunnel Daemon
run: yarn bazel run //tools/saucelabs-daemon/background-service -- $JOBS &
env:
SAUCE_TUNNEL_IDENTIFIER: angular-framework-${{ github.run_number }}
SAUCE_USERNAME: ${{ vars.SAUCE_USERNAME }}
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
- name: Run all saucelabs bazel tests
run: |
TESTS=$(./node_modules/.bin/bazelisk query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "fixme-saucelabs", ...)')
yarn bazel test --config=saucelabs --jobs=$JOBS ${TESTS}
+4 -4
View File
@@ -12,14 +12,14 @@ jobs:
labels:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: angular/dev-infra/github-actions/commit-message-based-labels@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- 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@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: angular/dev-infra/github-actions/post-approval-changes@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- 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
@@ -14,6 +14,6 @@ jobs:
if: github.repository == 'angular/angular'
runs-on: ubuntu-latest
steps:
- uses: angular/dev-infra/github-actions/feature-request@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- uses: angular/dev-infra/github-actions/feature-request@5f06c4774df908ed69e1441f4ec63b898acf0c68
with:
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
+5 -6
View File
@@ -4,17 +4,16 @@ on:
pull_request_target:
types: [opened, reopened, synchronize]
permissions: {}
permissions:
pull-requests: read
statuses: write
jobs:
trigger:
permissions:
pull-requests: read
statuses: write
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: angular/dev-infra/github-actions/google-internal-tests@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- 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
github-token: ${{ secrets.GITHUB_TOKEN }}
+1 -1
View File
@@ -9,6 +9,6 @@ jobs:
status:
runs-on: ubuntu-latest
steps:
- uses: angular/dev-infra/github-actions/unified-status-check@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- uses: angular/dev-infra/github-actions/unified-status-check@5f06c4774df908ed69e1441f4ec63b898acf0c68
with:
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
-55
View File
@@ -1,55 +0,0 @@
name: Monitoring
on:
schedule:
# Run at 10:00AM every day.
- cron: '0 10 * * *'
permissions: {}
defaults:
run:
shell: bash
jobs:
check_aio:
runs-on: ubuntu-latest
env:
MINIMUM_PWA_SCORE: 95
strategy:
fail-fast: false
matrix:
version: ['https://next.angular.io/', 'https://angular.io/']
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
node-module-directories: |
./aio/node_modules
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
- name: Install node modules in aio
run: yarn install --frozen-lockfile --cwd aio
- name: Run basic e2e and deployment config tests.
run: yarn --cwd aio test-production-url --test_env=TARGET_URL="${{ matrix.version }}"
- name: Run PWA-score tests.
run: yarn --cwd aio test-pwa-score "${{ matrix.version }}" "${{ env.MINIMUM_PWA_SCORE }}"
- name: Run a11y tests.
run: yarn --cwd aio test-a11y-score "${{ matrix.version }}"
check_contributor_links:
runs-on: ubuntu-latest
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
with:
cache-node-modules: true
node-module-directories: |
./aio/node_modules
- name: Install node modules in aio
run: yarn install --frozen-lockfile --cwd aio
- name: Check website provided in contributors.json file
run: node aio/scripts/test-external-urls.js
+4 -4
View File
@@ -25,12 +25,12 @@ jobs:
steps:
- name: 'Checkout code'
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
with:
persist-credentials: false
- name: 'Run analysis'
uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
uses: ossf/scorecard-action@08b4669551908b1024bb425080c797723083c031 # v2.2.0
with:
results_file: results.sarif
results_format: sarif
@@ -39,7 +39,7 @@ jobs:
# Upload the results as artifacts.
- name: 'Upload artifact'
uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2
with:
name: SARIF file
path: results.sarif
@@ -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@b374143c1149a9115d881581d29b8390bbcbb59c # v3.22.11
uses: github/codeql-action/upload-sarif@46ed16ded91731b2df79a2893d3aea8e9f03b5c4 # v2.20.3
with:
sarif_file: results.sarif
+2 -2
View File
@@ -19,7 +19,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
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
@@ -32,7 +32,7 @@ jobs:
env:
ANGULAR_CLI_BUILDS_READONLY_GITHUB_TOKEN: ${{ secrets.ANGULAR_CLI_BUILDS_READONLY_GITHUB_TOKEN }}
- name: Create a PR (if necessary)
uses: angular/dev-infra/github-actions/create-pr-for-changes@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
uses: angular/dev-infra/github-actions/create-pr-for-changes@5f06c4774df908ed69e1441f4ec63b898acf0c68
with:
branch-prefix: update-cli-help
pr-title: 'docs: update Angular CLI help [${{github.ref_name}}]'
+2 -2
View File
@@ -24,7 +24,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
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
@@ -35,7 +35,7 @@ jobs:
- name: Generate `events.json`
run: node aio/scripts/generate-events/index.mjs --ignore-invalid-dates
- name: Create a PR (if necessary)
uses: angular/dev-infra/github-actions/create-pr-for-changes@ae9155d1083fd8390e98bfe09a5ccf89f0375b52
uses: angular/dev-infra/github-actions/create-pr-for-changes@5f06c4774df908ed69e1441f4ec63b898acf0c68
with:
branch-prefix: docs-update-events
pr-title: 'docs: update events'
-4
View File
@@ -57,7 +57,3 @@ baseline.json
# Husky
.husky/_
aio/content/examples/.DS_Store
# Ignore cache created with the Angular CLI.
.angular/
+1 -25
View File
@@ -5,18 +5,7 @@ import {FormatConfig} from '@angular/ng-dev';
*/
export const format: FormatConfig = {
'prettier': {
'matchers': [
'**/*.{yaml,yml}',
'devtools/**/*.{js,ts}',
'tools/**/*.{js,ts}',
'modules/**/*.{js,ts}',
'scripts/**/*.{js,ts}',
'packages/animations/**/*.{js,ts}',
'packages/bazel/**/*.{js,ts}',
'packages/benchpress/**/*.{js,ts}',
'packages/elements/**/*.{js,ts}',
'packages/misc/**/*.{js,ts}',
],
'matchers': ['**/*.{yaml,yml}'],
},
'clang-format': {
'matchers': [
@@ -40,19 +29,6 @@ export const format: FormatConfig = {
'!packages/core/src/i18n/locale_en.ts',
'!packages/common/locales/closure-locale.ts',
'!packages/common/src/i18n/currencies.ts',
// Temporarily disable formatting for adev
'!adev/**',
// Migrated to prettier
'!devtools/**/*.{js,ts}',
'!tools/**/*.{js,ts}',
'!modules/**/*.{js,ts}',
'!scripts/**/*.{js,ts}',
'!packages/animations/**/*.{js,ts}',
'!packages/bazel/**/*.{js,ts}',
'!packages/benchpress/**/*.{js,ts}',
'!packages/elements/**/*.{js,ts}',
'!packages/misc/**/*.{js,ts}',
],
},
'buildifier': true,
+2
View File
@@ -31,6 +31,8 @@
"packages/http/**",
"**/.gitignore",
"**/.gitkeep",
"**/yarn.lock",
"**/package.json",
"**/third_party/**",
"**/tsconfig-build.json",
"**/tsconfig-tsec.json",
+1 -1
View File
@@ -1 +1 @@
18.13.0
16.14.0
+12 -35
View File
@@ -57,7 +57,8 @@
version: 3
availability:
users_unavailable: []
users_unavailable:
- atscott
# Meta field that goes unused by PullApprove to allow for defining aliases to be
# used throughout the config.
@@ -167,7 +168,6 @@ groups:
- atscott
- crisbeto
- JoostK
- dylhunn
# =========================================================
# Framework: Migrations
@@ -182,8 +182,6 @@ groups:
- crisbeto
- devversion
- dylhunn
- jessicajaniuk
- AndrewKushnir
# =========================================================
# Framework: Core
@@ -313,7 +311,6 @@ groups:
'aio/content/guide/pipes.md',
'aio/content/guide/pipes-custom-data-trans.md',
'aio/content/guide/pipes-overview.md',
'aio/content/guide/pipe-precedence.md',
'aio/content/guide/pipes-transform-data.md',
'aio/content/guide/pipe-template.md',
'aio/content/examples/pipes/**/{*,.*}',
@@ -339,12 +336,8 @@ groups:
'aio/content/examples/view-encapsulation/**/{*,.*}',
'aio/content/images/guide/view-encapsulation/**/{*,.*}',
'aio/content/special-elements/**/{*,.*}',
'aio/content/blocks/**/{*,.*}',
'aio/content/guide/hydration.md',
'aio/content/guide/defer.md',
'aio/content/guide/signals.md',
'aio/content/guide/control_flow.md',
'aio/content/examples/injection-token/**/{*,.*}',
'aio/content/guide/signals.md'
])
reviewers:
users:
@@ -521,8 +514,8 @@ groups:
contains_any_globs(files, [
'packages/platform-server/**/{*,.*}',
'aio/content/guide/prerendering.md',
'aio/content/guide/ssr.md',
'aio/content/examples/ssr/**/{*,.*}',
'aio/content/guide/universal.md',
'aio/content/examples/universal/**/{*,.*}'
])
reviewers:
users:
@@ -926,7 +919,13 @@ groups:
'aio/content/guide/releases.md',
'aio/content/guide/updating.md',
'aio/content/guide/deprecations.md',
'aio/content/guide/migration-legacy-message-id.md',
'aio/content/examples/deprecation-guide/**/{*,.*}',
'aio/content/guide/migration-renderer.md',
'aio/content/guide/migration-undecorated-classes.md',
'aio/content/guide/migration-dynamic-flag.md',
'aio/content/guide/migration-injectable.md',
'aio/content/guide/migration-localize.md',
'aio/content/guide/migration-module-with-providers.md',
'aio/content/guide/static-query-migration.md',
'aio/content/guide/update-to-latest-version.md',
@@ -940,7 +939,6 @@ groups:
- alxhub
- AndrewKushnir
- atscott
- jessicajaniuk
- jelbourn
# =========================================================
@@ -1057,22 +1055,6 @@ groups:
- dylhunn
- mgechev
# =========================================================
# Docs: Angular Dev Site
# =========================================================
angular-dev:
<<: *defaults
conditions:
- >
contains_any_globs(files, [
'adev/**/{.*,*}'
])
reviewers:
users:
- twerske
- josephperrott
- jelbourn
# =========================================================
# Docs-infra
# =========================================================
@@ -1146,11 +1128,9 @@ groups:
users:
- AleksanderBodurri
- devversion
- dgp1130
- josephperrott
- mgechev
- twerske
- ~jeanmeche
# =========================================================
# Dev-infra
@@ -1185,11 +1165,9 @@ groups:
'tools/esm-interop/**/{*,.*}',
'tools/gulp-tasks/**/{*,.*}',
'tools/legacy-saucelabs/**/{*,.*}',
'tools/manual_api_docs/**/{*,.*}',
'tools/npm-patches/**/{*,.*}',
'tools/rxjs/**/{*,.*}',
'tools/saucelabs-daemon/**/{*,.*}',
'tools/saucelabs/**/{*,.*}',
'tools/saucelabs-daemon/**/{*,.*}',
'tools/symbol-extractor/**/{*,.*}',
'tools/testing/**/{*,.*}',
'tools/tslint/**/{*,.*}',
@@ -1395,7 +1373,6 @@ groups:
- devversion # Paul Gschwendtner
- dgp1130 # Doug Parker
- dylhunn # Dylan Hunn
- jeanmeche # Matthieu Riegler
- jelbourn # Jeremy Elbourn
- jessicajaniuk # Jessica Janiuk
- JiaLiPassion # Jia Li
+1 -1
View File
@@ -4,7 +4,7 @@
// List of extensions which should be recommended for users of this workspace.
"recommendations": [
"BazelBuild.vscode-bazel",
"devondcarew.bazel-code",
"gkalpak.aio-docs-utils",
"ms-vscode.vscode-typescript-tslint-plugin",
"xaver.clang-format",
+147520
View File
File diff suppressed because one or more lines are too long
-147529
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -2,4 +2,4 @@
# yarn lockfile v1
yarn-path ".yarn/releases/yarn-1.22.19.cjs"
yarn-path ".yarn/releases/yarn-1.22.17.cjs"
+2 -3
View File
@@ -13,7 +13,6 @@ exports_files([
"scripts/ci/payload-size.sh",
"scripts/ci/payload-size.js",
"package.json",
"angular.json",
])
filegroup(
@@ -64,8 +63,8 @@ config_setting(
nodejs_binary(
name = "yarn_vendored",
data = [".yarn/releases/yarn-1.22.19.cjs"],
entry_point = ".yarn/releases/yarn-1.22.19.cjs",
data = [".yarn/releases/yarn-1.22.17.cjs"],
entry_point = ".yarn/releases/yarn-1.22.17.cjs",
visibility = [
"//aio/tools/examples/shared:__pkg__",
"//integration:__subpackages__",
+4 -899
View File
@@ -1,875 +1,3 @@
<a name="17.1.0"></a>
# 17.1.0 (2024-01-17)
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [79ff91a813](https://github.com/angular/angular/commit/79ff91a813e544929cb5eb5f9aab762a9f3d0435) | fix | allow TS jsDocParsingMode host option to be programmatically set ([#53126](https://github.com/angular/angular/pull/53126)) |
| [5613051a8b](https://github.com/angular/angular/commit/5613051a8bd2626ae347292807b2bf21085c4c02) | fix | allow TS jsDocParsingMode host option to be programmatically set again ([#53292](https://github.com/angular/angular/pull/53292)) |
| [df8a825910](https://github.com/angular/angular/commit/df8a825910951bebf34a4eede42f3ce5cd3e6fb7) | fix | project empty block root node ([#53620](https://github.com/angular/angular/pull/53620)) |
| [478d622265](https://github.com/angular/angular/commit/478d6222650884478314985e3d5132587c4f670c) | fix | project empty block root node in template pipeline ([#53620](https://github.com/angular/angular/pull/53620)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [abdc7e4578](https://github.com/angular/angular/commit/abdc7e45786667e4283912024a641975f1917d97) | feat | support type-checking for generic signal inputs ([#53521](https://github.com/angular/angular/pull/53521)) |
| [e620b3a724](https://github.com/angular/angular/commit/e620b3a724cb615af24b7779c0ab492d24efb8cc) | fix | add compiler option to disable control flow content projection diagnostic ([#53311](https://github.com/angular/angular/pull/53311)) |
| [4c1d69e288](https://github.com/angular/angular/commit/4c1d69e2880f22745c820eee630d10071e4fa86b) | fix | add diagnostic for control flow that prevents content projection ([#53190](https://github.com/angular/angular/pull/53190)) |
| [76ceebad04](https://github.com/angular/angular/commit/76ceebad047f62972654a8c934c77d8d02d9fa14) | fix | do not throw fatal error if extended type check fails ([#53896](https://github.com/angular/angular/pull/53896)) |
| [1a6eaa0fea](https://github.com/angular/angular/commit/1a6eaa0fea1024b919e17ac9d2e8c07df7916de8) | fix | input transform in local compilation mode ([#53645](https://github.com/angular/angular/pull/53645)) |
| [56a76d73e0](https://github.com/angular/angular/commit/56a76d73e037aeea1975808d5c51608fd23d4fa6) | fix | modify `getConstructorDependencies` helper to work with reflection host after the previous change ([#52215](https://github.com/angular/angular/pull/52215)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [863be4b698](https://github.com/angular/angular/commit/863be4b6981dc60ca0610b0e61d2ba1f5759e2a3) | feat | expose new `input` API for signal-based inputs ([#53872](https://github.com/angular/angular/pull/53872)) |
| [94096c6ede](https://github.com/angular/angular/commit/94096c6ede67436a349ae07901f2bb418bf9f461) | feat | support TypeScript 5.3 ([#52572](https://github.com/angular/angular/pull/52572)) |
| [69b384c0d1](https://github.com/angular/angular/commit/69b384c0d16f631741339d8757c32ef08260cfce) | fix | `SignalNode` reactive node incorrectly exposing unset field ([#53571](https://github.com/angular/angular/pull/53571)) |
| [6f79507ea7](https://github.com/angular/angular/commit/6f79507ea7f272d8d09250e222ca831f407867d8) | fix | Change defer block fixture default behavior to playthrough ([#53956](https://github.com/angular/angular/pull/53956)) |
| [32f908ab70](https://github.com/angular/angular/commit/32f908ab70f1b9ed3f92df1cae05ddde68932404) | fix | do not accidentally inherit input transforms when overridden ([#53571](https://github.com/angular/angular/pull/53571)) |
| [bdd61c768a](https://github.com/angular/angular/commit/bdd61c768a28b56c68634b99c036986499829f45) | fix | replace assertion with more intentional error ([#52234](https://github.com/angular/angular/pull/52234)) |
| [0daca457bb](https://github.com/angular/angular/commit/0daca457bb5bb6ffe14b7037264f8497eb5b3daf) | fix | TestBed should still use the microtask queue to schedule effects ([#53843](https://github.com/angular/angular/pull/53843)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [5c1d441029](https://github.com/angular/angular/commit/5c1d4410298e20cb03d7a1ddf7931538b6a181b4) | feat | Add info property to `NavigationExtras` ([#53303](https://github.com/angular/angular/pull/53303)) |
| [50d7916278](https://github.com/angular/angular/commit/50d79162785bb8d3e158a7a4a3733f4c75d3b127) | feat | Add router configuration to resolve navigation promise on error ([#48910](https://github.com/angular/angular/pull/48910)) |
| [a5a9b408e2](https://github.com/angular/angular/commit/a5a9b408e2eb64dcf1d3ca16da4897649dd2fc34) | feat | Add transient info to RouterLink input ([#53784](https://github.com/angular/angular/pull/53784)) |
| [726530a9af](https://github.com/angular/angular/commit/726530a9af9c8daf7295cc3548f24e70f380d70e) | feat | Allow `onSameUrlNavigation: 'ignore'` in `navigateByUrl` ([#52265](https://github.com/angular/angular/pull/52265)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.9"></a>
# 17.0.9 (2024-01-10)
### common
| Commit | Type | Description |
| -- | -- | -- |
| [c22b513b3f](https://github.com/angular/angular/commit/c22b513b3f45c49baf4d6e571735aa4aa33b7845) | fix | remove unused parameters from the ngClass constructor ([#53831](https://github.com/angular/angular/pull/53831)) |
| [bd9f89d1c8](https://github.com/angular/angular/commit/bd9f89d1c8e295f00ef3399c6bedca4e2ce0e89e) | fix | server-side rendering error when using in-memory scrolling ([#53683](https://github.com/angular/angular/pull/53683)) |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [92fd6cc42e](https://github.com/angular/angular/commit/92fd6cc42e0a217f4575404ea8e2af462f14ae18) | fix | generate less code for advance instructions ([#53845](https://github.com/angular/angular/pull/53845)) |
| [6a41961fbd](https://github.com/angular/angular/commit/6a41961fbdf921f7a3ab82e92185eab751c0d153) | fix | ignore empty switch blocks ([#53776](https://github.com/angular/angular/pull/53776)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [7309463697](https://github.com/angular/angular/commit/7309463697110d848781bfe81f04b6070c759928) | fix | interpolatedSignalNotInvoked diagnostic ([#53585](https://github.com/angular/angular/pull/53585)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [441db5123f](https://github.com/angular/angular/commit/441db5123f368c5fe3a505a79b97309e8400250f) | fix | `afterRender` hooks now only run on `ApplicationRef.tick` ([#52455](https://github.com/angular/angular/pull/52455)) |
| [f9120d79cb](https://github.com/angular/angular/commit/f9120d79cb88a9f14c4baa6981f71a5afbd984e1) | fix | allow effect to be used inside an ErrorHandler ([#53713](https://github.com/angular/angular/pull/53713)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [e92c86b77f](https://github.com/angular/angular/commit/e92c86b77ff7d400c034740ee0ad68acb626a22f) | fix | Fix empty switch case offset bug in cf migration ([#53839](https://github.com/angular/angular/pull/53839)) |
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [91cb16fde9](https://github.com/angular/angular/commit/91cb16fde9ff68bcdc760428c47f4ebf3e476bd2) | fix | Do not delete global Event ([#53659](https://github.com/angular/angular/pull/53659)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.8"></a>
# 17.0.8 (2023-12-21)
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [de5c9ca8e9](https://github.com/angular/angular/commit/de5c9ca8e9a026ad752aab348bd137f647cc3cc9) | fix | correctly intercept index in loop tracking function ([#53604](https://github.com/angular/angular/pull/53604)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [d79489255a](https://github.com/angular/angular/commit/d79489255a48a55b136746856af0d8be51bbe665) | fix | avoid repeated work when parsing version ([#53598](https://github.com/angular/angular/pull/53598)) |
| [513fee871e](https://github.com/angular/angular/commit/513fee871eb5d1c8a12bfe64878276b1d9c07705) | fix | tree shake version class ([#53598](https://github.com/angular/angular/pull/53598)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [eb7c29c7b6](https://github.com/angular/angular/commit/eb7c29c7b64a64853c7f7691912835240b62dfeb) | fix | cf migration - detect and error when result is invalid i18n nesting ([#53638](https://github.com/angular/angular/pull/53638)) |
| [ed936ba0e9](https://github.com/angular/angular/commit/ed936ba0e9d5323095aa486dc58d8b088b4d64cc) | fix | cf migration - detect and error when result is invalid i18n nesting ([#53638](https://github.com/angular/angular/pull/53638)) ([#53639](https://github.com/angular/angular/pull/53639)) |
| [5c2f2539e2](https://github.com/angular/angular/commit/5c2f2539e27bd18fd586c5977d853cd827f7b004) | fix | cf migration - ensure full check runs for all imports ([#53637](https://github.com/angular/angular/pull/53637)) |
| [817dc1b27f](https://github.com/angular/angular/commit/817dc1b27fcf32db8f8d8417bdd46a1763460f11) | fix | cf migration - fix bug in attribute formatting ([#53636](https://github.com/angular/angular/pull/53636)) |
| [7ac60bab9a](https://github.com/angular/angular/commit/7ac60bab9a4bb7a5af037a2de47339bd7837b157) | fix | cf migration - improve import declaration handling ([#53622](https://github.com/angular/angular/pull/53622)) |
| [c3f85e51a9](https://github.com/angular/angular/commit/c3f85e51a970aa458b920835573fa4e392e6f909) | fix | cf migration - preserve indentation on attribute strings ([#53625](https://github.com/angular/angular/pull/53625)) |
| [e73205ff5a](https://github.com/angular/angular/commit/e73205ff5ae4c382924266520f271b56972a0db6) | fix | cf migration - stop removing empty newlines from i18n blocks ([#53578](https://github.com/angular/angular/pull/53578)) |
| [886aa7b2a9](https://github.com/angular/angular/commit/886aa7b2a99a301eb6e35dc1a59ef918f0bea348) | fix | Fix cf migration bug with parsing for loop conditions properly ([#53558](https://github.com/angular/angular/pull/53558)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [0696ab6a5b](https://github.com/angular/angular/commit/0696ab6a5bea8acd6dafde488151150bf3332b79) | fix | Should not freeze original object used for route data ([#53635](https://github.com/angular/angular/pull/53635)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.7"></a>
# 17.0.7 (2023-12-13)
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [4fd5409090](https://github.com/angular/angular/commit/4fd5409090b5556ecde3b4e2e1f09955e71443f4) | fix | handle ambient types in input transform function ([#51474](https://github.com/angular/angular/pull/51474)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [a603338fe8](https://github.com/angular/angular/commit/a603338fe800a133c64b1573f2f805978c947725) | fix | generate less type checking code in for loops ([#53515](https://github.com/angular/angular/pull/53515)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [58ed76be93](https://github.com/angular/angular/commit/58ed76be937c23713e05609da3195ebafeb49794) | fix | Avoid refreshing a host view twice when using transplanted views ([#53021](https://github.com/angular/angular/pull/53021)) |
| [c16b5e8290](https://github.com/angular/angular/commit/c16b5e82901b28b8ca0b72009c56aaeca68c58b0) | fix | Multiple subscribers to ApplicationRef.isStable should all see values ([#53541](https://github.com/angular/angular/pull/53541)) |
| [17dbf8b8e2](https://github.com/angular/angular/commit/17dbf8b8e2a0979515d07341b4a869a78fab8583) | fix | remove signal equality check short-circuit ([#53446](https://github.com/angular/angular/pull/53446)) |
| [5b4add27b6](https://github.com/angular/angular/commit/5b4add27b6d9d3ba55740818dc00659b6d462b87) | fix | update feature usage marker ([#53542](https://github.com/angular/angular/pull/53542)) |
| [68d111c841](https://github.com/angular/angular/commit/68d111c8416dff43a83bb9de1241b4847d80eae7) | perf | avoid changes Observable creation on QueryList ([#53498](https://github.com/angular/angular/pull/53498)) |
| [044cb553b4](https://github.com/angular/angular/commit/044cb553b4b8ed2f5f9a80131c5da84b3c964d9f) | perf | optimize memory allocation when reconcilling lists ([#52245](https://github.com/angular/angular/pull/52245)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [96ab999698](https://github.com/angular/angular/commit/96ab999698ca186b8e2b95177ea6f2c84e43628a) | fix | CF Migration - ensure bound ngIfElse cases ignore line breaks ([#53435](https://github.com/angular/angular/pull/53435)) |
| [c9a1c6f1c7](https://github.com/angular/angular/commit/c9a1c6f1c7455431755dc31e00d72864931bf819) | fix | cf migration - undo changes when html fails to parse post migration ([#53530](https://github.com/angular/angular/pull/53530)) |
| [b75aca1d74](https://github.com/angular/angular/commit/b75aca1d747e1bb55d4f3f6996bb2cb363e34f5b) | fix | CF migration only remove newlines of changed template content ([#53508](https://github.com/angular/angular/pull/53508)) |
| [e88a12d5b3](https://github.com/angular/angular/commit/e88a12d5b3cf0e7c55c15c6820362d4d1e25ecaa) | fix | cf migration validate structure of ngswitch before migrating ([#53530](https://github.com/angular/angular/pull/53530)) |
| [543df3dca5](https://github.com/angular/angular/commit/543df3dca52597aae298a01271337949d891dc65) | fix | ensure we do not overwrite prior template replacements in migration ([#53393](https://github.com/angular/angular/pull/53393)) |
| [d232ea143f](https://github.com/angular/angular/commit/d232ea143f99fffc190c126d01920e965ffde3a3) | fix | fix cf migration import removal when errors occur ([#53502](https://github.com/angular/angular/pull/53502)) |
### platform-browser
| Commit | Type | Description |
| -- | -- | -- |
| [d5c631bf36](https://github.com/angular/angular/commit/d5c631bf3663b414b6d7734352804e594bfa2772) | fix | Get correct base path when using "." as base href when serving from the file:// protocol. ([#53547](https://github.com/angular/angular/pull/53547)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [e750e4edcf](https://github.com/angular/angular/commit/e750e4edcfe812bcee82d4a2f53fd8acd8792f08) | fix | provide more actionable error message when route is not matched in production mode ([#53523](https://github.com/angular/angular/pull/53523)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.6"></a>
# 17.0.6 (2023-12-06)
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [a2e5f483f5](https://github.com/angular/angular/commit/a2e5f483f5a869c0cca205f092049e252a02b710) | fix | generate proper code for nullish coalescing in styling host bindings ([#53305](https://github.com/angular/angular/pull/53305)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [66ecf4c274](https://github.com/angular/angular/commit/66ecf4c2748b43b7e53af00499b153bbe70dd684) | fix | add compiler option to disable control flow content projection diagnostic ([#53387](https://github.com/angular/angular/pull/53387)) |
| [74e6ce5d23](https://github.com/angular/angular/commit/74e6ce5d233c8763b6c437fab5d81d7b89ae6cd4) | fix | add diagnostic for control flow that prevents content projection ([#53387](https://github.com/angular/angular/pull/53387)) |
| [6ec7a42b95](https://github.com/angular/angular/commit/6ec7a42b9578aa34a66bb7c81ac491bb18f98941) | fix | avoid conflicts with built-in global variables in for loop blocks ([#53319](https://github.com/angular/angular/pull/53319)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [0a53f96094](https://github.com/angular/angular/commit/0a53f9609462fc59cf20c7fe1436d153c23e0412) | fix | cleanup signal consumers for all views ([#53351](https://github.com/angular/angular/pull/53351)) |
| [4fc1581bbc](https://github.com/angular/angular/commit/4fc1581bbcd98e607eb2bbd9976c64c92a70d827) | fix | handle hydration of multiple nodes projected in a single slot ([#53270](https://github.com/angular/angular/pull/53270)) |
| [14e66533ec](https://github.com/angular/angular/commit/14e66533ec49184723a66652253e9ae863a972e0) | fix | support hydration for cases when content is re-projected using ng-template ([#53304](https://github.com/angular/angular/pull/53304)) |
| [8e366e8911](https://github.com/angular/angular/commit/8e366e8911434d5b91e83e215320caae72f6adf8) | fix | support swapping hydrated views in `@for` loops ([#53274](https://github.com/angular/angular/pull/53274)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [45064f1ae1](https://github.com/angular/angular/commit/45064f1ae1ceb9c5a1f1053077f77370e3e9fdb2) | fix | CF migration - ensure NgIfElse attributes are properly removed ([#53298](https://github.com/angular/angular/pull/53298)) |
| [a6275cfa54](https://github.com/angular/angular/commit/a6275cfa54d680d6612a1c91e5d3f6b86b828fbc) | fix | CF Migration - Fix case of aliases on i18n ng-templates preventing removal ([#53299](https://github.com/angular/angular/pull/53299)) |
| [58a96e0f50](https://github.com/angular/angular/commit/58a96e0f50f2d59376aa357188ad0792b39e4e70) | fix | CF Migration add support for ngIf with just a then ([#53297](https://github.com/angular/angular/pull/53297)) |
| [26e40c7f89](https://github.com/angular/angular/commit/26e40c7f8916612034b03dae4f74e53b61d39d86) | fix | CF Migration fix missing alias for bound ngifs ([#53296](https://github.com/angular/angular/pull/53296)) |
| [836aeba01d](https://github.com/angular/angular/commit/836aeba01db526676610802daff4e8ebca8cef1e) | fix | Change CF Migration ng-template placeholder generation and handling ([#53394](https://github.com/angular/angular/pull/53394)) |
| [72d22ba7ee](https://github.com/angular/angular/commit/72d22ba7eea87e2873a765aa69b3d923b9d6cc6d) | fix | fix regexp for else and then in cf migration ([#53257](https://github.com/angular/angular/pull/53257)) |
| [7a2facae8a](https://github.com/angular/angular/commit/7a2facae8af3240b21fc17857a770dad793b7b6d) | fix | handle aliases on bound ngIf migrations ([#53261](https://github.com/angular/angular/pull/53261)) |
| [5104a89b30](https://github.com/angular/angular/commit/5104a89b3035fb07ce23e09974dc9998ef6932ca) | fix | handle nested ng-template replacement safely in CF migration ([#53368](https://github.com/angular/angular/pull/53368)) |
| [2a4e3f5373](https://github.com/angular/angular/commit/2a4e3f5373dfbc2a1634d67e646c30d8bbe4fea8) | fix | handle templates outside of component in cf migration ([#53368](https://github.com/angular/angular/pull/53368)) |
| [0db75ab5b1](https://github.com/angular/angular/commit/0db75ab5b1c8c79a0e7ca1d6094092f0cb3e3939) | fix | remove setting that removes comments in CF migration ([#53350](https://github.com/angular/angular/pull/53350)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [13ade13a15](https://github.com/angular/angular/commit/13ade13a15f0c5b5f782d2fda0f7a96b3c606198) | fix | Ensure canMatch guards run on wildcard routes ([#53239](https://github.com/angular/angular/pull/53239)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.5"></a>
# 17.0.5 (2023-11-29)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [6be88040d1](https://github.com/angular/angular/commit/6be88040d134b8c8d7efd2068296f68b8b7efbdd) | fix | avoid stale provider info when TestBed.overrideProvider is used ([#52918](https://github.com/angular/angular/pull/52918)) |
| [dee50f1d78](https://github.com/angular/angular/commit/dee50f1d78d009f74edfa53f11fd6998b1af5441) | fix | inherit host directives ([#52992](https://github.com/angular/angular/pull/52992)) |
| [07920d96d4](https://github.com/angular/angular/commit/07920d96d4e9831fd14ff01a3dd44af1017b28ca) | fix | Reattached views that are dirty from a signal update should refresh ([#53001](https://github.com/angular/angular/pull/53001)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [aab7fb8654](https://github.com/angular/angular/commit/aab7fb865486b94d6aabbe548894f8083f4e6cfe) | fix | Add ngForTemplate support to control flow migration ([#53076](https://github.com/angular/angular/pull/53076)) |
| [dbd6f386ea](https://github.com/angular/angular/commit/dbd6f386ea81e7f29bc1cb34fb8efbba8c290ea8) | fix | allows colons in ngIf else cases to migrate ([#53076](https://github.com/angular/angular/pull/53076)) |
| [5b9f896009](https://github.com/angular/angular/commit/5b9f896009d9c57c91d44e1cb7adf80c29fbfb4c) | fix | cf migration fix migrating empty switch default ([#53237](https://github.com/angular/angular/pull/53237)) |
| [2b3d3b0fe1](https://github.com/angular/angular/commit/2b3d3b0fe10134739ec9982a776837a273ec8e1d) | fix | CF migration log warning when collection aliasing detected in `@for` ([#53238](https://github.com/angular/angular/pull/53238)) |
| [dffeac8386](https://github.com/angular/angular/commit/dffeac8386bed73ef0b2337c33f122af9884bb82) | fix | cf migration removes unnecessary bound ngifelse attribute ([#53236](https://github.com/angular/angular/pull/53236)) |
| [00cb3339ba](https://github.com/angular/angular/commit/00cb3339bab738100e4164339420f2492be91fd1) | fix | control flow migration formatting fixes ([#53076](https://github.com/angular/angular/pull/53076)) |
| [c22af72f75](https://github.com/angular/angular/commit/c22af72f753b9ad3886561228a0cfd938a2a6de9) | fix | fix off by one issue with template removal in CF migration ([#53255](https://github.com/angular/angular/pull/53255)) |
| [ba6d7fe018](https://github.com/angular/angular/commit/ba6d7fe0184dd1d9dbab088d767097948b78d9a4) | fix | fixes CF migration i18n ng-template offsets ([#53212](https://github.com/angular/angular/pull/53212)) |
| [8f6affdd64](https://github.com/angular/angular/commit/8f6affdd64c6022c6a96fddac564c0ec05c5da9b) | fix | fixes control flow migration common module removal ([#53076](https://github.com/angular/angular/pull/53076)) |
| [6ae408847c](https://github.com/angular/angular/commit/6ae408847ce5943ff34c7432a76533b69f08cb63) | fix | properly handle ngIfThen cases in CF migration ([#53256](https://github.com/angular/angular/pull/53256)) |
| [0fcef65cea](https://github.com/angular/angular/commit/0fcef65cea8a7687afdf90e6e0e0c396f5792606) | fix | Update CF migration to skip templates with duplicate ng-template names ([#53204](https://github.com/angular/angular/pull/53204)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [91486aaf07](https://github.com/angular/angular/commit/91486aaf0754cb38bc9846f1d9532b1a0941f53a) | fix | Resolvers in different parts of the route tree should be able to execute together ([#52934](https://github.com/angular/angular/pull/52934)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.4"></a>
# 17.0.4 (2023-11-20)
### common
| Commit | Type | Description |
| -- | -- | -- |
| [7f1c55755d](https://github.com/angular/angular/commit/7f1c55755d94444aa2c07fc62c276bb158e69f24) | fix | remove `load` on image once it fails to load ([#52990](https://github.com/angular/angular/pull/52990)) |
| [fafcb0d23f](https://github.com/angular/angular/commit/fafcb0d23f1f687a2fe5c8349b916586ffadc375) | fix | scan images once page is loaded ([#52991](https://github.com/angular/angular/pull/52991)) |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [98376f2c09](https://github.com/angular/angular/commit/98376f2c09e9c28d1473123a2a1f4fb1c9d1cb1e) | fix | changed after checked error in for loops ([#52935](https://github.com/angular/angular/pull/52935)) |
| [291deac663](https://github.com/angular/angular/commit/291deac6636a6f99a98dd0c9096ebe3b0547bb9e) | fix | generate i18n instructions for blocks ([#52958](https://github.com/angular/angular/pull/52958)) |
| [49dca36880](https://github.com/angular/angular/commit/49dca36880a1c1c394533e8a94db9c5ef412ebd2) | fix | nested for loops incorrectly calculating computed variables ([#52931](https://github.com/angular/angular/pull/52931)) |
| [f01b7183d2](https://github.com/angular/angular/commit/f01b7183d2064f41c0f5e30ee976cc91c15e06c5) | fix | produce placeholder for blocks in i18n bundles ([#52958](https://github.com/angular/angular/pull/52958)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [f671f86ac2](https://github.com/angular/angular/commit/f671f86ac28d434b2fd492ef005749fe0275ece9) | fix | add diagnostic for control flow that prevents content projection ([#52726](https://github.com/angular/angular/pull/52726)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [db1a8ebdb4](https://github.com/angular/angular/commit/db1a8ebdb4da8673107ba4ba08c42d484b733c03) | fix | cleanup loading promise when no dependencies are defined ([#53031](https://github.com/angular/angular/pull/53031)) |
| [31a1575334](https://github.com/angular/angular/commit/31a1575334ef78822d947ed858d8365ca5665f2f) | fix | handle local refs when `getDeferBlocks` is invoked in tests ([#52973](https://github.com/angular/angular/pull/52973)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [ac9cd6108f](https://github.com/angular/angular/commit/ac9cd6108f6fe25e9c7a11db9816c6e07d241515) | fix | control flow migration fails for async pipe with unboxing of observable ([#52756](https://github.com/angular/angular/pull/52756)) ([#52972](https://github.com/angular/angular/pull/52972)) |
| [13bf5b7007](https://github.com/angular/angular/commit/13bf5b700739aadb2e5a210441fb815a8501ad65) | fix | Fixes control flow migration if then else case ([#53006](https://github.com/angular/angular/pull/53006)) |
| [492ad4698a](https://github.com/angular/angular/commit/492ad4698aaef51a3d24ae90f617a2ba3fae901e) | fix | fixes migrations of nested switches in control flow ([#53010](https://github.com/angular/angular/pull/53010)) |
| [0fad36eff2](https://github.com/angular/angular/commit/0fad36eff2b228baa3b8868810d4ac86eb6db459) | fix | tweaks to formatting in control flow migration ([#53058](https://github.com/angular/angular/pull/53058)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.3"></a>
# 17.0.3 (2023-11-15)
### animations
| Commit | Type | Description |
| -- | -- | -- |
| [f5872c9921](https://github.com/angular/angular/commit/f5872c992181a2c231890b83f92ec03ec9606802) | fix | prevent the AsyncAnimationRenderer from calling the delegate when there is no element. ([#52570](https://github.com/angular/angular/pull/52570)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [6a1d4ed667](https://github.com/angular/angular/commit/6a1d4ed6670f5965a654e40997aa266a99925f50) | fix | handle non-container environment injector cases ([#52774](https://github.com/angular/angular/pull/52774)) |
| [5de7575be8](https://github.com/angular/angular/commit/5de7575be83b9829e65ad245034ee7ab1d966044) | fix | reset cached scope for components that were overridden using TestBed ([#52916](https://github.com/angular/angular/pull/52916)) |
### http
| Commit | Type | Description |
| -- | -- | -- |
| [7c066a4af4](https://github.com/angular/angular/commit/7c066a4af4faae25ee722c19576c63c3833066ee) | fix | Use the response `content-type` to set the blob `type`. ([#52840](https://github.com/angular/angular/pull/52840)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [4e200bf13b](https://github.com/angular/angular/commit/4e200bf13b284fa89bbb0854cbb85dc8fe94d8bb) | fix | Add missing support for ngForOf ([#52903](https://github.com/angular/angular/pull/52903)) |
| [d033540d0f](https://github.com/angular/angular/commit/d033540d0f874a7a05b79c00e3151ed076fa71c3) | fix | Add support for bound versions of NgIfElse and NgIfThenElse ([#52869](https://github.com/angular/angular/pull/52869)) |
| [aa2d815648](https://github.com/angular/angular/commit/aa2d815648dbf3303cfe72bf976a4a87de406ee0) | fix | Add support for removing imports post migration ([#52763](https://github.com/angular/angular/pull/52763)) |
| [3831942771](https://github.com/angular/angular/commit/38319427711f4dab4e4d64ff48aecc7727085031) | fix | Fixes issue with multiple if elses with same template ([#52863](https://github.com/angular/angular/pull/52863)) |
| [e1f84a31dc](https://github.com/angular/angular/commit/e1f84a31dcac413251329c3b695a253234c6aae6) | fix | passed in paths will be respected in nx workspaces ([#52796](https://github.com/angular/angular/pull/52796)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.2"></a>
# 17.0.2 (2023-11-09)
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [7a95cccf50](https://github.com/angular/angular/commit/7a95cccf50c01a3733c6015551f8864e246d9239) | fix | add interpolatedSignalNotInvoked to diagnostics ([#52687](https://github.com/angular/angular/pull/52687)) |
| [a548c0333e](https://github.com/angular/angular/commit/a548c0333ecc993073ee7df054119a6fdde1d27b) | fix | incorrect inferred type of for loop implicit variables ([#52732](https://github.com/angular/angular/pull/52732)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [2cea80c6e2](https://github.com/angular/angular/commit/2cea80c6e21c113d12c38c4b3219c5f3f5944bd8) | fix | error code in image performance warning ([#52727](https://github.com/angular/angular/pull/52727)) |
| [b16fc2610a](https://github.com/angular/angular/commit/b16fc2610a37b7407713e1e0018d92372f1349e9) | fix | limit rate of markers invocations ([#52742](https://github.com/angular/angular/pull/52742)) |
| [44c48a4835](https://github.com/angular/angular/commit/44c48a48358c92c32301b578966a8e1ee9a867d8) | fix | properly update collection with repeated keys in `@for` ([#52697](https://github.com/angular/angular/pull/52697)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.1"></a>
# 17.0.1 (2023-11-08)
### http
| Commit | Type | Description |
| -- | -- | -- |
| [5c6f3f8ec0](https://github.com/angular/angular/commit/5c6f3f8ec0f1dd9b5505f3c94e654a675e75f147) | fix | Don't override the backend when using the InMemoryWebAPI ([#52425](https://github.com/angular/angular/pull/52425)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [70d30c28e0](https://github.com/angular/angular/commit/70d30c28e04f4ead51145e4e47df342492bfb336) | fix | Add support for ng-templates with i18n attributes ([#52597](https://github.com/angular/angular/pull/52597)) |
| [4f125c5f9a](https://github.com/angular/angular/commit/4f125c5f9ae572a8216ec1fbb88f52e47b875e1e) | fix | Switches to multiple passes to fix several reported bugs ([#52592](https://github.com/angular/angular/pull/52592)) |
Web Frameworks: the internet frontier.<br/>
These are the voyages of the framework Angular.<br/>
Its continuing mission:<br/>
To explore strange, new technologies.<br/>
To seek out new users and new applications.<br/>
To boldly go where no web framework has gone before.<br/>
In honor of v17.0.1
```
______
___.--------'------`---------.____
_.---'----------------------------------`---.__
.'___=]===========================================
,-----------------------..__/.' >--.______ _______.---'
]====================<==||(__) .' `------'
`-----------------------`' ----.___--/
/ /---' `/
/_______(______________________/
`-------------.--------------.'
\________|_.-'
```
Live long and prosper 🖖🏻
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.0"></a>
# 17.0.0 (2023-11-08)
[Blog post "Angular v17 is now available"](http://goo.gle/angular-v17).
## Breaking Changes
###
- Node.js v16 support has been removed and the minimum support version has been bumped to 18.13.0.
Node.js v16 is planned to be End-of-Life on 2023-09-11. Angular will stop supporting Node.js v16 in Angular v17. For Node.js release schedule details, please see: https://github.com/nodejs/release#release-schedule
### common
-
- the NgSwitch directive now defaults to the === equality operator,
migrating from the previously used ==. NgSwitch expressions and / or
individual condition values need adjusting to this stricter equality
check. The added warning message should help pinpointing NgSwitch
usages where adjustements are needed.
### core
- Angular now required `zone.js` version `~0.14.0`
- Versions of TypeScript older than 5.2 are no longer supported.
- The `mutate` method was removed from the `WritableSignal` interface and completely
dropped from the public API surface. As an alternative please use the update method and
make immutable changes to the object.
Example before:
```typescript
items.mutate(itemsArray => itemsArray.push(newItem));
```
Example after:
```typescript
items.update(itemsArray => [itemsArray, …newItem]);
```
- The `mutate` method was removed from the `WritableSignal` interface and completely
dropped from the public API surface. As an alternative please use the update method and
make immutable changes to the object.
Example before:
```typescript
items.mutate(itemsArray => itemsArray.push(newItem));
```
Example after:
```typescript
items.update(itemsArray => [itemsArray, …newItem]);
```
- `OnPush` components that are created dynamically now
only have their host bindings refreshed and `ngDoCheck run` during change
detection if they are dirty.
Previously, a bug in the change detection would result in the `OnPush`
configuration of dynamically created components to be ignored when
executing host bindings and the `ngDoCheck` function. This is
rarely encountered but can happen if code has a handle on the
`ComponentRef` instance and updates values read in the `OnPush`
component template without then calling either `markForCheck` or
`detectChanges` on that component's `ChangeDetectorRef`.
### platform-browser
- `REMOVE_STYLES_ON_COMPONENT_DESTROY` default value is now `true`. This causes CSS of components to be removed from the DOM when destroyed. You retain the previous behaviour by providing the `REMOVE_STYLES_ON_COMPONENT_DESTROY` injection token.
```ts
import {REMOVE_STYLES_ON_COMPONENT_DESTROY} from '@angular/platform-browser';
...
providers: [{
provide: REMOVE_STYLES_ON_COMPONENT_DESTROY,
useValue: false,
}]
```
- The `withNoDomReuse()` function was removed from the public API. If you need to disable hydration, you can exclude the `provideClientHydration()` call from provider list in your application (which would disable hydration features for the entire application) or use `ngSkipHydration` attribute to disable hydration for particular components. See this guide for additional information: https://angular.io/guide/hydration#how-to-skip-hydration-for-particular-components.
### router
- Absolute redirects no longer prevent further redirects.
Route configurations may need to be adjusted to prevent infinite
redirects where additional redirects were previously ignored after an
absolute redirect occurred.
- Routes with `loadComponent` would incorrectly cause
child routes to inherit their data by default. The default
`paramsInheritanceStrategy` is `emptyOnly`. If parent data should be
inherited in child routes, this should be manually set to `always`.
- `urlHandlingStrategy` has been removed from the Router public API.
This should instead be configured through the provideRouter or RouterModule.forRoot APIs.
- The following Router properties have been removed from
the public API:
- canceledNavigationResolution
- paramsInheritanceStrategy
- titleStrategy
- urlUpdateStrategy
- malformedUriErrorHandler
These should instead be configured through the `provideRouter` or
`RouterModule.forRoot` APIs.
- The `setupTestingRouter` function has been removed. Use
`RouterModule.forRoot` or `provideRouter` to setup the `Router` for
tests instead.
- `malformedUriErrorHandler` is no longer available in
the `RouterModule.forRoot` options. URL parsing errors should instead be
handled in the `UrlSerializer.parse` method.
### zone.js
- Deep and legacy `dist/` imports like `zone.js/bundles/zone-testing.js` and `zone.js/dist/zone` are no longer allowed. `zone-testing-bundle` and `zone-testing-node-bundle` are also no longer part of the package.
The proper way to import `zone.js` and `zone.js/testing` is:
```js
import 'zone.js';
import 'zone.js/testing';
```
## Deprecations
### animations
- The `AnimationDriver.NOOP` symbol is deprecated, use `NoopAnimationDriver` instead.
### core
- `ChangeDetectorRef.checkNoChanges` is deprecated.
Test code should use `ComponentFixture` instead of `ChangeDetectorRef`.
Application code should not call `ChangeDetectorRef.checkNoChanges` directly.
- Swapping out the context object for `EmbeddedViewRef`
is no longer supported. Support for this was introduced with v12.0.0, but
this pattern is rarely used. There is no replacement, but you can use
simple assignments in most cases, or `Object.assign , or alternatively
still replace the full object by using a `Proxy` (see `NgTemplateOutlet`
as an example).
Also adds a warning if the deprecated
- NgProbeToken
The `NgProbeToken` is not used internally since the transition from View Engine to Ivy. The token has no utility and can be removed from applications and libraries.
###
| Commit | Type | Description |
| -- | -- | -- |
| [59aa0634f4](https://github.com/angular/angular/commit/59aa0634f4d4694203f2a69c40017fe5a3962514) | build | remove support for Node.js v16 ([#51755](https://github.com/angular/angular/pull/51755)) |
### animations
| Commit | Type | Description |
| -- | -- | -- |
| [e753278faa](https://github.com/angular/angular/commit/e753278faae79a53e235e0d8e03f89555a712d80) | feat | Add the possibility of lazy loading animations code. ([#50738](https://github.com/angular/angular/pull/50738)) |
| [698c058e1c](https://github.com/angular/angular/commit/698c058e1c975c573722407f4843a4a774ceb92a) | fix | remove code duplication between entry-points ([#51500](https://github.com/angular/angular/pull/51500)) |
| [0598613950](https://github.com/angular/angular/commit/0598613950c76f4a13601c6942e30ab4ce1e3b67) | refactor | deprecation of `AnimationDriver.NOOP` ([#51843](https://github.com/angular/angular/pull/51843)) |
### benchpress
| Commit | Type | Description |
| -- | -- | -- |
| [2da3551a70](https://github.com/angular/angular/commit/2da3551a703ebef401d76a8e88e388437e851d85) | feat | report gc and render time spent in script ([#50771](https://github.com/angular/angular/pull/50771)) |
### common
| Commit | Type | Description |
| -- | -- | -- |
| [fe2fd7e1a8](https://github.com/angular/angular/commit/fe2fd7e1a898a4525c219065a6d0908988dfd7e2) | feat | make the warning for lazy-loaded lcp image an error ([#51748](https://github.com/angular/angular/pull/51748)) |
| [dde3fdabbd](https://github.com/angular/angular/commit/dde3fdabbd24b48dd6afd120d23e92a3605eb04d) | feat | upgrade warning to logged error for lazy-loaded LCP images using NgOptimizedImage ([#52004](https://github.com/angular/angular/pull/52004)) |
| [da056a1fe2](https://github.com/angular/angular/commit/da056a1fe2816299319fb3f87416316be2029479) | fix | add missing types field for @angular/common/locales of exports in package.json ([#52080](https://github.com/angular/angular/pull/52080)) |
| [85843e8212](https://github.com/angular/angular/commit/85843e8212e99deb8b70f3d3f8dfe002b978cbb1) | fix | allow to specify only some properties of `DatePipeConfig` ([#51287](https://github.com/angular/angular/pull/51287)) |
| [3bd85fb7b0](https://github.com/angular/angular/commit/3bd85fb7b0723ed807bca771e9fa95af60a3cfaf) | fix | apply fixed_srcset_width value only to fixed srcsets ([#52459](https://github.com/angular/angular/pull/52459)) |
| [65b460448e](https://github.com/angular/angular/commit/65b460448ec5fdcee5aecca0cdc3cf498b0832cb) | fix | missing space in ngSwitch equality warning ([#52180](https://github.com/angular/angular/pull/52180)) |
| [86c5e34601](https://github.com/angular/angular/commit/86c5e34601d7901a11688124aa902646524177eb) | fix | remove code duplication between entry-points ([#51500](https://github.com/angular/angular/pull/51500)) |
| [28a5925f53](https://github.com/angular/angular/commit/28a5925f53790067d45f1f68d204a36088dbf5e3) | fix | use === operator to match NgSwitch cases ([#51504](https://github.com/angular/angular/pull/51504)) |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [1934524a0c](https://github.com/angular/angular/commit/1934524a0c673fb65cd927c55c712f59446f9c93) | feat | add docs extraction for type aliases ([#52118](https://github.com/angular/angular/pull/52118)) |
| [7f6d9a73ab](https://github.com/angular/angular/commit/7f6d9a73ab8b658d0d8148080dfefb2550bee6b4) | feat | expand class api doc extraction ([#51733](https://github.com/angular/angular/pull/51733)) |
| [a7fa25306f](https://github.com/angular/angular/commit/a7fa25306f8ce47d8aa330531382106efec55a55) | feat | extract api docs for interfaces ([#52006](https://github.com/angular/angular/pull/52006)) |
| [7bfe20707f](https://github.com/angular/angular/commit/7bfe20707fedff7290e12356a1545644b436d41c) | feat | extract api for fn overloads and abtract classes ([#52040](https://github.com/angular/angular/pull/52040)) |
| [c7daf7ea16](https://github.com/angular/angular/commit/c7daf7ea1692391f7cac8f794ed777887a2764af) | feat | extract directive docs info ([#51733](https://github.com/angular/angular/pull/51733)) |
| [e0b1bb33d7](https://github.com/angular/angular/commit/e0b1bb33d77babe881f77f52cb1b71e345f5696b) | feat | extract doc info for JsDoc ([#51733](https://github.com/angular/angular/pull/51733)) |
| [b9c70158ab](https://github.com/angular/angular/commit/b9c70158abecd81a5af512c8b4da685851cf159f) | feat | extract docs for accessors, rest params, and types ([#51733](https://github.com/angular/angular/pull/51733)) |
| [a24ae994a0](https://github.com/angular/angular/commit/a24ae994a0470fdac09a69937fd0580cff6c6d68) | feat | extract docs for top level functions and consts ([#51733](https://github.com/angular/angular/pull/51733)) |
| [2e41488296](https://github.com/angular/angular/commit/2e41488296879685b19dfba8d78037690347bda3) | feat | extract docs info for enums, pipes, and NgModules ([#51733](https://github.com/angular/angular/pull/51733)) |
| [34495b3533](https://github.com/angular/angular/commit/34495b35337892ab209d9955ff7fe2897a0c5d41) | feat | extract docs via exports ([#51828](https://github.com/angular/angular/pull/51828)) |
| [7e82df45c5](https://github.com/angular/angular/commit/7e82df45c5bb72ec3dafaa07dc1eaa5d463b006c) | feat | initial skeleton for API doc extraction ([#51733](https://github.com/angular/angular/pull/51733)) |
| [6795cccbbb](https://github.com/angular/angular/commit/6795cccbbbfc17bbf88fb8197aa172cca67fa2d2) | fix | account for type-only imports in defer blocks ([#52343](https://github.com/angular/angular/pull/52343)) |
| [23bfa10ac8](https://github.com/angular/angular/commit/23bfa10ac809f6b27d32647210c52329f0e4262e) | fix | add diagnostic for inaccessible deferred trigger ([#51922](https://github.com/angular/angular/pull/51922)) |
| [31295a3cf9](https://github.com/angular/angular/commit/31295a3cf907a61e7115d9039a83a232b263a676) | fix | allocating unnecessary slots in conditional instruction ([#51913](https://github.com/angular/angular/pull/51913)) |
| [2aaddd3f64](https://github.com/angular/angular/commit/2aaddd3f64bb8891bb4bdcadf05d427a89338112) | fix | allow comments between switch cases ([#52449](https://github.com/angular/angular/pull/52449)) |
| [ddd9df68bb](https://github.com/angular/angular/commit/ddd9df68bb2e907dd820f239aaf819425cb95df8) | fix | allow decimals in defer block time values ([#52433](https://github.com/angular/angular/pull/52433)) |
| [7dbd47fb30](https://github.com/angular/angular/commit/7dbd47fb3015117c420f984181bfcb48e533525a) | fix | allow newlines in track and let expressions ([#52137](https://github.com/angular/angular/pull/52137)) |
| [0eae992c4e](https://github.com/angular/angular/commit/0eae992c4e03b7c9039476e03b72e92d662293df) | fix | allow nullable values in for loop block ([#51997](https://github.com/angular/angular/pull/51997)) |
| [073ebfe09e](https://github.com/angular/angular/commit/073ebfe09eccd5d01d27fcc46fc5d4465c1851ff) | fix | apply style on :host attributes in prod builds. ([#49118](https://github.com/angular/angular/pull/49118)) |
| [81a287a79a](https://github.com/angular/angular/commit/81a287a79afc16d43c0fd24d7aea54be4414940a) | fix | avoid error in template parser for tag names that can occur in object prototype ([#52225](https://github.com/angular/angular/pull/52225)) |
| [6c58252521](https://github.com/angular/angular/commit/6c582525217197dd777d5bb9e62d6aaa2c70a996) | fix | compilation error when for loop block expression contains new line ([#52447](https://github.com/angular/angular/pull/52447)) |
| [9d19c8e317](https://github.com/angular/angular/commit/9d19c8e31752d211f575246282358b83afe90969) | fix | don't allocate variable to for loop expression ([#52158](https://github.com/angular/angular/pull/52158)) |
| [9acd2ac98b](https://github.com/angular/angular/commit/9acd2ac98bc3b6ffc5a8d6c19f7290d05fe1f896) | fix | enable block syntax in the linker ([#51979](https://github.com/angular/angular/pull/51979)) |
| [1d871c03a5](https://github.com/angular/angular/commit/1d871c03a523e10bb838cb0f9550595cfbd9d14d) | fix | forward referenced dependencies not identified as deferrable ([#52017](https://github.com/angular/angular/pull/52017)) |
| [16ff08ec70](https://github.com/angular/angular/commit/16ff08ec70bfa192041ba050e550676e8d505a05) | fix | narrow the type of expressions in event listeners inside if blocks ([#52069](https://github.com/angular/angular/pull/52069)) |
| [ac0d5dcfd6](https://github.com/angular/angular/commit/ac0d5dcfd6015ec4283ed1a5cf241f130f4c5cf5) | fix | narrow the type of expressions in event listeners inside switch blocks ([#52069](https://github.com/angular/angular/pull/52069)) |
| [02edb43067](https://github.com/angular/angular/commit/02edb4306736e6f12e87a4164c17eca6cbdfe151) | fix | narrow the type of the aliased if block expression ([#51952](https://github.com/angular/angular/pull/51952)) |
| [83067b3ef2](https://github.com/angular/angular/commit/83067b3ef257dbc7b1c20d50645615d19023ba51) | fix | ng-template directive invoke twice at the root of control flow ([#52515](https://github.com/angular/angular/pull/52515)) |
| [17078a3fe1](https://github.com/angular/angular/commit/17078a3fe1e9b90e48952b6c12b6e6b774b97810) | fix | pipes used inside defer triggers not being picked up ([#52071](https://github.com/angular/angular/pull/52071)) |
| [861ce3a7c5](https://github.com/angular/angular/commit/861ce3a7c574340a6164ad0de13f49bda3e172da) | fix | pipes using DI not working in blocks ([#52112](https://github.com/angular/angular/pull/52112)) |
| [1f5039bbd6](https://github.com/angular/angular/commit/1f5039bbd6de8450e5511af00044ddd2f4314016) | fix | project control flow root elements into correct slot ([#52414](https://github.com/angular/angular/pull/52414)) |
| [81c315ec6e](https://github.com/angular/angular/commit/81c315ec6ea37c55d951d3b38b6c551226173be5) | fix | template type checking not reporting diagnostics for incompatible type comparisons ([#52322](https://github.com/angular/angular/pull/52322)) |
| [1beef49d80](https://github.com/angular/angular/commit/1beef49d80809fbb0e7c8e95f17096c39ac8940a) | fix | update the minVersion if component uses block syntax ([#51979](https://github.com/angular/angular/pull/51979)) |
| [386e1e9500](https://github.com/angular/angular/commit/386e1e950033ad98661e5077a4f119df0e7b3008) | fix | work around TypeScript bug when narrowing switch statements ([#52110](https://github.com/angular/angular/pull/52110)) |
| [e5bca43224](https://github.com/angular/angular/commit/e5bca432248add0a19102f6afeae145f1a33ee8a) | perf | further reduce bundle size using arrow functions ([#52010](https://github.com/angular/angular/pull/52010)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [5b66330329](https://github.com/angular/angular/commit/5b66330329fd066a7c347f040a330b4c7f2a0a2b) | fix | allow non-array imports for standalone component in local compilation mode ([#51819](https://github.com/angular/angular/pull/51819)) |
| [377a7abfda](https://github.com/angular/angular/commit/377a7abfda60a6ddd55a41531e3653bcad78b0a2) | fix | bypass static resolving of the component's changeDetection field in local compilation mode ([#51848](https://github.com/angular/angular/pull/51848)) |
| [19c3dc18d3](https://github.com/angular/angular/commit/19c3dc18d3c0cfd83efec2c8f81b40860d570346) | fix | fix NgModule injector def in local compilation mode when imports/exports are non-array expressions ([#51819](https://github.com/angular/angular/pull/51819)) |
| [11bb19cafc](https://github.com/angular/angular/commit/11bb19cafcf447b7ce6ade146d431a43c3e2c682) | fix | handle nested qualified names in ctor injection in local compilation mode ([#51947](https://github.com/angular/angular/pull/51947)) |
| [f91f222b55](https://github.com/angular/angular/commit/f91f222b55f249089d267c72a9c0ab5b09d7c932) | fix | resolve component encapsulation enum in local compilation mode ([#51848](https://github.com/angular/angular/pull/51848)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [59b6ec6be8](https://github.com/angular/angular/commit/59b6ec6be8cc464a6e74449ac7e0f2554ac7392b) | docs | Deprecate `ChangeDetectorRef.checkNoChanges` ([#52431](https://github.com/angular/angular/pull/52431)) |
| [4f04d1cdab](https://github.com/angular/angular/commit/4f04d1cdab2fc5217566c0c01b7df10c74a93afa) | feat | add new list reconcilation algorithm ([#51980](https://github.com/angular/angular/pull/51980)) |
| [c7127b98b5](https://github.com/angular/angular/commit/c7127b98b555449f99e24a81c828ab7b1c6c4a4e) | feat | add schematic to escape block syntax characters ([#51905](https://github.com/angular/angular/pull/51905)) |
| [50275e58b8](https://github.com/angular/angular/commit/50275e58b80acfc52239908a6c61523e99f6731c) | feat | Add schematic to migrate control flow syntax ([#52035](https://github.com/angular/angular/pull/52035)) |
| [81b67aa987](https://github.com/angular/angular/commit/81b67aa98767078aebae22150d3441372772c28f) | feat | add support for zone.js 0.14.0 ([#51774](https://github.com/angular/angular/pull/51774)) |
| [048f400efc](https://github.com/angular/angular/commit/048f400efc75011e888ea25d214a0211f91b96d4) | feat | add warnings for oversized images and lazy-lcp ([#51846](https://github.com/angular/angular/pull/51846)) |
| [93675dc797](https://github.com/angular/angular/commit/93675dc797cb9f897c19fe298455dec52b900113) | feat | conditional built-in control flow ([#51346](https://github.com/angular/angular/pull/51346)) |
| [4427e1ebc2](https://github.com/angular/angular/commit/4427e1ebc29f5541cfe6a404f212de4359441812) | feat | create function to assert not running inside reactive context ([#52049](https://github.com/angular/angular/pull/52049)) |
| [e23aaa7d75](https://github.com/angular/angular/commit/e23aaa7d75efdd52be4dd7ca9267bc60d36059c2) | feat | drop support for older TypeScript versions ([#51792](https://github.com/angular/angular/pull/51792)) |
| [43e6fb0606](https://github.com/angular/angular/commit/43e6fb0606e15584dcb4478ad4eaa8e825dda83e) | feat | enable block syntax ([#51994](https://github.com/angular/angular/pull/51994)) |
| [3cbb2a8ecf](https://github.com/angular/angular/commit/3cbb2a8ecf202c814c37ab241ce9f57fb574692e) | feat | implement deferred block interaction triggers ([#51830](https://github.com/angular/angular/pull/51830)) |
| [8be2c48b7c](https://github.com/angular/angular/commit/8be2c48b7cda5e99f3d1efa9f26eb2615fea6a8b) | feat | implement new block syntax ([#51891](https://github.com/angular/angular/pull/51891)) |
| [a54713c831](https://github.com/angular/angular/commit/a54713c8316787eea160cfdb7f2778a087fe59ed) | feat | implement ɵgetInjectorMetadata debug API ([#51900](https://github.com/angular/angular/pull/51900)) |
| [5b88d136af](https://github.com/angular/angular/commit/5b88d136affdaa35e7015c00281b86cae040321b) | feat | mark core signal APIs as stable ([#51821](https://github.com/angular/angular/pull/51821)) |
| [8eef694def](https://github.com/angular/angular/commit/8eef694def3dc660779168925a380179c7e30993) | feat | Provide a diagnostic for missing Signal invocation in template interpolation. ([#49660](https://github.com/angular/angular/pull/49660)) |
| [40113f653c](https://github.com/angular/angular/commit/40113f653c2468315e1dea64f17e545840cc5e22) | feat | Remove deprecated `CompilerOptions.useJit` and`CompilerOptions.missingTranslation`. ([#49672](https://github.com/angular/angular/pull/49672)) |
| [68ba798ae3](https://github.com/angular/angular/commit/68ba798ae3551b789a86d46b0a3bb61d42ef3f87) | feat | revamp the runtime error message for orphan components to include full component info ([#51919](https://github.com/angular/angular/pull/51919)) |
| [1a4aee7e49](https://github.com/angular/angular/commit/1a4aee7e49074e3bc3f3099bff88eaee9b2ab255) | feat | show runtime error for orphan component rendering ([#52061](https://github.com/angular/angular/pull/52061)) |
| [687b96186c](https://github.com/angular/angular/commit/687b96186c7da731927e55e714061ea2de718505) | feat | support deferred hover triggers ([#51874](https://github.com/angular/angular/pull/51874)) |
| [e2e3d69a27](https://github.com/angular/angular/commit/e2e3d69a277990ab79aac7aae43cbdd398e13ed9) | feat | support deferred triggers with implicit triggers ([#51922](https://github.com/angular/angular/pull/51922)) |
| [16f5fc40a4](https://github.com/angular/angular/commit/16f5fc40a49cee0d29711df1783f297ff30b5c6e) | feat | support deferred viewport triggers ([#51874](https://github.com/angular/angular/pull/51874)) |
| [59387ee476](https://github.com/angular/angular/commit/59387ee476dff1a893a01fe5cbee3c95b93c0cdb) | feat | support styles and styleUrl as strings ([#51715](https://github.com/angular/angular/pull/51715)) |
| [9cc52b9b85](https://github.com/angular/angular/commit/9cc52b9b85ffa5cb65c6886e81b5bff10dde8d52) | feat | support TypeScript 5.2 ([#51334](https://github.com/angular/angular/pull/51334)) |
| [7d42dc3c02](https://github.com/angular/angular/commit/7d42dc3c023391e12ea607beb227fd4426e1694d) | feat | the new list reconciliation algorithm for built-in for ([#51980](https://github.com/angular/angular/pull/51980)) |
| [935c1816fd](https://github.com/angular/angular/commit/935c1816fd04caab24be66f8ef67851c88d3d4da) | fix | add `rejectErrors` option to `toSignal` ([#52474](https://github.com/angular/angular/pull/52474)) |
| [5411864c2e](https://github.com/angular/angular/commit/5411864c2e74b52e7df8022719f0fd792b50a849) | fix | adjust toSignal types to handle more common cases ([#51991](https://github.com/angular/angular/pull/51991)) |
| [dcf18dc74c](https://github.com/angular/angular/commit/dcf18dc74c260253bbf394626beb712a831824f3) | fix | allow toSignal calls in reactive context ([#51831](https://github.com/angular/angular/pull/51831)) |
| [dbffdc09c2](https://github.com/angular/angular/commit/dbffdc09c25c93868aa13ae368c9fd21a4c359fb) | fix | avoid duplicated code between entry-points (primary, testing, rxjs-interop) ([#51500](https://github.com/angular/angular/pull/51500)) |
| [4f69d620d9](https://github.com/angular/angular/commit/4f69d620d94663592780b2875acbc2b1918775f9) | fix | deferred blocks not removing content immediately when animations are enabled ([#51971](https://github.com/angular/angular/pull/51971)) |
| [df58c0b714](https://github.com/angular/angular/commit/df58c0b714e37152ddf81855ee31f93f9fa71e30) | fix | disallow `afterRender` in reactive contexts ([#52138](https://github.com/angular/angular/pull/52138)) |
| [5d61221ed7](https://github.com/angular/angular/commit/5d61221ed7b4a5d1ef005183045d45238b19a446) | fix | disallow using `effect` inside reactive contexts ([#52138](https://github.com/angular/angular/pull/52138)) |
| [99e7629159](https://github.com/angular/angular/commit/99e7629159afbb8550957a265c5bd75f7e13f052) | fix | do not remove used ng-template nodes in control flow migration ([#52186](https://github.com/angular/angular/pull/52186)) |
| [c7ff9dff2c](https://github.com/angular/angular/commit/c7ff9dff2c14aba70e92b9e216a2d4d97d6ef71e) | fix | drop mutate function from the signals public API ([#51821](https://github.com/angular/angular/pull/51821)) |
| [00128e3853](https://github.com/angular/angular/commit/00128e38538f12fe9bc72ede9b55149e0be5ead0) | fix | drop mutate function from the signals public API ([#51821](https://github.com/angular/angular/pull/51821)) ([#51986](https://github.com/angular/angular/pull/51986)) |
| [ddef3ac9a4](https://github.com/angular/angular/commit/ddef3ac9a42677b900c998b2af7cd23a8213aa3a) | fix | effects wait for ngOnInit for their first run ([#52473](https://github.com/angular/angular/pull/52473)) |
| [5ead7d412d](https://github.com/angular/angular/commit/5ead7d412d847c85176a321e58d12dcdfc0dab67) | fix | ensure a consumer drops all its stale producers ([#51722](https://github.com/angular/angular/pull/51722)) |
| [1dd8558f82](https://github.com/angular/angular/commit/1dd8558f82aeb5f5819629d5e25b616343d27f1f) | fix | Ensure backwards-referenced transplanted views are refreshed ([#51854](https://github.com/angular/angular/pull/51854)) |
| [50ad074505](https://github.com/angular/angular/commit/50ad074505c15d09fe5d85fb443d9a2775125f87) | fix | framework debug APIs getDependenciesForTokenInInjector and getInjectorMetadata ([#51719](https://github.com/angular/angular/pull/51719)) |
| [80e7a0f8fa](https://github.com/angular/angular/commit/80e7a0f8fa13ad72a32b07cd1722efab3722fa49) | fix | guard usages of `performance.mark` ([#52505](https://github.com/angular/angular/pull/52505)) |
| [b9ea2d6900](https://github.com/angular/angular/commit/b9ea2d690015dd5b919df239a5ded66f2969b97b) | fix | handle aliased index with no space in control flow migration ([#52444](https://github.com/angular/angular/pull/52444)) |
| [ffe9b1fcc2](https://github.com/angular/angular/commit/ffe9b1fcc2ecb8dc0d36c7f9228ac1a052554eef) | fix | handle for alias with as in control flow migration ([#52183](https://github.com/angular/angular/pull/52183)) |
| [e5720edb46](https://github.com/angular/angular/commit/e5720edb460a1bb51475c78d3bd442da52991a46) | fix | handle if alias in control flow migration ([#52181](https://github.com/angular/angular/pull/52181)) |
| [4461cefa4f](https://github.com/angular/angular/commit/4461cefa4f8db21009ab10a2a53de664163a86d2) | fix | handle trackBy and aliased index in control flow migration ([#52423](https://github.com/angular/angular/pull/52423)) |
| [7368b8aaeb](https://github.com/angular/angular/commit/7368b8aaeba2ef0972a8bb261208c7281e050bb9) | fix | host directive validation not picking up duplicate directives on component node ([#52073](https://github.com/angular/angular/pull/52073)) |
| [696f003553](https://github.com/angular/angular/commit/696f003553a0ca6886329728511dd46761de909b) | fix | mutation bug in `getDependenciesFromInjectable` ([#52450](https://github.com/angular/angular/pull/52450)) |
| [d487014785](https://github.com/angular/angular/commit/d48701478518d97a1fd5b4744963530494f93958) | fix | Remove no longer needed build rule related to removed migration ([#52143](https://github.com/angular/angular/pull/52143)) |
| [4da08dc2ef](https://github.com/angular/angular/commit/4da08dc2ef439d3eced7199afb9a104cfd7b54cc) | fix | remove unnecessary migration ([#52141](https://github.com/angular/angular/pull/52141)) |
| [384d7aacd0](https://github.com/angular/angular/commit/384d7aacd04dfbb951d9d4ab493759c12cf35645) | fix | replace assertion with more intentional error ([#52427](https://github.com/angular/angular/pull/52427)) |
| [40bb45f329](https://github.com/angular/angular/commit/40bb45f3297359866cab39044dba06b3e809b096) | fix | Respect OnPush change detection strategy for dynamically created components ([#51356](https://github.com/angular/angular/pull/51356)) |
| [3a19d6b743](https://github.com/angular/angular/commit/3a19d6b7437e1812ae70b3784fd6a8a185b330b1) | fix | run afterRender callbacks outside of the Angular zone ([#51385](https://github.com/angular/angular/pull/51385)) |
| [a2ba5482c3](https://github.com/angular/angular/commit/a2ba5482c3032df808cb684444f76e2825a4fd36) | fix | use TNode instead of LView for mapping injector providers ([#52436](https://github.com/angular/angular/pull/52436)) |
| [d5dad3eb4c](https://github.com/angular/angular/commit/d5dad3eb4cd837032da72899f0796c6d431cb2c9) | fix | viewport trigger deregistering callbacks multiple times ([#52115](https://github.com/angular/angular/pull/52115)) |
| [8e4a7ab52b](https://github.com/angular/angular/commit/8e4a7ab52bc85172efd12e42304e1b8da446ff75) | perf | avoid repeated access to LContainer and trackBy calculation ([#52227](https://github.com/angular/angular/pull/52227)) |
| [1dc14d9853](https://github.com/angular/angular/commit/1dc14d98539b9063b14c6463a534a4129b0a4643) | perf | avoid unnecessary callbacks in after render hooks ([#52292](https://github.com/angular/angular/pull/52292)) |
| [e90694259e](https://github.com/angular/angular/commit/e90694259e31f264f05d4aa9ebe275638577ce1a) | perf | build-in for should update indexes only when views were added / removed ([#52051](https://github.com/angular/angular/pull/52051)) |
| [1032c1e1a5](https://github.com/angular/angular/commit/1032c1e1a5f5de28f38ede1786cf973f8e8b7a53) | perf | cache LiveCollectionLContainerImpl ([#52227](https://github.com/angular/angular/pull/52227)) |
| [685d01e106](https://github.com/angular/angular/commit/685d01e1065dad6dc52eaac9eb9527100994f5ce) | perf | chain template instructions ([#51546](https://github.com/angular/angular/pull/51546)) |
| [88a0af64fd](https://github.com/angular/angular/commit/88a0af64fde58cbf71e8e2a22c39fabb8f0ee8fb) | perf | generate arrow functions for pure function calls ([#51668](https://github.com/angular/angular/pull/51668)) |
| [37d627dbd4](https://github.com/angular/angular/commit/37d627dbd4083662b103de2e28102e6ff31a9192) | perf | minimze trackBy calculations ([#52227](https://github.com/angular/angular/pull/52227)) |
| [3861a73135](https://github.com/angular/angular/commit/3861a73135ca9111c0ec10d52ee7db0a0e95f262) | perf | Update LView consumer to only mark component for check ([#52302](https://github.com/angular/angular/pull/52302)) |
| [9b9e11fcaf](https://github.com/angular/angular/commit/9b9e11fcaf5d8d639ff1d7b8feddb01751b47e14) | refactor | deprecate allowing full context object to be replaced in `EmbeddedViewRef` ([#51887](https://github.com/angular/angular/pull/51887)) |
| [ba9fc2419e](https://github.com/angular/angular/commit/ba9fc2419eee0d72c573463016a872a4b69f71c1) | refactor | deprecate the `NgProbeToken` ([#51396](https://github.com/angular/angular/pull/51396)) |
### http
| Commit | Type | Description |
| -- | -- | -- |
| [7dde42a5df](https://github.com/angular/angular/commit/7dde42a5dfdab30e9420708722e0bef9f1467d1f) | feat | allow customization of the HttpTransferCache. ([#52029](https://github.com/angular/angular/pull/52029)) |
| [8156b3d4ec](https://github.com/angular/angular/commit/8156b3d4ec44a3b0489cc21763790a3be2969f7e) | fix | Don't override the backend when using the InMemoryWebAPI ([#52425](https://github.com/angular/angular/pull/52425)) |
| [bd9e91ecf7](https://github.com/angular/angular/commit/bd9e91ecf7af877e4ecf08a16eda7b4e59707541) | perf | reduce data transfer when using HTTP caching ([#52347](https://github.com/angular/angular/pull/52347)) |
### language-service
| Commit | Type | Description |
| -- | -- | -- |
| [449830f24e](https://github.com/angular/angular/commit/449830f24e78ebd977ca3210ab3541912d959245) | feat | Complete inside @switch ([#52153](https://github.com/angular/angular/pull/52153)) |
| [e2416a284f](https://github.com/angular/angular/commit/e2416a284ff086752c809689ef74588f02e5f0e4) | feat | Enable go to definition of styleUrl ([#51746](https://github.com/angular/angular/pull/51746)) |
| [023a181ba5](https://github.com/angular/angular/commit/023a181ba5f489deb0a47bbc9b290621ad38304a) | feat | Implement outlining spans for control flow blocks ([#52062](https://github.com/angular/angular/pull/52062)) |
| [7c052bb6ef](https://github.com/angular/angular/commit/7c052bb6efde580afc61d6c50e787353c103e3e1) | feat | Support autocompletion for blocks ([#52121](https://github.com/angular/angular/pull/52121)) |
| [9d565cd6d6](https://github.com/angular/angular/commit/9d565cd6d682e5c86ee8d43e1ee1c0f8866eb274) | fix | Autocomplete block keywords in more cases ([#52198](https://github.com/angular/angular/pull/52198)) |
### localize
| Commit | Type | Description |
| -- | -- | -- |
| [5a20a44c64](https://github.com/angular/angular/commit/5a20a44c64066e47894ca3cbe26327766ca89a42) | fix | ng-add schematics for application builder ([#51777](https://github.com/angular/angular/pull/51777)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [f0da7c2e44](https://github.com/angular/angular/commit/f0da7c2e44a29c5a71cf4880388989d129f4c6e8) | feat | schematic to remove deprecated CompilerOptions properties ([#49672](https://github.com/angular/angular/pull/49672)) |
| [965ce5a8c5](https://github.com/angular/angular/commit/965ce5a8c514237aa8e4c03a5e4b5527a1a19d96) | feat | Schematics for `TransferState`, `StateKey` and `makeStateKey` migration. ([#49594](https://github.com/angular/angular/pull/49594)) |
| [09e905ad67](https://github.com/angular/angular/commit/09e905ad672294d36f36eb2728b3483ab2e729fc) | fix | account for separator characters inside strings ([#52525](https://github.com/angular/angular/pull/52525)) |
| [4c878f90d2](https://github.com/angular/angular/commit/4c878f90d2cba689703d8def9dade3b7f8f6e8f1) | fix | Add support for nested structures inside a switch statement ([#52358](https://github.com/angular/angular/pull/52358)) |
| [d7397fb29b](https://github.com/angular/angular/commit/d7397fb29b400f193a2cda7af70058ac39247e6f) | fix | Ensure control flow migration ignores new block syntax ([#52402](https://github.com/angular/angular/pull/52402)) |
| [6a01d62b9d](https://github.com/angular/angular/commit/6a01d62b9df33732ea3dbef8de1385c8c0cb8a88) | fix | fix broken migration when no control flow is present ([#52399](https://github.com/angular/angular/pull/52399)) |
| [9c2be715a3](https://github.com/angular/angular/commit/9c2be715a3f6ea6b1d0184f5d79f5a3dfef4b576) | fix | Fixes a bug in the ngFor pre-v5 alias translation ([#52531](https://github.com/angular/angular/pull/52531)) |
| [54fed68bbf](https://github.com/angular/angular/commit/54fed68bbfed34a631df64ac6a32e99d2fade50a) | fix | Fixes the root level template offset in control flow migration ([#52355](https://github.com/angular/angular/pull/52355)) |
| [57404d4723](https://github.com/angular/angular/commit/57404d4723d3634f2b5dfdc9af1af50d8f61da70) | fix | handle comma-separated syntax in ngFor ([#52525](https://github.com/angular/angular/pull/52525)) |
| [54bc384661](https://github.com/angular/angular/commit/54bc384661ae7b884dbb822592e75df281aa02dd) | fix | handle nested classes in block entities migration ([#52309](https://github.com/angular/angular/pull/52309)) |
| [c9b1ddff4d](https://github.com/angular/angular/commit/c9b1ddff4d16cca149ca2b1faae729bf454b61e5) | fix | handle nested classes in control flow migration ([#52309](https://github.com/angular/angular/pull/52309)) |
| [6988a0070e](https://github.com/angular/angular/commit/6988a0070e9849b58738bba82d6f9eb9e3b27330) | fix | handle ngIf else condition with no whitespaces ([#52504](https://github.com/angular/angular/pull/52504)) |
| [e40e55d902](https://github.com/angular/angular/commit/e40e55d902e09c36da4cf73b5ab31b6b65584518) | fix | Remove unhelpful parsing errors from the log ([#52401](https://github.com/angular/angular/pull/52401)) |
| [c267f54bc3](https://github.com/angular/angular/commit/c267f54bc36e1c92f526071e2d78455daf8a588c) | fix | Update regex to better match ng-templates ([#52529](https://github.com/angular/angular/pull/52529)) |
### platform-browser
| Commit | Type | Description |
| -- | -- | -- |
| [c340d6e044](https://github.com/angular/angular/commit/c340d6e0440bd982dff6f9f4f4229931c62d2c08) | feat | enable removal of styles on component destroy by default ([#51571](https://github.com/angular/angular/pull/51571)) |
| [c5daa6ce77](https://github.com/angular/angular/commit/c5daa6ce776724d44c02cc97f1a349a85cb2a819) | feat | expose `EventManagerPlugin` in the public API. ([#49969](https://github.com/angular/angular/pull/49969)) |
| [5b375d106f](https://github.com/angular/angular/commit/5b375d106f2e02afadad8f5a60c37558318ea091) | fix | Fire Animations events when using async animations. ([#52087](https://github.com/angular/angular/pull/52087)) |
| [65786b2b96](https://github.com/angular/angular/commit/65786b2b96ba198034ff23bb14571a659a491b50) | fix | prevent duplicate stylesheets from being created ([#52019](https://github.com/angular/angular/pull/52019)) |
| [75d610d420](https://github.com/angular/angular/commit/75d610d420ce3a1ec6429d79c72ec6ef6c2c9a10) | fix | set animation properties when using async animations. ([#52087](https://github.com/angular/angular/pull/52087)) |
| [3c0577f991](https://github.com/angular/angular/commit/3c0577f99140b75688cb8ae969738325cc871548) | perf | disable styles of removed components instead of removing ([#51808](https://github.com/angular/angular/pull/51808)) |
| [c9cde3ab10](https://github.com/angular/angular/commit/c9cde3ab103699bc3f941d8176ee0b0373fcf7e0) | perf | only append style element on creation ([#52237](https://github.com/angular/angular/pull/52237)) |
| [dbc14eb41d](https://github.com/angular/angular/commit/dbc14eb41d540ab3f7509e41cdf64ac6fe33e13a) | refactor | remove `withNoDomReuse` function ([#52057](https://github.com/angular/angular/pull/52057)) |
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [0c66e2424c](https://github.com/angular/angular/commit/0c66e2424c84f92765c727a98f8d2199f4b1a809) | fix | resolve relative requests URL ([#52326](https://github.com/angular/angular/pull/52326)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [1da28f4825](https://github.com/angular/angular/commit/1da28f482517ea53a18e4eb526c7c9708e6fcb55) | feat | Add callback to execute when a view transition is created ([#52002](https://github.com/angular/angular/pull/52002)) |
| [73e4bf2ed2](https://github.com/angular/angular/commit/73e4bf2ed2471faf44a49b591e19a390d5867449) | feat | Add feature to support the View Transitions API ([#51314](https://github.com/angular/angular/pull/51314)) |
| [86e91463af](https://github.com/angular/angular/commit/86e91463afc1f3d3d71a669fb2919f2b8bc5a1ca) | feat | Add option to skip the first view transition ([#51825](https://github.com/angular/angular/pull/51825)) |
| [ce1b915868](https://github.com/angular/angular/commit/ce1b915868e654cdb679e9381db9d3bd3d68d5c4) | fix | Allow redirects after an absolute redirect ([#51731](https://github.com/angular/angular/pull/51731)) |
| [37df395be0](https://github.com/angular/angular/commit/37df395be070a11b8cd84c0ff3af9290d15c4e9d) | fix | children of routes with loadComponent should not inherit parent data by default ([#52114](https://github.com/angular/angular/pull/52114)) |
| [4dce8766f8](https://github.com/angular/angular/commit/4dce8766f8a3a33ffab0b3df5981ad209db42c77) | fix | Ensure newly resolved data is inherited by child routes ([#52167](https://github.com/angular/angular/pull/52167)) |
| [f464e39364](https://github.com/angular/angular/commit/f464e39364da6436fc4b5a703f66fe7dee70818c) | fix | Ensure title observable gets latest values ([#51561](https://github.com/angular/angular/pull/51561)) |
| [b2aff43621](https://github.com/angular/angular/commit/b2aff4362129feb746856fc3d0f8e73b1927a037) | fix | Remove `urlHandlingStrategy` from public Router properties ([#51631](https://github.com/angular/angular/pull/51631)) |
| [c62e680098](https://github.com/angular/angular/commit/c62e680098a8c26fb2234336613185f7ab273483) | fix | Remove deprecated Router properties ([#51502](https://github.com/angular/angular/pull/51502)) |
| [3c6258c85b](https://github.com/angular/angular/commit/3c6258c85b37535c1178e84509b7c9ed3a1359e4) | fix | Remove deprecated setupTestingRouter function ([#51826](https://github.com/angular/angular/pull/51826)) |
| [0b3e6a41d0](https://github.com/angular/angular/commit/0b3e6a41d025997d2947125d875ac26ecd1b86d9) | fix | Remove malformedUriErrorHandler from `ExtraOptions` ([#51745](https://github.com/angular/angular/pull/51745)) |
| [c03baed854](https://github.com/angular/angular/commit/c03baed8547c2c1da576307c708d2682dfdf3742) | fix | use DOCUMENT token instead of document directly in view transitions ([#51814](https://github.com/angular/angular/pull/51814)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.12"></a>
# 16.2.12 (2023-11-02)
### animations
| Commit | Type | Description |
| -- | -- | -- |
| [03f4050636](https://github.com/angular/angular/commit/03f4050636a385cf2e920b06e7ec94d6b5f32383) | fix | remove `finish` listener once player is destroyed ([#51136](https://github.com/angular/angular/pull/51136)) |
### common
| Commit | Type | Description |
| -- | -- | -- |
| [e092184a5c](https://github.com/angular/angular/commit/e092184a5c3d98f4be329e4037c9039c1b420d75) | fix | apply fixed_srcset_width values only to fixed srcsets ([#52486](https://github.com/angular/angular/pull/52486)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [b3b4ae4c3a](https://github.com/angular/angular/commit/b3b4ae4c3ae5f307e68e3a57f84c9e2dfc9938fb) | fix | properly emit literal types in input coercion function arguments ([#52437](https://github.com/angular/angular/pull/52437)) |
| [873c4f2454](https://github.com/angular/angular/commit/873c4f2454716520881f9d684364bdd6ab6ef722) | fix | use originally used module specifier for transform functions ([#52437](https://github.com/angular/angular/pull/52437)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.11"></a>
# 16.2.11 (2023-10-25)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [54ea3b65c3](https://github.com/angular/angular/commit/54ea3b65c35254b220054541f2fbc52384486156) | fix | emit provider configured event when a service is configured with `providedIn` ([#52365](https://github.com/angular/angular/pull/52365)) |
| [78533324dc](https://github.com/angular/angular/commit/78533324dcda2e884fbe489aaa6b37fa9a6fadbc) | fix | get root and platform injector providers in special cases ([#52365](https://github.com/angular/angular/pull/52365)) |
| [019a0f4c22](https://github.com/angular/angular/commit/019a0f4c225d6bb6f741b37bf272b62899fe1f69) | fix | load global utils before creating platform injector in the standalone case ([#52365](https://github.com/angular/angular/pull/52365)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [b79b4aca91](https://github.com/angular/angular/commit/b79b4aca914aefda1605fc8d069ac8d84283f1b3) | fix | `RouterTestingHarness` should throw if a component is expected but navigation fails ([#52357](https://github.com/angular/angular/pull/52357)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.10"></a>
# 16.2.10 (2023-10-18)
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.9"></a>
# 16.2.9 (2023-10-11)
### forms
| Commit | Type | Description |
| -- | -- | -- |
| [51a5baace3](https://github.com/angular/angular/commit/51a5baace3b1eee130fa911327773066139cc68e) | fix | reset() call with null values on nested group ([#48830](https://github.com/angular/angular/pull/48830)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.8"></a>
# 16.2.8 (2023-10-04)
### language-service
| Commit | Type | Description |
| -- | -- | -- |
| [b732961fc3](https://github.com/angular/angular/commit/b732961fc3c6eec3cf5508330cc09d6a0a2d8f9a) | fix | Retain correct language service when `ts.Project` reloads ([#51912](https://github.com/angular/angular/pull/51912)) |
### service-worker
| Commit | Type | Description |
| -- | -- | -- |
| [966ce9790a](https://github.com/angular/angular/commit/966ce9790aa7c9414bcd35b49621f169d67b5669) | fix | throw a critical error when handleFetch fails ([#51960](https://github.com/angular/angular/pull/51960)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="15.2.10"></a>
# 15.2.10 (2023-10-04)
### service-worker
| Commit | Type | Description |
| -- | -- | -- |
| [9fe08968b8](https://github.com/angular/angular/commit/9fe08968b84b92da47ce91f5d2860b3aa23d2d2b) | fix | throw a critical error when handleFetch fail ([#51989](https://github.com/angular/angular/pull/51989)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.7"></a>
# 16.2.7 (2023-09-27)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [39a3e34e03](https://github.com/angular/angular/commit/39a3e34e035b324bfa1f1a11cf452272c91011c6) | fix | allow toSignal calls in reactive context ([#51831](https://github.com/angular/angular/pull/51831)) ([#51892](https://github.com/angular/angular/pull/51892)) |
### service-worker
| Commit | Type | Description |
| -- | -- | -- |
| [c3d901eacf](https://github.com/angular/angular/commit/c3d901eacfe8d035441e5c990f6e6b2630d592f5) | fix | throw a critical error when `handleFetch` fails ([#51885](https://github.com/angular/angular/pull/51885)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.6"></a>
# 16.2.6 (2023-09-20)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [82712f80df](https://github.com/angular/angular/commit/82712f80dfc6aed2baf8d8f80c3552a6707c88ff) | fix | ensure a consumer drops all its stale producers ([#51722](https://github.com/angular/angular/pull/51722)) ([#51772](https://github.com/angular/angular/pull/51772)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.5"></a>
# 16.2.5 (2023-09-13)
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.4"></a>
# 16.2.4 (2023-09-06)
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.3"></a>
# 16.2.3 (2023-08-30)
### animations
| Commit | Type | Description |
| -- | -- | -- |
| [04c6574280](https://github.com/angular/angular/commit/04c65742802537c8bd725f9a7a931955a67684d9) | fix | remove unnecessary escaping in regex expressions ([#51554](https://github.com/angular/angular/pull/51554)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [dbd761f528](https://github.com/angular/angular/commit/dbd761f528a08cba0fbdd476b115e1445683cf36) | fix | correct incomplete escaping ([#51557](https://github.com/angular/angular/pull/51557)) |
| [5c36fc784f](https://github.com/angular/angular/commit/5c36fc784f292608f7485c5513aeb98e5745d17c) | fix | remove unnecessary escaping in regex expressions ([#51554](https://github.com/angular/angular/pull/51554)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [dcd1add06f](https://github.com/angular/angular/commit/dcd1add06f9facb87de89c144967cc95a2dac27c) | fix | correct incomplete escaping ([#51557](https://github.com/angular/angular/pull/51557)) |
| [20d62603c2](https://github.com/angular/angular/commit/20d62603c2f86c810fda0b3b503327dce232a6d3) | fix | handle hydration of view containers that use component hosts as anchors ([#51456](https://github.com/angular/angular/pull/51456)) |
| [e6b301caa2](https://github.com/angular/angular/commit/e6b301caa25c1532a4db2e8521bdea3f911316b1) | fix | remove unnecessary escaping in regex expressions ([#51554](https://github.com/angular/angular/pull/51554)) |
| [0c7c852ee7](https://github.com/angular/angular/commit/0c7c852ee7ba3c1943cafce4c58760eef1b0aea4) | fix | run afterRender callbacks outside of the Angular zone ([#51551](https://github.com/angular/angular/pull/51551)) |
### language-service
| Commit | Type | Description |
| -- | -- | -- |
| [8081fdd22d](https://github.com/angular/angular/commit/8081fdd22d6889f92e11cbe4c53d80bddd496a9a) | fix | correct incomplete escaping ([#51557](https://github.com/angular/angular/pull/51557)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.2"></a>
# 16.2.2 (2023-08-23)
### common
| Commit | Type | Description |
| -- | -- | -- |
| [a43c0772ea](https://github.com/angular/angular/commit/a43c0772ea74410b0492a178c656268a465d3b09) | fix | Allow safeUrl for ngSrc in NgOptimizedImage ([#51351](https://github.com/angular/angular/pull/51351)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [39ace8664b](https://github.com/angular/angular/commit/39ace8664b843225a75dd706236ae13e171126d3) | fix | enforce a minimum version to be used when a library uses input transform ([#51413](https://github.com/angular/angular/pull/51413)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [36f434e49d](https://github.com/angular/angular/commit/36f434e49d24f0393950299486141a121d42e044) | fix | guard the jasmine hooks ([#51394](https://github.com/angular/angular/pull/51394)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [b0396e7164](https://github.com/angular/angular/commit/b0396e7164c08e01d24d2d8411edf1ccf4b52826) | fix | Ensure `canceledNavigationResolution: 'computed'` works on first page ([#51441](https://github.com/angular/angular/pull/51441)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.1"></a>
# 16.2.1 (2023-08-16)
### router
| Commit | Type | Description |
| -- | -- | -- |
| [232a8c1b8d](https://github.com/angular/angular/commit/232a8c1b8dadf3f886b4bd0142613d116c865759) | fix | Apply named outlets to children empty paths not appearing in the URL ([#51292](https://github.com/angular/angular/pull/51292)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.0"></a>
# 16.2.0 (2023-08-09)
### benchpress
| Commit | Type | Description |
| -- | -- | -- |
| [dd850b2ab7](https://github.com/angular/angular/commit/dd850b2ab781f24065550f8a948ced498e0f1e99) | fix | correctly report GC memory amounts ([#50760](https://github.com/angular/angular/pull/50760)) |
### common
| Commit | Type | Description |
| -- | -- | -- |
| [29d358170b](https://github.com/angular/angular/commit/29d358170b046f4a6773dfdfbbd1050f54deb301) | feat | add component input binding support for NgComponentOutlet ([#51148](https://github.com/angular/angular/pull/51148)) |
| [1837efb9da](https://github.com/angular/angular/commit/1837efb9daf5c8e86a99a06ecc77bb42bc60dbb0) | feat | Allow ngSrc to be changed post-init ([#50683](https://github.com/angular/angular/pull/50683)) |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [c27a1e61d6](https://github.com/angular/angular/commit/c27a1e61d64a67aa169086f7db11bcfd5bb7d2fc) | feat | scope selectors in @scope queries ([#50747](https://github.com/angular/angular/pull/50747)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [12bad6576d](https://github.com/angular/angular/commit/12bad6576d2ffe4667118b214d9c7598ed3d8edb) | fix | libraries compiled with v16.1+ breaking with Angular framework v16.0.x ([#50714](https://github.com/angular/angular/pull/50714)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [e53d4ecf4c](https://github.com/angular/angular/commit/e53d4ecf4cfd9e64d6ba8c8b19adbb7df9cfc047) | feat | add afterRender and afterNextRender ([#50607](https://github.com/angular/angular/pull/50607)) |
| [98d262fd27](https://github.com/angular/angular/commit/98d262fd27795014ee3988b08d3c48a0dfb63c40) | feat | create injector debugging APIs ([#48639](https://github.com/angular/angular/pull/48639)) |
| [cdaa2a8a9e](https://github.com/angular/angular/commit/cdaa2a8a9eab490b55bbb841ede4f54a2656df30) | feat | support Provider type in Injector.create ([#49587](https://github.com/angular/angular/pull/49587)) |
| [9f490da7e2](https://github.com/angular/angular/commit/9f490da7e27e495cb45d2064af9091731422a6b1) | fix | handle hydration of view containers for root components ([#51247](https://github.com/angular/angular/pull/51247)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [0b14e4ef74](https://github.com/angular/angular/commit/0b14e4ef742b1c0f73d873e2c337683b60f46845) | feat | exposes the `fixture` of the `RouterTestingHarness` ([#50280](https://github.com/angular/angular/pull/50280)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.1.9"></a>
# 16.1.9 (2023-08-09)
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.1.8"></a>
# 16.1.8 (2023-08-02)
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [cc722ea1f5](https://github.com/angular/angular/commit/cc722ea1f5b16f5a4fddc1ecd91b21b3005242ae) | fix | return full spans for Comment nodes ([#50855](https://github.com/angular/angular/pull/50855)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.1.7"></a>
# 16.1.7 (2023-07-26)
### http
| Commit | Type | Description |
| -- | -- | -- |
| [916916d835](https://github.com/angular/angular/commit/916916d8357a3b045cbe6ec1b850c980be1bdb12) | fix | check whether `Zone` is defined ([#51119](https://github.com/angular/angular/pull/51119)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.1.6"></a>
# 16.1.6 (2023-07-19)
### http
| Commit | Type | Description |
| -- | -- | -- |
| [dea8dc0378](https://github.com/angular/angular/commit/dea8dc0378c5b777b1879f22189fe32cbe61b36b) | fix | Run fetch request out the angular zone ([#50981](https://github.com/angular/angular/pull/50981)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.1.5"></a>
# 16.1.5 (2023-07-13)
### animations
@@ -952,6 +80,10 @@ Live long and prosper 🖖🏻
<a name="16.1.0"></a>
# 16.1.0 (2023-06-13)
### common
| Commit | Type | Description |
| -- | -- | -- |
| [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 |
| -- | -- | -- |
@@ -970,33 +102,6 @@ Live long and prosper 🖖🏻
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.0.6"></a>
# 16.0.6 (2023-06-13)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [05ac0868c9](https://github.com/angular/angular/commit/05ac0868c9149fafcb0a0b815b31a65119090838) | fix | avoid duplicated content during hydration while processing a component with i18n ([#50644](https://github.com/angular/angular/pull/50644)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.0.5"></a>
# 16.0.5 (2023-06-08)
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [703b8fcac1](https://github.com/angular/angular/commit/703b8fcac1c9051bf2f342e5502b3cf28dbcab2c) | fix | do not remove comments in component styles ([#50346](https://github.com/angular/angular/pull/50346)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [2b6da93e19](https://github.com/angular/angular/commit/2b6da93e191a4250dfc81a7bd54c86e45909ea2d) | fix | incorrectly throwing error for self-referencing component ([#50559](https://github.com/angular/angular/pull/50559)) |
| [c992109d6c](https://github.com/angular/angular/commit/c992109d6c385a2b471f08eaa56701dfd513f219) | fix | wait for HTTP in `ngOnInit` correctly before server render ([#50573](https://github.com/angular/angular/pull/50573)) |
### platform-server
| Commit | Type | Description |
| -- | -- | -- |
| [c0d4086c6e](https://github.com/angular/angular/commit/c0d4086c6eb7685571366b65cd68a51de186f1a3) | fix | surface errors during rendering ([#50587](https://github.com/angular/angular/pull/50587)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.0.4"></a>
# 16.0.4 (2023-06-01)
### animations
+1 -1
View File
@@ -1660,7 +1660,7 @@ Alex Rickabaugh, Daniel Díaz, David Shevitz, Dylan Hunn, Front-end developer, G
* Minified UMD bundles are no longer included in the distributed NPM packages.
* **animations:** DOM elements are now correctly removed when the root view is removed.
If you are using SSR and use the app's HTML for rendering, you will need
to ensure that you save the HTML to a variable before destroying the
to ensure that you save the HTML to a variable before destorying the
app.
It is also possible that tests could be accidentally relying on the old behavior by
trying to find an element that was not removed in a previous test. If
+1 -1
View File
@@ -109,7 +109,7 @@ Before you submit your Pull Request (PR) consider the following guidelines:
```shell
git commit --all
```
Note: the optional commit `--all` command line option will automatically "add" and "rm" edited files.
Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
10. Push your branch to GitHub:
+17 -36
View File
@@ -1,7 +1,7 @@
<h1 align="center">Angular - The modern web developer's platform</h1>
<p align="center">
<img src="aio/src/assets/images/logos/angular/angular_renaissance.png" alt="angular-logo" width="120px" height="120px"/>
<img src="aio/src/assets/images/logos/angular/angular.png" alt="angular-logo" width="120px" height="120px"/>
<br>
<em>Angular is a development platform for building mobile and desktop web applications
<br> using TypeScript/JavaScript and other languages.</em>
@@ -9,7 +9,7 @@
</p>
<p align="center">
<a href="https://angular.dev/"><strong>angular.dev</strong></a>
<a href="https://www.angular.io"><strong>www.angular.io</strong></a>
<br>
</p>
@@ -61,25 +61,6 @@ Get started with Angular, learn the fundamentals and explore advanced topics on
- [Lazy Loading][lazyloading]
- [Animations][animations]
### Local Development
To contribute to Angular docs, you can setup a local environment with the following commands:
```bash
# Clone Angular repo
git clone https://github.com/angular/angular.git
# Navigate to project directory
cd angular
# Install dependencies
yarn
# Build and run local dev server
# Note: Initial build will take some time
yarn docs
```
## Development Setup
### Prerequisites
@@ -148,7 +129,7 @@ Help us keep Angular open and inclusive. Please read and follow our [Code of Con
Join the conversation and help the community.
- [X (formerly Twitter)][X (formerly Twitter)]
- [Twitter][twitter]
- [Discord][discord]
- [Gitter][gitter]
- [YouTube][youtube]
@@ -160,27 +141,27 @@ Join the conversation and help the community.
**Love Angular? Give our repo a star :star: :arrow_up:.**
[contributing]: CONTRIBUTING.md
[quickstart]: https://angular.dev/tutorials/learn-angular
[quickstart]: https://angular.io/start
[changelog]: CHANGELOG.md
[ng]: https://angular.dev
[documentation]: https://angular.dev/overview
[ng]: https://angular.io
[documentation]: https://angular.io/docs
[angularmaterial]: https://material.angular.io/
[cli]: https://angular.dev/tools/cli
[architecture]: https://angular.dev/essentials
[componentstemplates]: https://angular.dev/tutorials/learn-angular/components-in-angular
[forms]: https://angular.dev/tutorials/learn-angular/forms
[api]: https://angular.dev/api
[angularelements]: https://angular.dev/guide/elements
[ssr]: https://angular.dev/guide/ssr
[schematics]: https://angular.dev/tools/cli/schematics
[lazyloading]: https://angular.dev/guide/ngmodules/lazy-loading
[cli]: https://cli.angular.io/
[architecture]: https://angular.io/guide/architecture
[componentstemplates]: https://angular.io/guide/displaying-data
[forms]: https://angular.io/guide/forms-overview
[api]: https://angular.io/api
[angularelements]: https://angular.io/guide/elements
[ssr]: https://angular.io/guide/universal
[schematics]: https://angular.io/guide/schematics
[lazyloading]: https://angular.io/guide/lazy-loading-ngmodules
[node.js]: https://nodejs.org/
[npm]: https://www.npmjs.com/get-npm
[codeofconduct]: CODE_OF_CONDUCT.md
[X (formerly Twitter)]: https://www.twitter.com/angular
[twitter]: https://www.twitter.com/angular
[discord]: https://discord.gg/angular
[gitter]: https://gitter.im/angular/angular
[stackoverflow]: https://stackoverflow.com/questions/tagged/angular
[youtube]: https://youtube.com/angular
[meetup]: https://www.meetup.com/find/?keywords=angular
[animations]: https://angular.dev/guide/animations
[animations]: https://angular.io/guide/animations
+10 -7
View File
@@ -64,7 +64,12 @@ load("@rules_nodejs//nodejs:repositories.bzl", "nodejs_register_toolchains")
nodejs_register_toolchains(
name = "nodejs",
node_version = "18.13.0",
node_version = "16.14.0",
)
nodejs_register_toolchains(
name = "node18",
node_version = "18.10.0",
)
# Download npm dependencies.
@@ -78,9 +83,8 @@ yarn_install(
data = [
YARN_LABEL,
"//:.yarnrc",
"//:tools/npm-patches/@bazel+jasmine+5.8.1.patch",
"//tools:postinstall-patches.js",
"//tools/esm-interop:patches/npm/@angular+build-tooling+0.0.0-e0ec7b60641d7f6369be45d8d02663fd50f320be.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",
@@ -106,7 +110,6 @@ yarn_install(
data = [
YARN_LABEL,
"//:.yarnrc",
"//:tools/npm-patches/@bazel+jasmine+5.8.1.patch",
"//aio:tools/cli-patches/bazel-architect-output.patch",
"//aio:tools/cli-patches/patch.js",
],
@@ -196,10 +199,10 @@ cldr_xml_data_repository(
# sass rules
http_archive(
name = "io_bazel_rules_sass",
sha256 = "7a90567717c3417a23ff4b21963a698a6e9aa669ac9e682121ea33f218a2816a",
strip_prefix = "rules_sass-425ecafa8268bc013d684216363fe75bc802323e",
sha256 = "4bb36a654166e1b629717e55a9c0cc30590f6615c122c054f38409c20ee5ec6f",
strip_prefix = "rules_sass-f89fc59345a5074cf184ec215e9858152b7258e7",
urls = [
"https://github.com/bazelbuild/rules_sass/archive/425ecafa8268bc013d684216363fe75bc802323e.zip",
"https://github.com/bazelbuild/rules_sass/archive/f89fc59345a5074cf184ec215e9858152b7258e7.zip",
],
)
-140
View File
@@ -1,140 +0,0 @@
load("//:packages.bzl", "link_packages")
load("@build_bazel_rules_nodejs//:index.bzl", "copy_to_bin")
load("@npm//@angular-devkit/architect-cli:index.bzl", "architect", "architect_test")
package(default_visibility = ["//visibility:public"])
# All source and configuration files required to build the docs app
APPLICATION_FILES = [
"angular.json",
"tsconfig.app.json",
"tsconfig.json",
"tsconfig.worker.json",
] + glob(
["src/**/*"],
exclude = [
"src/**/*.spec.ts",
# Temporarily exclude generated sources produced by the non-bazel
# build until the whole project is built by bazel and this directory
# isn't needed.
"src/generated/**/*",
],
)
TEST_FILES = APPLICATION_FILES + [
"karma.conf.js",
"tsconfig.spec.json",
] + glob(
["**/*.spec.ts"],
)
APPLICATION_DEPS = link_packages([
"@npm//@angular-devkit/build-angular",
"@npm//@angular/animations",
"@npm//@angular/cdk",
"@npm//@angular/common",
"@npm//@angular/compiler",
"@npm//@angular/compiler-cli",
"@npm//@angular/core",
"@npm//@angular/docs",
"@npm//@angular/forms",
"@npm//@angular/material",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-server",
"@npm//@angular/router",
"@npm//gsap",
"@npm//marked",
"@npm//ngx-progressbar",
"@npm//ogl",
"@npm//rxjs",
"@npm//typescript",
"//adev/src/assets/images",
"//adev/src/assets/textures",
"//adev/src/assets/previews",
"//adev/src/assets:tutorials",
"//adev/src/assets/icons",
"//adev/src/assets:api",
"//adev/src/assets:content",
"@npm//@typescript/vfs",
"@npm//@codemirror/state",
"@npm//@codemirror/view",
"@npm//@codemirror/language",
"@npm//@codemirror/commands",
"@npm//@codemirror/search",
"@npm//@codemirror/autocomplete",
"@npm//@codemirror/lint",
"@npm//@codemirror/lang-html",
"@npm//@codemirror/lang-angular",
"@npm//@codemirror/lang-css",
"@npm//@codemirror/lang-sass",
"@npm//@codemirror/lang-javascript",
"@npm//@lezer/highlight",
"@npm//@lezer/javascript",
"@npm//@lezer/common",
"@npm//xterm",
"@npm//xterm-addon-fit",
"@npm//angular-split",
])
TEST_DEPS = APPLICATION_DEPS + link_packages([
"@npm//@angular/platform-browser-dynamic",
"@npm//@angular/build-tooling/bazel/browsers/chromium",
"@npm//@types/jasmine",
"@npm//@types/node",
"@npm//assert",
"@npm//jasmine",
"@npm//jasmine-core",
"@npm//karma-chrome-launcher",
"@npm//karma-coverage",
"@npm//karma-jasmine",
"@npm//karma-jasmine-html-reporter",
"//aio/tools:windows-chromium-path",
])
copy_to_bin(
name = "application_files_bin",
srcs = APPLICATION_FILES,
)
architect(
name = "build",
args = [
"angular-dev:build",
"--output-path=build",
],
chdir = "$(RULEDIR)",
data = APPLICATION_DEPS + [
":application_files_bin",
],
output_dir = True,
)
architect(
name = "serve",
args = [
"angular-dev:serve",
"--poll=1000",
"--live-reload",
"--watch",
],
chdir = package_name(),
data = APPLICATION_DEPS + [
":application_files_bin",
],
)
architect_test(
name = "test",
args = [
"angular-dev:test",
"--no-watch",
],
chdir = package_name(),
data = TEST_DEPS + TEST_FILES,
env = {
"CHROME_BIN": "../$(CHROMIUM)",
},
toolchains = [
"@npm//@angular/build-tooling/bazel/browsers/chromium:toolchain_alias",
],
)
-105
View File
@@ -1,105 +0,0 @@
{
"$schema": "../node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": ".",
"projects": {
"angular-dev": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss",
"standalone": true,
"changeDetection": "OnPush"
}
},
"root": ".",
"sourceRoot": "src",
"prefix": "adev",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"externalDependencies": [
"path"
],
"outputPath": "dist/angular-dev",
"index": "src/index.html",
"browser": "src/main.ts",
"server": "src/main.server.ts",
"prerender": true,
"polyfills": ["src/polyfills.ts", "zone.js"],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/robots.txt",
"src/assets"
],
"styles": ["@angular/docs/styles/global-styles.scss"],
"scripts": [],
"webWorkerTsConfig": "tsconfig.worker.json",
"optimization": {
"fonts": {
// TODO(josephperrott): enabled inline scripts
"inline": false
}
}
},
"configurations": {
"production": {
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "angular-dev:build:production"
},
"development": {
"buildTarget": "angular-dev:build:development"
}
},
"defaultConfiguration": "development",
"options": {
"buildTarget": "web-ui:build",
"headers": {
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "angular-dev:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": ["zone.js", "zone.js/testing"],
"tsConfig": "tsconfig.spec.json",
"include": ["src/app"],
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["@angular/docs/styles/global-styles.scss"],
"scripts": [],
"webWorkerTsConfig": "tsconfig.worker.json"
}
}
}
}
},
"cli": {
"analytics": "dca119a9-da31-47f7-a6cb-b60541037021"
}
}
-73
View File
@@ -1,73 +0,0 @@
{
"hosting": {
"target": "angular-docs",
"public": "./build/browser",
"ignore": ["**/.*"],
"headers": [
{
"source": "assets/tutorials/common/*.jpg",
"headers": [
{
"key": "Cross-Origin-Resource-Policy",
"value": "cross-origin"
},
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
},
{
"source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
"headers": [
{
"key": "Cache-Control",
"value": "public,max-age=31536000,immutable"
},
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
},
{
"source": "/[0-9a-f][0-9a-f][0-9a-f].[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].js",
"headers": [
{
"key": "Cross-Origin-Embedder-Policy",
"value": "require-corp"
}
]
},
{
"source": "/@(ngsw-worker.js|ngsw.json)",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
},
{
"source": "/**",
"headers": [
{
"key": "Cross-Origin-Opener-Policy",
"value": "same-origin"
},
{
"key": "Cross-Origin-Embedder-Policy",
"value": "require-corp"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
-74
View File
@@ -1,74 +0,0 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
const {getAdjustedChromeBinPathForWindows} = require('../aio/tools/windows-chromium-path');
process.env.CHROME_BIN = getAdjustedChromeBinPathForWindows();
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma'),
{'reporter:jasmine-seed': ['type', JasmineSeedReporter]},
],
proxies: {
'/dummy/image': 'src/assets/images/logos/angular/angular.png',
},
client: {
clearContext: false, // leave Jasmine Spec Runner output visible in browser
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
random: true,
seed: '',
},
},
jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, './coverage/site'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
],
},
reporters: ['progress', 'kjhtml', 'jasmine-seed'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
// See /integration/README.md#browser-tests for more info on these args
flags: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'],
},
},
browsers: ['ChromeHeadlessNoSandbox'],
browserNoActivityTimeout: 60000,
singleRun: false,
restartOnFileChange: true,
});
};
// Helpers
function JasmineSeedReporter(baseReporterDecorator) {
baseReporterDecorator(this);
this.onBrowserComplete = (browser, result) => {
const seed = result.order && result.order.random && result.order.seed;
if (seed) this.write(`${browser}: Randomized with seed ${seed}.\n`);
};
this.onRunComplete = () => undefined;
}
-135
View File
@@ -1,135 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {input, confirm} from '@inquirer/prompts';
import {existsSync} from 'fs';
import {copyFile, mkdir, writeFile} from 'fs/promises';
import {dirname, join} from 'path';
import {fileURLToPath} from 'url';
import {copyFolder} from './utils/fs.mjs';
const EXAMPLES_BASE = join(
dirname(fileURLToPath(import.meta.url)),
'../../src/content/examples',
);
const STACKBLITZ_TEMPLATE = join(
dirname(fileURLToPath(import.meta.url)),
'../../src/content/stackblitz-template',
);
const MAIN_TS_FILENAME = 'main.ts';
const STACKBLITZ_CONFIG_FILENAME = 'stackblitz.json';
createExample();
async function createExample(): Promise<void> {
console.info('Create example');
const name = await input({message: 'What is the example name?'});
const description = await input({message: 'Could you provide the description of the example?'});
const tags: string[] = [];
let addMoreTags = true;
while (addMoreTags) {
const tag = await input({message: 'Could you provide the tag of the example?'});
if (!!tag) {
tags.push(tag);
}
console.info();
addMoreTags = await confirm({message: 'Would you like to add another tag?', default: true});
}
const shouldCopySrcAppFolderFromTemplate = await confirm({
message: 'Would you like to copy /src/app/**.* from template?',
default: true,
});
const shouldCopyMainTsFromTemplate = await confirm({
message: 'Would you like to copy /src/main.ts from template?',
default: false,
});
const examplePath = join(EXAMPLES_BASE, name);
await createEmptyExample(examplePath, name, description, tags);
await copyFilesFromTemplate(
examplePath,
shouldCopySrcAppFolderFromTemplate,
shouldCopyMainTsFromTemplate,
);
}
/**
* Create the directory and marker files for the new example.
*/
async function createEmptyExample(
examplePath: string,
exampleName: string,
description: string,
tags: string[],
): Promise<void> {
validateExampleName(exampleName);
await ensureExamplePath(examplePath);
await writeStackBlitzFile(examplePath, description, tags);
}
function validateExampleName(exampleName: string): void {
if (/\s/.test(exampleName)) {
throw new Error(`Unable to create example. The example name contains spaces: '${exampleName}'`);
}
}
/**
* Ensure that the new example directory exists.
*/
async function ensureExamplePath(examplePath: string): Promise<void> {
if (existsSync(examplePath)) {
throw new Error(
`Unable to create example. The path to the new example already exists: ${examplePath}`,
);
}
await mkdir(examplePath);
}
/**
* Write the `stackblitz.json` file into the new example.
*/
async function writeStackBlitzFile(
examplePath: string,
description: string,
tags: string[],
): Promise<void> {
const config = {
description,
ignore: ['**/*.d.ts', '**/*.js', '**/*.[1,2].*'],
tags,
};
await writeFile(
join(examplePath, STACKBLITZ_CONFIG_FILENAME),
JSON.stringify(config, null, 2) + '\n',
);
}
async function copyFilesFromTemplate(
examplePath: string,
shouldCopySrcAppFolderFromTemplate: boolean,
shouldCopyMainTsFromTemplate: boolean,
): Promise<void> {
if (shouldCopySrcAppFolderFromTemplate) {
const appTemplateFolderPath = join(STACKBLITZ_TEMPLATE, 'src/app');
const exampleAppFolderPath = join(examplePath, 'src/app');
await copyFolder(appTemplateFolderPath, exampleAppFolderPath);
}
if (shouldCopyMainTsFromTemplate) {
const mainTsTemplatePath = join(STACKBLITZ_TEMPLATE, 'src', MAIN_TS_FILENAME);
const exampleMainTsPath = join(examplePath, 'src', MAIN_TS_FILENAME);
await copyFile(mainTsTemplatePath, exampleMainTsPath);
}
}
@@ -1,158 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import ts from 'typescript';
import * as fs from 'fs';
import {dirname, join, relative} from 'path';
import {fileURLToPath} from 'url';
import {readFile, writeFile} from 'fs/promises';
const TYPESCRIPT_EXTENSION = '.ts';
const SKIP_FILES_WITH_EXTENSIONS = ['.e2e-spec.ts', '.spec.ts', '.po.ts'];
const EXAMPLES_PATH = `../../content/examples`;
interface File {
path: string;
content: string;
}
interface AnalyzedFiles {
path: string;
componentNames: string[];
}
/** Absolute disk path to the project directory. */
const examplesDir = join(
dirname(fileURLToPath(import.meta.url)),
'../../src/content/examples',
);
const projectDir = join(dirname(fileURLToPath(import.meta.url)), '../../src');
const previewsComponentMapFileName = 'previews.ts';
main();
async function main() {
const files = await retrieveAllTypescriptFiles(
examplesDir,
(path) => !SKIP_FILES_WITH_EXTENSIONS.some((extensionToSkip) => path.endsWith(extensionToSkip)),
);
const filesWithComponent = files
.map((file) => ({
componentNames: analyzeFile(file),
path: file.path,
}))
.filter((result) => result.componentNames.length > 0);
const previewsComponentMap = generatePreviewsComponentMap(filesWithComponent);
fs.mkdirSync(join(projectDir, 'assets/previews'), {recursive: true});
await writeFile(
join(projectDir, 'assets/previews', previewsComponentMapFileName),
previewsComponentMap,
);
}
/** Recursively search the provided directory for all typescript files and asynchronously load them. */
function retrieveAllTypescriptFiles(
baseDir: string,
predicateFn: (path: string) => boolean,
): Promise<File[]> {
const typescriptFiles: Promise<File>[] = [];
const checkFilesInDirectory = (dir: string) => {
const files = fs.readdirSync(dir, {withFileTypes: true});
for (const file of files) {
const fullPathToFile = join(dir, file.name);
const relativeFilePath = relative(baseDir, fullPathToFile);
if (
file.isFile() &&
file.name.endsWith(TYPESCRIPT_EXTENSION) &&
predicateFn(relativeFilePath)
) {
typescriptFiles.push(
readFile(fullPathToFile, {encoding: 'utf-8'}).then((fileContent) => {
return {
path: relativeFilePath,
content: fileContent,
};
}),
);
} else if (file.isDirectory()) {
checkFilesInDirectory(fullPathToFile);
}
}
};
checkFilesInDirectory(baseDir);
return Promise.all(typescriptFiles);
}
/** Returns list of the `Standalone` @Component class names for given file */
function analyzeFile(file: File): string[] {
const componentClassNames: string[] = [];
const sourceFile = ts.createSourceFile(file.path, file.content, ts.ScriptTarget.Latest, false);
const visitNode = (node: ts.Node): void => {
if (ts.isClassDeclaration(node)) {
const decorators = ts.getDecorators(node);
const componentName = node.name ? node.name.text : null;
if (decorators && decorators.length) {
for (const decorator of decorators) {
const call = decorator.expression;
if (
ts.isCallExpression(call) &&
ts.isIdentifier(call.expression) &&
call.expression.text === 'Component' &&
call.arguments.length > 0 &&
ts.isObjectLiteralExpression(call.arguments[0])
) {
const hasStandaloneProperty = call.arguments[0].properties.some(
(property) =>
property.name &&
ts.isIdentifier(property.name) &&
property.name.text === 'standalone',
);
if (hasStandaloneProperty && componentName) {
componentClassNames.push(componentName);
}
}
}
}
}
ts.forEachChild(node, visitNode);
};
visitNode(sourceFile);
return componentClassNames;
}
function generatePreviewsComponentMap(data: AnalyzedFiles[]): string {
let result = '';
for (const fileData of data) {
for (const componentName of fileData.componentNames) {
const key = `${fileData.path}${
fileData.componentNames.length > 1 ? '_' + componentName : ''
}`.replace(/\\/g, '/');
result += `['${key}']: () => import('${EXAMPLES_PATH}/${fileData.path
.replace(/\\/g, '/')
.replace('.ts', '')}').then(c => c.${componentName}),\n`;
}
}
return fs
.readFileSync('scripts/examples/previews-components.template', 'utf8')
.replace(/\${previewsComponents}/g, result);
}
@@ -1,23 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
/**
******************************************************************************
* DO NOT MANUALLY EDIT THIS FILE. THIS FILE IS AUTOMATICALLY GENERATED.
******************************************************************************
*/
import {Type} from '@angular/core';
/**
* Map of the previews components, values are functions which returns the promise of the component type, which will be displayed as preview in the ExampleViewer component.
* Keys has to be equal to paths written down in the docs markdown files.
*/
export const PREVIEWS_COMPONENTS_MAP: Record<string, () => Promise<Type<unknown>>> = {
${previewsComponents}
};
@@ -1,221 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {dirname, join} from 'path';
import {readFile, writeFile} from 'fs/promises';
import {
ASSETS_EXAMPLE_PATH,
CSS_TS_COPYRIGHT,
EXAMPLES_PATH,
HTML_COPYRIGHT,
STACKBLITZ_TEMPLATE_PATH,
STACKBLITZ_CONFIG_FILENAME,
TEMPORARY_EXAMPLES_PATH,
EXCLUDE_FILES_FOR_STACKBLITZ,
} from './utils/examples-constants.mjs';
import {copyFolder, createFolder, removeFolder} from './utils/fs.mjs';
import jsdom from 'jsdom';
import {glob} from 'glob';
import {regionParser} from './../../prerender/markdown-pipeline/regions/region-parser.mjs';
interface StackblitzConfig {
ignore: string[];
file: string;
tags: string[];
description: string;
}
export async function generateStackblitzExample(
exampleFolderName: string,
primaryFilePath: string,
title: string,
) {
const exampleDir = join(EXAMPLES_PATH, exampleFolderName);
const temporaryExampleDir = join(TEMPORARY_EXAMPLES_PATH, exampleFolderName);
const config = await readFile(join(exampleDir, STACKBLITZ_CONFIG_FILENAME), 'utf-8');
const stackblitzConfig: StackblitzConfig = JSON.parse(config);
primaryFilePath = join(...primaryFilePath.split('/'));
await createFolder(temporaryExampleDir);
await combineTemplateWithExample(exampleDir, temporaryExampleDir);
await generateStackblitzHtml(
temporaryExampleDir,
stackblitzConfig,
exampleFolderName,
primaryFilePath,
title,
);
await removeFolder(temporaryExampleDir);
}
async function combineTemplateWithExample(
exampleDir: string,
temporaryExampleDir: string,
): Promise<void> {
// Copy template files to TEMP folder
await copyFolder(STACKBLITZ_TEMPLATE_PATH, temporaryExampleDir);
// Copy example files to TEMP folder
await copyFolder(exampleDir, temporaryExampleDir);
}
async function generateStackblitzHtml(
temporaryExampleDir: string,
stackBlitzConfig: StackblitzConfig,
exampleFolderName: string,
primaryFilePath: string,
title: string,
): Promise<void> {
const defaultIncludes = [
'**/*.ts',
'**/*.js',
'**/*.css',
'**/*.html',
'**/*.md',
'**/*.json',
'**/*.svg',
];
const exampleFilePaths = await glob(defaultIncludes, {
cwd: temporaryExampleDir,
nodir: true,
dot: true,
ignore: stackBlitzConfig.ignore,
});
const postData = await createPostData(
temporaryExampleDir,
stackBlitzConfig,
exampleFilePaths,
title,
);
const primaryFile = getPrimaryFile(primaryFilePath ?? stackBlitzConfig.file, exampleFilePaths);
const html = createStackblitzHtml(postData, primaryFile);
const stackblitzHtmlPath = join(
join(ASSETS_EXAMPLE_PATH, exampleFolderName),
`${primaryFile}.html`,
);
await createFolder(dirname(stackblitzHtmlPath));
await writeFile(stackblitzHtmlPath, html, 'utf-8');
}
function getPrimaryFile(primaryFilePath: string, exampleFilePaths: string[]): string {
if (primaryFilePath) {
if (!exampleFilePaths.some((filePath) => filePath === primaryFilePath)) {
throw new Error(`The specified primary file (${primaryFilePath}) does not exist!`);
}
return primaryFilePath;
} else {
const defaultPrimaryFilePaths = [
'src/app/app.component.html',
'src/app/app.component.ts',
'src/app/main.ts',
];
const primaryFile = defaultPrimaryFilePaths.find((path) =>
exampleFilePaths.some((filePath) => filePath === path),
);
if (!primaryFile) {
throw new Error(
`None of the default primary files (${defaultPrimaryFilePaths.join(', ')}) exists.`,
);
}
return primaryFile;
}
}
async function createPostData(
exampleDir: string,
config: StackblitzConfig,
exampleFilePaths: string[],
title: string,
): Promise<Record<string, string>> {
const postData: Record<string, string> = {};
for (const filePath of exampleFilePaths) {
if (EXCLUDE_FILES_FOR_STACKBLITZ.some((excludedFile) => filePath.endsWith(excludedFile))) {
continue;
}
let content = await readFile(join(exampleDir, filePath), 'utf-8');
content = appendCopyright(filePath, content);
content = extractRegions(filePath, content);
postData[`project[files][${filePath}]`] = content;
}
const tags = ['angular', 'example', ...(config.tags || [])];
tags.forEach((tag, index) => (postData[`project[tags][${index}]`] = tag));
postData['project[description]'] = `Angular Example - ${config.description}`;
postData['project[template]'] = 'node';
postData['project[title]'] = title ?? 'Angular Example';
return postData;
}
function createStackblitzHtml(postData: Record<string, string>, primaryFile: string): string {
const baseHtml = createBaseStackblitzHtml(primaryFile);
const doc = new jsdom.JSDOM(baseHtml).window.document;
const form = doc.querySelector('form');
for (const [key, value] of Object.entries(postData)) {
const element = htmlToElement(doc, `<input type="hidden" name="${key}">`);
if (element && form) {
element.setAttribute('value', value as string);
form.appendChild(element);
}
}
return doc.documentElement.outerHTML;
}
function createBaseStackblitzHtml(primaryFile: string) {
const file = `?file=${primaryFile}`;
const action = `https://stackblitz.com/run${file}`;
return `
<!DOCTYPE html><html lang="en"><body>
<form id="mainForm" method="post" action="${action}" target="_self"></form>
<script>
var embedded = 'ctl=1';
var isEmbedded = window.location.search.indexOf(embedded) > -1;
if (isEmbedded) {
var form = document.getElementById('mainForm');
var action = form.action;
var actionHasParams = action.indexOf('?') > -1;
var symbol = actionHasParams ? '&' : '?'
form.action = form.action + symbol + embedded;
}
document.getElementById("mainForm").submit();
</script>
</body></html>
`.trim();
}
function appendCopyright(filename: string, content: string): string {
if (filename.endsWith('.html')) {
return `${HTML_COPYRIGHT}${content}`;
} else if (filename.endsWith('.ts') || filename.endsWith('.css')) {
return `${CSS_TS_COPYRIGHT}${content}`;
}
return content;
}
function htmlToElement(document: Document, html: string) {
const div = document.createElement('div');
div.innerHTML = html;
return div.firstElementChild;
}
function extractRegions(path: string, contents: string): string {
const regionParserResult = regionParser(contents, path);
return regionParserResult.contents;
}
-8
View File
@@ -1,8 +0,0 @@
{
"extends": "../../tsconfig.json",
"ts-node": {
"compilerOptions": {
"module": "es2020"
}
}
}
@@ -1,55 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {dirname, join} from 'path';
import {fileURLToPath} from 'url';
const BASE = dirname(fileURLToPath(import.meta.url));
// Directory paths
export const ASSETS_EXAMPLE_PATH = join(
BASE,
'../../../src/assets/content/examples',
);
export const EXAMPLES_PATH = join(BASE, '../../../src/content/examples');
export const STACKBLITZ_TEMPLATE_PATH = join(
BASE,
'../../../src/content/stackblitz-template',
);
export const TEMPORARY_EXAMPLES_PATH = join(fileURLToPath(import.meta.url), '../../../../TEMP');
// Extensions
export const TEST_FILES_EXTENSION_SUFFIX = '.spec.ts';
export const TEST_FILES_E2E_EXTENSION_SUFFIX = '.e2e-spec.ts';
// Filename
// TODO: BUILD.bazel and example-config will be deprecated when migration to standalone examples will be done.
export const BUILD_BAZEL_FILENAME = 'BUILD.bazel';
export const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
export const STACKBLITZ_CONFIG_FILENAME = 'stackblitz.json';
// Copyright
const PAD = '\n\n';
const COPYRIGHT =
'@license\n' +
'Copyright Google LLC All Rights Reserved.\n' +
'\n' +
'Use of this source code is governed by an MIT-style license that can be\n' +
'found in the LICENSE file at https://angular.dev/license\n';
export const CSS_TS_COPYRIGHT = `/*\n${COPYRIGHT}\n*/${PAD}`;
export const HTML_COPYRIGHT = `<!-- \n${COPYRIGHT}\n-->${PAD}`;
// Exclude
export const EXCLUDE_FILES_FOR_STACKBLITZ = [
STACKBLITZ_CONFIG_FILENAME,
BUILD_BAZEL_FILENAME,
EXAMPLE_CONFIG_FILENAME,
TEST_FILES_EXTENSION_SUFFIX,
TEST_FILES_E2E_EXTENSION_SUFFIX,
];
-77
View File
@@ -1,77 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {Dirent, existsSync, readdirSync} from 'fs';
import {copyFile, mkdir, readFile, readdir, rm, stat} from 'fs/promises';
import {join, relative} from 'path';
export async function copyFolder(source: string, destination: string) {
if (!existsSync(destination)) {
await mkdir(destination, {recursive: true});
}
const files = await readdir(source);
for (const file of files) {
const sourcePath = join(source, file);
const destPath = join(destination, file);
const stats = await stat(sourcePath);
const isDirectory = await stats.isDirectory();
if (isDirectory) {
await copyFolder(sourcePath, destPath);
} else {
await copyFile(sourcePath, destPath);
}
}
}
/** Recursively search the provided directory for all files which satisfy predicate and asynchronously load them. */
export function retrieveFiles(
baseDir: string,
predicate?: (file: Dirent) => boolean,
): Promise<{path: string; content: string}[]> {
const filesWithContent: Promise<{path: string; content: string}>[] = [];
const checkFilesInDirectory = (dir: string) => {
const files = readdirSync(dir, {withFileTypes: true});
for (const file of files) {
const fullPathToFile = join(dir, file.name);
if (file.isFile() && (predicate ? predicate(file) : true)) {
filesWithContent.push(
readFile(fullPathToFile, {encoding: 'utf-8'}).then((fileContent) => {
return {
path: relative(baseDir, fullPathToFile),
content: fileContent,
};
}),
);
} else if (file.isDirectory()) {
checkFilesInDirectory(fullPathToFile);
}
}
};
checkFilesInDirectory(baseDir);
return Promise.all(filesWithContent);
}
export async function createFolder(path: string): Promise<void> {
if (!existsSync(path)) {
await mkdir(path, {recursive: true});
}
}
export async function removeFolder(path: string): Promise<void> {
if (existsSync(path)) {
await rm(path, {recursive: true});
}
}
-30
View File
@@ -1,30 +0,0 @@
@defer (when isBrowser) {
<adev-progress-bar />
}
<button (click)="focusFirstHeading()" class="adev-skip">Skip to main content</button>
<div class="adev-nav"></div>
@if (displaySecondaryNav()) {
<adev-secondary-navigation />
}
<div class="adev-app-main-content">
<!--
Avoid rendering cookies popup on the server,
since there is no benefit of doing this and
it requires additional state management.
-->
@defer (when isBrowser) {
<docs-cookie-popup />
@defer (when displaySearchDialog(); prefetch on idle) {
@if (displaySearchDialog()) {
<docs-search-dialog (onClose)="displaySearchDialog.set(false)" />
}
}
}
<router-outlet />
@if (displayFooter()) {
<footer adev-footer></footer>
}
</div>
-86
View File
@@ -1,86 +0,0 @@
@use '@angular/docs/styles/media-queries' as mq;
:host {
max-width: 2560px;
margin-inline: auto;
display: flex;
flex-direction: row;
align-items: flex-start;
min-height: 100vh;
@include mq.for-tablet-landscape-down {
flex-direction: column;
}
// If navs are open, render a blurry background over content
&:has(.adev-nav-secondary--open),
&:has(.adev-nav-primary--open) {
.adev-app-main-content {
&::after {
visibility: visible;
opacity: 1;
}
}
}
&:has(.adev-home) {
.adev-nav {
width: 0;
height: 0;
}
@include mq.for-tablet-landscape-up {
footer {
margin-left: var(--primary-nav-width);
}
}
}
}
.adev-skip {
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: 1000;
background: var(--primary-contrast);
color: var(--page-background);
border: 1px solid var(--vivid-pink);
border-radius: 0.25rem;
padding: 0.5rem;
font-size: 0.875rem;
transform: translateY(-150%);
transition: transform 0.3s ease-out;
&:focus {
transform: translateY(0);
}
}
.adev-app-main-content {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
// If navs are open, render a blurry background over content
::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
backdrop-filter: blur(2px);
background-color: color-mix(in srgb, var(--gray-1000) 5%, transparent);
z-index: 50;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
@include mq.for-tablet {
width: 100%;
}
}
footer {
margin-top: auto;
}
-37
View File
@@ -1,37 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {TestBed} from '@angular/core/testing';
import {AppComponent} from './app.component';
import {provideRouter} from '@angular/router';
import {routes} from './routes';
import {Search, WINDOW} from '@angular/docs';
describe('AppComponent', () => {
const fakeSearch = {};
const fakeWindow = {};
it('should create the app', () => {
TestBed.configureTestingModule({
providers: [
provideRouter(routes),
{
provide: WINDOW,
useValue: fakeWindow,
},
{
provide: Search,
useValue: fakeSearch,
},
],
});
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
});
-125
View File
@@ -1,125 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {DOCUMENT, isPlatformBrowser} from '@angular/common';
import {Component, inject, NgZone, OnInit, PLATFORM_ID, signal, WritableSignal} from '@angular/core';
import {NavigationEnd, NavigationSkipped, Router, RouterLink, RouterOutlet} from '@angular/router';
import {filter, map, skip} from 'rxjs/operators';
import {
CookiePopup,
getActivatedRouteSnapshotFromRouter,
IS_SEARCH_DIALOG_OPEN,
SearchDialog,
WINDOW,
} from '@angular/docs';
import {Footer} from './core/layout/footer/footer.component';
import {Navigation} from './core/layout/navigation/navigation.component';
import {SecondaryNavigation} from './core/layout/secondary-navigation/secondary-navigation.component';
import {ProgressBarComponent} from './core/layout/progress-bar/progress-bar.component';
import {ESCAPE, SEARCH_TRIGGER_KEY} from './core/constants/keys';
@Component({
standalone: true,
selector: 'adev-root',
imports: [
CookiePopup,
Navigation,
Footer,
SecondaryNavigation,
RouterOutlet,
RouterLink,
SearchDialog,
ProgressBarComponent,
],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
private readonly document = inject(DOCUMENT);
private readonly ngZone = inject(NgZone);
private readonly router = inject(Router);
private readonly window = inject(WINDOW);
currentUrl = signal('');
displayFooter = signal(false);
displaySecondaryNav = signal(false);
displaySearchDialog: WritableSignal<boolean> = inject(IS_SEARCH_DIALOG_OPEN);
isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
ngOnInit(): void {
this.setSearchDialogVisibilityOnKeyPress();
this.closeSearchDialogOnNavigationSkipped();
this.router.events
.pipe(
filter((e): e is NavigationEnd => e instanceof NavigationEnd),
map((event) => event.urlAfterRedirects),
)
.subscribe((url) => {
this.currentUrl.set(url);
this.setComponentsVisibility();
this.displaySearchDialog.set(false);
});
this.focusFirstHeadingOnRouteChange();
}
focusFirstHeading(): void {
if (!this.isBrowser) {
return;
}
const h1 = this.document.querySelector<HTMLHeadingElement>('h1');
h1?.focus();
}
private setComponentsVisibility(): void {
const activatedRoute = getActivatedRouteSnapshotFromRouter(this.router as any);
this.displaySecondaryNav.set(activatedRoute.data['displaySecondaryNav']);
this.displayFooter.set(!activatedRoute.data['hideFooter']);
}
private focusFirstHeadingOnRouteChange(): void {
this.router.events
.pipe(
filter((e): e is NavigationEnd => e instanceof NavigationEnd),
// Skip first emission, cause on the initial load we would like to `Skip to main content` popup when it's focused
skip(1),
)
.subscribe(() => {
this.focusFirstHeading();
});
}
private setSearchDialogVisibilityOnKeyPress(): void {
this.ngZone.runOutsideAngular(() => {
this.window.addEventListener('keydown', (event: KeyboardEvent) => {
if (event.key === SEARCH_TRIGGER_KEY && (event.metaKey || event.ctrlKey)) {
this.ngZone.run(() => {
event.preventDefault();
this.displaySearchDialog.update((display) => !display);
});
}
if (event.key === ESCAPE && this.displaySearchDialog()) {
this.ngZone.run(() => {
event.preventDefault();
this.displaySearchDialog.set(false);
});
}
});
});
}
private closeSearchDialogOnNavigationSkipped(): void {
this.router.events.pipe(filter((event) => event instanceof NavigationSkipped)).subscribe(() => {
this.displaySearchDialog.set(false);
});
}
}
-24
View File
@@ -1,24 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {mergeApplicationConfig, ApplicationConfig} from '@angular/core';
import {provideServerRendering} from '@angular/platform-server';
import {appConfig} from './app.config';
import {
ReferenceScrollHandler,
ReferenceScrollHandlerNoop,
} from './features/references/services/reference-scroll-handler.service';
const serverConfig: ApplicationConfig = {
providers: [
provideServerRendering(),
{provide: ReferenceScrollHandler, useClass: ReferenceScrollHandlerNoop},
],
};
export const config = mergeApplicationConfig(appConfig, serverConfig);
-97
View File
@@ -1,97 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {DOCUMENT} from '@angular/common';
import {provideHttpClient, withFetch} from '@angular/common/http';
import {
ApplicationConfig,
ENVIRONMENT_INITIALIZER,
ErrorHandler,
inject,
provideZoneChangeDetection,
} from '@angular/core';
import {
DOCS_CONTENT_LOADER,
ENVIRONMENT,
EXAMPLE_VIEWER_CONTENT_LOADER,
PREVIEWS_COMPONENTS,
WINDOW,
windowProvider,
} from '@angular/docs';
import {provideClientHydration} from '@angular/platform-browser';
import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
import {
RouteReuseStrategy,
Router,
TitleStrategy,
createUrlTreeFromSnapshot,
provideRouter,
withInMemoryScrolling,
withViewTransitions,
} from '@angular/router';
import environment from './environment';
import {PREVIEWS_COMPONENTS_MAP} from './../assets/previews/previews';
import {ADevTitleStrategy} from './core/services/a-dev-title-strategy';
import {AnalyticsService} from './core/services/analytics/analytics.service';
import {ContentLoader} from './core/services/content-loader.service';
import {CustomErrorHandler} from './core/services/errors-handling/error-handler';
import {ExampleContentLoader} from './core/services/example-content-loader.service';
import {ReuseTutorialsRouteStrategy} from './features/tutorial/tutorials-route-reuse-strategy';
import {routes} from './routes';
import {ReferenceScrollHandler} from './features/references/services/reference-scroll-handler.service';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(
routes,
withInMemoryScrolling({anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled'}),
withViewTransitions({
onViewTransitionCreated: ({transition, to}) => {
const router = inject(Router);
const toTree = createUrlTreeFromSnapshot(to, []);
// Skip the transition if the only thing changing is the fragment and queryParams
if (
router.isActive(toTree, {
paths: 'exact',
matrixParams: 'exact',
fragment: 'ignored',
queryParams: 'ignored',
})
) {
transition.skipTransition();
}
},
}),
),
provideClientHydration(),
provideHttpClient(withFetch()),
provideAnimationsAsync(),
{provide: ENVIRONMENT, useValue: environment},
{
provide: ENVIRONMENT_INITIALIZER,
multi: true,
useValue: () => inject(AnalyticsService),
},
{provide: ErrorHandler, useClass: CustomErrorHandler},
{provide: PREVIEWS_COMPONENTS, useValue: PREVIEWS_COMPONENTS_MAP},
{provide: DOCS_CONTENT_LOADER, useClass: ContentLoader},
{provide: EXAMPLE_VIEWER_CONTENT_LOADER, useClass: ExampleContentLoader},
{
provide: RouteReuseStrategy,
useClass: ReuseTutorialsRouteStrategy,
},
{
provide: WINDOW,
useFactory: (document: Document) => windowProvider(document),
deps: [DOCUMENT],
},
{provide: TitleStrategy, useClass: ADevTitleStrategy},
provideZoneChangeDetection({eventCoalescing: true}),
ReferenceScrollHandler,
],
};
@@ -1,10 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
export const PRIMARY_NAV_ID = 'primaryNav';
export const SECONDARY_NAV_ID = 'secondaryNav';
-12
View File
@@ -1,12 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
export const COMMAND = 'Command';
export const CONTROL = 'Control';
export const ESCAPE = 'Escape';
export const SEARCH_TRIGGER_KEY = 'k';
-12
View File
@@ -1,12 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
export const GITHUB = 'https://github.com/angular/angular';
export const X = 'https://x.com/angular';
export const MEDIUM = 'https://blog.angular.io';
export const YOUTUBE = 'https://www.youtube.com/channel/UCbn1OgGei-DV7aSRo_HaAiw';
-28
View File
@@ -1,28 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
// File contains the enums used across whole application.
// The enum with the prefixes of the main routes
export enum PagePrefix {
API = 'api',
CLI = 'cli',
DOCS = 'docs',
HOME = '',
PLAYGROUND = 'playground',
REFERENCE = 'reference',
TUTORIALS = 'tutorials',
}
// The enum with the default pages for each main tab
export enum DefaultPage {
DOCS = 'overview',
REFERENCE = 'api',
TUTORIALS = 'tutorials',
PLAYGROUND = 'playground',
}
@@ -1,125 +0,0 @@
<div class="adev-footer-container">
<div class="adev-footer-columns">
<div>
<h2>Social Media</h2>
<ul>
<li>
<a [href]="MEDIUM" title="Angular blog">Blog</a>
</li>
<li>
<a [href]="X" title="X (formerly Twitter)">X (formerly Twitter)</a>
</li>
<li>
<a [href]="YOUTUBE" title="YouTube">YouTube</a>
</li>
<li>
<a
href="https://discord.gg/angular"
title="Join the discussions at Angular Community Discord server."
>
Discord
</a>
</li>
<li>
<a [href]="GITHUB" title="GitHub">GitHub</a>
</li>
<li>
<a
href="https://stackoverflow.com/questions/tagged/angular"
title="Stack Overflow: where the community answers your technical Angular questions."
>
Stack Overflow
</a>
</li>
</ul>
</div>
<div>
<h2>Community</h2>
<ul>
<li>
<a
href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md"
title="Contribute to Angular"
>
Contribute
</a>
</li>
<li>
<a
href="https://github.com/angular/code-of-conduct/blob/main/CODE_OF_CONDUCT.md"
title="Treating each other with respect."
>
Code of Conduct
</a>
</li>
<li>
<a
href="https://github.com/angular/angular/issues"
title="Post issues and suggestions on github."
>
Report Issues
</a>
</li>
<li>
<a
href="https://devlibrary.withgoogle.com/products/angular?sort=updated"
title="Google's DevLibrary"
>
Google's DevLibrary
</a>
</li>
<li>
<a
href="https://developers.google.com/community/experts/directory?specialization=angular"
title="Angular Google Developer Experts"
>
Angular Google Developer Experts
</a>
</li>
</ul>
</div>
<div>
<h2>Resources</h2>
<ul>
<li>
<a routerLink="/press-kit" title="Press contacts, logos, and branding.">Press Kit</a>
</li>
<li>
<a routerLink="/roadmap" title="Roadmap">Roadmap</a>
</li>
</ul>
</div>
<div>
<h2>Languages</h2>
<ul>
<li>
<a href="https://angular.cn/" title="简体中文版">简体中文版</a>
</li>
<li>
<a href="https://angular.tw/" title="正體中文版">正體中文版</a>
</li>
<li>
<a href="https://angular.jp/" title="日本語版">日本語版</a>
</li>
<li>
<a href="https://angular.kr/" title="한국어">한국어</a>
</li>
<li>
<a
href="https://angular-gr.web.app"
title="&Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;ά"
>
&Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;ά
</a>
</li>
</ul>
</div>
</div>
<p class="docs-license">
Super-powered by Google ©2010-2023. Code licensed under an
<a routerLink="/license" title="License text">MIT-style License</a>
. Documentation licensed under
<a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>
.
</p>
</div>
@@ -1,59 +0,0 @@
.adev-footer-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
@container footer (max-width: 600px) {
grid-template-columns: repeat(2, 1fr) !important;
}
}
.adev-footer-container {
container: footer / inline-size;
position: relative;
justify-content: center;
padding: var(--layout-padding);
padding-inline-end: 1rem;
background-color: var(--page-background);
transition: background-color 0.3s ease;
// this accounts for absolutely positioned TOC on the right
@media only screen and (min-width: 1430px) {
width: calc(100% - 195px - var(--layout-padding) * 3);
}
h2 {
font-size: 0.875rem;
font-weight: 600;
margin-block-end: 1.75rem;
letter-spacing: -0.00875rem;
}
ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.95rem;
li {
font-size: 0.8125rem;
}
}
a {
color: var(--quaternary-contrast);
font-weight: 300;
transition: color 0.3s ease;
&:hover {
color: var(--primary-contrast);
}
}
p.docs-license {
transition: color 0.3s ease;
color: var(--quaternary-contrast);
font-weight: 300;
grid-column: span 4;
font-size: 0.75rem;
margin-block-start: 2rem;
}
}
@@ -1,42 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {WINDOW} from '@angular/docs';
import {RouterTestingModule} from '@angular/router/testing';
import {Footer} from './footer.component';
describe('Footer', () => {
let component: Footer;
let fixture: ComponentFixture<Footer>;
const fakeWindow = {
location: {
origin: 'example-origin',
},
};
beforeEach(() => {
TestBed.configureTestingModule({
imports: [Footer, RouterTestingModule],
providers: [
{
provide: WINDOW,
useValue: fakeWindow,
},
],
});
fixture = TestBed.createComponent(Footer);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -1,28 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {CommonModule} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {ExternalLink} from '@angular/docs';
import {RouterLink} from '@angular/router';
import {GITHUB, X, MEDIUM, YOUTUBE} from './../../constants/links';
@Component({
selector: 'footer[adev-footer]',
standalone: true,
imports: [CommonModule, ExternalLink, RouterLink],
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Footer {
readonly GITHUB = GITHUB;
readonly X = X;
readonly YOUTUBE = YOUTUBE;
readonly MEDIUM = MEDIUM;
}
@@ -1,98 +0,0 @@
@use '@angular/docs/styles/media-queries' as mq;
// Dark/Light mode switcher & social media icon buttons
// ul
.adev-mini-menu {
padding: 0;
color: var(--primary-contrast);
background-color: var(--page-background);
border: 1px solid var(--senary-contrast);
border-radius: 0.25rem;
z-index: var(--z-index-mini-menu);
box-shadow: 10px 4px 40px 0 rgba(0, 0, 0, 0.075);
@include mq.for-tablet {
top: 75px;
left: 5px;
}
li {
list-style: none;
// themes and versions
button {
padding: 1rem;
min-width: 75px;
min-height: 75px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
docs-icon {
font-size: 1.5rem;
color: var(--quaternary-contrast);
transition: color 0.3s ease;
}
&:hover {
background-color: var(--senary-contrast);
span,
docs-icon {
color: var(--primary-contrast);
}
}
}
// social links
a {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
min-width: 50px;
svg {
fill: var(--quaternary-contrast);
transition: fill 0.3s ease;
}
&:hover {
background-color: var(--senary-contrast);
svg {
fill: var(--primary-contrast);
}
}
}
span {
color: var(--quaternary-contrast);
transition: color 0.3s ease;
}
}
&-open {
display: block;
}
}
.adev-version-picker {
top: 30px;
left: 10px;
position: absolute;
bottom: auto;
li {
padding-inline: 0;
}
li button {
min-height: fit-content;
}
@include mq.for-tablet {
top: 30px;
left: auto;
bottom: auto;
}
}
@@ -1,124 +0,0 @@
@use '@angular/docs/styles/media-queries' as mq;
.adev-nav-item {
color: var(--quaternary-contrast);
position: relative;
width: 6.875rem;
@include mq.for-phone-only {
width: 5.05rem;
}
@include mq.for-tablet {
display: flex;
align-items: center;
justify-content: center;
width: auto;
}
&::before {
content: '';
position: absolute;
bottom: 0;
top: 0;
left: 0;
width: 2px;
@include mq.for-tablet {
width: auto;
top: auto;
right: 0;
height: 2px;
}
// TODO: Make this gradient if the page is currently active, and black if child page active
background-color: var(--primary-contrast);
opacity: 0;
transform: scale(0.9);
transform-origin: center;
transition: opacity 0.3s ease, transform 0.3s ease;
}
&:not(.adev-nav-item--logo) {
@include mq.for-tablet {
a,
.adev-nav-button {
gap: 0.25rem;
}
}
}
.adev-nav-button {
width: 100%;
font-weight: 500;
}
a,
.adev-nav-button {
display: flex;
flex-direction: column;
@include mq.for-tablet {
flex-direction: row;
}
justify-content: center;
align-items: center;
gap: 0.75rem;
padding-block: 1.25rem;
text-decoration: none;
fill: var(--quaternary-contrast);
color: inherit;
cursor: pointer;
transition: fill 0.3s ease;
}
&__label {
margin: 0;
font-size: 0.813; // 13px
color: inherit;
abbr {
font-size: 0.688; // 11px
}
}
i {
color: var(--quaternary-contrast);
transition: color 0.3s ease;
}
span,
abbr {
transition: color 0.3s ease;
}
&:hover {
a,
.adev-nav-button {
fill: var(--primary-contrast);
}
span,
abbr {
color: var(--primary-contrast);
}
i {
color: var(--primary-contrast);
}
}
&--active {
&::before {
opacity: 1;
transform: scaleY(1);
}
&:not(.adev-nav-item--logo) {
path {
fill: var(--primary-contrast);
}
}
span,
abbr,
i {
color: var(--primary-contrast);
}
}
}
@@ -1,450 +0,0 @@
<!-- Primary Nav -->
<div
[attr.id]="PRIMARY_NAV_ID"
(docsClickOutside)="closeMobileNav()"
[docsClickOutsideIgnore]="[SECONDARY_NAV_ID]"
>
<!-- Mobile nav bar -->
<div class="adev-mobile-nav-bar">
<!-- Logo icon -->
<button
type="button"
class="adev-mobile-nav-button"
aria-label="Toggle mobile navigation"
(click)="openMobileNav($event)"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32">
<g clip-path="url(#2a)">
<path
fill="url(#2b)"
d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
/>
<path
fill="url(#2c)"
d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
/>
</g>
<defs>
<linearGradient
id="2b"
x1="49.009"
x2="225.829"
y1="213.75"
y2="129.722"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E40035" />
<stop offset=".24" stop-color="#F60A48" />
<stop offset=".352" stop-color="#F20755" />
<stop offset=".494" stop-color="#DC087D" />
<stop offset=".745" stop-color="#9717E7" />
<stop offset="1" stop-color="#6C00F5" />
</linearGradient>
<linearGradient
id="2c"
x1="41.025"
x2="156.741"
y1="28.344"
y2="160.344"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF31D9" />
<stop offset="1" stop-color="#FF5BE1" stop-opacity="0" />
</linearGradient>
<clipPath id="2a"><path fill="#fff" d="M0 0h223v236H0z" /></clipPath>
</defs>
</svg>
<docs-icon role="presentation">menu</docs-icon>
</button>
</div>
<nav
class="adev-nav-primary adev-scroll-hide"
[class.adev-nav-primary--open]="isMobileNavigationOpened()"
>
<button
type="button"
class="adev-close-nav"
(click)="closeMobileNav()"
aria-label="Close navigation"
>
<docs-icon role="presentation">close</docs-icon>
</button>
<!-- Top section of primary nav -->
<ul class="adev-nav__top">
<!-- Home / Angular logo -->
<li
class="adev-nav-item adev-nav-item--logo"
[class.adev-nav-item--active]="activeRouteItem() === HOME_ROUTE"
>
<a aria-label="Angular homepage" routerLink="/">
<!-- Logo Symbol -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32">
<g clip-path="url(#a)">
<path
fill="url(#b)"
d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
/>
<path
fill="url(#c)"
d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
/>
</g>
<defs>
<linearGradient
id="b"
x1="49.009"
x2="225.829"
y1="213.75"
y2="129.722"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E40035" />
<stop offset=".24" stop-color="#F60A48" />
<stop offset=".352" stop-color="#F20755" />
<stop offset=".494" stop-color="#DC087D" />
<stop offset=".745" stop-color="#9717E7" />
<stop offset="1" stop-color="#6C00F5" />
</linearGradient>
<linearGradient
id="c"
x1="41.025"
x2="156.741"
y1="28.344"
y2="160.344"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF31D9" />
<stop offset="1" stop-color="#FF5BE1" stop-opacity="0" />
</linearGradient>
<clipPath id="a">
<path fill="#fff" d="M0 0h223v236H0z" />
</clipPath>
</defs>
</svg>
<div class="adev-beta-version">Beta Docs</div>
</a>
<!-- Version picker for v18+ -->
<!-- <div class="adev-nav-item">
<button
type="button"
aria-label="Select Angular version"
role="menu"
class="adev-version-button"
[class.adev-mini-menu-open]="openedMenu === 'version-picker'"
[cdkMenuTriggerFor]="docsVersionMiniMenu"
[cdkMenuPosition]="miniMenuPositions"
(cdkMenuClosed)="closeMenu()"
(click)="openVersionMenu($event)"
>
{{ currentDocsVersion()?.displayName }}
<svg
xmlns="http://www.w3.org/2000/svg"
height="15"
viewBox="0 -960 960 960"
width="15"
fill="inherit"
>
<path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" />
</svg>
</button>
<ng-template #docsVersionMiniMenu>
<ul class="adev-mini-menu adev-version-picker" cdkMenu>
@for (item of versions(); track item) {
<li>
<button
type="button"
cdkMenuItem
(click)="redirectToDocsVersion(item.url)"
[attr.aria-label]="item.displayName"
>
<span>{{ item.displayName }}</span>
</button>
</li>
}
</ul>
</ng-template>
</div> -->
</li>
<!-- Search -->
<li class="adev-nav-item">
<button
class="adev-nav-button"
type="button"
(click)="toggleSearchDialog($event)"
title="Search docs"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="inherit"
>
<path
d="M14.583 15.48 9.104 10a4.591 4.591 0 0 1-1.458.844 5.156 5.156 0 0 1-1.771.302c-1.5 0-2.77-.52-3.813-1.563C1.022 8.542.5 7.285.5 5.813c0-1.473.52-2.73 1.563-3.771C3.103 1 4.367.479 5.854.479 7.326.48 8.58 1 9.614 2.042c1.035 1.041 1.553 2.298 1.553 3.77 0 .598-.098 1.174-.292 1.73A5.287 5.287 0 0 1 10 9.104l5.5 5.459-.917.916ZM5.854 9.895c1.125 0 2.083-.4 2.875-1.198a3.95 3.95 0 0 0 1.188-2.885 3.95 3.95 0 0 0-1.188-2.886C7.938 2.13 6.98 1.73 5.854 1.73c-1.139 0-2.107.4-2.906 1.198-.799.799-1.198 1.76-1.198 2.886 0 1.125.4 2.086 1.198 2.885.799.799 1.767 1.198 2.906 1.198Z"
/>
</svg>
<span
class="adev-nav-item__label adev-search-desktop"
[attr.aria-label]="'Open search dialog with ' + searchTitle"
>
<kbd>{{ searchLabel }}</kbd>
<kbd>K</kbd>
</span>
</button>
</li>
<!-- Docs -->
<li class="adev-nav-item" [class.adev-nav-item--active]="activeRouteItem() === DOCS_ROUTE">
<a [routerLink]="DOCS_ROUTE">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="14"
height="18"
fill="inherit"
>
<path
d="M3.645 13.792h6.708v-1.25H3.645v1.25Zm0-3.542h6.708V9H3.645v1.25Zm-2.063 7.083a1.2 1.2 0 0 1-.875-.375 1.2 1.2 0 0 1-.375-.875V1.917a1.2 1.2 0 0 1 .375-.875 1.2 1.2 0 0 1 .875-.375h7.52l4.563 4.562v10.854a1.2 1.2 0 0 1-.375.875 1.2 1.2 0 0 1-.875.375H1.582ZM8.478 5.792V1.917H1.582v14.166h10.833V5.792H8.478Z"
/>
</svg>
<span class="adev-nav-item__label">Docs</span>
</a>
</li>
<!-- Tutorials -->
<li
class="adev-nav-item"
[class.adev-nav-item--active]="activeRouteItem() === TUTORIALS_ROUTE"
>
<a [routerLink]="TUTORIALS_ROUTE">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="10"
fill="inherit"
>
<path
d="m5.668 10-5-5 5-5 1.187 1.188L3.022 5.02l3.813 3.812L5.668 10Zm6.667 0-1.188-1.188L14.98 4.98l-3.812-3.812L12.335 0l5 5-5 5Z"
/>
</svg>
<span class="adev-nav-item__label">Tutorials</span>
</a>
</li>
<!-- Playground -->
<li
class="adev-nav-item"
[class.adev-nav-item--active]="activeRouteItem() === PLAYGROUND_ROUTE"
>
<a [routerLink]="PLAYGROUND_ROUTE">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path
d="M450.001-611.691v-32.386q-39.385-9.923-64.692-41.897-25.308-31.975-25.308-74.025 0-49.922 35.038-84.96 35.039-35.038 84.961-35.038t84.961 35.038q35.038 35.038 35.038 84.96 0 42.05-25.308 74.025-25.307 31.974-64.692 41.897v32.386l273.846 157.538q17.173 9.912 26.663 26.582 9.491 16.671 9.491 36.495v62.152q0 19.824-9.491 36.495-9.49 16.67-26.663 26.582L516.154-111.771q-17.203 9.846-36.217 9.846t-36.091-9.846L176.155-265.847q-17.173-9.912-26.663-26.582-9.491-16.671-9.491-36.495v-62.152q0-19.824 9.491-36.495 9.49-16.67 26.663-26.582l273.846-157.538Zm-6.155 364.537L200-387.461v58.537q0 3.078 1.539 5.962 1.538 2.885 4.615 4.808l267.692 154.692q3.077 1.923 6.154 1.923t6.154-1.923l267.692-154.692q3.077-1.923 4.615-4.808 1.539-2.884 1.539-5.962v-58.537L516.154-247.154q-17.203 9.847-36.217 9.847t-36.091-9.847Zm6.155-162.847V-542.77L250.46-427.691l223.386 128.846q3.077 1.924 6.154 1.924t6.154-1.924l223.001-128.846L509.999-542.77v132.769h-59.998ZM480-699.999q25 0 42.5-17.5t17.5-42.5q0-25-17.5-42.5t-42.5-17.5q-25 0-42.5 17.5t-17.5 42.5q0 25 17.5 42.5t42.5 17.5Zm-2.308 538.46Z"
/>
</svg>
<span class="adev-nav-item__label">Playground</span>
</a>
</li>
<!-- API Ref -->
<li
class="adev-nav-item"
[class.adev-nav-item--active]="activeRouteItem() === REFERENCE_ROUTE"
>
<a [routerLink]="REFERENCE_ROUTE">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="14"
height="18"
fill="inherit"
>
<path
d="M3.645 13.792h6.708v-1.25H3.645v1.25Zm0-3.542h6.708V9H3.645v1.25Zm-2.063 7.083a1.2 1.2 0 0 1-.875-.375 1.2 1.2 0 0 1-.375-.875V1.917a1.2 1.2 0 0 1 .375-.875 1.2 1.2 0 0 1 .875-.375h7.52l4.563 4.562v10.854a1.2 1.2 0 0 1-.375.875 1.2 1.2 0 0 1-.875.375H1.582ZM8.478 5.792V1.917H1.582v14.166h10.833V5.792H8.478Z"
/>
</svg>
<span class="adev-nav-item__label">Reference</span>
</a>
</li>
</ul>
<!-- Bottom section of primary nav -->
<div class="adev-nav__bottom">
<!-- Social Icons Dots -->
<div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu === 'social'">
<button
type="button"
[cdkMenuTriggerFor]="socialMiniMenu"
[cdkMenuPosition]="miniMenuPositions"
aria-label="Open social media links"
(cdkMenuClosed)="closeMenu()"
(cdkMenuOpened)="openMenu('social')"
>
<docs-icon role="presentation">more_horiz</docs-icon>
</button>
<ng-template #socialMiniMenu>
<ul class="adev-mini-menu" cdkMenu>
<li>
<a
[href]="YOUTUBE"
cdkMenuItem
title="Angular YouTube channel"
target="_blank"
rel="noopener"
>
<!-- Youtube Icon -->
<svg
width="20"
height="15"
viewBox="0 0 20 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.7556 2.94783C18.5803 1.98018 17.745 1.27549 16.7756 1.05549C15.325 0.747832 12.6403 0.527832 9.73563 0.527832C6.83266 0.527832 4.105 0.747832 2.65266 1.05549C1.685 1.27549 0.847969 1.93549 0.672656 2.94783C0.495625 4.04783 0.320312 5.58783 0.320312 7.56783C0.320312 9.54783 0.495625 11.0878 0.715625 12.1878C0.892656 13.1555 1.72797 13.8602 2.69563 14.0802C4.23563 14.3878 6.87563 14.6078 9.78031 14.6078C12.685 14.6078 15.325 14.3878 16.865 14.0802C17.8327 13.8602 18.668 13.2002 18.845 12.1878C19.0203 11.0878 19.2403 9.50314 19.285 7.56783C19.1956 5.58783 18.9756 4.04783 18.7556 2.94783ZM7.36031 10.6478V4.48783L12.728 7.56783L7.36031 10.6478Z"
/>
</svg>
</a>
</li>
<li>
<a
[href]="X"
cdkMenuItem
title="Angular X (formerly Twitter) profile"
target="_blank"
rel="noopener"
>
<!-- X Icon -->
<svg
width="17"
height="16"
viewBox="0 0 17 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.04145 0.04432l6.56351 8.77603L0 15.95564h1.48651l5.78263-6.24705 4.6722 6.24705h5.05865l-6.9328-9.26967L16.21504.04432h-1.48651l-5.32552 5.75341L5.1001.04432H.04145Zm2.18602 1.09497h2.32396l10.26221 13.72122h-2.32396L2.22747 1.13928Z"
/>
</svg>
</a>
</li>
<li>
<a
[href]="MEDIUM"
cdkMenuItem
title="Angular Medium blog"
target="_blank"
rel="noopener"
>
<!-- Medium Icon -->
<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M7 6A7 7 0 107 20 7 7 0 107 6zM18 6.5A3 6.5 0 1018 19.5 3 6.5 0 1018 6.5zM23 8A1 5 0 1023 18 1 5 0 1023 8z"
></path>
</svg>
</a>
</li>
<li>
<a [href]="GITHUB" cdkMenuItem title="Angular Github" target="_blank" rel="noopener">
<!-- Github Icon -->
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.59948 19.0428C7.59948 18.8069 7.59118 18.182 7.58656 17.3526C4.89071 17.9526 4.32164 16.0201 4.32164 16.0201C3.88087 14.8718 3.24533 14.5663 3.24533 14.5663C2.36518 13.9492 3.31179 13.9621 3.31179 13.9621C4.28471 14.0323 4.79656 14.9868 4.79656 14.9868C5.66102 16.5052 7.06456 16.0672 7.61748 15.8125C7.70564 15.17 7.95579 14.732 8.23271 14.4837C6.08056 14.2331 3.81764 13.3801 3.81764 9.57199C3.81764 8.48737 4.19564 7.6003 4.81548 6.90522C4.71625 6.65414 4.38302 5.64384 4.91056 4.27537C4.91056 4.27537 5.72471 4.00814 7.57594 5.29399C8.34856 5.07384 9.17795 4.96307 10.0027 4.95937C10.8256 4.96307 11.6546 5.07384 12.429 5.29399C14.2793 4.00814 15.0921 4.27537 15.0921 4.27537C15.621 5.64337 15.2883 6.65368 15.1881 6.90522C15.8093 7.6003 16.1841 8.48737 16.1841 9.57199C16.1841 13.3898 13.9179 14.2298 11.7589 14.4758C12.1073 14.7828 12.4166 15.3892 12.4166 16.3165C12.4166 17.6452 12.4041 18.7174 12.4041 19.0428C12.4041 19.3091 12.579 19.6178 13.071 19.5205C16.9193 18.2041 19.6936 14.4814 19.6936 10.0926C19.6936 4.60353 15.3538 0.154297 10.0009 0.154297C4.64887 0.154297 0.309021 4.60353 0.309021 10.0926C0.309483 14.4828 3.08656 18.2078 6.9381 19.5218C7.42225 19.6128 7.59948 19.3058 7.59948 19.0428Z"
/>
</svg>
</a>
</li>
</ul>
</ng-template>
</div>
<!-- TODO: Refactor this and make it better. Accessible, animated, etc. -->
<div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu === 'theme-picker'">
<button
type="button"
[cdkMenuTriggerFor]="themeMiniMenu"
[cdkMenuPosition]="miniMenuPositions"
aria-label="Open theme picker"
(cdkMenuClosed)="closeMenu()"
(cdkMenuOpened)="openMenu('theme-picker')"
>
<docs-icon role="presentation">
@switch (theme()) { @case ('light') {
{{ 'light_mode' }}
} @case ('dark') {
{{ 'dark_mode' }}
} @case ('auto') {
{{ 'routine' }}
} }
</docs-icon>
</button>
<ng-template #themeMiniMenu>
<ul class="adev-mini-menu" cdkMenu>
<li>
<button
type="button"
cdkMenuItem
(click)="setTheme('auto')"
aria-label="Set default system theme"
>
<docs-icon class="docs-icon_high-contrast">routine</docs-icon>
<span>System</span>
</button>
</li>
<li>
<button
type="button"
cdkMenuItem
(click)="setTheme('dark')"
aria-label="Set dark theme"
>
<docs-icon class="docs-icon_high-contrast">dark_mode</docs-icon>
<span>Dark</span>
</button>
</li>
<li>
<button
type="button"
cdkMenuItem
(click)="setTheme('light')"
aria-label="Set light theme"
>
<docs-icon class="docs-icon_high-contrast">light_mode</docs-icon>
<span>Light</span>
</button>
</li>
</ul>
</ng-template>
</div>
</div>
</nav>
<!-- Tablet: Second horizontal nav layer which opens the secondary nav -->
@if (activeRouteItem() === DOCS_ROUTE || activeRouteItem() === REFERENCE_ROUTE) {
<div class="adev-secondary-tablet-bar">
<button type="button" (click)="openMobileNav($event)">
<docs-icon class="docs-icon_high-contrast">menu</docs-icon>
@if (activeRouteItem() === DOCS_ROUTE) {
<span>Docs</span>
} @if (activeRouteItem() === REFERENCE_ROUTE) {
<span>API</span>
}
</button>
</div>
}
</div>
@@ -1,283 +0,0 @@
@use '@angular/docs/styles/media-queries' as mq;
// primary nav
:host {
display: flex;
position: sticky;
top: 0;
z-index: var(--z-index-nav);
.adev-mobile-nav-button {
display: flex;
align-items: center;
gap: 0.75rem;
}
// render tablet primary nav under blur when secondary is open
@include mq.for-tablet {
&:has(.adev-nav-primary--open) {
z-index: 50;
}
}
}
.adev-mobile-nav-bar {
display: none;
@include mq.for-phone-only {
display: flex;
}
gap: 0.75rem;
backdrop-filter: blur(16px);
background-color: color-mix(in srgb, var(--page-background) 70%, transparent);
position: relative;
width: 100vw;
padding-block: 0.75rem;
padding-inline: var(--layout-padding);
border-block-end: 1px solid var(--septenary-contrast);
box-sizing: border-box;
transform: translateY(0);
// mobile bar: enter with delay
transition: transform 0.3s ease-out 0.6s;
&:has(+ .adev-nav-primary--open) {
transform: translateY(-100%);
// mobile bar: exit without delay
transition: transform 0.3s ease-in;
}
docs-icon {
color: var(--primary-contrast);
}
}
// First level navigation
.adev-nav-primary {
display: flex;
flex-direction: column;
justify-content: space-between;
max-height: 100vh;
overflow: auto;
backdrop-filter: blur(16px);
background-color: color-mix(in srgb, var(--page-background) 70%, transparent);
// render primary nav / mini menu above tablet secondary bar
z-index: 250;
position: relative;
transition: background-color 0.3s ease, border-color 0.3s ease;
height: 100dvh;
padding-block-start: 1rem;
padding-block-end: 2rem;
box-sizing: border-box;
// div containing mobile close button and adev-nav_top
> div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@include mq.for-phone-only {
position: absolute;
top: 0;
background-color: var(--page-background);
box-shadow: 10px 4px 3px 0 rgba(0, 0, 0, 0.001);
transform: translateX(-100%);
// primary nav: exit delayed
// TODO: should only be delayed if there is a secondary nav
transition: transform 0.3s ease-in 0.38s;
&.adev-nav-primary--open {
transform: translateX(0%);
// primary nav: enter after mobile nav bar exits
transition: transform 0.3s ease-out 0.1s;
}
@media (prefers-reduced-motion: reduce-motion) {
transition: none;
}
}
@include mq.for-tablet {
flex-direction: row;
width: 100vw;
padding-inline: calc(var(--layout-padding) - 1.25rem);
height: auto;
padding-block: 0;
}
// Add a subtle border for the home page
border-block-end: 1px solid var(--septenary-contrast);
@include mq.for-tablet-up {
border-inline-end: 1px solid var(--septenary-contrast);
}
@include mq.for-phone-only {
border-inline-end: 1px solid var(--septenary-contrast);
}
}
.adev-nav {
&__top {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
@include mq.for-tablet {
flex-direction: row;
}
.adev-beta-version {
font-family: 'Material Symbols Outlined';
text-transform: uppercase;
text-align: center;
line-height: normal;
}
// version dropdown button
.adev-version-button {
border: 1px solid var(--senary-contrast);
border-radius: 0.25rem;
width: fit-content;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 0.25rem;
color: var(--quaternary-contrast);
fill: var(--quaternary-contrast);
transition: color 0.3s ease;
font-size: 0.8rem;
font-weight: 500;
&:hover {
color: var(--primary-contrast);
}
docs-icon {
font-size: inherit;
line-height: inherit;
transition: transform 0.2s ease;
}
@include mq.for-phone-only {
&.adev-mini-menu-open {
&::after {
transform: rotate(-90deg);
}
}
}
@include mq.for-tablet-landscape-up {
&.adev-mini-menu-open {
&::after {
transform: rotate(-90deg);
}
}
}
}
@include mq.for-tablet {
> li:first-of-type {
padding-inline-start: 1.25rem;
}
li {
padding-inline: 1rem;
}
}
}
&__bottom {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
@include mq.for-tablet {
flex-direction: row;
margin-inline-end: 1.25rem;
}
.adev-nav-item--active {
button {
docs-icon {
color: var(--primary-contrast);
}
}
}
button {
border: none;
background-color: transparent;
cursor: pointer;
width: 100%;
padding-inline: 1rem;
@include mq.for-tablet {
padding-inline: 0.5rem;
}
docs-icon {
color: var(--quaternary-contrast);
font-size: 1.5rem;
@include mq.for-tablet-landscape-down {
font-size: 1.25rem;
}
}
&:hover {
docs-icon {
color: var(--primary-contrast);
}
}
}
}
}
.adev-close-nav {
display: none;
@include mq.for-phone-only {
display: block;
}
color: var(--primary-contrast);
}
.adev-search-desktop {
height: 1.375rem;
text-transform: capitalize;
@include mq.for-tablet-landscape-down {
display: none;
}
}
.adev-sub-navigation-hidden {
display: none;
}
.adev-secondary-tablet-bar {
font-size: 0.875rem;
backdrop-filter: blur(16px);
background-color: color-mix(in srgb, var(--page-background) 70%, transparent);
border-block-end: 1px solid var(--septenary-contrast);
padding-block: 1rem;
padding-inline: var(--layout-padding);
transition: background-color 0.3s ease, border-color 0.3s ease;
button {
display: flex;
gap: 0.5rem;
align-items: center;
color: var(--primary-contrast);
padding: 0;
font-weight: 500;
}
@include mq.for-tablet-landscape-up {
display: none;
}
@include mq.for-phone-only {
display: none;
}
}
@@ -1,101 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {Navigation} from './navigation.component';
import {RouterTestingModule} from '@angular/router/testing';
import {By} from '@angular/platform-browser';
import {PagePrefix} from '../../enums/pages';
import {Theme, ThemeManager} from '../../services/theme-manager.service';
import {Version, signal} from '@angular/core';
import {of} from 'rxjs';
import {VersionManager} from '../../services/version-manager.service';
import {Search, WINDOW} from '@angular/docs';
describe('Navigation', () => {
let component: Navigation;
let fixture: ComponentFixture<Navigation>;
const fakeThemeManager = {
theme: signal<Theme>('dark'),
setTheme: (theme: Theme) => {},
themeChanged$: of(),
};
const fakeVersionManager = {
currentDocsVersion: signal('v17'),
versions: signal<Version[]>([]),
};
const fakeWindow = {};
const fakeSearch = {};
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Navigation, RouterTestingModule],
providers: [
{
provide: WINDOW,
useValue: fakeWindow,
},
{
provide: Search,
useValue: fakeSearch,
},
],
}).compileComponents();
TestBed.overrideProvider(ThemeManager, {useValue: fakeThemeManager});
TestBed.overrideProvider(VersionManager, {useValue: fakeVersionManager});
fixture = TestBed.createComponent(Navigation);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should append active class to DOCS_ROUTE when DOCS_ROUTE is active', () => {
component.activeRouteItem.set(PagePrefix.DOCS);
fixture.detectChanges();
const docsLink = fixture.debugElement.query(By.css('a[href="/docs"]')).parent?.nativeElement;
expect(docsLink).toHaveClass('adev-nav-item--active');
});
it('should not have active class when activeRouteItem is null', () => {
component.activeRouteItem.set(null);
fixture.detectChanges();
const docsLink = fixture.debugElement.query(By.css('a[href="/docs"]')).nativeElement;
const referenceLink = fixture.debugElement.query(By.css('a[href="/reference"]')).nativeElement;
expect(docsLink).not.toHaveClass('adev-nav-item--active');
expect(referenceLink).not.toHaveClass('adev-nav-item--active');
});
it('should call themeManager.setTheme(dark) when user tries to set dark theme', () => {
const openThemePickerButton = fixture.debugElement.query(
By.css('button[aria-label^="Open theme picker"]'),
).nativeElement;
const setThemeSpy = spyOn(fakeThemeManager, 'setTheme');
openThemePickerButton.click();
fixture.detectChanges();
const setDarkModeButton = fixture.debugElement.query(
By.css('button[aria-label="Set dark theme"]'),
).nativeElement;
setDarkModeButton.click();
expect(setThemeSpy).toHaveBeenCalledOnceWith('dark');
});
});
@@ -1,228 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';
import {CommonModule, DOCUMENT, Location, isPlatformBrowser} from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
DestroyRef,
OnInit,
PLATFORM_ID,
inject,
} from '@angular/core';
import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';
import {
ClickOutside,
NavigationList,
NavigationState,
WINDOW,
IconComponent,
getBaseUrlAfterRedirects,
isApple,
IS_SEARCH_DIALOG_OPEN,
} from '@angular/docs';
import {NavigationEnd, Router, RouterLink} from '@angular/router';
import {filter, map, startWith} from 'rxjs/operators';
import {DOCS_ROUTES, REFERENCE_ROUTES, TUTORIALS_ROUTES} from '../../../routes';
import {GITHUB, MEDIUM, X, YOUTUBE} from '../../constants/links';
import {PagePrefix} from '../../enums/pages';
import {Theme, ThemeManager} from '../../services/theme-manager.service';
import {VersionManager} from '../../services/version-manager.service';
import {PRIMARY_NAV_ID, SECONDARY_NAV_ID} from '../../constants/element-ids';
import {ConnectionPositionPair} from '@angular/cdk/overlay';
import {COMMAND, CONTROL, SEARCH_TRIGGER_KEY} from '../../constants/keys';
type MenuType = 'social' | 'theme-picker' | 'version-picker';
@Component({
selector: 'div.adev-nav',
standalone: true,
imports: [
CommonModule,
RouterLink,
NavigationList,
ClickOutside,
CdkMenu,
CdkMenuItem,
CdkMenuTrigger,
IconComponent,
],
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss', './mini-menu.scss', './nav-item.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Navigation implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly document = inject(DOCUMENT);
private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
private readonly navigationState = inject(NavigationState);
private readonly router = inject(Router);
private readonly location = inject(Location);
private readonly themeManager = inject(ThemeManager);
private readonly isSearchDialogOpen = inject(IS_SEARCH_DIALOG_OPEN);
private readonly window = inject(WINDOW);
private readonly versionManager = inject(VersionManager);
readonly DOCS_ROUTE = PagePrefix.DOCS;
readonly HOME_ROUTE = PagePrefix.HOME;
readonly PLAYGROUND_ROUTE = PagePrefix.PLAYGROUND;
readonly REFERENCE_ROUTE = PagePrefix.REFERENCE;
readonly TUTORIALS_ROUTE = PagePrefix.TUTORIALS;
readonly GITHUB = GITHUB;
readonly X = X;
readonly MEDIUM = MEDIUM;
readonly YOUTUBE = YOUTUBE;
readonly PRIMARY_NAV_ID = PRIMARY_NAV_ID;
readonly SECONDARY_NAV_ID = SECONDARY_NAV_ID;
miniMenuPositions = [
new ConnectionPositionPair(
{originX: 'end', originY: 'center'},
{overlayX: 'start', overlayY: 'center'},
),
new ConnectionPositionPair(
{originX: 'end', originY: 'top'},
{overlayX: 'start', overlayY: 'top'},
),
];
readonly APPLE_SEARCH_LABEL = `⌘`;
readonly DEFAULT_SEARCH_LABEL = `ctrl`;
activeRouteItem = this.navigationState.primaryActiveRouteItem;
theme = this.themeManager.theme;
openedMenu: MenuType | null = null;
currentDocsVersion = this.versionManager.currentDocsVersion;
// Set the values of the search label and title only on the client, because the label is user-agent specific.
searchLabel = this.isBrowser
? isApple
? this.APPLE_SEARCH_LABEL
: this.DEFAULT_SEARCH_LABEL
: '';
searchTitle = this.isBrowser
? isApple
? `${COMMAND} ${SEARCH_TRIGGER_KEY.toUpperCase()}`
: `${CONTROL} ${SEARCH_TRIGGER_KEY.toUpperCase()}`
: '';
versions = this.versionManager.versions;
isMobileNavigationOpened = this.navigationState.isMobileNavVisible;
isMobileNavigationOpened$ = toObservable(this.isMobileNavigationOpened);
primaryRouteChanged$ = toObservable(this.activeRouteItem);
ngOnInit(): void {
this.listenToRouteChange();
this.preventToScrollContentWhenSecondaryNavIsOpened();
this.closeMobileNavOnPrimaryRouteChange();
}
redirectToDocsVersion(versionUrl: string): void {
this.window.location.href = versionUrl;
}
setTheme(theme: Theme): void {
this.themeManager.setTheme(theme);
}
openVersionMenu($event: MouseEvent): void {
// It's required to avoid redirection to `home`
$event.stopImmediatePropagation();
$event.preventDefault();
this.openMenu('version-picker');
}
openMenu(menuType: MenuType): void {
this.openedMenu = menuType;
}
closeMenu(): void {
this.openedMenu = null;
}
openMobileNav($event: MouseEvent): void {
$event.stopPropagation();
this.navigationState.setMobileNavigationListVisibility(true);
}
closeMobileNav(): void {
this.navigationState.setMobileNavigationListVisibility(false);
}
toggleSearchDialog(event: MouseEvent): void {
event.stopPropagation();
this.isSearchDialogOpen.update((isOpen) => !isOpen);
}
private closeMobileNavOnPrimaryRouteChange(): void {
this.primaryRouteChanged$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
this.closeMobileNav();
});
}
private listenToRouteChange(): void {
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
map((event) => (event as NavigationEnd).urlAfterRedirects),
)
.pipe(
takeUntilDestroyed(this.destroyRef),
//using location because router.url will only return "/" here
startWith(this.location.path()),
)
.subscribe((url) => {
this.setActivePrimaryRoute(getBaseUrlAfterRedirects(url, this.router));
});
}
// Set active route item, based on urlAfterRedirects.
// First check if url starts with the main prefixes (docs, reference, tutorials).
// (*) Docs navigation tree contains items which will navigate to /tutorials.
// In that case after click on such link we should mark as active item, and display tutorials navigation tree.
// If it's not starting with prefix then check if specific path exist in the array of defined routes
// (*) Reference navigation tree contains items which are not start with prefix like /migrations or /errors.
private setActivePrimaryRoute(urlAfterRedirects: string): void {
if (urlAfterRedirects === '') {
this.activeRouteItem.set(PagePrefix.HOME);
} else if (urlAfterRedirects.startsWith(PagePrefix.DOCS)) {
this.activeRouteItem.set(PagePrefix.DOCS);
} else if (
urlAfterRedirects.startsWith(PagePrefix.REFERENCE) ||
urlAfterRedirects.startsWith(PagePrefix.API)
) {
this.activeRouteItem.set(PagePrefix.REFERENCE);
} else if (urlAfterRedirects === PagePrefix.PLAYGROUND) {
this.activeRouteItem.set(PagePrefix.PLAYGROUND);
} else if (urlAfterRedirects.startsWith(PagePrefix.TUTORIALS)) {
this.activeRouteItem.set(PagePrefix.TUTORIALS);
} else if (DOCS_ROUTES.some((route) => route.path === urlAfterRedirects)) {
this.activeRouteItem.set(PagePrefix.DOCS);
} else if (REFERENCE_ROUTES.some((route) => route.path === urlAfterRedirects)) {
this.activeRouteItem.set(PagePrefix.REFERENCE);
} else if (TUTORIALS_ROUTES.some((route) => route.path === urlAfterRedirects)) {
this.activeRouteItem.set(PagePrefix.TUTORIALS);
} else {
// Reset if no active route item could be found
this.activeRouteItem.set(null);
}
}
private preventToScrollContentWhenSecondaryNavIsOpened(): void {
this.isMobileNavigationOpened$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((opened) => {
if (opened) {
this.document.body.style.overflowY = 'hidden';
} else {
this.document.body.style.removeProperty('overflow-y');
}
});
}
}
@@ -1,30 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {ProgressBarComponent} from './progress-bar.component';
describe('ProgressBarComponent', () => {
let component: ProgressBarComponent;
let fixture: ComponentFixture<ProgressBarComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ProgressBarComponent],
}).compileComponents();
fixture = TestBed.createComponent(ProgressBarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -1,89 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {
ChangeDetectionStrategy,
Component,
inject,
OnInit,
PLATFORM_ID,
ViewChild,
} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';
import {NgProgressComponent} from 'ngx-progressbar';
import {
NavigationCancel,
NavigationEnd,
NavigationError,
NavigationSkipped,
NavigationStart,
Router,
} from '@angular/router';
import {filter, map, switchMap, take} from 'rxjs/operators';
/** Time to wait after navigation starts before showing the progress bar. This delay allows a small amount of time to skip showing the progress bar when a navigation is effectively immediate. 30ms is approximately the amount of time we can wait before a delay is perceptible.*/
const PROGRESS_BAR_DELAY = 30;
@Component({
selector: 'adev-progress-bar',
standalone: true,
imports: [NgProgressComponent],
template: `
<ng-progress aria-label="Page load progress" />
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProgressBarComponent implements OnInit {
private readonly router = inject(Router);
@ViewChild(NgProgressComponent, {static: true}) progressBar!: NgProgressComponent;
isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
ngOnInit() {
this.setupPageNavigationDimming();
}
/**
* Dims the main router-outlet content when navigating to a new page.
*/
private setupPageNavigationDimming() {
if (!this.isBrowser) {
return;
}
this.router.events
.pipe(
filter((e) => e instanceof NavigationStart),
map(() => {
// Only apply set the property if the navigation is not "immediate"
return setTimeout(() => {
this.progressBar.start();
}, PROGRESS_BAR_DELAY);
}),
switchMap((timeoutId) => {
return this.router.events.pipe(
filter((e) => {
return (
e instanceof NavigationEnd ||
e instanceof NavigationCancel ||
e instanceof NavigationSkipped ||
e instanceof NavigationError
);
}),
take(1),
map(() => timeoutId),
);
}),
)
.subscribe((timeoutId) => {
// When the navigation finishes, prevent the navigating class from being applied in the timeout.
clearTimeout(timeoutId);
this.progressBar.complete();
});
}
}
@@ -1,25 +0,0 @@
<div [attr.id]="SECONDARY_NAV_ID" class="adev-secondary-nav-mask" [class.adev-nav-secondary--open]="isSecondaryNavVisible()" (docsClickOutside)="close()" [docsClickOutsideIgnore]="[PRIMARY_NAV_ID]">
<div class="adev-nav-secondary adev-scroll-track-transparent" [style.transform]="translateX()" [style.transition]="transition">
<!-- Secondary Nav -->
@if (navigationItems && navigationItems.length > 0) {
<docs-navigation-list
[navigationItems]="navigationItems"
[displayItemsToLevel]="maxVisibleLevelsOnSecondaryNav()"
[expandableLevel]="maxVisibleLevelsOnSecondaryNav()"
(linkClicked)="close()"
/>
}
<!-- Third, fourth and next levels of navigation -->
@for (item of navigationItemsSlides(); track item; let level = $index) {
<docs-navigation-list
[@leaveAnimation]
[collapsableLevel]="level + maxVisibleLevelsOnSecondaryNav()"
[expandableLevel]="level + maxVisibleLevelsOnSecondaryNav() + 1"
[navigationItems]="[item]"
[displayItemsToLevel]="level + maxVisibleLevelsOnSecondaryNav() + 1"
(linkClicked)="close()"
/>
}
</div>
</div>
@@ -1,72 +0,0 @@
@use '@angular/docs/styles/media-queries' as mq;
:host {
@include mq.for-tablet-landscape-up {
position: sticky;
top: 0;
// Render secondary nav below primary nav
z-index: 99;
}
@include mq.for-tablet-landscape-down {
position: fixed;
// Render secondary nav above mobile menu
z-index: 100;
}
@include mq.for-phone-only {
transform: translateX(0);
z-index: 99;
transition: transform 0.3s ease;
&:has(.adev-nav-secondary--open) {
transform: translateX(82px);
transition: transform 0.3s ease-in 0.3s;
}
}
}
// .adev-secondary-nav-mask stays in the same place during nav animation, as a mask
.adev-secondary-nav-mask {
position: sticky;
@include mq.for-tablet-landscape-down {
position: absolute;
}
top: 0;
overflow-x: hidden;
min-width: var(--secondary-nav-width);
border-inline-end: 1px solid var(--septenary-contrast);
background-color: var(--page-background);
z-index: var(--z-index-nav);
transition: transform 0.45s ease;
@media (prefers-reduced-motion: no-preference) {
transition: transform 0.45s ease, background-color 0.3s ease, border-color 0.3s ease;
}
@include mq.for-tablet-landscape-down {
transform: translateX(-100%);
&.adev-nav-secondary--open {
transform: translateX(0);
}
}
@include mq.for-phone-only {
transform: translateX(-100%);
// exit immediately
transition: transform 0.45s ease-in;
&.adev-nav-secondary--open {
transform: translateX(0);
// enter delayed
transition: transform 0.45s ease-out 0.2s;
}
}
}
// seconday nav - translated on x to display levels
.adev-nav-secondary {
display: flex;
flex-direction: row;
max-width: var(--secondary-nav-width);
}
@@ -1,42 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {SecondaryNavigation} from './secondary-navigation.component';
import {WINDOW} from '@angular/docs';
describe('SecondaryNavigation', () => {
let component: SecondaryNavigation;
let fixture: ComponentFixture<SecondaryNavigation>;
const fakeWindow = {
location: {
origin: 'example-origin',
},
};
beforeEach(() => {
TestBed.configureTestingModule({
imports: [SecondaryNavigation],
providers: [
{
provide: WINDOW,
useValue: fakeWindow,
},
],
});
fixture = TestBed.createComponent(SecondaryNavigation);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -1,214 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {
ChangeDetectionStrategy,
Component,
DestroyRef,
OnInit,
PLATFORM_ID,
computed,
inject,
} from '@angular/core';
import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';
import {
ClickOutside,
NavigationItem,
NavigationList,
NavigationState,
WINDOW,
findNavigationItem,
getBaseUrlAfterRedirects,
getNavigationItemsTree,
markExternalLinks,
shouldReduceMotion,
} from '@angular/docs';
import {distinctUntilChanged, filter, map, skip, startWith} from 'rxjs/operators';
import {SUB_NAVIGATION_DATA} from '../../../sub-navigation-data';
import {PagePrefix} from '../../enums/pages';
import {ActivatedRouteSnapshot, NavigationEnd, Router, RouterStateSnapshot} from '@angular/router';
import {NgFor, NgIf, isPlatformBrowser} from '@angular/common';
import {trigger, transition, style, animate} from '@angular/animations';
import {PRIMARY_NAV_ID, SECONDARY_NAV_ID} from '../../constants/element-ids';
export const ANIMATION_DURATION = 500;
@Component({
selector: 'adev-secondary-navigation',
standalone: true,
imports: [NavigationList, NgIf, NgFor, ClickOutside],
templateUrl: './secondary-navigation.component.html',
styleUrls: ['./secondary-navigation.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [
trigger('leaveAnimation', [
transition(':leave', [
style({transform: 'translateX(0%)'}),
animate(
`${ANIMATION_DURATION}ms ${ANIMATION_DURATION}ms ease-out`,
style({transform: 'translateX(100%)'}),
),
]),
]),
],
})
export class SecondaryNavigation implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly navigationState = inject(NavigationState);
private readonly platformId = inject(PLATFORM_ID);
private readonly router = inject(Router);
private readonly window = inject(WINDOW);
isSecondaryNavVisible = this.navigationState.isMobileNavVisible;
primaryActiveRouteItem = this.navigationState.primaryActiveRouteItem;
maxVisibleLevelsOnSecondaryNav = computed(() =>
this.primaryActiveRouteItem() === PagePrefix.REFERENCE ? 1 : 2,
);
navigationItemsSlides = this.navigationState.expandedItems;
navigationItems: NavigationItem[] | undefined;
translateX = computed(() => {
const level = this.navigationState.expandedItems()?.length ?? 0;
return `translateX(${-level * 100}%)`;
});
transition: string = '0ms';
readonly PRIMARY_NAV_ID = PRIMARY_NAV_ID;
readonly SECONDARY_NAV_ID = SECONDARY_NAV_ID;
private readonly routeMap: Record<string, NavigationItem[]> = {
[PagePrefix.REFERENCE]: getNavigationItemsTree(SUB_NAVIGATION_DATA.reference, (tree) =>
markExternalLinks(tree, this.window.origin),
),
[PagePrefix.DOCS]: getNavigationItemsTree(SUB_NAVIGATION_DATA.docs, (tree) =>
markExternalLinks(tree, this.window.origin),
),
};
private readonly primaryActiveRouteChanged$ = toObservable(this.primaryActiveRouteItem).pipe(
distinctUntilChanged(),
takeUntilDestroyed(this.destroyRef),
);
private readonly urlAfterRedirects$ = this.router.events.pipe(
filter((event) => event instanceof NavigationEnd),
map((event) => (event as NavigationEnd).urlAfterRedirects),
filter((url): url is string => url !== undefined),
startWith(this.getInitialPath(this.router.routerState.snapshot)),
takeUntilDestroyed(this.destroyRef),
);
ngOnInit(): void {
this.navigationState.cleanExpandedState();
this.listenToPrimaryRouteChange();
this.setActiveRouteOnNavigationEnd();
if (isPlatformBrowser(this.platformId)) {
this.initSlideAnimation();
}
}
close(): void {
this.navigationState.setMobileNavigationListVisibility(false);
}
private setActiveRouteOnNavigationEnd(): void {
this.urlAfterRedirects$.subscribe((url) => {
const activeNavigationItem = this.getActiveNavigationItem(url);
if (
activeNavigationItem?.level &&
activeNavigationItem.level <= this.maxVisibleLevelsOnSecondaryNav()
) {
this.navigationState.cleanExpandedState();
} else if (activeNavigationItem) {
/**
* For the `Docs`, we don't expand the "level === 1" items because they are already displayed in the main navigation list.
* Example:
* In-depth Guides (level == 0)
* Components (level == 1) -> Selectors, Styling, etc (level == 2)
* Template Syntax (level == 1) -> Text interpolation, etc (level == 2)
*
* For the `Tutorials`, we display the navigation in the dropdown and it has flat structure (all items are displayed as items with level === 0).
*
* For the `Reference` we would like to give possibility to expand the "level === 1" items cause they are not visible in the first slide of navigation list.
* Example:
* API Reference (level == 0) -> Overview, Animations, common, etc (level == 1) -> API Package exports (level == 2)
*/
const shouldExpandItem = (node: NavigationItem): boolean =>
!!node.level &&
(this.primaryActiveRouteItem() === PagePrefix.REFERENCE
? node.level > 0
: node.level > 1);
// Skip expand when active item is API Reference homepage - `/api`.
// It protect us from displaying second level of the navigation when user clicks on `Reference`,
// Because in this situation we want to display the first level, which contains, in addition to the API Reference, also the CLI Reference, Error Encyclopedia etc.
const skipExpandPredicateFn = (node: NavigationItem): boolean =>
node.path === PagePrefix.API;
this.navigationState.expandItemHierarchy(
activeNavigationItem,
shouldExpandItem,
skipExpandPredicateFn,
);
}
});
}
private getActiveNavigationItem(url: string): NavigationItem | null {
// set visible navigation items if not present
this.setVisibleNavigationItems();
const activeNavigationItem = findNavigationItem(
this.navigationItems!,
(item) =>
!!item.path &&
getBaseUrlAfterRedirects(item.path, this.router) ===
getBaseUrlAfterRedirects(url, this.router),
);
this.navigationState.setActiveNavigationItem(activeNavigationItem);
return activeNavigationItem;
}
private initSlideAnimation(): void {
if (shouldReduceMotion()) {
return;
}
setTimeout(() => {
this.transition = `${ANIMATION_DURATION}ms`;
}, ANIMATION_DURATION);
}
private setVisibleNavigationItems(): void {
const routeMap = this.routeMap[this.primaryActiveRouteItem()!];
this.navigationItems = routeMap
? getNavigationItemsTree(routeMap, (item) => {
item.isExpanded = this.primaryActiveRouteItem() === PagePrefix.DOCS && item.level === 1;
})
: [];
}
private listenToPrimaryRouteChange(): void {
// Fix: flicker of sub-navigation on init
this.primaryActiveRouteChanged$.pipe(skip(1)).subscribe(() => {
this.navigationState.cleanExpandedState();
});
}
private getInitialPath(routerState: RouterStateSnapshot): string {
let route: ActivatedRouteSnapshot = routerState.root;
while (route.firstChild) {
route = route.firstChild;
}
return route.routeConfig?.path ?? '';
}
}
@@ -1,95 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {TestBed} from '@angular/core/testing';
import {TITLE_SUFFIX, ADevTitleStrategy, DEFAULT_PAGE_TITLE} from './a-dev-title-strategy';
import {Router, provideRouter} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {Component} from '@angular/core';
@Component({})
class FakeComponent {}
describe('ADevTitleStrategy', () => {
let service: ADevTitleStrategy;
let router: Router;
let title: Title;
const routes = [
{path: 'first', data: {label: 'First'}, component: FakeComponent},
{path: 'second', component: FakeComponent},
{
path: 'third',
data: {label: 'Third'},
component: FakeComponent,
children: [{path: 'child', data: {label: 'Child'}, component: FakeComponent}],
},
{
path: 'fourth',
data: {label: 'Fourth'},
component: FakeComponent,
children: [
{
path: 'child',
data: {label: 'Overview', parent: {label: 'Fourth'}},
component: FakeComponent,
},
],
},
];
beforeEach(() => {
TestBed.configureTestingModule({
providers: [provideRouter(routes)],
});
service = TestBed.inject(ADevTitleStrategy);
router = TestBed.inject(Router);
title = TestBed.inject(Title);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
it(`should set '${TITLE_SUFFIX}' when route doesn't have defined label`, async () => {
spyOn(title, 'setTitle');
await router.navigateByUrl('/second');
service.updateTitle(router.routerState.snapshot);
expect(title.setTitle).toHaveBeenCalledOnceWith(TITLE_SUFFIX);
});
it(`should set 'Third - ${TITLE_SUFFIX}' when route has defined label equal to 'Third'`, async () => {
spyOn(title, 'setTitle');
await router.navigateByUrl('/third');
service.updateTitle(router.routerState.snapshot);
expect(title.setTitle).toHaveBeenCalledOnceWith('Third • Angular');
});
it(`shouldn't take label from the parent route when current route label is not equal to ${DEFAULT_PAGE_TITLE}`, async () => {
spyOn(title, 'setTitle');
await router.navigateByUrl('/third/child');
service.updateTitle(router.routerState.snapshot);
expect(title.setTitle).toHaveBeenCalledOnceWith('Child • Angular');
});
it(`should take label from the parent route when current route label is equal to ${DEFAULT_PAGE_TITLE}`, async () => {
spyOn(title, 'setTitle');
await router.navigateByUrl('/fourth/child');
service.updateTitle(router.routerState.snapshot);
expect(title.setTitle).toHaveBeenCalledOnceWith('Fourth • Overview • Angular');
});
});
@@ -1,51 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {Injectable} from '@angular/core';
import {NavigationItem} from '@angular/docs';
import {Title} from '@angular/platform-browser';
import {ActivatedRouteSnapshot, RouterStateSnapshot, TitleStrategy} from '@angular/router';
export const ROUTE_TITLE_PROPERTY = 'label';
export const ROUTE_PARENT_PROPERTY = 'parent';
export const TITLE_SUFFIX = 'Angular';
export const TITLE_SEPARATOR = ' • ';
export const DEFAULT_PAGE_TITLE = 'Overview';
@Injectable({providedIn: 'root'})
export class ADevTitleStrategy extends TitleStrategy {
constructor(private readonly title: Title) {
super();
}
override updateTitle(routerState: RouterStateSnapshot) {
const title = this.buildTitle(routerState);
if (title !== undefined) {
this.title.setTitle(title);
}
}
override buildTitle(snapshot: RouterStateSnapshot): string {
let route: ActivatedRouteSnapshot = snapshot.root;
while (route.firstChild) {
route = route.firstChild;
}
const data = route.data as NavigationItem;
const routeTitle = data.label ?? '';
const prefix =
routeTitle.startsWith(DEFAULT_PAGE_TITLE) && data.parent
? `${data.parent.label}${TITLE_SEPARATOR}`
: '';
return !!routeTitle ? `${prefix}${routeTitle}${TITLE_SEPARATOR}${TITLE_SUFFIX}` : TITLE_SUFFIX;
}
}
@@ -1,50 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
/**
* Formats an `ErrorEvent` to a human-readable string that can
* be sent to Google Analytics.
*/
export function formatErrorEventForAnalytics(event: ErrorEvent): string {
const {message, filename, colno, lineno, error} = event;
if (error instanceof Error) {
return formatErrorForAnalytics(error);
}
return `${stripErrorMessagePrefix(message)}\n${filename}:` + `${lineno || '?'}:${colno || '?'}`;
}
/**
* Formats an `Error` to a human-readable string that can be sent
* to Google Analytics.
*/
export function formatErrorForAnalytics(error: Error): string {
let stack = '<no-stack>';
if (error.stack) {
stack = stripErrorMessagePrefix(error.stack)
// strip the message from the stack trace, if present
.replace(error.message + '\n', '')
// strip leading spaces
.replace(/^ +/gm, '')
// strip all leading "at " for each frame
.replace(/^at /gm, '')
// replace long urls with just the last segment: `filename:line:column`
.replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm, '@$1\n')
// replace "eval code" in Edge
.replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm, '@???$1\n');
}
return `${error.message}\n${stack}`;
}
/** Strips the error message prefix from a message or stack trace. */
function stripErrorMessagePrefix(input: string): string {
return input.replace(/^(Uncaught )?Error: /, '');
}
@@ -1,89 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {Injector} from '@angular/core';
import {ENVIRONMENT, WINDOW} from '@angular/docs';
import {AnalyticsService} from './analytics.service';
describe('AnalyticsService', () => {
let service: AnalyticsService;
let injector: Injector;
let gtagSpy: jasmine.Spy;
let gtagAppendNodeSpy: jasmine.Spy;
let windowOnErrorHandler: (event: ErrorEvent) => void;
let mockWindow: any;
beforeEach(() => {
gtagSpy = jasmine.createSpy('gtag');
gtagAppendNodeSpy = jasmine.createSpy('gtag.js script head attach');
mockWindow = {
name: 'Some name',
document: {
head: {appendChild: gtagAppendNodeSpy},
createElement: (tag: string) => document.createElement(tag),
querySelector: (_gtagIdSelector: string) => null,
},
addEventListener: (_name: string, handler: typeof windowOnErrorHandler) =>
(windowOnErrorHandler = handler),
};
injector = Injector.create({
providers: [
{provide: ENVIRONMENT, useValue: {}},
{provide: AnalyticsService, deps: [WINDOW]},
{provide: WINDOW, useFactory: () => mockWindow, deps: []},
],
});
service = injector.get(AnalyticsService);
// The `gtag` function is attached to the `Window`, so we can spy on it
// after the service has been initialized.
gtagSpy = spyOn(mockWindow, 'gtag');
});
describe('error reporting', () => {
it('should subscribe to window uncaught errors and report them', () => {
spyOn(service, 'reportError');
windowOnErrorHandler(
new ErrorEvent('error', {
error: new Error('Test Error'),
}),
);
expect(service.reportError).toHaveBeenCalledTimes(1);
expect(service.reportError).toHaveBeenCalledWith(
jasmine.stringContaining('Test Error\n'),
true,
);
});
it('should report errors to analytics by dispatching `gtag` and `ga` events', () => {
gtagSpy.calls.reset();
windowOnErrorHandler(
new ErrorEvent('error', {
error: new Error('Test Error'),
}),
);
expect(gtagSpy).toHaveBeenCalledTimes(1);
expect(gtagSpy).toHaveBeenCalledWith(
'event',
'exception',
jasmine.objectContaining({
description: jasmine.stringContaining('Test Error\n'),
fatal: true,
}),
);
});
});
});
@@ -1,89 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {inject, Injectable} from '@angular/core';
import {WINDOW, ENVIRONMENT} from '@angular/docs';
import {formatErrorEventForAnalytics} from './analytics-format-error';
/** Extension of `Window` with potential Google Analytics fields. */
interface WindowWithAnalytics extends Window {
dataLayer?: any[];
gtag?(...args: any[]): void;
}
@Injectable({providedIn: 'root'})
/**
* Google Analytics Service - captures app behaviors and sends them to Google Analytics.
*
* Associates data wi`th properties determined from the environment configurations:
* - Data is uploaded to our main Google Analytics 4+ property.
*/
export class AnalyticsService {
private environment = inject(ENVIRONMENT);
private window: WindowWithAnalytics = inject(WINDOW);
constructor() {
this._installGlobalSiteTag();
this._installWindowErrorHandler();
}
reportError(description: string, fatal = true) {
// Limit descriptions to maximum of 150 characters.
// See: https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#exd.
description = description.substring(0, 150);
this._gtag('event', 'exception', {description, fatal});
}
sendEvent(name: string, parameters: Record<string, string | boolean | number>) {
this._gtag('event', name, parameters);
}
private _gtag(...args: any[]) {
if (this.window.gtag) {
this.window.gtag(...args);
}
}
private _installGlobalSiteTag() {
const window = this.window;
const url = `https://www.googletagmanager.com/gtag/js?id=${this.environment.googleAnalyticsId}`;
// Note: This cannot be an arrow function as `gtag.js` expects an actual `Arguments`
// instance with e.g. `callee` to be set. Do not attempt to change this and keep this
// as much as possible in sync with the tracking code snippet suggested by the Google
// Analytics 4 web UI under `Data Streams`.
window.dataLayer = this.window.dataLayer || [];
window.gtag = function () {
window.dataLayer?.push(arguments);
};
window.gtag('js', new Date());
// Configure properties before loading the script. This is necessary to avoid
// loading multiple instances of the gtag JS scripts.
window.gtag('config', this.environment.googleAnalyticsId);
// Only add the element if `gtag` is not loaded yet. It might already
// be inlined into the `index.html` via SSR.
if (window.document.querySelector('#gtag-script') === null) {
const el = window.document.createElement('script');
el.async = true;
el.src = url as string;
el.id = 'gtag-script';
window.document.head.appendChild(el);
}
}
private _installWindowErrorHandler() {
this.window.addEventListener('error', (event) =>
this.reportError(formatErrorEventForAnalytics(event), true),
);
}
}
@@ -1,122 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {ErrorHandler, Injector, VERSION} from '@angular/core';
import {ReportingErrorHandler} from './reporting-error-handler';
import {AnalyticsService} from './analytics.service';
describe('ReportingErrorHandler service', () => {
let handler: ReportingErrorHandler;
let superHandler: jasmine.Spy;
let reportErrorSpy: jasmine.Spy;
beforeEach(() => {
superHandler = spyOn(ErrorHandler.prototype, 'handleError');
reportErrorSpy = jasmine.createSpy('analytics report error');
const injector = Injector.create({
providers: [
{provide: AnalyticsService, useValue: {reportError: reportErrorSpy}},
{provide: ErrorHandler, useClass: ReportingErrorHandler, deps: [AnalyticsService]},
],
});
handler = injector.get(ErrorHandler) as unknown as ReportingErrorHandler;
});
describe('handleError', () => {
it('should call the super class handleError', () => {
const error = new Error();
handler.handleError(error);
expect(superHandler).toHaveBeenCalledWith(error);
});
it('should cope with the super handler throwing an error', () => {
const error = new Error('initial error');
superHandler.and.throwError('super handler error');
handler.handleError(error);
expect(reportErrorSpy).toHaveBeenCalledTimes(2);
// Error from super handler is reported first
expect(reportErrorSpy.calls.argsFor(0)[0]).toEqual(
jasmine.stringContaining('super handler error\n'),
);
// Then error from initial exception
expect(reportErrorSpy.calls.argsFor(1)[0]).toEqual(
jasmine.stringContaining(`[v${VERSION.full}] initial error\n`),
);
});
it('should augment an error object with version info', () => {
const originalMessage = 'this is an error message';
const error = new Error(originalMessage);
expect(error.message).toBe(originalMessage);
// NOTE:
// Intentionally not checking `error.stack` here, because accessing it causes the property to
// be computed and may affect the observed behavior of `handleError()`.
handler.handleError(error);
expect(error.message).toBe(`[v${VERSION.full}] ${originalMessage}`);
if (error.stack) {
const expected = `Error: [v${VERSION.full}] ${originalMessage}`;
const actual = error.stack.split('\n', 1)[0];
expect(actual.startsWith(expected))
.withContext(`Expected '${actual}' to start with '${expected}'.`)
.toBeTrue();
}
});
it('should send an error object to analytics', () => {
const error = new Error('this is an error message');
handler.handleError(error);
expect(reportErrorSpy).toHaveBeenCalledWith(
jasmine.stringContaining('this is an error message\n'),
);
});
it('should send a non-error object to analytics', () => {
const error = {reason: 'this is an error message'};
handler.handleError(error);
expect(reportErrorSpy).toHaveBeenCalledWith(JSON.stringify(error));
});
it('should send a non-error object with circular references to analytics', () => {
const error = {
reason: 'this is an error message',
get self() {
return this;
},
toString() {
return `{reason: ${this.reason}}`;
},
};
handler.handleError(error);
expect(reportErrorSpy).toHaveBeenCalledWith('{reason: this is an error message}');
});
it('should send an error string to analytics (prefixed with version info)', () => {
const error = 'this is an error message';
handler.handleError(error);
expect(reportErrorSpy).toHaveBeenCalledWith(`[v${VERSION.full}] ${error}`);
});
it('should send a non-object, non-string error stringified to analytics', () => {
handler.handleError(404);
handler.handleError(false);
handler.handleError(null);
handler.handleError(undefined);
expect(reportErrorSpy.calls.allArgs()).toEqual([['404'], ['false'], ['null'], ['undefined']]);
});
});
});
@@ -1,71 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {ErrorHandler, Injectable, VERSION} from '@angular/core';
import {formatErrorForAnalytics} from './analytics-format-error';
import {AnalyticsService} from './analytics.service';
/**
* Extend the default error handling to report errors to an external service - e.g Google Analytics.
*
* Errors outside the Angular application may also be handled by `window.onerror`.
*/
@Injectable()
export class ReportingErrorHandler extends ErrorHandler {
constructor(private _analytics: AnalyticsService) {
super();
}
/**
* Send error info to Google Analytics, in addition to the default handling.
*
* @param error Information about the error.
*/
override handleError(error: any) {
const versionedError = this.prefixErrorWithVersion(error);
try {
super.handleError(versionedError);
} catch (e) {
this.reportError(e);
}
this.reportError(versionedError);
}
private prefixErrorWithVersion<T>(error: T): T {
const prefix = `[v${VERSION.full}] `;
if (error instanceof Error) {
const oldMessage = error.message;
const oldStack = error.stack;
error.message = prefix + oldMessage;
error.stack = oldStack?.replace(oldMessage, error.message);
} else if (typeof error === 'string') {
error = (prefix + error) as unknown as T;
}
// If it is a different type, omit the version to avoid altering the original `error` object.
return error;
}
private reportError(error: unknown) {
if (error instanceof Error) {
this._analytics.reportError(formatErrorForAnalytics(error));
} else {
if (typeof error === 'object') {
try {
error = JSON.stringify(error);
} catch {
// Ignore the error and just let it be stringified.
}
}
this._analytics.reportError(`${error}`);
}
}
}
@@ -1,28 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {TestBed} from '@angular/core/testing';
import {ContentLoader} from './content-loader.service';
import {HttpClientTestingModule} from '@angular/common/http/testing';
describe('ContentLoader', () => {
let service: ContentLoader;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ContentLoader],
imports: [HttpClientTestingModule],
});
service = TestBed.inject(ContentLoader);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
@@ -1,43 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {HttpClient} from '@angular/common/http';
import {Injectable, inject} from '@angular/core';
import {DocContent, DocsContentLoader} from '@angular/docs';
import {Router} from '@angular/router';
import {map} from 'rxjs/operators';
@Injectable()
export class ContentLoader implements DocsContentLoader {
private readonly cache = new Map<string, Promise<DocContent | undefined>>();
private readonly httpClient = inject(HttpClient);
private readonly router = inject(Router);
async getContent(path: string): Promise<DocContent | undefined> {
// If the path does not end with a file extension, add `.md.html` as the default
if (!path.match(/\.\w+$/)) {
path += '.md.html';
}
if (!this.cache.has(path)) {
try {
this.cache.set(
path,
this.httpClient
.get(`assets/content/${path}`, {
responseType: 'text',
})
.pipe(map((contents) => ({contents, id: path})))
.toPromise()
);
} catch {
this.router.navigateByUrl('/404');
}
}
return this.cache.get(path)!;
}
}
@@ -1,59 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {DOCUMENT, isPlatformServer} from '@angular/common';
import {ErrorHandler, PLATFORM_ID, inject} from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';
import {AnalyticsService} from '../analytics/analytics.service';
import {ErrorSnackBar, ErrorSnackBarData} from './error-snack-bar';
export class CustomErrorHandler implements ErrorHandler {
snackBar = inject(MatSnackBar);
document = inject(DOCUMENT);
isServer = isPlatformServer(inject(PLATFORM_ID));
analyticsService = inject(AnalyticsService);
get isOnline(): boolean {
if (this.isServer) return false;
const win = this.document.defaultView;
return win?.navigator.onLine ?? true;
}
handleError(error: any) {
if (typeof error.message === 'string') {
// Just looking at the first line of the error message (ignoring the call stack part),
// which should contain a pattern that we are looking for.
const firstLine = error.message.split('\n')[0];
if (this.isOnline && firstLine?.match(/chunk-(.*?)\.js/)) {
// Trying to load a chunk that doesn't exist anymore
// Users should reload the app.
this.openErrorSnackBar();
this.analyticsService.reportError('Chunk loading error');
}
}
// We still want to log every error
console.error(error);
}
openErrorSnackBar(): void {
this.snackBar
.openFromComponent(ErrorSnackBar, {
panelClass: 'adev-invert-mode',
data: {
message: `Our docs have been updated, reload the page to see the latest.`,
actionText: `Reload`,
} satisfies ErrorSnackBarData,
})
.onAction()
.subscribe(() => {
this.document.location.reload();
});
}
}
@@ -1,46 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {Component, Inject} from '@angular/core';
import {MAT_SNACK_BAR_DATA, MatSnackBarAction, MatSnackBarRef} from '@angular/material/snack-bar';
export interface ErrorSnackBarData {
message: string;
actionText?: string;
}
@Component({
selector: 'error-snack-bar',
template: `
{{ message }}
<button
class="adev-primary-btn"
type="button"
matSnackBarAction
[attr.text]="actionText"
(click)="snackBarRef.dismissWithAction()"
>
{{ actionText }}
</button>
`,
imports: [MatSnackBarAction],
standalone: true,
styles: `:host { display: flex; align-items: center; button { margin-left: 16px }}`,
})
export class ErrorSnackBar {
protected message: string;
protected actionText?: string;
constructor(
protected snackBarRef: MatSnackBarRef<ErrorSnackBar>,
@Inject(MAT_SNACK_BAR_DATA) public data: ErrorSnackBarData,
) {
this.message = data.message;
this.actionText = data.actionText;
}
}
@@ -1,27 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {TestBed} from '@angular/core/testing';
import {ExampleContentLoader} from './example-content-loader.service';
import {PREVIEWS_COMPONENTS} from '@angular/docs';
describe('ExampleContentLoader', () => {
let service: ExampleContentLoader;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ExampleContentLoader, {provide: PREVIEWS_COMPONENTS, useValue: []}],
});
service = TestBed.inject(ExampleContentLoader);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
@@ -1,19 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {Injectable, Type, inject} from '@angular/core';
import {PREVIEWS_COMPONENTS} from '@angular/docs';
@Injectable()
export class ExampleContentLoader {
private readonly previewsComponents = inject(PREVIEWS_COMPONENTS);
loadPreview(id: string): Promise<Type<unknown>> {
return this.previewsComponents[id]();
}
}
@@ -1,94 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {
DestroyRef,
ENVIRONMENT_INITIALIZER,
EnvironmentInjector,
Injectable,
Injector,
Provider,
ProviderToken,
Type,
createEnvironmentInjector,
inject,
} from '@angular/core';
/**
* inject a service asynchronously
*
* @param: injector. If the injector is a NodeInjector the loaded module will be destroyed alonside its injector
*/
export async function injectAsync<T>(
injector: Injector,
providerLoader: () => Promise<ProviderToken<T>>,
): Promise<T> {
const injectImpl = injector.get(InjectAsyncImpl);
return injectImpl.get(injector, providerLoader);
}
@Injectable({providedIn: 'root'})
class InjectAsyncImpl<T> {
private overrides = new WeakMap(); // no need to cleanup
override<T>(type: Type<T>, mock: Type<unknown>) {
this.overrides.set(type, mock);
}
async get(injector: Injector, providerLoader: () => Promise<ProviderToken<T>>): Promise<T> {
const type = await providerLoader();
// Check if we have overrides, O(1), low overhead
if (this.overrides.has(type)) {
const override = this.overrides.get(type);
return new override();
}
if (!(injector instanceof EnvironmentInjector)) {
// this is the DestroyRef of the component
const destroyRef = injector.get(DestroyRef);
// This is the parent injector of the injector we're creating
const environmentInjector = injector.get(EnvironmentInjector);
// Creating an environment injector to destroy it afterwards
const newInjector = createEnvironmentInjector([type as Provider], environmentInjector);
// Destroy the injector to trigger DestroyRef.onDestroy on our service
destroyRef.onDestroy(() => {
newInjector.destroy();
});
// We want to create the new instance of our service with our new injector
injector = newInjector;
}
return injector.get(type)!;
}
}
/**
* Helper function to mock the lazy loaded module in `injectAsync`
*
* @usage
* TestBed.configureTestingModule({
* providers: [
* mockAsyncProvider(SandboxService, fakeSandboxService)
* ]
* });
*/
export function mockAsyncProvider<T>(type: Type<T>, mock: Type<unknown>) {
return [
{
provide: ENVIRONMENT_INITIALIZER,
multi: true,
useValue: () => {
inject(InjectAsyncImpl).override(type, mock);
},
},
];
}
@@ -1,64 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {TestBed} from '@angular/core/testing';
import {ThemeManager} from './theme-manager.service';
import {LOCAL_STORAGE} from '@angular/docs';
describe('ThemeManager', () => {
let service: ThemeManager;
let localStorageSpy: jasmine.SpyObj<Storage>;
beforeEach(() => {
localStorageSpy = jasmine.createSpyObj<Storage>('localStorage', ['getItem', 'setItem']);
localStorageSpy.getItem.and.returnValue(null);
localStorageSpy.setItem.and.returnValue();
TestBed.configureTestingModule({
providers: [
{
provide: LOCAL_STORAGE,
useValue: localStorageSpy,
},
],
});
});
it('should set theme based on device preferences (auto) when user did not set theme manually', () => {
localStorageSpy.getItem.and.returnValue(null);
service = TestBed.inject(ThemeManager);
expect(service.theme()).toBe('auto');
});
it('should set theme based on stored user preferences (dark) when user already set theme manually', () => {
localStorageSpy.getItem.and.returnValue('dark');
service = TestBed.inject(ThemeManager);
expect(service.theme()).toBe('dark');
});
it('should set theme based on stored user preferences (light) when user already set theme manually', () => {
localStorageSpy.getItem.and.returnValue('light');
service = TestBed.inject(ThemeManager);
expect(service.theme()).toBe('light');
});
it('should set theme based on stored user preferences (auto) when user already set theme manually', () => {
localStorageSpy.getItem.and.returnValue('auto');
service = TestBed.inject(ThemeManager);
expect(service.theme()).toBe('auto');
});
});
@@ -1,94 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {DOCUMENT, isPlatformBrowser} from '@angular/common';
import {Injectable, PLATFORM_ID, inject, signal} from '@angular/core';
import {LOCAL_STORAGE} from '@angular/docs';
import {Subject} from 'rxjs';
// Keep these constants in sync with the code in index.html
export const THEME_PREFERENCE_LOCAL_STORAGE_KEY = 'themePreference';
export const DARK_MODE_CLASS_NAME = 'adev-dark-mode';
export const LIGHT_MODE_CLASS_NAME = 'adev-light-mode';
export const PREFERS_COLOR_SCHEME_DARK = '(prefers-color-scheme: dark)';
export type Theme = 'dark' | 'light' | 'auto';
@Injectable({
providedIn: 'root',
})
export class ThemeManager {
private readonly document = inject(DOCUMENT);
private readonly localStorage = inject(LOCAL_STORAGE);
private readonly platformId = inject(PLATFORM_ID);
readonly theme = signal<Theme | null>(this.getThemeFromLocalStorageValue());
// Zoneless - it's required to notify that theme was changed. It could be removed when signal-based components will be available.
readonly themeChanged$ = new Subject<void>();
constructor() {
if (!isPlatformBrowser(this.platformId)) {
return;
}
this.loadThemePreference();
this.watchPreferedColorScheme();
}
setTheme(theme: Theme): void {
this.theme.set(theme);
this.setThemeInLocalStorage();
this.setThemeBodyClasses(theme === 'auto' ? preferedScheme() : theme);
}
// 1. Read theme preferences stored in localStorage
// 2. In case when there are no stored user preferences, then read them from device preferences.
private loadThemePreference(): void {
const savedUserPreference = this.getThemeFromLocalStorageValue();
const useTheme = savedUserPreference ?? 'auto';
this.theme.set(useTheme);
this.setThemeBodyClasses(useTheme === 'auto' ? preferedScheme() : useTheme);
}
// Set theme classes on the body element
private setThemeBodyClasses(theme: 'dark' | 'light'): void {
const documentClassList = this.document.documentElement.classList;
if (theme === 'dark') {
documentClassList.add(DARK_MODE_CLASS_NAME);
documentClassList.remove(LIGHT_MODE_CLASS_NAME);
} else {
documentClassList.add(LIGHT_MODE_CLASS_NAME);
documentClassList.remove(DARK_MODE_CLASS_NAME);
}
this.themeChanged$.next();
}
private getThemeFromLocalStorageValue(): Theme | null {
const theme = this.localStorage?.getItem(THEME_PREFERENCE_LOCAL_STORAGE_KEY) as Theme | null;
return theme ?? null;
}
private setThemeInLocalStorage(): void {
if (this.theme()) {
this.localStorage?.setItem(THEME_PREFERENCE_LOCAL_STORAGE_KEY, this.theme()!);
}
}
private watchPreferedColorScheme() {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
const preferedScheme = event.matches ? 'dark' : 'light';
this.setThemeBodyClasses(preferedScheme);
});
}
}
function preferedScheme(): 'dark' | 'light' {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
@@ -1,24 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {TestBed} from '@angular/core/testing';
import {VersionManager} from './version-manager.service';
describe('VersionManager', () => {
let service: VersionManager;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(VersionManager);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
@@ -1,90 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {Injectable, VERSION, computed, signal} from '@angular/core';
// TODO(josephperrott): extract this out of the file into a managed location.
const VERSIONS_CONFIG = {
currentVersion: "stable",
historicalVersionsLinkPattern: "https://v{{version}}.angular.dev",
mainVersions: [
{
version: "stable",
url: "https://angular.dev"
},
{
version: "rc",
url: "https://rc.angular.dev"
},
{
version: "next",
url: "https://next.angular.dev"
}
]
};
export interface Version {
displayName: string;
version: VersionMode;
url: string;
}
export type VersionMode = 'stable' | 'rc' | 'next' | number;
export const INITIAL_DOCS_VERSION = 17;
export const VERSION_PATTERN_PLACEHOLDER = '{{version}}';
@Injectable({
providedIn: 'root',
})
export class VersionManager {
versions = signal<Version[]>([
...VERSIONS_CONFIG.mainVersions.map((item) =>
this.mapToVersion(item as Pick<Version, 'url' | 'version'>),
),
...this.getHistoricalVersions(),
]);
currentDocsVersion = computed(() => {
return this.versions().find(
(version) => version.version.toString() === VERSIONS_CONFIG.currentVersion,
);
});
private getHistoricalVersions(): Version[] {
const historicalVersions: Version[] = [];
for (let version = Number(VERSION.major) - 1; version >= INITIAL_DOCS_VERSION; version--) {
historicalVersions.push({
url: VERSIONS_CONFIG.historicalVersionsLinkPattern.replace(
VERSION_PATTERN_PLACEHOLDER,
version.toString(),
),
displayName: this.getVersion(version),
version,
});
}
return historicalVersions;
}
private mapToVersion(value: Pick<Version, 'url' | 'version'>): Version {
return {
...value,
displayName: this.getVersion(value.version),
};
}
private getVersion(versionMode: VersionMode): string {
if (versionMode === 'stable') {
return `v${VERSION.major}`;
}
if (Number.isInteger(versionMode)) {
return `v${versionMode}`;
}
return versionMode.toString();
}
}
@@ -1,105 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {Injectable, inject} from '@angular/core';
import {LOCAL_STORAGE, WINDOW, isMobile} from '@angular/docs';
import {MatSnackBar} from '@angular/material/snack-bar';
import {ErrorSnackBar, ErrorSnackBarData} from '../core/services/errors-handling/error-snack-bar';
export const MAX_RECOMMENDED_WEBCONTAINERS_INSTANCES = 3;
export const WEBCONTAINERS_COUNTER_KEY = 'numberOfWebcontainers';
export enum AlertReason {
OUT_OF_MEMORY,
MOBILE,
}
@Injectable({providedIn: 'root'})
export class AlertManager {
private readonly localStorage = inject(LOCAL_STORAGE);
private readonly window = inject(WINDOW);
private snackBar = inject(MatSnackBar);
init(): void {
this.listenToLocalStorageValuesChange();
this.increaseInstancesCounter();
this.decreaseInstancesCounterOnPageClose();
this.checkDevice();
}
private listenToLocalStorageValuesChange(): void {
this.window.addEventListener('storage', () => {
const countOfRunningInstances = this.getStoredCountOfWebcontainerInstances();
this.validateRunningInstances(countOfRunningInstances);
});
}
// Increase count of the running instances of the webcontainers when user will boot the webcontainer
private increaseInstancesCounter(): void {
const countOfRunningInstances = this.getStoredCountOfWebcontainerInstances() + 1;
this.localStorage?.setItem(WEBCONTAINERS_COUNTER_KEY, countOfRunningInstances.toString());
this.validateRunningInstances(countOfRunningInstances);
}
// Decrease count of running instances of the webcontainers when user close the app.
private decreaseInstancesCounterOnPageClose(): void {
this.window.addEventListener('beforeunload', () => {
const countOfRunningInstances = this.getStoredCountOfWebcontainerInstances() - 1;
this.localStorage?.setItem(WEBCONTAINERS_COUNTER_KEY, countOfRunningInstances.toString());
this.validateRunningInstances(countOfRunningInstances);
});
}
private getStoredCountOfWebcontainerInstances(): number {
const countStoredInLocalStorage = this.localStorage?.getItem(WEBCONTAINERS_COUNTER_KEY);
if (!countStoredInLocalStorage || Number.isNaN(countStoredInLocalStorage)) {
return 0;
}
return Number(countStoredInLocalStorage);
}
private validateRunningInstances(countOfRunningInstances: number): void {
if (countOfRunningInstances > MAX_RECOMMENDED_WEBCONTAINERS_INSTANCES) {
this.openSnackBar(AlertReason.OUT_OF_MEMORY);
}
}
private checkDevice() {
if (isMobile) {
this.openSnackBar(AlertReason.MOBILE);
}
}
private openSnackBar(reason: AlertReason) {
let message = '';
switch (reason) {
case AlertReason.OUT_OF_MEMORY:
message = `Your browser is currently limiting the memory available to run the Angular Tutorials or Playground. If you have multiple tabs open with Tutorials or Playground, please close some of them and refresh this page.`;
break;
case AlertReason.MOBILE:
message = `You are running the embedded editor in a mobile device, this may result in an Out of memory error.`;
break;
}
this.snackBar.openFromComponent(ErrorSnackBar, {
panelClass: 'adev-invert-mode',
data: {
message,
actionText: 'I understand',
} satisfies ErrorSnackBarData,
});
}
}
@@ -1,69 +0,0 @@
<!-- Code Editor Tabs -->
<div class="adev-code-editor-tabs">
<div class="adev-tabs-and-plus">
<mat-tab-group animationDuration="0ms" mat-stretch-tabs="false">
<!--
Hint: we would like to keep only one instance of #codeEditorWrapper,
that's why we're not placing this element as content of mat-tab, just to
not call another time init method from CodeMirrorEditor service.
-->
@for (file of files(); track file) {
<mat-tab #tab>
<ng-template mat-tab-label>
{{ file.filename.replace('src/', '') }}
@if (tab.isActive && canDeleteFile(file.filename)) {
<button
class="adev-delete-file"
aria-label="Delete file"
(click)="deleteFile(file.filename)"
>
<docs-icon>delete</docs-icon>
</button>
}
</ng-template>
</mat-tab>
} @if (isCreatingFile()) {
<mat-tab>
<ng-template mat-tab-label>
<form (submit)="createFile($event)">
<input
name="new-file"
class="adev-new-file-input"
#createFileInput
(keydown)="$event.stopPropagation()"
/>
</form>
</ng-template>
</mat-tab>
}
</mat-tab-group>
<button class="adev-add-file" (click)="onAddButtonClick()" aria-label="Add a new file">
<docs-icon>add</docs-icon>
</button>
</div>
<button
class="adev-editor-download-button"
type="button"
(click)="downloadCurrentCodeEditorState()"
aria-label="Download current code in editor"
>
<docs-icon>download</docs-icon>
</button>
</div>
<!-- Code Editor -->
<div #codeEditorWrapper class="adev-code-editor-wrapper"></div>
@if (displayErrorsBox()) {
<div class="adev-inline-errors-box">
<button type="button" (click)="closeErrorsBox()">
<docs-icon class="docs-icon_high-contrast">close</docs-icon>
</button>
<ul>
@for (error of errors(); track error) {
<li>(line: {{ error.lineNumber }}:{{ error.characterPosition }}) {{ error.message }}</li>
}
</ul>
</div>
}
@@ -1,185 +0,0 @@
:host {
// backgrounds
--code-editor-selection-background: color-mix(
in srgb,
var(--selection-background) 5%,
var(--octonary-contrast)
);
--code-editor-focused-selection-background: color-mix(
in srgb,
var(--selection-background) 12%,
var(--octonary-contrast)
);
// text base colors
--code-editor-text-base-color: var(--primary-contrast);
// tooltips
--code-editor-tooltip-background: color-mix(
in srgb,
var(--bright-blue),
var(--page-background) 90%
);
--code-editor-tooltip-color: var(--primary-contrast);
--code-editor-tooltip-border: 1px solid
color-mix(in srgb, var(--bright-blue), var(--page-background) 70%);
--code-editor-tooltip-border-radius: 0.25rem;
// autocomplete
--code-editor-autocomplete-item-background: var(--senary-contrast);
--code-editor-autocomplete-item-color: var(--primary-contrast);
// cursor
--code-name: var(--primary-contrast);
--code-editor-cursor-color: var(--code-name);
--code-variable-name: var(--bright-blue);
--code-property-name: var(--code-name);
--code-definition-keyword: var(--electric-violet);
// comments
--code-comment: var(--electric-violet);
--code-line-comment: var(--symbolic-gray);
--code-block-comment: var(--symbolic-brown);
--code-doc-comment: var(--code-comment);
// keywords
--code-keyword: var(--electric-violet);
--code-modifier: var(--code-keyword);
--code-operator-keyword: var(--code-keyword);
--code-control-keyword: var(--code-keyword);
--code-module-keyword: var(--code-keyword);
// structural
--code-brace: var(--vivid-pink);
// Misc
--code-bool: var(--bright-blue);
--code-string: var(--orange-red);
--code-regexp: var(--orange-red);
--code-tags: var(--bright-blue);
--code-component: var(--primary-contrast);
--code-type-name: var(--vivid-pink);
--code-self: var(--orange-red);
position: relative;
}
.adev-code-editor-tabs {
display: flex;
background: var(--octonary-contrast);
border-block-end: 1px solid var(--senary-contrast);
transition: background 0.3s ease, border 0.3s ease;
}
.adev-tabs-and-plus {
display: flex;
width: calc(100% - 2.875rem);
min-height: 48px;
}
.adev-add-file,
.adev-delete-file {
docs-icon {
color: var(--gray-400);
transition: color 0.3s ease;
font-size: 1.2rem;
}
&:hover {
docs-icon {
color: var(--primary-contrast);
}
}
}
.adev-delete-file {
padding-inline-start: 0.1rem;
padding-inline-end: 0;
margin-block-start: 0.2rem;
docs-icon {
font-size: 1rem;
}
}
.adev-new-file-input {
color: var(--primary-contrast);
border: none;
border-radius: 0;
border-block-end: 1px solid var(--senary-contrast);
background: transparent;
outline: none;
transition: color 0.3s ease;
&:focus {
background: transparent;
border-block-end: 1px solid var(--primary-contrast);
}
}
.adev-code-editor-wrapper {
// adjust height for terminal tabs
// so that scroll bar & content do not render under tabs
height: calc(100% - 49px);
&-hidden {
display: none;
}
}
.adev-inline-errors-box {
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
right: 0.5rem;
padding: 0.25rem;
background-color: color-mix(in srgb, var(--bright-blue), var(--page-background) 90%);
border: 1px solid color-mix(in srgb, var(--bright-blue), var(--page-background) 70%);
border-radius: 0.25rem;
button {
position: absolute;
top: 0;
right: 0;
padding: 0.25rem;
docs-icon {
font-size: 1.25rem;
color: var(--quaternary-contrast);
transition: color 0.3s ease;
}
&:hover {
docs-icon {
color: var(--primary-contrast);
}
}
}
ul {
padding: 0;
margin: 0;
margin-inline: 1.25rem;
color: var(--tertiary-contrast);
max-height: 200px;
overflow: auto;
}
}
.adev-editor-download-button {
padding: 0;
width: 2.875rem;
border-radius: 0 0.19rem 0 0;
background: var(--octonary-contrast);
border-inline-start: 1px solid var(--senary-contrast);
docs-icon {
color: var(--gray-400);
transition: color 0.3s ease;
font-size: 1.3rem;
}
&:hover {
docs-icon {
color: var(--primary-contrast);
}
}
}
@@ -1,203 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {ChangeDetectorRef, signal} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {MatTabGroupHarness} from '@angular/material/tabs/testing';
import {By} from '@angular/platform-browser';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {BehaviorSubject} from 'rxjs';
import {EmbeddedTutorialManager} from '../embedded-tutorial-manager.service';
import {CodeEditor, REQUIRED_FILES} from './code-editor.component';
import {CodeMirrorEditor} from './code-mirror-editor.service';
import {FakeChangeDetectorRef} from '@angular/docs/testing';
import {TutorialType} from '@angular/docs';
const files = [
{filename: 'a', content: '', language: {} as any},
{filename: 'b', content: '', language: {} as any},
{filename: 'c', content: '', language: {} as any},
...Array.from(REQUIRED_FILES).map((filename) => ({
filename,
content: '',
language: {} as any,
})),
];
class FakeCodeMirrorEditor implements Partial<CodeMirrorEditor> {
init(element: HTMLElement) {}
changeCurrentFile(fileName: string) {}
disable() {}
files = signal(files);
currentFile = signal(this.files()[0]);
openFiles = this.files;
}
const codeMirrorEditorService = new FakeCodeMirrorEditor();
const fakeChangeDetectorRef = new FakeChangeDetectorRef();
describe('CodeEditor', () => {
let component: CodeEditor;
let fixture: ComponentFixture<CodeEditor>;
let loader: HarnessLoader;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [CodeEditor, NoopAnimationsModule],
providers: [
{
provide: CodeMirrorEditor,
useValue: codeMirrorEditorService,
},
{
provide: ChangeDetectorRef,
useValue: fakeChangeDetectorRef,
},
{
provide: EmbeddedTutorialManager,
useValue: {
tutorialChanged$: new BehaviorSubject(true),
tutorialId: () => 'tutorial',
tutorialFilesystemTree: () => ({'app.component.ts': ''}),
commonFilesystemTree: () => ({'app.component.ts': ''}),
openFiles: () => ['app.component.ts'],
tutorialFiles: () => ({'app.component.ts': ''}),
nextTutorial: () => 'next-tutorial',
previousTutorial: () => 'previous-tutorial',
type: () => TutorialType.EDITOR,
title: () => 'Tutorial',
},
},
],
}).compileComponents();
fixture = TestBed.createComponent(CodeEditor);
loader = TestbedHarnessEnvironment.loader(fixture);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should initialize the code editor service afterViewInit with the code editor wrapper element', () => {
const codeMirrorEditorInitSpy = spyOn(codeMirrorEditorService, 'init');
component.ngAfterViewInit();
expect(codeMirrorEditorInitSpy).toHaveBeenCalledWith(
component['codeEditorWrapperRef'].nativeElement,
);
});
it('should render tabs based on filenames order', async () => {
component.ngAfterViewInit();
const matTabGroup = await loader.getHarness(MatTabGroupHarness);
const tabs = await matTabGroup.getTabs();
const expectedLabels = files.map((file, index) => {
const label = file.filename.replace('src/', '');
if (index === 0) return `${label} delete`;
return label;
});
for (const [index, tab] of tabs.entries()) {
const tabLabel = await tab.getLabel();
expect(tabLabel).toBe(expectedLabels[index]);
}
});
describe('Tabs selection', () => {
let codeMirrorEditorChangeCurrentFileSpy: jasmine.Spy<(fileName: string) => void>;
beforeEach(() => {
codeMirrorEditorChangeCurrentFileSpy = spyOn(codeMirrorEditorService, 'changeCurrentFile');
component.ngAfterViewInit();
});
it('should change file content when clicking on an unselected tab', async () => {
const matTabGroup = await loader.getHarness(MatTabGroupHarness);
const tabs = await matTabGroup.getTabs();
expect(await tabs[0].isSelected());
await tabs[1].select();
expect(codeMirrorEditorChangeCurrentFileSpy).toHaveBeenCalledWith(files[1].filename);
});
it('should not change file content when clicking on a selected tab', async () => {
const matTabGroup = await loader.getHarness(MatTabGroupHarness);
const tabs = await matTabGroup.getTabs();
expect(await tabs[0].isSelected());
await tabs[0].select();
expect(codeMirrorEditorChangeCurrentFileSpy).not.toHaveBeenCalled();
});
it('should focused on a new tab when adding a new file', async () => {
const button = fixture.debugElement.query(By.css('button.adev-add-file')).nativeElement;
button.click();
const matTabGroup = await loader.getHarness(MatTabGroupHarness);
const tabs = await matTabGroup.getTabs();
expect(await tabs[files.length].isSelected()).toBeTrue();
});
it('should change file content when clicking on unselected tab while creating a new file', async () => {
const button = fixture.debugElement.query(By.css('button.adev-add-file')).nativeElement;
button.click();
const matTabGroup = await loader.getHarness(MatTabGroupHarness);
const tabs = await matTabGroup.getTabs();
await tabs[2].select();
expect(codeMirrorEditorChangeCurrentFileSpy).toHaveBeenCalledWith(files[2].filename);
});
it('start creating a new file, select an existing tab, should not change file content when return back on a new file tab', async () => {
const button = fixture.debugElement.query(By.css('button.adev-add-file')).nativeElement;
button.click();
const matTabGroup = await loader.getHarness(MatTabGroupHarness);
const tabs = await matTabGroup.getTabs();
await tabs[1].select();
expect(codeMirrorEditorChangeCurrentFileSpy).toHaveBeenCalledWith(files[1].filename);
codeMirrorEditorChangeCurrentFileSpy.calls.reset();
await tabs[files.length].select();
expect(codeMirrorEditorChangeCurrentFileSpy).not.toHaveBeenCalled();
});
});
it('should not allow to delete a required file', async () => {
const matTabGroup = await loader.getHarness(MatTabGroupHarness);
const tabs = await matTabGroup.getTabs();
const requiredFilesTabIndexes = files
.filter((file) => REQUIRED_FILES.has(file.filename))
.map((file) => files.indexOf(file));
for (const tabIndex of requiredFilesTabIndexes) {
const tab = tabs[tabIndex];
await tab.select();
expect(fixture.debugElement.query(By.css('[aria-label="Delete file"]'))).toBeNull();
}
});
});
@@ -1,175 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {NgFor, NgIf} from '@angular/common';
import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
DestroyRef,
ElementRef,
OnDestroy,
ViewChild,
inject,
signal,
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {MatTabGroup, MatTabsModule} from '@angular/material/tabs';
import {debounceTime, map} from 'rxjs';
import {TerminalType} from '../terminal/terminal-handler.service';
import {EmbeddedTutorialManager} from '../embedded-tutorial-manager.service';
import {CodeMirrorEditor} from './code-mirror-editor.service';
import {DiagnosticWithLocation, DiagnosticsState} from './services/diagnostics-state.service';
import {DownloadManager} from '../download-manager.service';
import {IconComponent} from '@angular/docs';
export const REQUIRED_FILES = new Set(['src/main.ts', 'src/index.html']);
@Component({
selector: 'docs-tutorial-code-editor',
standalone: true,
templateUrl: './code-editor.component.html',
styleUrls: ['./code-editor.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, NgFor, MatTabsModule, IconComponent],
})
export class CodeEditor implements AfterViewInit, OnDestroy {
@ViewChild('codeEditorWrapper') private codeEditorWrapperRef!: ElementRef<HTMLDivElement>;
@ViewChild(MatTabGroup) private matTabGroup!: MatTabGroup;
private createFileInputRef?: ElementRef<HTMLInputElement>;
@ViewChild('createFileInput') protected set setFileInputRef(
element: ElementRef<HTMLInputElement>,
) {
if (element) {
element.nativeElement.focus();
this.createFileInputRef = element;
}
}
private readonly destroyRef = inject(DestroyRef);
private readonly codeMirrorEditor = inject(CodeMirrorEditor);
private readonly diagnosticsState = inject(DiagnosticsState);
private readonly downloadManager = inject(DownloadManager);
private readonly embeddedTutorialManager = inject(EmbeddedTutorialManager);
private readonly errors$ = this.diagnosticsState.diagnostics$.pipe(
// Display errors one second after code update
debounceTime(1000),
map((diagnosticsItem) =>
diagnosticsItem
.filter((item) => item.severity === 'error')
.sort((a, b) =>
a.lineNumber != b.lineNumber
? a.lineNumber - b.lineNumber
: a.characterPosition - b.characterPosition,
),
),
takeUntilDestroyed(this.destroyRef),
);
readonly TerminalType = TerminalType;
readonly displayErrorsBox = signal<boolean>(false);
readonly errors = signal<DiagnosticWithLocation[]>([]);
readonly files = this.codeMirrorEditor.openFiles;
readonly isCreatingFile = signal<boolean>(false);
ngAfterViewInit() {
this.codeMirrorEditor.init(this.codeEditorWrapperRef.nativeElement);
this.listenToDiagnosticsChange();
this.listenToTabChange();
this.setSelectedTabOnTutorialChange();
}
ngOnDestroy(): void {
this.codeMirrorEditor.disable();
}
async downloadCurrentCodeEditorState(): Promise<void> {
const name = this.embeddedTutorialManager.tutorialId();
await this.downloadManager.downloadCurrentStateOfTheSolution(name);
}
closeErrorsBox(): void {
this.displayErrorsBox.set(false);
}
canDeleteFile(filename: string) {
return !REQUIRED_FILES.has(filename);
}
async deleteFile(filename: string) {
await this.codeMirrorEditor.deleteFile(filename);
this.matTabGroup.selectedIndex = 0;
}
onAddButtonClick() {
this.isCreatingFile.set(true);
this.matTabGroup.selectedIndex = this.files().length;
}
async createFile(event: SubmitEvent) {
if (!this.createFileInputRef) return;
event.preventDefault();
const newFileInputValue = this.createFileInputRef.nativeElement.value;
if (newFileInputValue) {
if (newFileInputValue.includes('..')) {
alert('File name can not contain ".."');
return;
}
// src is hidden from users, here we manually add it to the new filename
const newFile = 'src/' + newFileInputValue;
if (this.files().find(({filename}) => filename.includes(newFile))) {
alert('File already exists');
return;
}
await this.codeMirrorEditor.createFile(newFile);
}
this.isCreatingFile.set(false);
}
private listenToDiagnosticsChange(): void {
this.errors$.subscribe((diagnostics) => {
this.errors.set(diagnostics);
this.displayErrorsBox.set(diagnostics.length > 0);
});
}
private setSelectedTabOnTutorialChange() {
this.embeddedTutorialManager.tutorialChanged$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => {
// selected file on project change is always the first
this.matTabGroup.selectedIndex = 0;
});
}
private listenToTabChange() {
this.matTabGroup.selectedIndexChange
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((index) => {
const selectedFile = this.files()[index];
if (selectedFile) {
this.codeMirrorEditor.changeCurrentFile(selectedFile.filename);
}
});
}
}
@@ -1,176 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {signal} from '@angular/core';
import {TestBed, fakeAsync, tick} from '@angular/core/testing';
import {BehaviorSubject, Subject} from 'rxjs';
import {EditorState} from '@codemirror/state';
import type {FileSystemTree} from '@webcontainer/api';
import {NodeRuntimeSandbox} from '../node-runtime-sandbox.service';
import {EmbeddedTutorialManager} from '../embedded-tutorial-manager.service';
import {CodeMirrorEditor, EDITOR_CONTENT_CHANGE_DELAY_MILLIES} from './code-mirror-editor.service';
import {
TutorialConfig,
TutorialMetadata,
} from '@angular/docs';
class FakeNodeRuntimeSandbox {
async writeFile(path: string, content: string) {}
createdFile$ = new Subject<void>();
async readFile(path: string) {
return Promise.resolve('content');
}
}
const files = ['1.ts', '2.ts', '3.ts'];
// reverse the files list to test openFiles order
const filesReverse = [...files].reverse();
export class FakeEmbeddedTutorialManager {
commonFilesystemTree = signal<FileSystemTree | null>(null);
previousTutorial = signal<string | undefined>(undefined);
nextTutorial = signal<string | undefined>(undefined);
tutorialId = signal<string>('fake-tutorial');
tutorialFiles = signal<NonNullable<TutorialMetadata['tutorialFiles']>>(
// use a reverse map to test openFiles order
Object.fromEntries(filesReverse.map((file) => [file, ''])),
);
openFiles = signal<TutorialConfig['openFiles']>(files);
tutorialFilesystemTree = signal<FileSystemTree>(
Object.fromEntries(
files.map((file) => [
file,
{
file: {
contents: this.tutorialFiles()![0],
},
},
]),
),
);
private _shouldChangeTutorial$ = new BehaviorSubject<boolean>(false);
tutorialChanged$ = this._shouldChangeTutorial$.asObservable();
fetchAndSetTutorialFiles(tutorial: string): Promise<void> {
return Promise.resolve();
}
fetchCommonFiles(): Promise<FileSystemTree> {
return Promise.resolve({});
}
}
describe('CodeMirrorEditor', () => {
let service: CodeMirrorEditor;
const fakeNodeRuntimeSandbox = new FakeNodeRuntimeSandbox();
const fakeEmbeddedTutorialManager = new FakeEmbeddedTutorialManager();
function dispatchDocumentChange(newContent: string) {
for (let i = 0; i < newContent.length; i++) {
service['_editorView']?.dispatch({
changes: {from: i, insert: newContent[i]},
selection: {anchor: i, head: 0},
});
}
}
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
CodeMirrorEditor,
{
provide: NodeRuntimeSandbox,
useValue: fakeNodeRuntimeSandbox,
},
{
provide: EmbeddedTutorialManager,
useValue: fakeEmbeddedTutorialManager,
},
],
});
service = TestBed.inject(CodeMirrorEditor);
const parentElement = document.createElement('div');
service.init(parentElement);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
it('should initialize the editor', () => {
expect(service['_editorView']).toBeDefined();
expect(service.files()).toBeDefined();
expect(service.currentFile()).toBeDefined();
const editorState = service['_editorStates'].get(service.currentFile().filename);
expect(editorState).toBeInstanceOf(EditorState);
});
it('should change the current file', () => {
const newFilename = files.at(-1)!;
service.changeCurrentFile(newFilename);
expect(service.currentFile().filename).toEqual(newFilename);
const editorState = service['_editorStates'].get(newFilename);
const editorContent = editorState?.doc.toString();
const newFileContent = service.files().find((file) => file.filename === newFilename)?.content;
expect(editorContent).toBe(newFileContent);
});
it('should update the current file content on change', async () => {
const newContent = 'new content';
dispatchDocumentChange(newContent);
const updatedEditorState = service['_editorStates'].get(service.currentFile().filename);
expect(updatedEditorState?.doc.toString()).toBe(newContent);
const fileContentOnFilesSignal = service
.files()
.find((file) => file.filename === service.currentFile().filename)?.content;
expect(fileContentOnFilesSignal).toBe(newContent);
expect(service.currentFile().content).toBe(newContent);
});
it('should write the changed file content to the sandbox filesystem', fakeAsync(() => {
const newContent = 'new content';
const nodeRuntimeSandboxSpy = spyOn(fakeNodeRuntimeSandbox, 'writeFile');
dispatchDocumentChange(newContent);
tick(EDITOR_CONTENT_CHANGE_DELAY_MILLIES);
expect(nodeRuntimeSandboxSpy).toHaveBeenCalledWith(service.currentFile().filename, newContent);
}));
it('should add created file to code editor', async () => {
const newFile = 'new-component.component.ts';
await service['addCreatedFileToCodeEditor'](newFile);
expect(service['embeddedTutorialManager'].tutorialFiles()[newFile]).toBeDefined();
expect(service.files().find((file) => file.filename === newFile)).toBeDefined();
});
it('should keep openFiles order', () => {
service['setProjectFiles']();
for (const [index, openFile] of service['openFiles']().entries()) {
expect(openFile.filename).toEqual(service['embeddedTutorialManager'].openFiles()[index]);
}
});
});
@@ -1,458 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {DestroyRef, Injectable, inject, signal} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {Subject, Subscription, debounceTime, filter, map} from 'rxjs';
import {LRLanguage, LanguageSupport} from '@codemirror/language';
import {EditorState, Transaction} from '@codemirror/state';
import {EditorView, placeholder as placeholderExtension} from '@codemirror/view';
import {EmbeddedTutorialManager} from '../embedded-tutorial-manager.service';
import {NodeRuntimeSandbox} from '../node-runtime-sandbox.service';
import {TypingsLoader} from '../typings-loader.service';
import {FileAndContentRecord} from '@angular/docs';
import {CODE_EDITOR_EXTENSIONS} from './constants/code-editor-extensions';
import {LANGUAGES} from './constants/code-editor-languages';
import {getAutocompleteExtension} from './extensions/autocomplete';
import {getDiagnosticsExtension} from './extensions/diagnostics';
import {getTooltipExtension} from './extensions/tooltip';
import {DiagnosticsState} from './services/diagnostics-state.service';
import {TsVfsWorkerActions} from './workers/enums/actions';
import {CodeChangeRequest} from './workers/interfaces/code-change-request';
import {ActionMessage} from './workers/interfaces/message';
import {NodeRuntimeState} from '../node-runtime-state.service';
export interface EditorFile {
filename: string;
content: string;
language: LanguageSupport | LRLanguage;
}
/**
* The delay between the last typed character and the actual file save.
* This is used to prevent saving the file on every keystroke.
*
* Important! this value is intentionally set a bit higher than it needs to be, because sending
* changes too frequently to the web container appears to put it in a state where it stops picking
* up changes. See issue #691 for context.
*/
export const EDITOR_CONTENT_CHANGE_DELAY_MILLIES = 500;
const INITIAL_STATES = {
_editorView: null,
files: [],
currentFile: {
filename: '',
content: '',
language: LANGUAGES['ts'],
},
contentChangeListenerSubscription$: undefined,
tutorialChangeListener$: undefined,
createdFile$: undefined,
};
@Injectable({providedIn: 'root'})
export class CodeMirrorEditor {
// TODO: handle files created by the user, e.g. after running `ng generate component`
files = signal<EditorFile[]>(INITIAL_STATES.files);
openFiles = signal<EditorFile[]>(INITIAL_STATES.files);
currentFile = signal<EditorFile>(INITIAL_STATES.currentFile);
// An instance of web worker used to run virtual TypeScript environment in the browser.
// It allows to enrich CodeMirror UX for TypeScript files.
private tsVfsWorker: Worker | null = null;
// EventManager gives ability to communicate between tsVfsWorker and CodeMirror instance
private readonly eventManager$ = new Subject<ActionMessage>();
private readonly nodeRuntimeSandbox = inject(NodeRuntimeSandbox);
private readonly nodeRuntimeState = inject(NodeRuntimeState);
private readonly embeddedTutorialManager = inject(EmbeddedTutorialManager);
private readonly typingsLoader = inject(TypingsLoader);
private readonly destroyRef = inject(DestroyRef);
private readonly diagnosticsState = inject(DiagnosticsState);
private _editorView: EditorView | null = INITIAL_STATES._editorView;
private readonly _editorStates = new Map<EditorFile['filename'], EditorState>();
private readonly contentChanged$ = new Subject<string>();
private readonly contentChangeListener$ = this.contentChanged$.asObservable();
private contentChangeListenerSubscription$: Subscription | undefined =
INITIAL_STATES.contentChangeListenerSubscription$;
private tutorialChangeListener$: Subscription | undefined =
INITIAL_STATES.tutorialChangeListener$;
private createdFileListener$: Subscription | undefined = INITIAL_STATES.createdFile$;
init(parentElement: HTMLElement): void {
if (this._editorView) return;
if (!this.nodeRuntimeState.error()) {
this.initTypescriptVfsWorker();
this.saveLibrariesTypes();
}
this._editorView = new EditorView({
parent: parentElement,
state: this.createEditorState(),
dispatchTransactions: (transactions, view) => {
view.update(transactions);
for (const transaction of transactions) {
if (transaction.docChanged && this.currentFile().filename) {
this.contentChanged$.next(transaction.state.doc.toString());
this.changeFileContentsOnRealTime(transaction);
}
}
},
});
this.listenToProjectChanges();
this.contentChangeListenerSubscription$ = this.contentChangeListener$
.pipe(debounceTime(EDITOR_CONTENT_CHANGE_DELAY_MILLIES), takeUntilDestroyed(this.destroyRef))
.subscribe(async (fileContents) => {
await this.changeFileContentsScheduled(fileContents);
});
this.createdFileListener$ = this.nodeRuntimeSandbox.createdFile$.subscribe(
async (createdFile) => {
await this.addCreatedFileToCodeEditor(createdFile);
},
);
// Create TypeScript virtual filesystem when default files map is created
// and files are set
this.eventManager$
.pipe(
filter(
(event) =>
event.action === TsVfsWorkerActions.INIT_DEFAULT_FILE_SYSTEM_MAP &&
this.files().length > 0,
),
takeUntilDestroyed(this.destroyRef),
)
.subscribe(() => {
this.createVfsEnv();
});
}
disable(): void {
this._editorView?.destroy();
this._editorView = null;
this._editorView = INITIAL_STATES._editorView;
this.files.set(INITIAL_STATES.files);
this.currentFile.set(INITIAL_STATES.currentFile);
this._editorStates.clear();
this.contentChangeListenerSubscription$?.unsubscribe();
this.contentChangeListenerSubscription$ = INITIAL_STATES.contentChangeListenerSubscription$;
this.tutorialChangeListener$?.unsubscribe();
this.tutorialChangeListener$ = INITIAL_STATES.tutorialChangeListener$;
this.createdFileListener$?.unsubscribe();
this.createdFileListener$ = INITIAL_STATES.createdFile$;
}
changeCurrentFile(fileName: string): void {
if (!this._editorView) return;
const newFile = this.files().find((file) => file.filename === fileName);
if (!newFile) throw new Error(`File '${fileName}' not found`);
this.currentFile.set(newFile);
const editorState = this._editorStates.get(newFile.filename) ?? this.createEditorState();
this._editorView.setState(editorState);
}
private initTypescriptVfsWorker(): void {
if (this.tsVfsWorker) {
return;
}
this.tsVfsWorker = new Worker(new URL('./workers/typescript-vfs.worker', import.meta.url), {
type: 'module',
});
this.tsVfsWorker.addEventListener('message', ({data}: MessageEvent<ActionMessage>) => {
this.eventManager$.next(data);
});
}
private saveLibrariesTypes(): void {
this.typingsLoader.typings$
.pipe(
filter((typings) => typings.length > 0),
takeUntilDestroyed(this.destroyRef),
)
.subscribe((typings) => {
this.sendRequestToTsVfs({
action: TsVfsWorkerActions.DEFINE_TYPES_REQUEST,
data: typings,
});
// Reset current file to trigger diagnostics after preload @angular libraries.
this._editorView?.setState(this._editorStates.get(this.currentFile().filename)!);
});
}
// Method is responsible for sending request to Typescript VFS worker.
private sendRequestToTsVfs = <T>(request: ActionMessage<T>) => {
if (!this.tsVfsWorker) return;
// Send message to tsVfsWorker only when current file is TypeScript file.
if (!this.currentFile().filename.endsWith('.ts')) return;
this.tsVfsWorker.postMessage(request);
// tslint:disable-next-line:semicolon
};
private getVfsEnvFileSystemMap(): Map<string, string> {
const fileSystemMap = new Map<string, string>();
for (const file of this.files().filter((file) => file.filename.endsWith('.ts'))) {
fileSystemMap.set(`/${file.filename}`, file.content);
}
return fileSystemMap;
}
/**
* Create virtual environment for TypeScript files
*/
private createVfsEnv(): void {
this.sendRequestToTsVfs<Map<string, string>>({
action: TsVfsWorkerActions.CREATE_VFS_ENV_REQUEST,
data: this.getVfsEnvFileSystemMap(),
});
}
/**
* Update virtual TypeScript file system with current code editor files
*/
private updateVfsEnv(): void {
this.sendRequestToTsVfs<Map<string, string>>({
action: TsVfsWorkerActions.UPDATE_VFS_ENV_REQUEST,
data: this.getVfsEnvFileSystemMap(),
});
}
private listenToProjectChanges() {
this.tutorialChangeListener$ = this.embeddedTutorialManager.tutorialChanged$
.pipe(
map(() => this.embeddedTutorialManager.tutorialFiles()),
filter((tutorialFiles) => Object.keys(tutorialFiles).length > 0),
takeUntilDestroyed(this.destroyRef),
)
.subscribe(() => {
this.changeProject();
});
}
private changeProject() {
this.setProjectFiles();
this._editorStates.clear();
this.changeCurrentFile(this.currentFile().filename);
this.updateVfsEnv();
}
private setProjectFiles(): void {
const tutorialFiles = this.getTutorialFiles(this.embeddedTutorialManager.tutorialFiles());
const openFiles: EditorFile[] = [];
// iterate openFiles to keep files order
for (const openFileName of this.embeddedTutorialManager.openFiles()) {
const openFile = tutorialFiles.find(({filename}) => filename === openFileName);
if (openFile) {
openFiles.push(openFile);
}
}
this.files.set(tutorialFiles);
this.openFiles.set(openFiles);
this.changeCurrentFile(openFiles[0].filename);
}
/**
* Update the code editor files when files are created
*/
private async addCreatedFileToCodeEditor(createdFile: string): Promise<void> {
const fileContents = await this.nodeRuntimeSandbox.readFile(createdFile);
this.embeddedTutorialManager.tutorialFiles.update((files) => ({
...files,
[createdFile]: fileContents,
}));
this.embeddedTutorialManager.openFiles.update((files) => [...files, createdFile]);
this.setProjectFiles();
this.updateVfsEnv();
this.saveLibrariesTypes();
}
async createFile(filename: string) {
// if file already exists, use its content
const content = await this.nodeRuntimeSandbox.readFile(filename).catch((error) => {
// empty content if file does not exist
if (error.message.includes('ENOENT')) return '';
else throw error;
});
await this.nodeRuntimeSandbox.writeFile(filename, content);
this.embeddedTutorialManager.tutorialFiles.update((files) => ({
...files,
[filename]: content,
}));
this.embeddedTutorialManager.openFiles.update((files) => [...files, filename]);
this.setProjectFiles();
this.updateVfsEnv();
this.saveLibrariesTypes();
this.changeCurrentFile(filename);
}
async deleteFile(deletedFile: string): Promise<void> {
await this.nodeRuntimeSandbox.deleteFile(deletedFile);
this.embeddedTutorialManager.tutorialFiles.update((files) => {
delete files[deletedFile];
return files;
});
this.embeddedTutorialManager.openFiles.update((files) =>
files.filter((file) => file !== deletedFile),
);
this.setProjectFiles();
this.updateVfsEnv();
this.saveLibrariesTypes();
}
private createEditorState(): EditorState {
const newEditorState = EditorState.create({
doc: this.currentFile().content,
extensions: [
...CODE_EDITOR_EXTENSIONS,
this.currentFile().language,
placeholderExtension('Type your code here...'),
...this.getLanguageExtensions(),
],
});
this._editorStates.set(this.currentFile().filename, newEditorState);
return newEditorState;
}
private getLanguageExtensions() {
if (this.currentFile().filename.endsWith('.ts')) {
return [
getAutocompleteExtension(this.eventManager$, this.currentFile, this.sendRequestToTsVfs),
getDiagnosticsExtension(
this.eventManager$,
this.currentFile,
this.sendRequestToTsVfs,
this.diagnosticsState,
),
getTooltipExtension(this.eventManager$, this.currentFile, this.sendRequestToTsVfs),
];
}
return [];
}
/**
* Write the new file contents to the sandbox filesystem
*/
private async changeFileContentsScheduled(newContent: string): Promise<void> {
try {
await this.nodeRuntimeSandbox.writeFile(this.currentFile().filename, newContent);
} catch (err) {
// Note: `writeFile` throws if the sandbox is not initialized yet, which can happen if
// the user starts typing right after the page loads.
// Here the error is ignored as it is expected.
}
}
/**
* Change file contents on files signals and update the editor state
*/
private changeFileContentsOnRealTime(transaction: Transaction): void {
this._editorStates.set(this.currentFile().filename, transaction.state);
const newContent = transaction.state.doc.toString();
this.currentFile.update((currentFile) => ({...currentFile, content: newContent}));
this.files.update((files) =>
files.map((file) =>
file.filename === this.currentFile().filename ? {...file, content: newContent} : file,
),
);
// send current file content to Ts Vfs worker to run diagnostics on current file state
this.sendRequestToTsVfs<CodeChangeRequest>({
action: TsVfsWorkerActions.CODE_CHANGED,
data: {
file: this.currentFile().filename,
code: newContent,
},
});
}
private getTutorialFiles(files: FileAndContentRecord): EditorFile[] {
const languagesExtensions = Object.keys(LANGUAGES);
const tutorialFiles = Object.entries(files)
.filter(
(fileAndContent): fileAndContent is [string, string] =>
typeof fileAndContent[1] === 'string',
)
.map(([filename, content]) => {
const extension = languagesExtensions.find((extension) => filename.endsWith(extension));
const language = extension ? LANGUAGES[extension] : LANGUAGES['ts'];
return {
filename,
content,
language,
};
});
return tutorialFiles;
}
}
@@ -1,89 +0,0 @@
/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {EditorState, Extension} from '@codemirror/state';
import {
lineNumbers,
highlightActiveLineGutter,
highlightSpecialChars,
drawSelection,
dropCursor,
rectangularSelection,
crosshairCursor,
highlightActiveLine,
keymap,
EditorView,
} from '@codemirror/view';
export {EditorView} from '@codemirror/view';
import {
foldGutter,
indentOnInput,
syntaxHighlighting,
defaultHighlightStyle,
bracketMatching,
foldKeymap,
HighlightStyle,
} from '@codemirror/language';
import {history, defaultKeymap, historyKeymap, indentWithTab} from '@codemirror/commands';
import {highlightSelectionMatches, searchKeymap} from '@codemirror/search';
import {
closeBrackets,
autocompletion,
closeBracketsKeymap,
completionKeymap,
startCompletion,
} from '@codemirror/autocomplete';
import {lintKeymap} from '@codemirror/lint';
import {SYNTAX_STYLES} from './syntax-styles';
import {CODE_EDITOR_THEME_STYLES} from './theme-styles';
export const CODE_EDITOR_EXTENSIONS: Extension[] = [
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
foldGutter(),
drawSelection(),
dropCursor(),
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
bracketMatching(),
closeBrackets(),
autocompletion(),
rectangularSelection(),
crosshairCursor(),
highlightActiveLine(),
highlightSelectionMatches(),
syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
syntaxHighlighting(HighlightStyle.define(SYNTAX_STYLES)),
EditorView.lineWrapping,
EditorView.theme(
CODE_EDITOR_THEME_STYLES,
// TODO: get from global theme, reconfigure on change: https://discuss.codemirror.net/t/dynamic-light-mode-dark-mode-how/4709
{dark: true},
),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...searchKeymap,
...historyKeymap,
...foldKeymap,
...completionKeymap,
...lintKeymap,
indentWithTab,
{
key: 'Ctrl-.',
run: startCompletion,
mac: 'Mod-.',
},
]),
];

Some files were not shown because too many files have changed in this diff Show More