Compare commits

...

688 Commits

Author SHA1 Message Date
Andrew Scott 37e27694ff release: cut the v17.0.9 release 2024-01-10 14:08:44 -08:00
David LJ 74094e1158 docs: fix & update apf links to pkg examples (#53866)
PR Close #53866
2024-01-10 10:43:55 -08:00
Andrew Scott b7cddf4e1e refactor(core): Move change detection scheduler implementation to core (#53579)
This commit moves the implementation of the change detection scheduler
used for testing to angular/core along with a (private export) provider function.

Note: Naming of the provider function is absolutely not final (and not
public API). I would prefer one that did not mention "zones"
but the easiest thing for now is to have a "Zone" and "Zoneless" naming
scheme.

PR Close #53579
2024-01-09 16:05:32 -08:00
Andrew Scott 62498f5e3a test(core): Add scheduler in tests to tie into ApplicationRef.isStable (#53579)
This commit updates the test scheduler implementation to contribute to
ApplicationRef stableness.

PR Close #53579
2024-01-09 16:05:32 -08:00
Jan Kuehle f4b1e6482c refactor(zone.js): delete zone.js externs (#53445)
Externs were used for Closure Compiler. Users have moved on to other
bundlers like Webpack, esbuild, etc. Externs are no longer needed.

PR Close #53445
2024-01-09 13:20:51 -08:00
Jan Kuehle b3aec87f57 refactor(zone.js): change from scripts to modules (#53445)
Make Zone.js compatible with moduleDetection:force by turning files that
are currently incompatible from scripts into modules using an empty
export statement.

PR Close #53445
2024-01-09 13:20:51 -08:00
Kristiyan Kostadinov 92fd6cc42e fix(compiler): generate less code for advance instructions (#53845)
We generate `advance` instructions before most update instructions and the majority of `advance` calls are advancing by one. We can save some bytes for the most common case by omitting the parameter for `advance(1)` altogether.

PR Close #53845
2024-01-09 12:27:58 -08:00
Tomasz Ducin c4b266cace refactor(core): type-safe global ng (#53439)
This PR provides strict type definition for the window.ng object used
for both console debugging and devtools. `GlobalDevModeUtils` now
gathers all type information about all methods exposed on window.ng.

PR Close #53439
2024-01-09 12:17:48 -08:00
Joey Perrott 3ae74e431e ci: add adev to ci (#53833)
Add adev job to CI to ensure it continues to build as expected

PR Close #53833
2024-01-09 12:16:03 -08:00
Nadeem Ur-Rehman 4a64d2034b docs(docs-infra): wrong URL for Unicode CLDR fixed (#53785)
fixes wrong URLs for Unicodde CLDR

Fixes #53734

PR Close #53785
2024-01-09 12:13:15 -08:00
Jessica Janiuk e92c86b77f fix(migrations): Fix empty switch case offset bug in cf migration (#53839)
This addresses the offset issue caused when a switch case was empty with no spaces or children being affected by the markers that were added, but not accounted for in offset. The markers are not needed for empty content and can be safely removed in this case.

fixes: #53779

PR Close #53839
2024-01-09 12:09:41 -08:00
Andrew Scott 9c58717767 refactor(core): node removal should notify the scheduler (#53812)
This commit ensures that change detection runs when an `LView` is
removed. Change detection is required because DOM nodes aren't actually
removed until the animation engine flushes and this doesn't happen until
the end of `detectChangesInternal` (`rendererFactory.end`).

PR Close #53812
2024-01-09 08:51:33 -08:00
Joey Perrott c22b513b3f fix(common): remove unused parameters from the ngClass constructor (#53831)
Remove unused parameters which were only being kept because of a downstream usage in flex layout which is deprecated and end of life

PR Close #53831
2024-01-08 14:38:51 -08:00
Joey Perrott 8e49e38f44 fix(docs-infra): include the homepage playground content (#53832)
Include the homepage playground content in the homepage

PR Close #53832
2024-01-08 11:33:18 -08:00
Joey Perrott 3e00a7fdc6 build: update cross-repo angular dependencies (#53837)
See associated pull request for more information.

PR Close #53837
2024-01-08 11:31:17 -08:00
Andrew Scott 441db5123f fix(core): afterRender hooks now only run on ApplicationRef.tick (#52455)
The `afterRender` hooks currently run after `ApplicationRef.tick` but
also run after any call to `ChangeDetectorRef.detectChanges`. This is
problematic because code which uses `afterRender` cannot expect the
component it's registered from to be rendered when the callback
executes. If there is a call to `ChangeDetectorRef.detectChanges` before
the global change detection, that will cause the hooks to run earlier
than expected.

This behavior is somewhat of a blocker for the zoneless project. There
is plenty of application code that do things like `setTimeout(() =>
doSomethingThatExpectsComponentToBeRendered())`, `NgZone.onStable(() =>
...)` or `ApplicationRef.onStable...`. `ApplicationRef.onStable` is a
should likely work similarly, but all of these are really wanting an API
that is `afterRender` with the requirement that the hook runs after the
global render, not an individual CDRef instance.

This change updates the `afterRender` hooks to only run when
`ApplicationRef.tick` happens.

fixes #52429
fixes #53232

PR Close #52455
2024-01-08 11:30:28 -08:00
Jeremy Elbourn 15a973f151 build: configure cross-pkg resolution for api extraction (#52499)
This commit adds path mapping and source dependencies necessary to fully
resolve types during api doc extraction.

PR Close #52499
2024-01-05 11:27:34 -08:00
Matthieu Riegler 8fa5ebba7d refactor(router): replace last helper with native Array.at(-1) (#53749)
We now have a native method to return the last item of an array

PR Close #53749
2024-01-04 13:58:17 -08:00
Matthieu Riegler d68efac4fd refactor(router): replace Object.keys with Object.entries where useful. (#53745)
`Object.entries` wasn't supported when those lines were written.

PR Close #53745
2024-01-04 13:57:22 -08:00
mgechev f8dcd1824a docs: remove state of js 2023 banner (#53798)
PR Close #53798
2024-01-04 13:56:21 -08:00
Andrew Scott 91cb16fde9 fix(platform-server): Do not delete global Event (#53659)
This commit removes a hack that deletes `Event` from the global context
when using domino. Instead, it sets the global event to domino's
implementation of `Event`.

PR Close #53659
2024-01-04 12:51:22 -08:00
Matthieu Riegler 5f73737981 refactor(router): remouve unused (#53750)
minor optimisation, removing unused paramters.

PR Close #53750
2024-01-03 13:29:06 -08:00
Andrew Scott 5fb199bfc6 refactor(core): Remove LContainerFlags.HasChildViewsToRefresh (#53715)
This flag is not actually read anywhere. It doesn't even have any effect
on the traversal algorithm because embedded views are always refreshed
in `Global` traversal mode during the refresh of their parent views.

PR Close #53715
2024-01-03 13:01:35 -08:00
Andrew Scott 7bf11eaf41 refactor(core): Use NoopNgZone in componentFixture (#53670)
The `ComponentFixture` code needlessly dances around the `ngZone` being
`null` when the `ComponentFixtureNoNgZone` option is set. Instead, it
can use the `NoopNgZone` to get the same effect without needing to have
checks all over the place for its presence.

PR Close #53670
2024-01-03 11:28:13 -08:00
Dylan Hunn 5f4f0a9bdd refactor(compiler): Fix ambiguous repeater context variables in template pipeline (#53662)
In #52931, Kristiyan fixed a TemplateDefinitionBuilder bug in which derived alias variables in for loops (`$even`, `$first`, etc) were referring to the wrong level of nested `@for` block. (These variables are unique because they become inlined expressions, and are not "real" context variables.) He fixed this by appending level information to the generated alias name.

Template Pipeline actually suffered from the same bug. We fix it in a very similar way -- in particular, whenever these derived context variables are used, we make them depend on versions of `$index` and `$count` that have been suffixed with the xref of the enclosing repeater.

I have added a few more pipeline goldens, because we are not quite as clever as TDB about only generating the duplicate suffixed index and count variables when inside nested loops. This is fine, since in the long run, we want to refactor it more fundamentally.

I have also added a TODO to fix this more rigorously. In particular, it would be nice if we had proper support for shadowed variables, as well as unlimited levels of variables depending on one another.

PR Close #53662
2024-01-03 11:24:20 -08:00
Miles Malerba 50788f6b74 test(compiler): Fix mangling of camel case CSS vars in host bindings (#53665)
Template pipeline previously mangled CSS property names like
`--camelCase` when used in host style bindings. Note: It still *does*
mangle these names in static style attrs, both in host bindings and on
elements. This is clearly wrong, but is consistent with what TDB does
today.

PR Close #53665
2024-01-03 11:23:38 -08:00
Johnny Gérard 7c19dc21a2 docs: fix incorrect glossary entry (#53609)
PR Close #53609
2024-01-03 10:34:55 -08:00
Kristiyan Kostadinov bd9f89d1c8 fix(common): server-side rendering error when using in-memory scrolling (#53683)
Fixes that the `BrowserViewportScroller` was throwing an error during server-side rendering because it was accessing `window` directly. Also removes some assertions that aren't necessary anymore.

Fixes #53682.

PR Close #53683
2024-01-03 10:28:55 -08:00
Matthieu Riegler fad9e952ae refactor(core): remove duplicate stringify (#53751)
`throwProviderNotFoundError` already stringifies for error. Also let's restrain the paramter type.

PR Close #53751
2024-01-03 10:27:37 -08:00
Matthieu Riegler fdb05d92c5 refactor(core): minor improvements (#53751)
minor optimisation, removing unused paramters and improve tree shaking

PR Close #53751
2024-01-03 10:27:37 -08:00
cexbrayat 7309463697 fix(compiler-cli): interpolatedSignalNotInvoked diagnostic (#53585)
The diagnostic was catching the following case:

```ts
name = signal('Angular');
```

but not the following ones:

```ts
name = signal('Angular').asReadonly();
name = computed(() => 'Angular');
name!: Signal<string>
```

This was not catched in the tests because the type of `Signal` is different than the one actually used in core.
It turns out the real type forces the diagnostic to check both the `symbol.tsType.symbol` and the `symbol.tsType.aliasSymbol`.

PR Close #53585
2024-01-03 10:19:54 -08:00
Miles Malerba 8799261ec1 refactor(compiler): Fix handling of namespaced attributes (#53646)
It's possible for attributes to have a namespace, we need to handle this
possiblity for both attribute instructions and attributes extracted to
the consts array.

PR Close #53646
2024-01-03 10:19:03 -08:00
Dylan Hunn b372dc8fe2 refactor(compiler): Add a test for attribute namespaces (#53646)
We currently do not support the `namespace` argument for the attribute instruction. (Who knew it even existed!)

PR Close #53646
2024-01-03 10:19:03 -08:00
Aanchal Agarwal 5fee3c1805 docs: remove duplicate words (#53673)
PR Close #53673
2024-01-03 10:17:55 -08:00
Kristiyan Kostadinov f9120d79cb fix(core): allow effect to be used inside an ErrorHandler (#53713)
`effect` was expecting an `ErrorHandler` in its constructor which can lead to a circular DI error if an effect is used inside a custom `ErrorHandler`. These changes inject the `ErrorHandler` only when reporting errors.

Fixes #52680.

PR Close #53713
2024-01-03 10:17:30 -08:00
Andrew Scott 0b8a649f81 refactor(common): Fix fake navigation to work with relative navigations (#53719)
This commit updates the implementation of the fake navigation to support
relative navigation requests.

PR Close #53719
2024-01-03 10:16:58 -08:00
Andrew Scott e1164e428c refactor(router): use MockPlatformLocation for integration tests (#53640)
Use of the `SpyLocation` is problematic because it prevents location
APIs from reaching the platform level (`PlatformLocation`) and
`PathLocationStrategy`. This makes it difficult to test interactions
with those providers, including the ability to use the `Navigation` API,
which will live at the platform level.

PR Close #53640
2024-01-03 10:15:54 -08:00
Kristiyan Kostadinov 6a41961fbd fix(compiler): ignore empty switch blocks (#53776)
Adds some code to the compiler so that it ignores empty `@switch` blocks instead of trying to generate code for them.

Fixes #53773.

PR Close #53776
2024-01-03 10:15:17 -08:00
Andrew Scott b87324d8f0 release: cut the v17.0.8 release 2023-12-21 06:25:25 -08:00
Joey Perrott 257536e99a refactor(docs-infra): build adev application using local generated assets (#53666)
Use local generated assets to build adev application.

PR Close #53666
2023-12-20 14:47:55 -08:00
Andrew Scott 8a77a5a837 refactor(core): Add scheduler abstraction and notify when necessary (#53499)
In order to provide a reasonable experience for Angular without Zones,
we need a mechanism to run change detection when we receive a change
notification. There are several existing APIs today that serve as the
change notification: `ChangeDetectorRef.markForCheck`, signal updates,
event listeners (since they mark the view dirty), and attaching a view to
either the `ApplicationRef` or `ChangeDetectorRef`. These operations
are now paired with a notification to the change detection scheduler.

The concrete implementation for this scheduler is still being designed.
However, this gives us a starting point to partner with teams to
experiment with what that might look like.

PR Close #53499
2023-12-20 07:53:31 -08:00
Miles Malerba c3250b01e0 refactor(compiler): Rework how ICU placeholders are handled (#53643)
The way we were handling ICU placeholders was not compatible with using
interpolations on attributes of elements inside the ICU. This change
refactors the handling of ICU placeholders and unifies the way
expression and tag placeholders work inside ICUs.

The new approach modifies the ingest logic to add the placeholder on to
the TextOp rather than the TextInterpolationOp. This is because, in
ICUs, we may need multiple i18n expressions created from the
interpolation expressions to roll up into the same placeholder. ICUs
essentially do the interpolation at compile time, combining the static
strings with special placeholder strings that represent the expression
values.

PR Close #53643
2023-12-20 07:23:54 -08:00
Andrew Scott 70de5c5dde refactor(core): Use single source of truth for ApplicationRef.isStable (#53642)
This commit updates the `ApplicationRef.isStable` implementation to use
a single `Observable` to manage the state. This simplifies the mental
model quite a bit and removes the need for rx operators like
`distinctUntilChanged` and `combineLatest`.

PR Close #53642
2023-12-19 13:22:37 -08:00
Jessica Janiuk ed936ba0e9 fix(migrations): cf migration - detect and error when result is invalid i18n nesting (#53638) (#53639)
This will gracefully error on templates when the resulting template would have invalid i18n nested structures.

PR Close #53638

PR Close #53639
2023-12-19 12:22:02 -08:00
Jessica Janiuk eb7c29c7b6 fix(migrations): cf migration - detect and error when result is invalid i18n nesting (#53638)
This will gracefully error on templates when the resulting template would have invalid i18n nested structures.

PR Close #53638
2023-12-19 11:01:58 -08:00
Jessica Janiuk 817dc1b27f fix(migrations): cf migration - fix bug in attribute formatting (#53636)
The formatting that would preserve attribute indents completely missed attributes that start on new lines rather than the same line as the opening element.

PR Close #53636
2023-12-19 10:16:30 -08:00
Jessica Janiuk 5c2f2539e2 fix(migrations): cf migration - ensure full check runs for all imports (#53637)
In cases where CommonModule was unsafe to remove but other imports were present, the symbol check would be skipped. This should run for all the possibly removed symbols for safety.

PR Close #53637
2023-12-19 10:11:47 -08:00
Andrew Scott c99491e7a0 refactor(core): No default for zone stableness token (#53505)
When an application does not use zones, it does not need a default value
for the zone stableness token. This will allow zoneless applications to
tree-shake a lot of rxjs operators out of `ApplicationRef`.

Note that at the moment, `provideZoneChangeDetection` is included in all
applications as well as the `TestBed` environment. It is not currently
possible to remove the zone stable code as a result. This will be
possible only when we make zones an opt-in rather than opt-out.

PR Close #53505
2023-12-19 09:59:12 -08:00
Andrew Scott 0696ab6a5b fix(router): Should not freeze original object used for route data (#53635)
This was broken in 3278966068 where the
new code fails to copy the data object when not inheriting data.

fixes #53632

PR Close #53635
2023-12-19 09:20:56 -08:00
Jens Kuehlers b131c3bb95 docs: Add v18 dates (#53549)
Add the v18 dates to a.dev as well and shift v17.1 to a more
conservative date (exact week is tbc)

PR Close #53549
2023-12-19 08:38:06 -08:00
Jens Kuehlers 2e4c40a7ec docs: fixed the year (#53549)
Set the year of 17.1-18.0 releases to 2024

PR Close #53549
2023-12-19 08:38:05 -08:00
Jens Kuehlers dd9b1f8770 docs: remove extra spare line (#53549)
removed accidentially included line

PR Close #53549
2023-12-19 08:38:05 -08:00
Jens Kuehlers 468cb591ab docs: add upcoming release dates (#53549)
Adds the tentatively planned release weeks for 17.1-18.0 - please note
that these might change (and 17.3 might or might not be released).

PR Close #53549
2023-12-19 08:38:05 -08:00
Andrew Scott 7780712553 refactor(core): Rename InitialRenderPendingTasks and restructure isStable observable (#53534)
The InitialRenderPendingTasks currently attempts to only contribute to
ApplicationRef stableness one time to support SSR. This isn't actually
how the switchMap works in reality. This commit updates
the isStable observable to be more clear that it's always a combination
of the zone stableness and pending tasks.

In addition, this commit renames the service to just be PendingTasks
because it doesn't directly relate to rendering. While the purpose is
to track things that might cause rendering to happen, we don't know if the
tasks will affect rendering at all.

PR Close #53534
2023-12-19 08:36:29 -08:00
Jessica Janiuk c3f85e51a9 fix(migrations): cf migration - preserve indentation on attribute strings (#53625)
During formatting, attribute indentation is changed, and that can affect internationalized strings. This fix detects if an attribute value string is left open and skips formatting on those lines.

PR Close #53625
2023-12-18 22:38:53 +00:00
Jessica Janiuk 7ac60bab9a fix(migrations): cf migration - improve import declaration handling (#53622)
This should make the import declaration symbol removal a bit more robust and handle more than just CommonModule safely.

PR Close #53622
2023-12-18 22:10:58 +00:00
Miles Malerba 7c8a2e13ea test(compiler): Fix handling of deceptively named attributes (#53626)
It's possible for the user to create a host attrbiute binding with a
name that makes it _look_ like a class binding `{['class.foo']: ''}`, we
were previously treating these as actual class property bindings. This
change fixes the logic so that only true property bindings cam be
converted to class property bindings.

Note: A user who added an attribute like the above almost certainly
intended to create an actual class property binding. It would be nice if
we could add a diagnostic to warn them about this.

PR Close #53626
2023-12-18 22:10:30 +00:00
Miles Malerba b3ffc54c5e test(compiler): Update partial golden files (#53596)
Update partial golden files to reflect newly added tests

PR Close #53596
2023-12-18 22:09:26 +00:00
Miles Malerba 7406d9da20 refactor(compiler): Allow duplicate style and class consts (#53596)
Further refine the template pipeline's behavior w.r.t. duplicate values
in the consts array to better align its behavior with TDB. In particular
this means allowing duplicate values for classes and styles.

PR Close #53596
2023-12-18 22:09:26 +00:00
Miles Malerba 9b01863f36 test(compiler): Add a test for handling of duplicate bindings (#53596)
Adds a test for handling of duplicate bindings. Fow now we replicate the
TDB behavior in template pipeline, which is: For style and class text
attributes, only keep the last one. For all other text attributes, add
all of the values to the consts array.

PR Close #53596
2023-12-18 22:09:26 +00:00
Miles Malerba 97f5bfa8d6 refactor(compiler): support multiple statements in host listener (#53596)
Support multiple statements in a host listener, like we do for listeners
in the template. Also adds a test to verify the behavior.

PR Close #53596
2023-12-18 22:09:26 +00:00
Charles Lyding b394125839 build: update rxjs build version to v7 (#53621)
The version of rxjs used to build the repository has been updated to v7.
This required only minimal changes to the code. Most of which were type
related only due to more strict types in v7. The behavior in those cases
was left intact. The most common type related change was to handle the
possibility of `undefined` with `toPromise` which was always possible with
v6 but the types did not reflect the runtime behavior. The one change that
was not type related was to provide a parameter value to the `defaultIfEmpty`
operator. It no longer defaults to a value of `null` if no default is provided.
To provide the same behavior the value of `null` is now passed to the operator.

PR Close #53621
2023-12-18 17:20:52 +00:00
Kristiyan Kostadinov de5c9ca8e9 fix(compiler): correctly intercept index in loop tracking function (#53604)
The for loop tracking function doesn't allow references to local template variables, aside from `$index` and the item which are passed in as parameters. We enforce this by rewriting all variable references to the components scope.

The problem is that the logic that rewrites the references first walks the view tree and then checks if the variable is `$index` or the item. This is problematic in nested for loops, because it'll find the `$index` of the parent.

These changes resolve the issue by checking for `$index` and the item first.

Fixes #53600.

PR Close #53604
2023-12-18 16:27:07 +00:00
Kristiyan Kostadinov 513fee871e fix(core): tree shake version class (#53598)
Core bundles were retaining the `Version` class and `VERSION` constant, because we stamp out the current version in the DOM. This shouldn't be necessary, because any usage of `0.0.0-PLACEHOLDER` will be replaced with the current version at build time. These changes remove the reference so it can be tree shaken away.

PR Close #53598
2023-12-18 16:26:36 +00:00
Kristiyan Kostadinov d79489255a fix(core): avoid repeated work when parsing version (#53598)
The `Version` class was splitting the same value 3 times instead of doing it once and reusing the result.

PR Close #53598
2023-12-18 16:26:36 +00:00
Miles Malerba 4b1328c25a refactor(compiler): Make attribute const collection less aggressive (#53580)
Changes template pipeline to be less aggressive in const collecting
attrs, to match the behavior of template definition builder. There is
nothing wrong with the more aggressive const collection, and in fact it
would be good to re-enable it later, but for now this makes it easier to
transition from TDB to template pipeline.

Also adds a test to verify that sensitive iframe attributes are properly
validated.

PR Close #53580
2023-12-18 16:26:03 +00:00
JiaLiPassion 4a892a3fac fix(zone.js): handle fetch with AbortSignal (#49595)
fetch support AbortSignal, zone.js schedules a macroTask when fetch()

```
fetch(..., {signal: abortSignal});
```

we should also be able to cancel fetch with `zoneTask.cancel` call.
So this commit create an internal AbortSignal to handle
`zoneTask.cancel()` call and also delegate the `options.signal` from the
user code.

PR Close #49595
2023-12-18 15:35:11 +00:00
JiaLiPassion ded2bc9d99 fix(zone.js): support addEventListener with signal option. (#49595)
Close #49591

```
const ac = new AbortController();
addEventListener(eventName, handler, {signal: ac.signal);`
ac.abort();
```

Currently `zone.js` doesn't support the `signal` option, this PR allows
the user to use AbortContoller to remove the event listener.

PR Close #49595
2023-12-18 15:35:11 +00:00
Johnny Gérard 8e5b95d746 docs: clarify Node.js version (#53581)
Resolve #53334

PR Close #53581
2023-12-18 15:33:41 +00:00
Angular Robot 41be460875 docs: update Angular CLI help [17.0.x] (#53589)
Updated Angular CLI help contents.

PR Close #53589
2023-12-18 15:33:14 +00:00
Angular Robot 13bb320fb0 build: update scorecard action dependencies (#53607)
See associated pull request for more information.

PR Close #53607
2023-12-18 15:32:03 +00:00
Jessica Janiuk 658c73d60d refactor(migrations): update cf migration to handle module imports better (#53575)
This addresses the case where modules are being used and declared in the same file as the component. It is unclear whether its safe to remove the common module in this case, so best to leave it.

PR Close #53575
2023-12-15 19:58:40 +00:00
Jessica Janiuk e73205ff5a fix(migrations): cf migration - stop removing empty newlines from i18n blocks (#53578)
Since i18n sections are whitespace sensitive, we should avoid removing empty lines when inside an i18n block that were present before.

PR Close #53578
2023-12-15 19:49:04 +00:00
Dylan Hunn 7fde3ef78e refactor(compiler): Not all attribute values beginning with a colon are namespaced (#53574)
TemplateDefinitionBuilder is apparently more careful about when it attempts to split namespaces in attribute values. However, we are doing this on style attributes, which might start with a single `:`. Rather than refactor our logic to only try to split namespaces in some cases, we can just add an option to make namespace splitting fail gracefully. We only use this option for attributes, not elements.

Note also: the compiled code for this, while "correct" is absolutely insane. Maybe we should consider fixing this, as a matter of principle.

PR Close #53574
2023-12-15 19:48:29 +00:00
Dylan Hunn 0b40e3bae9 refactor(compiler): Support class and non-class attributes with the same name (#53574)
Some elements may have multiple bindings with the same name. We should accept and emit them all, as long as they have different kinds.

Co-authored-by: Miles Malerba <mmalerba@users.noreply.github.com>

PR Close #53574
2023-12-15 19:48:29 +00:00
Dylan Hunn 43d596b87e refactor(compiler): Repeaters may consume a variable for their empty block (#53574)
Repeaters consume a variable slot only when they have an empty block.

PR Close #53574
2023-12-15 19:48:29 +00:00
Dylan Hunn bf21792ca1 refactor(compiler): Host attribute bindings should always be extracted into hostAttrs (#53574)
Host attribute literal bindings should not result in an `attribute` update instruction.

PR Close #53574
2023-12-15 19:48:29 +00:00
Dylan Hunn 3fa2b10be7 refactor(compiler): Defer when consumes a variable (binding) slot (#53574)
The template pipeline was previously not reserving a variable slot for the result of the `deferWhen` instruction, which caused the `defer when` feature to crash at runtime.

PR Close #53574
2023-12-15 19:48:29 +00:00
Dylan Hunn 354bbd4073 refactor(compiler): Fix self-closing element source spans in template pipeline (#53574)
When an element is self-closing, it will cause an `element` instruction to be emitted (instead of `elementStart`/`elementEnd`). In that case, we should use map whole source span for the instruction, not just the starting span.

PR Close #53574
2023-12-15 19:48:28 +00:00
Dylan Hunn 221836fd57 refactor(compiler): Update a user visible error to match TDB (#53574)
This error about global event targets is user-facing; update it to match TDB's error verbatim.

PR Close #53574
2023-12-15 19:48:28 +00:00
Dylan Hunn 12e7fd6ea3 refactor(compiler): Add an escape hatch to use non-unique const pool names (#53574)
The template pipeline was producing slightly different names than TemplateDefinitionBuilder for defer deps functions. I have added a workaround in the name of backwards compatibility, to avoid suffixing the const pool function names.

PR Close #53574
2023-12-15 19:48:28 +00:00
Miles Malerba 512a19be14 refactor(compiler): Ensure correct context kind on ICU contexts (#53557)
Previously when we found an ICU that was the only translatable content
in its i18n block, we assigned the block's i18n context to the ICU.
However, we neglected to set the contextKind to inidcate that the
context was associated with an ICU. As of this change we now set the
correct contextKind.

This change also refactors the context creation to explicitly separate
creation of contexts for attributes, root i18n blocks, child i18n
blocks, and ICUs. This allows us to more easily ensure that contexts are
shared appropriately between i18n blocks and ICUs.

Finally, this change also refactors the i18n message extraction pahse to
simplify how contexts are converted to i18n messages. This
simplification should make it easier to merge i18n contexts and i18n
messages into a single op in a future refactor.

PR Close #53557
2023-12-14 09:33:53 -08:00
Dylan Hunn 0112aa3b81 refactor(compiler): Add test for ICU root message with element tags (#53557)
Add test for ICU root message with element tags

PR Close #53557
2023-12-14 09:33:53 -08:00
Jessica Janiuk 886aa7b2a9 fix(migrations): Fix cf migration bug with parsing for loop conditions properly (#53558)
The order of operations for getting for loop parts was inverted resulting in the StringStack to never be reduced.

fixes: #53555

PR Close #53558
2023-12-14 09:33:27 -08:00
Andrew Scott be58dba5bd refactor(core): newly created and any dirty views should get refreshed during CD (#53022)
When a view has the `Dirty` flag and is reattached, we should ensure that it is
reached and refreshed during the next change detection run from above.

In addition, when a view is created and attached, we should ensure that it is reached
and refreshed during change detection. This can happen if the view is
created and attached outside a change run or when it is created and
attached after its insertion view was already checked. In both cases, we
should ensure that the view is reached and refreshed during either the
current change detection or the next one (if change detection is not
already running).

We can achieve this by creating all views with the `Dirty` flag set.

However, this does happen to be a breaking change in some scenarios.
The one identified internally was actually depending on change detection
_not_ running immediately because it relied on an input value that was
set using `ngModel`. Because `ngModel` sets its value in a `Promise`, it
is not available until the _next_ change detection cycle. Ensuring
created views run in the current change change detection will result in
different behavior in this case.

Making option the default is the solution to #52928. That will have to
wait for a major version.

PR Close #53022
2023-12-14 09:17:49 -08:00
Alex Rickabaugh 203a3d59a0 release: cut the v17.0.7 release 2023-12-13 16:35:33 -08:00
Andrew Scott c16b5e8290 fix(core): Multiple subscribers to ApplicationRef.isStable should all see values (#53541)
The behavior of `ApplicationRef.isStable` changed in 16.1 due to
https://github.com/angular/angular/commit/28c68f709cdc930e12bac51a266e7bf790656034.
This change added a `share` to the `isStable` observable, which prevents
additional subscribers from getting a value until a new one emits. One
solution to the problem would be `shareReplay(1)`. However, that would
increase the bundle size since we do not use `shareReplay` elsewhere.
Instead, we don't even really need to share the observable.

The `Observable` available in `ApplicationRef.isStable` before the above commit
was the zone stable observable, without a `share`. The new behavior adds
only an additional observable to the stream, `hasPendingTasks` (a `BehaviorSubject`).
The observables in this stream are not expensive to subscribe to. The
only one with side effects is the `isStable` (because it subscribes to
onStable), but that one already has the `share` operator on it.
Omitting the `share` in `ApplicationRef` also means that applications on `zoneless` will not
have to pay the cost of the operator when we make zones optional because
the zone stable observable is the only place we use it.

PR Close #53541
2023-12-13 11:26:52 -08:00
Matthieu Riegler 79d8736b70 build: remove seek-bzip dependency (#53536)
`seek-bzip` isn't used anymore, let's remove it.

PR Close #53536
2023-12-13 11:26:13 -08:00
Jessica Janiuk 1c55c49b30 refactor(migrations): CF migration - add support for not reformatting i18n tags (#53538)
Internationalization is whitespace sensitive. This change updates the formatting code to process for i18n attributes and prevent reformatting those sections of the template.

PR Close #53538
2023-12-13 09:34:55 -08:00
Vincent d5c631bf36 fix(platform-browser): Get correct base path when using "." as base href when serving from the file:// protocol. (#53547)
Using http://a as the base URL returns / instead of the actual base path when using the file:// protocol. Using document.baseURI addresses this.

Fixes #53546

PR Close #53547
2023-12-13 09:26:56 -08:00
Kara Erickson 5b4add27b6 fix(core): update feature usage marker (#53542)
This commit updates the name of the 'performance.mark'
counter used to track feature usage. It now matches
the name agreed upon by W3C for this use case:
https://github.com/w3c/user-timing/pull/108

PR Close #53542
2023-12-13 09:24:11 -08:00
Jessica Janiuk e88a12d5b3 fix(migrations): cf migration validate structure of ngswitch before migrating (#53530)
This fix handles the common case where an ngswitch might have invalid syntax post migration. This is likely due to using elements other than case or default underneath the ngswitchcase. This will fail out of the migration for that file when these cases are detected with a useful console message.

fixes: #53234

PR Close #53530
2023-12-13 09:23:17 -08:00
Jessica Janiuk c9a1c6f1c7 fix(migrations): cf migration - undo changes when html fails to parse post migration (#53530)
In the case that a template has some sort of structural issue prior to migrating, like a tag that is not properly closed resulting in invalid HTML post migration, this will attempt to parse the html after migrating and revert to the original structure. An error during migration will be reported out instead.

PR Close #53530
2023-12-13 09:23:16 -08:00
cexbrayat 4772da70b5 refactor(core): remove no longer needed FlushableEffectRunner private export (#53525)
It is no longer needed after https://github.com/angular/angular/commit/70a442eb023096b329ea2c0c7010df5339993fe7

PR Close #53525
2023-12-13 09:22:42 -08:00
Dylan Hunn cdedd00d12 refactor(compiler): Support o.WrappedNodeExpr inside expression conversion (#53478)
`o.WrappedNodeExpr` can show up in some cases, when a host binding's value is inside a TS expression.

It's an open question whether we will need to support all of the TS expression types as a result.

PR Close #53478
2023-12-13 09:21:54 -08:00
Dylan Hunn 0427d7ac7e refactor(compiler): Fix a bug involving listeners with targets (#53478)
For some reason, the parser reuses the same field to store the animation phase and the event target. We were incorrectly interpreting the presence of any value on that field as an animation phase, leading us to incorrectly emit synthetic listener instructions for listeners on events with targets. This bug is now fixes.

PR Close #53478
2023-12-13 09:21:54 -08:00
Dylan Hunn 79a7e02c61 refactor(compiler): Support $any in host bindings (#53478)
`$any` should be interpreted as a cast, not as a context read of a variable called `$any`. This already worked in template compilations, but the relevant phase was not enabled for host bindings.

PR Close #53478
2023-12-13 09:21:54 -08:00
Kristiyan Kostadinov 4fd5409090 fix(compiler): handle ambient types in input transform function (#51474)
Fixes that the compiler was throwing an error if an ambient type is used inside of an input `transform` function. The problem was that the reference emitter was trying to write a reference to the ambient type's source file which isn't necessary.

Fixes #51424.

PR Close #51474
2023-12-13 09:15:17 -08:00
Joey Perrott 57ac8063de feat(docs-infra): put the editor back in angular/angular (#53540)
Puts the editor back in angular/angular until we are able to set up a package containing a worker as needed for this project

PR Close #53540
2023-12-12 16:48:45 -07:00
mgechev 9a91e0f589 docs: add state of js survey link (#53537)
PR Close #53537
2023-12-12 14:32:12 -08:00
Alan Agius e750e4edcf fix(router): provide more actionable error message when route is not matched in production mode (#53523)
Prior to this commit when a route is not matched and the application was running in production mode an `[Error]: NG04002` was logged in the console. This however, is not actionable when the application is running on the server where there can be multiple pages being rendered at the same time.

Now we change this to also log the route example: `[Error]: NG04002: 'products/Jeep'`.

Closes #53522

PR Close #53523
2023-12-12 14:31:25 -08:00
Kristiyan Kostadinov a603338fe8 fix(compiler-cli): generate less type checking code in for loops (#53515)
The ops for the implicit variables in `@for` loops (e.g. `$index`) are marked as being mandatory which means that they're generated even if they aren't used. These changes make them optional so they're only added when necessary.

PR Close #53515
2023-12-12 14:30:36 -08:00
Miles Malerba 27235f14b6 refactor(compiler): Add sanitization support for host bindings (#53513)
Adds support for sanitizing host bindings. Since the tag name of the
element the host binding is being set on isn't always known, we have to
consider multiple possible security contexts.

This commit also adds additional tests to help verify correct behavior
of the sanitization logic for different edge cases.

PR Close #53513
2023-12-12 14:30:11 -08:00
Andrew Scott 659b88d138 refactor(core): Update flaky test with wait condition (#53437)
The tests in this commit have been flaky commonly due to the elements
not being found. Hopefully using `ExpectedConditions` helps.

PR Close #53437
2023-12-12 09:09:10 -08:00
Jessica Janiuk b75aca1d74 fix(migrations): CF migration only remove newlines of changed template content (#53508)
The formatting logic would eliminate all newlines in updated template code. This adds start and end markers for tracking when the formatter is in a block of template code that changed or not. It should leave behind any newlines that are outside of a migrated section.

fixes: #53494

PR Close #53508
2023-12-12 09:03:16 -08:00
Jessica Janiuk d232ea143f fix(migrations): fix cf migration import removal when errors occur (#53502)
When migrating a component and the associated external template, if errors occur, the component should not remove the common module imports. This fix should allow the application to still build in that instance.

PR Close #53502
2023-12-12 09:02:32 -08:00
Aditya Kumar 617dc53280 docs: Smart quote that breaks code block (#53488)
Signed-off-by: Aditya Kumar <aditya.kumar60@infosys.com>

PR Close #53488
2023-12-12 09:02:02 -08:00
Miles Malerba 087e06abce refactor(compiler): Simplify how sanitizers are generated (#53473)
Previously we generated an intermediate expression which was later
converted into a symbol import expression for the sanitizer function.
This commit simplifies the behavior by just generating the symbol import
from the beginning

PR Close #53473
2023-12-12 09:00:36 -08:00
Miles Malerba 93264b53e5 refactor(compiler): Generate trusted const values for extracted attrs (#53473)
Use the DomElementSchemaRegistry to determine the correct security
context for static attributes, and pass it along during ingestion. Then
during the resolve sanitizers phase, use the security context to
determine if a trusted value function is needed

PR Close #53473
2023-12-12 09:00:36 -08:00
Pawel Kozlowski 68d111c841 perf(core): avoid changes Observable creation on QueryList (#53498)
The changes Observable (impl: EventEmitter) on the QueryList is initalized
lazy - it is created only if someone calls a geter to get a hand on its
instance. But the destroy method was calling this getter thus creating
a new Observable even if no one subscribed to it.

This commit changes the destroy logic to skip creation of an EventEmitter
if it wasn't initialized.

PR Close #53498
2023-12-12 09:00:08 -08:00
Matthieu Riegler 17610fa9b8 build: remove incremental-dom dependency (#53474)
The usage of this dependency has been removed in #50108

PR Close #53474
2023-12-11 14:04:53 -08:00
Dylan Hunn 7fa791e965 refactor(compiler): Make some fixups to template binidng ingestion (#53457)
Responding to comments on #53457 about the previous sequence of template binding PRs.

PR Close #53457
2023-12-11 14:03:43 -08:00
Dylan Hunn 7967d28966 refactor(compiler): Fix animation bindings on structural elements (#53457)
Consider the case:

```
<button *ngIf="true" [@anim]="field"></button>
```

Only the inner `button` should recieve a `property` instruction for the animation binding. We were previously emitting one for the implicit `ng-template` as well, and collecting it into the consts for the `ng-template`. Both of these issues are now fixed.

PR Close #53457
2023-12-11 14:03:43 -08:00
Dylan Hunn a15a01276e refactor(compiler): Fix some behavior with bindings on explicit ng-template elements (#53457)
The behavior of explicit bindings on `ng-template`s was untested, and we differed from `TemplateDefinitionBuilder` significantly. We now have much more similar behavior, although not 100% identical.

For example, consider this templarte:
```
<ng-template l="l1" [p]="p1" [attr.a]="a1" [class.c]="c1"></ng-template>
```

It's not clear what a class binding on an `ng-template` would actually do. Nonetheless, it's well-defined behavior in TemplateDefinitionBuilder, which emits `property` instructions for all three bindings, and people actually do this in google3.

Note that some of these bindings don't really make much sense, but we have to support them for compatibility purposes.

See comments for an in-depth explanation of all the logic.

Also, add a test to exercise the problematic case.

PR Close #53457
2023-12-11 14:03:43 -08:00
Dylan Hunn b2e5a20c60 refactor(compiler): Eliminate BindingFlags and reorder parameters of createTemplateBinding (#53457)
It turns out that `BindingFlags.BindingTargetsTemplate` is actally a redundant property! It will be true in either of the following cases:
1. The template is a normal non-structural `ng-template`. We already know this from `TemplateKind`.
2. The binding came from `templateAttrs` (instead of `attrs`). We have this information in `BindingFlags.IsStructuralTemplateAttribute`.

Therefore, I can just eliminate `BindingFlags.BindingTargetsTemplate`. There's no reason to keep `BindingFlags` around for a single value, so I convert `BindingFlags.IsStructuralTemplateAttribute` to a boolean parameter (with the eventual goal of eliminating it entirely).

Additionally, because element binding ingestion now calls `ir.createBindingOp` inline, it was difficult to compare it to template binding ingestion, which uses the  `createTemplateBinding` helper. I have changed the parameter order of `createTemplateBinding` to closely mimic `ir.createBindingOp`. This will both make the code easier to read, and allow me to easily replace one with the other in the future.

Lastly: the template binding ingestion function is the site of much of the binding ingestion complexity. Add an explanatory function comment.

PR Close #53457
2023-12-11 14:03:43 -08:00
Dylan Hunn 694e6aeb97 refactor(compiler): Split up binding ingestion for elements and templates (#53457)
Previously, we had `ingestBindings` and `ingestBinding`, which required tons of cases to support both elements and templates.

Now, we have two separate functions, `ingestElementBindings` and `ingestTemplateBindings`.

Thanks to the previous refactoring work, `ingestBinding` is now extremely compact. In fact, it's so compact that, in the elements case, it can just be inlined! Therefore, element binding ingestion is now quite easy to read.

The template case continues to be pretty gnarly, although I have already removed some code. In subsequent commits, we will simplify it even further.

PR Close #53457
2023-12-11 14:03:43 -08:00
Dylan Hunn 876f90ab5d refactor(compiler): Simplify some code in ingest (#53457)
Currently Template Pipeline's ingest phase is very complex, especially when it comes to ingesting bindings.

In this commit, we make some superficial simplifications, in preparation for a larger refactoring. For example, we pull out common code such as `convertAstWithInterpolation` and the `i18n.Message` checks. This enormously shrinks the main binding ingestion functions.

In addition, we reorder the binding kind and flags code above `ingestBindings`, so that `ingestBindings` and `ingestBinding` can be viewed together.

PR Close #53457
2023-12-11 14:03:43 -08:00
Dylan Hunn 1faa61f573 refactor(compiler): Don't emit class and style bindings on structural template views (#53457)
The Template Pipeline has had a number of tricky bugs involving bindings on structural elements.

Consider this template:

```
<div *ngIf="true" [class.bar]="field"></div>
```

We were incorrectly emitting `ɵɵclassProp` on *both* the template's view, and the inner view. The solution is to just emit an extracted attribute on the enclosing template, so it still shows up in the const array, but does not affect the update block.

We will refactor binding ingestion soon, but this commit improves our correctness before any big refactor.

PR Close #53457
2023-12-11 14:03:43 -08:00
Joey Perrott 9bb34a2397 build: drop rxjs_umd_modules as it is unused (#53506)
Drop rxjs_umd_modules bazel target as its not longer used and will become a blocker to rxjs>6

PR Close #53506
2023-12-11 14:35:50 -07:00
Joey Perrott 1ea8a144dc refactor(docs-infra): move versions information into the application (#53501)
Move the versions information into the application for now

PR Close #53501
2023-12-11 19:21:34 +00:00
Joey Perrott ba19d80e70 refactor(docs-infra): refactor adev to build using architect (#53497)
Refactor adev as needed to build using architect.

PR Close #53497
2023-12-11 19:21:08 +00:00
JiaLiPassion 24d8aa63ef fix(zone.js): Promise.resolve(subPromise) should return subPromise (#53423)
In the original `Promise` impelmentation, zone.js follow the spec from
https://promisesaplus.com/#point-51.

```
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(p1);

p1 === p2; // false
```
in this case, `p2` should be the same status with `p1` but they are
still different instances.

And for some edge case.

```
class MyPromise extends Promise {
  constructor(sub) {
    super((res) => res(null));
    this.sub = sub;
  }
  then(onFufilled, onRejected) {
    this.sub.then(onFufilled, onRejected);
  }
}

const p1 = new Promise(setTimeout(res), 100);
const myP = new MyPromise(p1);
const r = await myP;
r === 1; // false
```

So in the above code, `myP` is not the same instance with `p1`,
and since `myP` is resolved in constructor, so `await myP` will
just pass without waiting for `p1`.

And in the current `tc39` spec here https://tc39.es/ecma262/multipage/control-abstraction-objects.html#sec-promise-resolve
`Promise.resolve(subP)` should return `subP`.

```
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(p1);

p1 === p2; // true
```

So the above `MyPromise` can wait for the `p1` correctly.

PR Close #53423
2023-12-11 10:55:12 -08:00
Pawel Kozlowski 044cb553b4 perf(core): optimize memory allocation when reconcilling lists (#52245)
This change replaces the implementation of the multi-map used to store
detached views while reconciling lists. The new implementation optimizes
memory allocation for such map and avoid arrays allocation when there are
no duplicated keys.

PR Close #52245
2023-12-08 15:00:14 -08:00
Joey Perrott f88b77b129 build: migrate adev generation to @angular/docs package (#53458)
Use the new rule from @angular/docs for generating guides

PR Close #53458
2023-12-08 14:33:34 -08:00
Joey Perrott 2f26159572 build: remove already migrated adev build tooling (#53454)
Remove the tooling as its now in dev-infra

PR Close #53454
2023-12-08 14:32:55 -08:00
Miles Malerba abc0b15635 refactor(compiler): Add i18n support for @defer blocks (#53440)
Pass through the i18n placeholders for the various parts of the defer
block during ingestion so its i18n message can be constructed

PR Close #53440
2023-12-08 14:32:31 -08:00
Miles Malerba 4ed58458b7 refactor(compiler): Ensure consistent handling of @empty template (#53440)
Phases that walk through the views by following template and repeater
ops need to remember to check the empty view as well for repeaters. This
commit adds fixes for phases that were missing it, or comments
explaining why its not handled.

PR Close #53440
2023-12-08 14:32:31 -08:00
Miles Malerba 101302bba0 refactor(compiler): Add i18n support for @for blocks (#53440)
@for does not use actual TemplateOps, but instead has a similar
RepeaterCreateOp. This commit adds support for this op to the relevant
i18n phases.

PR Close #53440
2023-12-08 14:32:31 -08:00
Jessica Janiuk 96ab999698 fix(migrations): CF Migration - ensure bound ngIfElse cases ignore line breaks (#53435)
When using ternaries or other expressions in bound if / else cases, it is possible that line breaks could end up affecting template replacement.

fixes: #53428

PR Close #53435
2023-12-08 14:31:25 -08:00
Andrew Scott c4d6dad394 refactor(core): Clean up subscription handling in ComponentFixture (#53426)
The subscriptions can be managed by a single subscription and unsubscribe on destroy

PR Close #53426
2023-12-08 14:30:14 -08:00
Andrew Scott 0004eed9ff refactor(core): Separate application and platform files even more (#53371)
This separates application and platform code into even more files. This now removes
the ciruclar dependency between scheduling and application ref.

PR Close #53371
2023-12-08 14:29:47 -08:00
Andrew Scott 469fe25fe1 refactor(core): Move code out of application_ref (#53371)
The application_ref is somewhat of a dumping ground for code. This commit
moves things around into more appropriately separate files.

PR Close #53371
2023-12-08 14:29:47 -08:00
Miles Malerba 9932439277 test(compiler): fix legacy message id test (#53459)
This test actually passes, template pipeline just orders the translated
messages and consts array differently. Since the order isn't important,
we just fork off an alternate golden file for template pipeline.

PR Close #53459
2023-12-08 14:28:28 -08:00
Dylan Hunn a398c558c0 refactor(compiler): Fix out-of-order i18n issue (#53405)
Fix a bug in the i18n retargeting and reordering phase.

PR Close #53405
2023-12-08 09:37:57 -08:00
Dylan Hunn a169dd0c0c refactor(compiler): Fix extra attribute on ng-template (#53405)
We no longer emit extra attribute instructions on certain `ng-template` elements with attributes.

PR Close #53405
2023-12-08 09:37:57 -08:00
Dylan Hunn 0bacc03bdb refactor(compiler): Add an additional failing test about i18n ordering (#53405)
I discovered this failure while looking at presubmit results. We appear to still have ordering issues, when more update ops are present.

PR Close #53405
2023-12-08 09:37:57 -08:00
Dylan Hunn de6ec5f152 refactor(compiler): Add failing tests about structural attr bindings (#53405)
While running a g3 presubmit, I discovered two related novel failure modes:

1. Simple case: this new test uses an `ngFor` structural directive, which binds a context variable. That variable is immediately used in an attribute binding. It looks like we generate an extra attribute instruction, which might result in an invalid property read at runtime.
2. Complex case: this is another attribute binding, this time on a structural element, inside of an `ng-template`. Not sure what's going on here.

PR Close #53405
2023-12-08 09:37:57 -08:00
Dylan Hunn 6dc3388bd3 refactor(compiler): Enable meaning_description i18n test in template pipeline (#53405)
The meaning decription test has different i18n message orders, as well as a different const order, but it is in fact passing.

PR Close #53405
2023-12-08 09:37:56 -08:00
Dylan Hunn 24177e973b refactor(compiler): Keep a TemplateKind on various binding ops (#53405)
Previously, binding ops only knew whether they applied to a structural template (and even this was actually very misleading!).

Now, binding ops have full information about what kind of template they apply to, if any (e.g. plain template, structural template, etc). Additionally, each binding knows whether it `IsStructuralTemplateAttribute`, which is a property of the binding rather than the template target.

In the future, we should refactor this to unify the various flags that can describe binding types, as well as the flags that describe template targets, into a single and comprehensive field on binding ops.

PR Close #53405
2023-12-08 09:37:56 -08:00
Dylan Hunn 16b7fcaafd refactor(compiler): Move the creation of i18n attribute contexts into a phase (#53405)
Previously, we created i18n contexts for i18n attributes in ingest. This turned out to be the wrong approach, because we don't always want to produce i18n messages for all i18n attributes! In fact, several kinds of i18n attributes on elements with structural directives should not produce their own messages.

This commit also contains related refactors to fix one such structural directives test.

PR Close #53405
2023-12-08 09:37:56 -08:00
Dylan Hunn fd54911521 refactor(compiler): Don't create i18n context ops for attribute bindings on structural templates (#53405)
When a binding is present on an element with a structural directive, that binding is parsed onto *both* the synthetic `ng-template`, as well as the inner element. However, we do not want to create different i18n messages for both bindings; we only want to generate a new i18n message for the inner, "real" element.

PR Close #53405
2023-12-08 09:37:56 -08:00
Dylan Hunn 19daa075e8 refactor(compiler): Listeners should be ingested before i18nStart (#53405)
Listener instructions should not be inside the i18n block. In order to avoid this, we ingest bindings on an element before starting the i18n block.

We previously missed this case because almost all bindings result in *update* instructions, which don't need to be ordered relative to i18nStart/i18nEnd create instructions. However, listeners are the only kind of binding that gets ingested into the create block.

PR Close #53405
2023-12-08 09:37:56 -08:00
Dylan Hunn 3c12cd7ab0 refactor(compiler): Fix i18nExp moving phase in Template Pipeline (#53405)
Previously, our i18n slot moving process was buggy. Specifically, it was not resilient to cases in which a create op consumed a slot, but no update ops depended on that slot.

The new algorithm fixes this issue, and is also easier to understand.

PR Close #53405
2023-12-08 09:37:56 -08:00
Pawel Kozlowski 17dbf8b8e2 fix(core): remove signal equality check short-circuit (#53446)
The PR https://github.com/angular/angular/pull/52465 introduced short-circuit for
the signal equality invocation - with the reasoning that the equality function
should never return false for arguments with the same references. In practice it
turned out that it is rather surprising and the subsequent PR
https://github.com/angular/angular/pull/52532 added a warning when the short-circuit
was taking priority over the equality function.

Still, the presence of the short-circuit prevents people from mutating objects in
place and based on https://github.com/angular/angular/issues/52735 this is a common
and desired scenario. This change removes the short-circuit altogether and thus
fixes the mentioned issue.

We do recognize that removing short-circuit exposes developers to the potentially
surprising logic where mutated in-place change won't be propagated throug the
reactivity graph (due to the deault equality function). But we assume that this might
be less surprising / more desirable as compared to the short-circuit logic.

Fixes #52735

PR Close #53446
2023-12-08 07:05:35 -08:00
Andrew Scott 58ed76be93 fix(core): Avoid refreshing a host view twice when using transplanted views (#53021)
This change fixes and issue where the expectation was that change
detection always goes through `detectChangesInView`. In reality,
`detectChangesInternal` directly calls `refreshView`
and refreshes a view directly without checking if it was dirty (to my discontent).

This update changes the implementation of `detectChangesInternal` to
actually be "detect changes" not "force refresh of root view and detect
changes". In addition, it adds the refresh flag to APIs that were
previously calling `detectChangesInternal` so we get the same behavior
as before (host view is forced to refresh).

Note that the use of `RefreshView` instead of `Dirty` is _intentional_
here. The `RefreshView` flag is cleared before refreshing the view while
the `Dirty` flag is cleared at the very end. Using the `Dirty` flag
could have consequences because it is a more long-lasting change to the
view flags. Because `detectChangesInView` will immediately clear the
`RefreshView` flag, this change is much more limited and does not
result in a different set of flags during the view refresh.

PR Close #53021
2023-12-07 12:05:24 -08:00
Jessica Janiuk 543df3dca5 fix(migrations): ensure we do not overwrite prior template replacements in migration (#53393)
This fixes a bug where only the last replacement of a template placeholder would apply.

fixes: #53383

PR Close #53393
2023-12-07 09:36:03 -08:00
Andrew Scott 65f9115d45 refactor(core): Run ComponentFixture constructor in injection context (#53400)
The component fixture dependencies have to be passed in manually. This
is a bit annoying to manage as we expand which dependencies are needed.
Instead, we can run the constructor in the TestBed injection context and
move the dependencies into the component fixture code, as is done with
other constructors in Angular.

PR Close #53400
2023-12-07 09:35:25 -08:00
Dylan Hunn 049e4ab596 release: cut the v17.0.6 release 2023-12-06 10:15:26 -08:00
Jessica Janiuk e8d01f995b refactor(migrations): Update comments to be more accurate (#53396)
This comment change better clarifies what these regexes do which should alleviate future confusion.

PR Close #53396
2023-12-06 09:45:44 -08:00
Andrew Scott c509ba43f1 Revert "Revert "fix(router): Ensure canMatch guards run on wildcard routes (#53239)" (#53339)" (#53342)
This reverts commit ac8eb5b943.

PR Close #53342
2023-12-06 09:44:19 -08:00
Dylan Hunn aaf199f282 refactor(compiler): Support unary ops in template pipeline (#53376)
Template Pipeline can now ingest and emit unary ops, such as `+` and `-`.

PR Close #53376
2023-12-06 09:43:36 -08:00
Dylan Hunn 648edaa508 refactor(compiler): template pipeline support for i18n blocks (#53376)
Blocks can contain i18n expressions. We already have most of the logic to make them work; we were just missing some ingestion code.

PR Close #53376
2023-12-06 09:43:36 -08:00
Dylan Hunn 755356c1bc refactor(compiler): Separate ownership and target for i18n expressions, and various refactors (#53376)
I18n expressions logically have both a target and an owner:
- For i18n text expressions, the owner is the i18nStart instruction. The target is initially the same, but later moves to be the last slot consumer in the i18n block.
- For i18n attribute expressions, the owner is the I18nAttributes config instruction, whereas the target is the ElementCreate that hosts the attribute.

This refactor makes the code clearer in quite a few plases.

Additionally, we now perform a lot of the i18n processing earlier. For example, re-targeting and re-ordering of i18n expressions happens *before* apply instructions are generated. As a result, the re-ordering logic is a lot simpler.

These changes also have consequences on i18n const collection, along with a couple other minor changes.

PR Close #53376
2023-12-06 09:43:36 -08:00
Kristiyan Kostadinov 66ecf4c274 fix(compiler-cli): add compiler option to disable control flow content projection diagnostic (#53387)
These changes add an option to the `extendedDiagnostics` field that allows the check from #53190 to be disabled. This is a follow-up based on a recent discussion.

PR Close #53387
2023-12-06 09:43:10 -08:00
Kristiyan Kostadinov 74e6ce5d23 fix(compiler-cli): add diagnostic for control flow that prevents content projection (#53387)
This is a follow-up to the fix from #52414. It adds a diagnostic that will tell users when a control flow is preventing its direct descendants from being projected into a specific component slot.

PR Close #53387
2023-12-06 09:43:10 -08:00
Kristiyan Kostadinov cfa80dc107 test(core): add tests for control flow content projection with ng-container (#53387)
The control flow projection diagnostic will mention `ng-container` as a workaround for projection multiple nodes. These changes add a couple of tests to ensure that the approach works.

PR Close #53387
2023-12-06 09:43:10 -08:00
Kristiyan Kostadinov ec9cc38015 refactor(compiler-cli): expose ng-content selectors and preserveWhitespaces during template type checking (#53387)
These changes expose the `ngContentSelectors` and `preserveWhitespaces` metadata to the TCB so they can be used in the next commit to implement a new diagnostic.

PR Close #53387
2023-12-06 09:43:10 -08:00
Kristiyan Kostadinov cbbd9f3f19 refactor(compiler): expose utility for creating CSS selectors from AST nodes (#53387)
When doing directive matching in the compiler, we need to be able to create a selector from an AST node. We already have the utility, but these changes simplify the public API and expose it so it can be used in `compiler-cli`.

PR Close #53387
2023-12-06 09:43:10 -08:00
Jessica Janiuk 836aeba01d fix(migrations): Change CF Migration ng-template placeholder generation and handling (#53394)
Using more unique characters makes it easier to parse placeholders that may contain JS logic, making it more flexible.

fixes: #53386
fixes: #53385
fixes: #53384

PR Close #53394
2023-12-06 09:42:43 -08:00
Alex Rickabaugh d4fdba5679 Revert "refactor(core): output an error guide link in prod mode (#53324)" (#53392)
This reverts commit f245aba782.

Reason: breaks g3

PR Close #53392
2023-12-06 07:23:24 -08:00
Matthieu Riegler 7c863d728c refactor(devtools): run control flow migration. (#53353)
Let's update the devtools with the latest improvements !

PR Close #53353
2023-12-05 17:20:09 -08:00
Jessica Janiuk 2a4e3f5373 fix(migrations): handle templates outside of component in cf migration (#53368)
If a template is passed in as an input, the ng-template will not exist in the same component template. This will leave a template placeholder behind. This fix ensures that template placeholder gets turned into a template outlet.

fixes: #53361

PR Close #53368
2023-12-05 17:19:37 -08:00
Jessica Janiuk 5104a89b30 fix(migrations): handle nested ng-template replacement safely in CF migration (#53368)
When there are ng-templates nested inside other ng-templates, the replacement and removal of the templates gets disrupted. Re-processing the templates in the file along the way resolves this issue.

fixes: #53362

PR Close #53368
2023-12-05 17:19:37 -08:00
Dylan Hunn 708131dc01 refactor(compiler): Initial support for i18n attributes (#53341)
Add support for i18n attributes:
- Generate i18n contexts from i18n attributes, and extract the eventual messages into the constant pool.
- Emit I18nAttributes config instructions when needed.
- Use the generated i18n variable in the appropriate places, including extracted attribute instructions, as well as I18nAttributes config arrays.

PR Close #53341
2023-12-05 17:13:59 -08:00
Matthieu Riegler 20ea149a85 refactor(devtools): enables typescript strict option (#53340)
Enabling `strict` is part of an effort to improve the quality of the devtools code base.
One of the direct side effect is to enable `noImplicitAny`, `strictPropertyInitialization` and `strictBindCallApply`.

This commit also replaces `fullTemplateTypeCheck` with `stringTemplates`.

PR Close #53340
2023-12-05 12:42:56 -08:00
Srinath Vayalpati 2d2eaec2ae docs: fixed wrong template string placeholder (#53286)
PR Close #53286
2023-12-04 21:50:35 -08:00
Joey Perrott 40e8577faf build: set up markdown pipeline for the reference section (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:14 -08:00
Joey Perrott dae3e24d14 build: set up markdown pipeline for the tools section (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:14 -08:00
Joey Perrott 036a2fdc0c build: set up markdown pipeline for service-workers section (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:14 -08:00
Joey Perrott 9140b027fa build: set up markdown pipeline for runtime-performance part of the best-practices section (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:13 -08:00
Joey Perrott 857f29b9e9 build: set up markdown pipeline for best-practices section (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:13 -08:00
Joey Perrott 1e424863eb build: set up markdown pipeline for introduction section (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:13 -08:00
Joey Perrott 8fc9ff0e9e build: set up markdown pipeline for essentials of the introduction section (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:13 -08:00
Joey Perrott cb460f81cc build: set up markdown pipeline for testing directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:13 -08:00
Joey Perrott a18b6b9284 build: set up markdown pipeline for templates directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:13 -08:00
Joey Perrott ef553363da build: set up markdown pipeline for signals directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:13 -08:00
Joey Perrott 4736efc94f build: set up markdown pipeline for pipes directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:12 -08:00
Joey Perrott 069dcd11c8 build: set up markdown pipeline for routing directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:12 -08:00
Joey Perrott 0d7f679d0f build: set up markdown pipeline for ngmodules directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:12 -08:00
Joey Perrott 24c4c77870 build: set up markdown pipeline for i18n directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:12 -08:00
Joey Perrott cb34d35db7 build: set up markdown pipeline for http directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:12 -08:00
Joey Perrott 7af3237935 build: set up markdown pipeline for forms directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:12 -08:00
Joey Perrott 6312d63b47 build: set up markdown pipeline for directives directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:11 -08:00
Joey Perrott 7e2fe81b74 build: set up markdown pipeline for di directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:11 -08:00
Joey Perrott 86f0f4adf8 build: set up markdown pipeline for components directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:11 -08:00
Joey Perrott 90625890c0 build: fix name for animations markdown target (#53290)
Use the animations name as the target name instead of test

PR Close #53290
2023-12-04 21:47:11 -08:00
Joey Perrott bc1d323345 build: set up markdown pipeline for root directory of the content guide (#53290)
Set up the markdown pipeline to include the required source files.

PR Close #53290
2023-12-04 21:47:11 -08:00
Kristiyan Kostadinov 6ec7a42b95 fix(compiler-cli): avoid conflicts with built-in global variables in for loop blocks (#53319)
Currently we generate the following TCB for a `@for` loop:

```ts
// @for (item of items; track item) {...}

for (const item of this.items) {
  var _t1 = item;
  // Do things with `_t1`
}
```

This is problematic if the item name is the same as a global variable (e.g. `document`), because when the TCB has references to that variable (e.g. `document.createElement`), it'll find the loop initializer instead of the global variable.

These changes fix the issue by generating the following instead:

```ts
for (const _t1 of this.items) {
  // Do things with `_t1`
}
```

Fixes #53293.

PR Close #53319
2023-12-04 21:45:18 -08:00
Andrew Kushnir 187ba05f1e refactor(core): skip disconnected nodes while computing node path for hydration (#53317)
In certain cases Angular hydration logic can not rely on the order in which elements are present in a template (for example, in content-projection use-cases) and there is a need to serialize a path from one node to another, so that hydration can locate an element on a page. The logic attempts to use an immediate parent element as an anchor and compute the path from it. If it fails - the path is computed starting from the <body> (this is a fallback).

This commit updates the logic to walk up the parents tree if an immediate parent (from a template) is disconnected from the DOM. This helps to shorten the lookup path and make it more stable.

PR Close #53317
2023-12-04 21:44:08 -08:00
Tomasz Ducin 25cfccbadf refactor(devtools): filtering providers by token within "injector tree" tab (#53313)
In some injectors, there are LOTS of providers, making it slightly inconvenient to search for a certain one. This commit introduces a search-by-token for providers of a specific injector.

PR Close #53313
2023-12-04 21:43:34 -08:00
Jessica Janiuk 26e40c7f89 fix(migrations): CF Migration fix missing alias for bound ngifs (#53296)
Empty aliases are considered the item in an ngFor, and ngIf was skipping that value.

fixes: #53291

PR Close #53296
2023-12-04 21:42:58 -08:00
Andrew Kushnir 493c412706 refactor(core): output an error guide link in prod mode (#53324)
Currently, the link to an error guide is only included into an error message in dev mode. This change makes the `Find more at https://angular.io/errors/NG0XYZ` appear in the error message even in prod mode. Note: the rest of the error message is still tree-shaken away in prod mode (as it happens today).

PR Close #53324
2023-12-04 21:42:28 -08:00
Jessica Janiuk 0db75ab5b1 fix(migrations): remove setting that removes comments in CF migration (#53350)
This setting was added to prevent comment duplication, since the TS AST printer includes prior line comments as part of a given line with no way to really avoid that.
However in component imports, it is not safe to remove comments as they could be load bearing for some.

PR Close #53350
2023-12-04 21:41:41 -08:00
JoostK 0a53f96094 fix(core): cleanup signal consumers for all views (#53351)
This commit fixes a memory leak where signal consumers would not be cleaned up for
descendant views when a view is destroyed, because the cleanup logic was only invoked
for the view that is itself being destroyed.

PR Close #53351
2023-12-04 21:41:13 -08:00
Miles Malerba dc27bea972 test(compiler): Update golden partial file (#53327)
Update the golden partial file to include the newly added tests in this
PR.

PR Close #53327
2023-12-04 14:24:22 -08:00
Miles Malerba 326a6023ca refactor(compiler): Fix structural directive i18n placeholders (#53327)
Previously we recorded separate param values for a strucural directive
and the element tag it goes on. We then later attempted to combine those
into a single value. However in some cases this merging logic matched
the directive with the wrong tag.

This change implements an alternate approach where we match the
directive to its element tag from the start, while we're traversing the
ops. This should be a more robust solution.

PR Close #53327
2023-12-04 14:24:22 -08:00
Miles Malerba ea4c9b5dcb refactor(compiler): Add missing projection arguments (#53327)
We previously failed to populate the attributes property on projection
ops, this commit populates it and later strips out the "select"
attribute.

PR Close #53327
2023-12-04 14:24:22 -08:00
Miles Malerba 57b0271543 refactor(compiler): Add support for ng-content in i18n blocks (#53327)
Adds support for handling i18n paceholders on ng-content and adds a new
test to verify behavior.

PR Close #53327
2023-12-04 14:24:22 -08:00
Miles Malerba a9afc43d7d refactor(compiler): Fix sub-template index for sibling i18n blocks (#53327)
Previously we failed to reset the sub-template index counter when we
exited a root block. This caused following sibling blocks to start
counting at the wrong index.

PR Close #53327
2023-12-04 14:24:22 -08:00
Miles Malerba abafebd24e refactor(compiler): Fix not expressions (#53327)
Adds `PrefixNot` to the handled expressions in the template pipeline

PR Close #53327
2023-12-04 14:24:21 -08:00
Dylan Hunn ac8eb5b943 Revert "fix(router): Ensure canMatch guards run on wildcard routes (#53239)" (#53339)
This reverts commit 1940280d27.

PR Close #53339
2023-12-03 14:57:54 -08:00
Miles Malerba 21741384f4 docs(compiler): Improve code comments (#53300)
Adds better comments describing the case where we have multiple ICU
sub-messages that share the same plaeholder.

PR Close #53300
2023-12-01 14:51:30 -08:00
Miles Malerba c1d9b71c4a test(compiler): Enable newly passing tests (#53300)
Enables additional tests that pass after implementing the ICU logic.

PR Close #53300
2023-12-01 14:51:30 -08:00
Miles Malerba ec61ef0895 refactor(compiler): Fix ingestion of nested ICUs (#53300)
It is possible for ICUs to be nested inside other ICUs. This change
adjusts our ingestion logic to create extra interpolation ops for the
nested ICUs during ingestion.

PR Close #53300
2023-12-01 14:51:30 -08:00
Miles Malerba 5ce3190da7 refactor(compiler): Remove invalid assertion about i18n params (#53300)
We previously had an assertion that every placeholder in the i18n AST
had a corresponding param in the output. However, there are some cases
such as interpolations nested inside ICUs where this assertion is not
true. This change simply removes the asserion.

PR Close #53300
2023-12-01 14:51:30 -08:00
Miles Malerba a9e8c3cb0b refactor(compiler): Add support for ICUs that share a placeholder (#53300)
ICUs may share a placeholder, and in that case they need special
post-processing. This change adds logic to cover this possibility. In
particular, we set the param to a special placeholder value and then
pass an array containing the sub-message variables as a post-processing
param.

PR Close #53300
2023-12-01 14:51:30 -08:00
Miles Malerba c8b34623d9 refactor(compiler): Handle i18n placeholders with spaces (#53300)
I18n placeholders may contain spaces, this change updates the formatting
logic to replace them with underscores in the output.

PR Close #53300
2023-12-01 14:51:30 -08:00
Miles Malerba 9040ea4d19 refactor(compiler): Put i18n expression ops in the correct order (#53300)
When we re-assign the slot dependencies for the i18nExprs, we should
move them down below the other ops that target their same slot. This
keeps the behavior consistent with TDB

PR Close #53300
2023-12-01 14:51:29 -08:00
pBouillon af5da6db66 docs: fix the colspan and colSpan link in the property binding page (#53180)
PR Close #53180
2023-12-01 10:36:54 -08:00
Matthieu Riegler 83a3aa58f3 docs: Error codes should start with a 0. (#53271)
Also adding NG0602 to adev.

PR Close #53271
2023-12-01 10:36:21 -08:00
Andrew Kushnir 8e366e8911 fix(core): support swapping hydrated views in @for loops (#53274)
This commit fixes an issue where swapping hydrated views was not possible in the new control flow repeater. The problem was caused by the fact that an internal representation of a view had no indication that hydration is completed and further detaching/attaching should work in a regular (non-hydration) mode. This commit adds a logic that resets a pointer to a dehydrated content and we use this as an indication that the view is swtiched to a regular mode.

Resolves #53163.

PR Close #53274
2023-12-01 10:35:37 -08:00
Jessica Janiuk 58a96e0f50 fix(migrations): CF Migration add support for ngIf with just a then (#53297)
Prior to this fix, the expectation that anytime then was used, else would always be present. That is not a valid assumption.

fixes: #53287

PR Close #53297
2023-12-01 10:33:53 -08:00
Jessica Janiuk 45064f1ae1 fix(migrations): CF migration - ensure NgIfElse attributes are properly removed (#53298)
the attribute in question was assumed to be at the start of the replaced content, but it could be later, too.

fixes: #53288

PR Close #53298
2023-12-01 10:32:36 -08:00
Jessica Janiuk a6275cfa54 fix(migrations): CF Migration - Fix case of aliases on i18n ng-templates preventing removal (#53299)
i18n template removal expected no other attributes to be present, but if a bound ngIf is present with aliases and i18n, that is more than what was expected. Now it should safely remove them appropriately.

fixes: #53289

PR Close #53299
2023-12-01 09:18:32 -08:00
Andrew Kushnir 14e66533ec fix(core): support hydration for cases when content is re-projected using ng-template (#53304)
This commit fixes an issue with hydration, which happens when a content is projected in a certain way, leaving host elements non-projected, but the child content projected.

The fix is to detect such situations and add extra annotations to help runtime logic locate those elements at the right locations.

Resolves #53276.

PR Close #53304
2023-12-01 09:12:55 -08:00
Andrew Kushnir a2e5f483f5 fix(compiler): generate proper code for nullish coalescing in styling host bindings (#53305)
This commit fixes an issue where having an expression with nullish coalescing in styling host bindings leads to JS errors due to the fact that a declaration for a temporary variable was not included into the generated code.

Resolves #53295.

PR Close #53305
2023-12-01 09:12:20 -08:00
Andrew Scott 13ade13a15 fix(router): Ensure canMatch guards run on wildcard routes (#53239)
This commit makes sure that wildcard routes still run the `canMatch`
guards.

Fixes #49949

PR Close #53239
2023-11-30 09:45:41 -08:00
Tomasz Ducin 8c0e7733d6 refactor(devtools): devtools support for maps and symbol description (#53167)
Added 2 tiny improvements:
- instead of "Symbol()", "Symbol(DESCRIPTION)" is displayed
- ECMAScript Maps are distinguished
Additionally:
- PropTypes has been moved to a separate file
- Simple unit tests covering each PropType except for PropType.Unknown

PR Close #53167
2023-11-30 09:45:13 -08:00
Matthieu Riegler f812e72b80 fix(devtools): use a shared angular detection code (#51569)
This fixes an issue where an angular app exposes a global `ng` object that is not our `ng`.

fixes #51565

PR Close #51569
2023-11-30 09:40:12 -08:00
AleksanderBodurri 3f65485e94 docs(devtools): write feature descriptions for new DI debugging features in Angular Devtools (#52290)
This commit adds new sections to the devtools aio page for the new DI debugging features in Angular DevTools:

1. Directive dependency inspection
2. Injector hierarchy visualization

PR Close #52290
2023-11-30 09:38:27 -08:00
Alexander Melde 2a39e64288 docs: fix typo in control flow track description (#52849)
as -> are
PR Close #52849
2023-11-30 09:37:38 -08:00
Sylvain DEDIEU 00a9fd04c0 docs: update http providers example to show the app.config.ts instead of the main.ts (#52848)
The examples of how to provide the http fetch, cookie/header name and disabling XSRF protection now show the app.config.ts file instead of the main.ts file since the cli boostrap application with this architecture.

PR Close #52848
2023-11-30 09:37:06 -08:00
Sasidharan SD 95e84c5e0b docs: fix variable name in code comment (#52851)
PR Close #52851
2023-11-30 09:36:37 -08:00
Sasidharan SD cd14750028 docs: remove repetetive line (#52864)
PR Close #52864
2023-11-30 09:36:10 -08:00
Sai Kumar Kola 9b47003d26 docs: fix typo in learn-angular/forms-validation (#52901)
PR Close #52901
2023-11-30 09:35:43 -08:00
Sasidharan SD 114b840a54 docs: fix typo on form tutorial step 18 (#52908)
PR Close #52908
2023-11-30 09:35:14 -08:00
Pridon Tetradze 60dc59ba24 docs: add missing --no-standalone flag (#52910)
PR Close #52910
2023-11-30 09:34:41 -08:00
Sylvain DEDIEU 063954a6f4 docs: wrong web docs urls for host and host-context (#52966)
Wrong MDN Web Docs URLs for host / host-context on angular.dev

PR Close #52966
2023-11-30 09:34:14 -08:00
Sasidharan SD 12027f5815 docs: fix minor typos in tutorials (#52970)
PR Close #52970
2023-11-30 09:33:46 -08:00
Isaac Aggrey 6478c191b9 docs: fix typo (#53039)
PR Close #53039
2023-11-30 09:33:17 -08:00
Matthieu Riegler 0dbf48b799 docs: fix image path for directive overview (#53048)
fixes #53047

PR Close #53048
2023-11-30 09:32:35 -08:00
Sasidharan SD d6998af34b docs: fix angular press kit logo title (#53055)
PR Close #53055
2023-11-30 09:30:04 -08:00
Matthieu Riegler 848a3fe87e docs: fix section title on binding.md (#53072)
fixes #53070

PR Close #53072
2023-11-30 09:29:32 -08:00
Sasidharan SD a97a6db168 docs: fix directives header (#53080)
PR Close #53080
2023-11-30 09:29:06 -08:00
Sasidharan SD 485fb1d309 docs: fix inconsistent example in binding page (#53081)
PR Close #53081
2023-11-30 09:28:35 -08:00
Sasidharan SD 2f42366b2c docs: update template ref variable with correct link (#53084)
PR Close #53084
2023-11-30 09:28:09 -08:00
Alejandro c67cd2678d docs: remove extra parenthesis in multiple examples and extra backtick (#53098)
PR Close #53098
2023-11-30 09:27:40 -08:00
oliv37 3b58058456 docs: fix schematics links (#53121)
PR Close #53121
2023-11-30 09:27:14 -08:00
Tamás Baranyi 487b87ab2b docs: tutorial url on tutorials/first-app/http page fixed (#53125)
fixes: #53122

PR Close #53125
2023-11-30 09:25:58 -08:00
Balaji 3c9559b340 docs: added more context to the description of standalone components card (#53186)
PR Close #53186
2023-11-30 09:23:31 -08:00
Balaji 640540ada3 docs: updated the description of typed forms card (#53186)
PR Close #53186
2023-11-30 09:23:30 -08:00
Balaji 9d8da59f8b docs: updated the description of module with providers card (#53186)
PR Close #53186
2023-11-30 09:23:30 -08:00
Balaji f29ecadc17 docs: updated the description of standalone components card (#53186)
PR Close #53186
2023-11-30 09:23:30 -08:00
Balaji 535245a326 docs: updated the headline of migration overview section (#53186)
PR Close #53186
2023-11-30 09:23:30 -08:00
prasantht96 9805c179d6 docs: fix typos in adev (#53189)
PR Close #53189
2023-11-30 09:23:03 -08:00
Abhishek Upadhyay 295c26d78d docs: corrected gramatical mistake in ssr.md (#53264)
PR Close #53264
2023-11-30 09:22:00 -08:00
Jan-Niklas W 1be5fc0955 docs: remove unnecessary word (#53265)
PR Close #53265
2023-11-30 09:21:34 -08:00
Fabian Schmidt a7bc603263 docs: fix typo in word "intrinsic" for adev and aio (#53250)
This is a fix for two typos in both angular.dev and angular.io docs

PR Close #53250
2023-11-30 09:20:10 -08:00
Jessica Janiuk 72d22ba7ee fix(migrations): fix regexp for else and then in cf migration (#53257)
The regexp for then and else did not ignore alphanumeric characters prior to the then and else. So if a string contained then, for example Authentication, it would incorrectly match as a then clause.

fixes: #53252

PR Close #53257
2023-11-30 09:19:43 -08:00
Jessica Janiuk 7a2facae8a fix(migrations): handle aliases on bound ngIf migrations (#53261)
This fixes a reported issue where ngIf is used on an ng-template with let aliases.

fixes: #53251

PR Close #53261
2023-11-30 09:19:15 -08:00
Andrew Scott 0c8f3f08ee docs: Update deprecation guide example (#53262)
fixes #53242

PR Close #53262
2023-11-30 09:18:29 -08:00
Jessica Janiuk bea0de3488 docs: fix changelog to remove at for user reference (#53267)
This fixes the common issue of a commit referencing our @ syntax and pointing to a user with a matching name on github.

PR Close #53267
2023-11-30 09:17:58 -08:00
Andrew Kushnir 4fc1581bbc fix(core): handle hydration of multiple nodes projected in a single slot (#53270)
This commit updates the logic to handle hydration of multiple nodes projected in a single slot. Currently, in case component nodes are content-projected and their order is changed during the projection, hydration can not find the correct element. With this fix, extra annotation info would be included for such nodes and hydration logic at runtime will use it to locate the right element.

Resolves #53246.

PR Close #53270
2023-11-30 09:16:24 -08:00
Joey Perrott 81e9489ef2 build: set up initial adev guide (#53208)
Set up the pipeline for guides in adev with first exampele, animations

PR Close #53208
2023-11-29 20:37:45 +00:00
Joey Perrott a0b788952d refactor(docs-infra): remove shared code from adev in favor of loading from dev-infra common package (#53214)
Remove shared code as part of its migration to the dev-infra package.

PR Close #53214
2023-11-29 20:37:21 +00:00
Pawel Kozlowski 5f6323c36d release: cut the v17.0.5 release 2023-11-29 18:18:16 +01:00
Jessica Janiuk 6ae408847c fix(migrations): properly handle ngIfThen cases in CF migration (#53256)
The migration was handling bound casees of [ngIfThenElse] and also needed [ngIfThen].

fixes: #53254

PR Close #53256
2023-11-29 17:34:02 +01:00
Jessica Janiuk c22af72f75 fix(migrations): fix off by one issue with template removal in CF migration (#53255)
When ng-templates are removed, an extra space was being added when it was unnecessary. This resulted in malformed html if there was no space afterwards.

fixes: #53248

PR Close #53255
2023-11-29 17:33:19 +01:00
Jessica Janiuk 5b9f896009 fix(migrations): cf migration fix migrating empty switch default (#53237)
This should address cases when using ng-containers with ngSwitchCase / ngSwitchDefault
and migrating them safely when they are empty.

fixes: #53235

PR Close #53237
2023-11-29 15:15:50 +01:00
Miles Malerba baf5830bc9 test(compiler): Update golden partial file (#53209)
Updates the golden partial file to account for the newly added test

PR Close #53209
2023-11-29 10:31:51 +01:00
Miles Malerba a31f65d86c refactor(compiler): Fix order of compound template/element param values (#53209)
As part of this fix, I realized that child i18n blocks don't need their
own context. Instead, we can just add their params directly to the
context for their root block, and forgo the step of merging the contexts.

PR Close #53209
2023-11-29 10:31:50 +01:00
Miles Malerba 44108f2f87 refactor(compiler): Fix sub-template index logic (#53209)
Fixes a bug in the sub-template index logic that caused it to reuse
indices that had already been assigned to more deeply nested templates

PR Close #53209
2023-11-29 10:31:50 +01:00
Miles Malerba efca206ed8 refactor(compiler): Fix i18n parms for structural directives (#53209)
Structural directives inside an i18n block previously resulted in a
"list" param value (represented as "[...|...]"). This commit adds a
special case to the template pipeline to collapse the list into a single
compound value like TemplateDefinitionBuilder does.

PR Close #53209
2023-11-29 10:31:50 +01:00
Miles Malerba 787367831e refactor(compiler): Record sub-messages as belonging to root i18n block (#53209)
ICU sub-messages should be recorded as belonging to the message for the
root i18n block they are part of. This ensures that they still get
emitted even if they are nested in a child template.

PR Close #53209
2023-11-29 10:31:50 +01:00
Miles Malerba d121e4e91f refactor(compiler): Add contextType to I18nContextOp (#53209)
Adding a context type makes code that depends on the kind of context
more explicit and easier to follow

PR Close #53209
2023-11-29 10:31:50 +01:00
Jessica Janiuk 2b3d3b0fe1 fix(migrations): CF migration log warning when collection aliasing detected in @for (#53238)
This logs a warning when an ngFor has a collection aliased, which is not supported with new syntax.

fixes: #53233

PR Close #53238
2023-11-29 10:29:53 +01:00
Andrew Kushnir 6be88040d1 fix(core): avoid stale provider info when TestBed.overrideProvider is used (#52918)
This commit updates the logic to preserve previous value of cached TView before applying overrides. This helps ensure that the next tests that uses the same component has correct provider info.

PR Close #52918
2023-11-29 09:48:53 +01:00
Jessica Janiuk dffeac8386 fix(migrations): cf migration removes unnecessary bound ngifelse attribute (#53236)
this removes a no longer necessary attribute in bound ngIfElse cases.

fixes: #53230

PR Close #53236
2023-11-29 09:47:45 +01:00
aparziale b2e3b3e22e docs: suggestions applied (#53117)
PR Close #53117
2023-11-28 19:43:31 +01:00
aparzi 6f3b7a73b2 docs: updates the documentation for the ToH tutorial more comprehensively (#53117)
PR Close #53117
2023-11-28 19:43:30 +01:00
Alan Agius df01a5cb23 test: refactor platform-server integration tests to use application builder (#53219)
This commit updates the platform-server tests to use the new application builder, with this change we also have to remove the sizechecks since esbuild will do code motion and split the code into multiple chunks example `chunk-QUKLKPSE.js`.

PR Close #53219
2023-11-28 19:29:09 +01:00
Jessica Janiuk ba6d7fe018 fix(migrations): fixes CF migration i18n ng-template offsets (#53212)
This addresses an issue where multiple ng-templates are present with i18n attributes. The offsets would be incorrectly accounted for when being replaced with an ng-container.

fixes: #53149

PR Close #53212
2023-11-28 16:44:11 +01:00
Jessica Janiuk 0fcef65cea fix(migrations): Update CF migration to skip templates with duplicate ng-template names (#53204)
This adds a message to the console and skips any templates that detect duplicate ng-template names in the same component.
fixes: #53169

PR Close #53204
2023-11-28 16:43:28 +01:00
Jessica Janiuk dbd6f386ea fix(migrations): allows colons in ngIf else cases to migrate (#53076)
This makes sure colons after else and then cases get migrated properly.
fixes: #53150

PR Close #53076
2023-11-28 14:03:29 +01:00
Jessica Janiuk 8f6affdd64 fix(migrations): fixes control flow migration common module removal (#53076)
Common module removal would not happen when a component used a templateUrl due to the checks being in separate files. This change passes the removal analysis back to the original source file to safely remove CommonModule.

PR Close #53076
2023-11-28 14:03:29 +01:00
Jessica Janiuk aab7fb8654 fix(migrations): Add ngForTemplate support to control flow migration (#53076)
This adds code to cover the rare use case of an ngFor with a template param.
fixes: #53068

PR Close #53076
2023-11-28 14:03:29 +01:00
Jessica Janiuk 00cb3339ba fix(migrations): control flow migration formatting fixes (#53076)
This fix preserves leading indents in inline templates and also adds better handling for self closing tags

PR Close #53076
2023-11-28 14:03:29 +01:00
Angular Robot 92a28a77b1 build: update dependency jsdom to v23 (#53194)
See associated pull request for more information.

PR Close #53194
2023-11-28 11:04:52 +01:00
y cf3de8351f docs: fix recurring typo in adev (#53172)
PR Close #53172
2023-11-28 10:59:53 +01:00
y 836c1e1bb2 docs: fix typo in hello-world tutorial (#53172)
PR Close #53172
2023-11-28 10:59:53 +01:00
Angular Robot 955e978978 build: update dependency angular-split to v17 (#53100)
See associated pull request for more information.

PR Close #53100
2023-11-28 10:57:28 +01:00
Nikolay Ponich 115dc23317 build: upgrade node version for .devcontainer example file (#53157)
PR Close #53157
2023-11-27 15:49:35 +01:00
Kristiyan Kostadinov 4604be2502 refactor(platform-browser): clean up legacy way of getting a relative path (#53097)
Currently the way we extract the pathname of a URL is by creating an anchor node, assigning the URL to its `href` and reading the `pathname`. This is inefficient and it triggers an internal security check that doesn't allow the `href` attribute to be set which ends up blocking https://github.com/angular/components/pull/28155.

These changes switch to using the browser's built-in URL parsing instead.

PR Close #53097
2023-11-27 10:59:53 +01:00
Angular Robot 6d61f2df3a build: update dependency karma-jasmine-html-reporter to v2 (#52544)
See associated pull request for more information.

PR Close #52544
2023-11-27 10:47:54 +01:00
Timon fbc8c567a2 docs: typo in prerendering.md (#52868)
PR Close #52868
2023-11-27 10:46:58 +01:00
Angular Robot 935fa8fbe0 build: update dependency globby to v14 (#52804)
See associated pull request for more information.

PR Close #52804
2023-11-21 10:31:36 -08:00
Angular Robot 7d88c5f6eb build: update dependency karma-jasmine to v5 (#52543)
See associated pull request for more information.

PR Close #52543
2023-11-21 10:30:25 -08:00
Sasidharan SD 53bd876266 docs: fix bold text in lifecycle markdown (#53079)
PR Close #53079
2023-11-21 10:29:37 -08:00
Doug Parker a26f281b52 docs: provide clearer instructions for migrating existing SSR apps to application builder (#52762)
This ports https://github.com/angular/angular/pull/52485 to angular.dev.

PR Close #52762
2023-11-21 10:28:53 -08:00
Kristiyan Kostadinov dee50f1d78 fix(core): inherit host directives (#52992)
Adds support for inheriting host directives from the parent class. This is consistent with how we inherit other features like host bindings.

Fixes #51203.

PR Close #52992
2023-11-20 13:16:16 -08:00
Leonel Franchelli 91486aaf07 fix(router): Resolvers in different parts of the route tree should be able to execute together (#52934)
The following commit accidentally broken execution of resolvers when
two resolvers appear in different parts of the tree and do not share a
https://github.com/angular/angular/commit/327896606832bf6fbfc8f23989755123028136a8

This happens when there are secondary routes. This test ensures that all
routes with resolves are run.

fixes #52892

PR Close #52934
2023-11-20 12:07:11 -08:00
Andrew Scott 07920d96d4 fix(core): Reattached views that are dirty from a signal update should refresh (#53001)
Related to #52928 but `updateAncestorTraversalFlagsOnAttach` is called
on view insertion and _should_ have made that work for views dirty from
signals but it wasn't updated to read the `dirty` flag when we changed
it from sharing the `RefreshView` flag.

For #52928, we've traditionally worked under the assumption that this is working
as expected.  The created view is `CheckAlways`. There is a question of whether we
should automatically mark things for check when the attached view has
the `Dirty` flag and/or has the `FirstLViewPass` flag set (or other
flags that indicate it definitely needs to be prefreshed).

PR Close #53001
2023-11-20 12:06:33 -08:00
Matthieu Riegler 42272a0db6 refactor(core): replace runInContext by runInInjectionContext (#53035)
Saves a few bytes since function names can be mangled.

PR Close #53035
2023-11-20 12:05:01 -08:00
yuki b65dd2327e docs: fix packages\core\src\application_init.ts (#53040)
PR Close #53040
2023-11-20 12:04:17 -08:00
Andrew Kushnir 710a24a7d0 release: cut the v17.0.4 release 2023-11-20 11:43:40 -08:00
Jessica Janiuk 0fad36eff2 fix(migrations): tweaks to formatting in control flow migration (#53058)
This addresses a few minor formatting issues with the control flow migration.

fixes: #53017

PR Close #53058
2023-11-20 10:46:43 -08:00
Kristiyan Kostadinov 291deac663 fix(compiler): generate i18n instructions for blocks (#52958)
Adds support for generating i18n instructions inside of blocks.

Fixes #52540.
Fixes #52767.

PR Close #52958
2023-11-20 08:59:26 -08:00
Kristiyan Kostadinov f01b7183d2 fix(compiler): produce placeholder for blocks in i18n bundles (#52958)
When blocks were initially implemented, they were represented as containers in the i18n AST. This is problematic, because block affect the structure of the message.

These changes introduce a new `BlockPlaceholder` AST node and integrate it into the i18n pipeline. With the new node blocks are represented with the `START_BLOCK_<name>` and `CLOSE_BLOCK_<name>` placeholders.

PR Close #52958
2023-11-20 08:59:25 -08:00
anthonyfr75 ac9cd6108f fix(migrations): control flow migration fails for async pipe with unboxing of observable (#52756) (#52972)
Update control flow syntax to use 'as' for proper async pipe handling, accounting for variable whitespace before 'let'.

Fixes #52756

PR Close #52972
2023-11-20 08:58:45 -08:00
arturovt 7f1c55755d fix(common): remove load on image once it fails to load (#52990)
This commit adds an `error` listener to image elements and removes both
`load` and `error` listeners once the image loads or fails to load. The `load`
listener would never have been removed if the image failed to load.

PR Close #52990
2023-11-20 08:58:07 -08:00
arturovt fafcb0d23f fix(common): scan images once page is loaded (#52991)
This commit updates the implementation of the `ImagePerformanceWarning` and
runs the image scan even if the page has already been loaded. The `window.load`
event would never fire if the page has already been loaded; that's why we're
checking for the document's ready state.

PR Close #52991
2023-11-20 08:57:31 -08:00
Jessica Janiuk 492ad4698a fix(migrations): fixes migrations of nested switches in control flow (#53010)
This separates out the NgSwitch migration pass from the NgSwitchCase / Default pass, which makes nested switch migrations work.

fixes: #53009

PR Close #53010
2023-11-20 08:56:53 -08:00
Jessica Janiuk 13bf5b7007 fix(migrations): Fixes control flow migration if then else case (#53006)
With if then else use cases, we now properly account for the length
of the original element's contents when tracking new offsets.

fixes: #52927

PR Close #53006
2023-11-20 08:56:18 -08:00
Nicolas Frizzarin ef974647b0 docs: example code afterNextRender phase (#53025)
Currently in the angular.dev documentation, afterNextRender function
take directly the phase as a second parameter which is not correct.
According to the api of this hook, the second parameter is an object
which contains the phase. This PR update the part of the documentation

PR Close #53025
2023-11-20 08:55:38 -08:00
arturovt db1a8ebdb4 fix(core): cleanup loading promise when no dependencies are defined (#53031)
This commit cleans up the `loadingPromise` when no `dependenciesFn` is defined,
as it's already cleaned up after the resolution of `Promise.allSettled`. This
occurs with `prefetch on` triggers, such as when `triggerResourceLoading` is called
from `ɵɵdeferPrefetchOnImmediate`, where there are no dependencies to load. The
`loadingPromise` should still be cleaned up because it typically involves the
`ZoneAwarePromise`, which isn't properly garbage collected when referenced elsewhere
(in this case, it would be referenced from the `tView` data).

PR Close #53031
2023-11-20 08:54:41 -08:00
Tim Deschryver 6a13fd573d docs: update defer testing snippet (#53056)
PR Close #53056
2023-11-20 08:54:01 -08:00
Tim Deschryver 6cb3ade035 docs: update defer test snippet (#53056)
PR Close #53056
2023-11-20 08:54:01 -08:00
Sasidharan SD 6c68f4ca71 docs: fix broken link for view encapsulation (#52995)
PR Close #52995
2023-11-17 12:18:27 -08:00
Luke Schlangen 4b81784317 docs: fix AppComponent class name (#52976)
PR Close #52976
2023-11-17 12:16:39 -08:00
Kristiyan Kostadinov 6df5f0e0f5 Revert "fix(compiler-cli): add diagnostic for control flow that prevents content projection (#52726)" (#53012)
This reverts commit b4d022e230.

PR Close #53012
2023-11-17 11:52:03 -08:00
Kristiyan Kostadinov f6a9292943 Revert "test(core): add tests for control flow content projection with ng-container (#52726)" (#53012)
This reverts commit 181f8e4b6c.

PR Close #53012
2023-11-17 11:52:03 -08:00
Kristiyan Kostadinov cfcce8c880 Revert "refactor(compiler-cli): expose ng-content selectors and preserveWhitespaces during template type checking (#52726)" (#53012)
This reverts commit 4550a81bdc.

PR Close #53012
2023-11-17 11:52:03 -08:00
Kristiyan Kostadinov cf0a0f3fab Revert "refactor(compiler): expose utility for creating CSS selectors from AST nodes (#52726)" (#53012)
This reverts commit adbea7befb.

PR Close #53012
2023-11-17 11:52:02 -08:00
Enea Jahollari 31a047f186 docs(core): replace RefreshTransplantedView with RefreshView (#52982)
PR Close #52982
2023-11-17 08:10:14 -08:00
Kristiyan Kostadinov f671f86ac2 fix(compiler-cli): add diagnostic for control flow that prevents content projection (#52726)
This is a follow-up to the fix from #52414. It adds a diagnostic that will tell users when a control flow is preventing its direct descendants from being projected into a specific component slot.

PR Close #52726
2023-11-17 08:08:42 -08:00
Kristiyan Kostadinov b07b39de78 test(core): add tests for control flow content projection with ng-container (#52726)
The control flow projection diagnostic will mention `ng-container` as a workaround for projection multiple nodes. These changes add a couple of tests to ensure that the approach works.

PR Close #52726
2023-11-17 08:08:42 -08:00
Kristiyan Kostadinov 221226e0a1 refactor(compiler-cli): expose ng-content selectors and preserveWhitespaces during template type checking (#52726)
These changes expose the `ngContentSelectors` and `preserveWhitespaces` metadata to the TCB so they can be used in the next commit to implement a new diagnostic.

PR Close #52726
2023-11-17 08:08:41 -08:00
Kristiyan Kostadinov 6bcdaec268 refactor(compiler): expose utility for creating CSS selectors from AST nodes (#52726)
When doing directive matching in the compiler, we need to be able to create a selector from an AST node. We already have the utility, but these changes simplify the public API and expose it so it can be used in `compiler-cli`.

PR Close #52726
2023-11-17 08:08:41 -08:00
Andrew Scott f3b8a35933 test(core): Remove manual ComponentFixture construction (#52983)
Tests still pass when using TestBed.createComponent directly

PR Close #52983
2023-11-16 15:12:33 -08:00
arturovt e480a9fd63 refactor(common): remove load event listener once it is fired (#52512)
This commit removes the `load` event listener once it has fired within the
`ImagePerformanceWarning`. The `load` event listener prevents the zone stuff from
being garbage collected in development mode when debugging microfrontend applications
that may be destroyed multiple times.

PR Close #52512
2023-11-16 15:11:59 -08:00
Andrew Kushnir 31a1575334 fix(core): handle local refs when getDeferBlocks is invoked in tests (#52973)
This commit fixes an issue where having elements with local refs in some cases causes JS exception.

PR Close #52973
2023-11-16 12:20:55 -08:00
Jessica Janiuk baeb671334 refactor(migrations): Switch control flow migration reformat default to true (#52971)
This switches the default behavior of the control flow migration template reformatting from opt-in to opt-out.

PR Close #52971
2023-11-16 11:16:30 -08:00
Jessica Janiuk f763d2666f refactor(migrations): Add optional template reformatting after migration (#52939)
This adds the ability to reformat the template with proper indents after the migraion finishes. It is an optional parameter.

PR Close #52939
2023-11-16 09:30:35 -08:00
Kristiyan Kostadinov 49dca36880 fix(compiler): nested for loops incorrectly calculating computed variables (#52931)
The `$first`, `$last`, `$even` and `$odd` variables in `@for` loops aren't defined on the template context of the loop, but are computed based on `$index` and `$count` (e.g. `$first` is defined as `$index === 0`). We do this calculation by looking up `$index` and `$count` when one of the variables is used.

The problem is that all `@for` loop variables are available implicitly which means that when a nested loop tries to rewrite a reference to an outer loop computed variable, it finds its own `$index` and `$count` first and it doesn't look up the ones on the parent at all. This means that the calculated values will be incorrect at runtime.

These changes work around the issue by defining nested-level-specific variable names that can be used for lookups (e.g. `$index` at level `2` will also be available as `ɵ$index_2`). This isn't the most elegant solution, however the `TemplatDefitinionBuilder` wasn't set up to handle shadowed variables like this and it doesn't make sense to refactor it given the upcoming template pipeline.

Fixes #52917.

PR Close #52931
2023-11-16 09:29:47 -08:00
ahmadhakeem18 2580eccc2f docs: change class field external link to point to the right page (#52919)
PR Close #52919
2023-11-16 09:29:05 -08:00
Kristiyan Kostadinov 98376f2c09 fix(compiler): changed after checked error in for loops (#52935)
Reworks the `repeater` instruction to go through `advance`, instead of passing in the index directly. This ensures that lifecycle hooks run at the right time and that we don't throw "changed after checked" errors when we shouldn't be.

Fixes #52885.

PR Close #52935
2023-11-15 21:13:37 +00:00
Jessica Janiuk f5307bf119 release: cut the v17.0.3 release 2023-11-15 12:23:29 -08:00
Doug Parker 151a544277 release: bump DevTools version to 1.0.9 (#52938)
PR Close #52938
2023-11-15 20:18:32 +00:00
Jessica Janiuk 4e200bf13b fix(migrations): Add missing support for ngForOf (#52903)
This adds support to migrate ngForOf and ngForTrackBy when migrating control flow.

PR Close #52903
2023-11-15 14:06:18 +00:00
Andrew Kushnir 5de7575be8 fix(core): reset cached scope for components that were overridden using TestBed (#52916)
Currently, when a component is overriden using `TestBed.overrideComponent`, Angular retains calculated scope for that component (a set of components and directives used within a component). This may cause stale information to be used in tests in some cases. This commit updates the logic to reset overridden component scope, so it gets re-computed during the next invocation.

Resolves #52817.

PR Close #52916
2023-11-15 14:03:55 +00:00
Alejandro a523801b25 docs: fixed unexpected closing tags for Receipt (#52914)
PR Close #52914
2023-11-14 22:02:04 +00:00
Andrew Scott 290e26a2ab refactor(core): Remove detectChanges private export (#52875)
detectChanges private export is not needed.

PR Close #52875
2023-11-14 21:05:42 +00:00
tomastrajan 95e4806ce3 docs: fix and improve @defer testing docs for adev (#52874)
PR Close #52874
2023-11-14 19:16:41 +00:00
Tomas Trajan cc8dbb61c4 docs: fix and improve @defer testing docs (#52874)
- the example when taken from docs into projects didn't work
- getDeferBlocks has to be used with async
- improved description of default state (placeholder)
- improved assertion of <large-component /> as when generated by schematics

PR Close #52874
2023-11-14 19:16:41 +00:00
Sai Kumar Kola 64d9e658a4 docs: fix grammar in guide/defer (#52899)
docs: fix grammar in aio/guide/defer and adev/guide/defer

PR Close #52899
2023-11-14 18:32:51 +00:00
Andrew Scott b393e3727e refactor(core): Simplify detectChangesInternal call signature (#52866)
The call signature of detectChangesInternal requires parameters that can all be
found directly on lView. This commit removes those paramters and instead
grabs them in the function implementation.

PR Close #52866
2023-11-14 15:11:41 +00:00
Sasidharan SD 78f817c358 docs: fix gramatical mistake in angular roadmap (#52850)
PR Close #52850
2023-11-14 15:11:10 +00:00
Swami 60f979e01f docs: fix typos in angular.dev (#52803)
PR Close #52803
2023-11-14 15:10:41 +00:00
Christian Svensson eb44643bdf docs: correct a few broken links (#52688)
PR Close #52688
2023-11-14 15:10:07 +00:00
Sasidharan SD 561cb1d8da docs: fix provideRouter typo (#52798)
PR Close #52798
2023-11-13 23:25:57 +00:00
Dmitriy Mishchenko 031a1a8c8e docs(docs-infra): a11y improvement suggestion Property Binding tutorial (#52807)
#52639 issue fix suggestion

PR Close #52807
2023-11-13 23:25:23 +00:00
Sasidharan SD 24c6b0eafb docs: fix ngComponentOutlet api reference link (#52829)
PR Close #52829
2023-11-13 23:24:56 +00:00
oliv37 a2a5646253 docs: improve filter results example (#52838)
PR Close #52838
2023-11-13 23:24:28 +00:00
Jessica Janiuk d033540d0f fix(migrations): Add support for bound versions of NgIfElse and NgIfThenElse (#52869)
This ensures the bound version of NgIfElse and NgIfThenElse work properly with the migration.

fixes: #52842

PR Close #52869
2023-11-13 22:33:33 +00:00
marktechson 8b6fd8dd18 docs: remove live event from the home page (#52878)
PR Close #52878
2023-11-13 22:29:47 +00:00
Joey Perrott c8ff0be38f ci: correct label for bazel-saucelabs job (#52873)
Update the label to the correct schema

PR Close #52873
2023-11-13 22:08:45 +00:00
Etienne FRANK a00beec2e0 docs(forms): replace fb with formBuilder (#52795)
Shorten variable names isn't a good practice. To avoid spreading it, we removed it from Angular's documentation.

PR Close #52795
2023-11-13 18:59:04 +00:00
Andrew Scott 76aba9ef0e refactor(core): Move booleans in LContainer to flags slot (#52338)
There are now 2 booleans in the LContainer so this commit moves them to a shared
FLAGS slot like the LView.

PR Close #52338
2023-11-13 18:25:17 +00:00
Andrew Scott a55c8bb0e0 test(core): Ensure signals can be read after view creation during change detection (#52495)
These tests ensure signals can be read in a template after embedded
views are created in the middle of template execution of an update pass.
The embedded view templates are executed in create mode in the middle of
the component template being executed in update mode. This behavior was
found to not work correctly in past implementations of the reactive
template consumers.

PR Close #52495
2023-11-13 18:24:41 +00:00
Jessica Janiuk 3831942771 fix(migrations): Fixes issue with multiple if elses with same template (#52863)
This should fix the issue where if the same ng-template is used with multiple if / else statements, it replaces all usages properly.
fixes: #52854

PR Close #52863
2023-11-13 18:23:55 +00:00
Matthieu Riegler 30757bd4d5 refactor(animations): EnvironmentProviders for provideAnimationsAsync (#52862)
This will prevent devs from using these providers in at a component level.

PR Close #52862
2023-11-13 17:27:31 +00:00
Matthieu Riegler f5872c9921 fix(animations): prevent the AsyncAnimationRenderer from calling the delegate when there is no element. (#52570)
This happens when `issueAnimationCommand` is invoked

fixes #52538

PR Close #52570
2023-11-13 16:29:18 +00:00
Matthieu Riegler 7c066a4af4 fix(http): Use the response content-type to set the blob type. (#52840)
When downloading a PDF with the fetch client, the blob had no content. It couldn't be displayed in an iframe. This commit fixes this.

Relate to: https://stackoverflow.com/questions/77470626/possible-bug-in-httpclient-when-using-the-blob-data-type

PR Close #52840
2023-11-13 16:22:21 +00:00
AleksanderBodurri 6a1d4ed667 fix(core): handle non-container environment injector cases (#52774)
Previously we had logic for a special case where a root injector in standalone apps would skip the import paths calculation step for the `getEnvironmentInjectorProviders` function.

This commit intends to fix this for two other cases, namely:
- When an injector is created by a route (via the `providers` field and lazy loading).
- When an injector is manually created and attached to the injector tree

It does this by assuming that any environment injector it cannot find a provider imports container for was created without one, and simply returns the raw provider records without the import paths calculation.

PR Close #52774
2023-11-13 16:21:03 +00:00
Sylvain DEDIEU e46162d3e4 docs: update readme links to target angular.dev documentation (#52772)
Change the angular.io links to target the new angular.dev website
Changed the angular logo

PR Close #52772
2023-11-13 15:56:20 +00:00
Sam Edwards 0fbdb63bbc docs: correct component name on Managing Dynamic Data on angular.dev website (#52792)
PR Close #52792
2023-11-13 15:55:51 +00:00
Jessica Janiuk e1f84a31dc fix(migrations): passed in paths will be respected in nx workspaces (#52796)
This fixes a bug where if you have multiple tsconfig files, the migration would not find anything to migrate at the passed in path.
fixes: #52787

PR Close #52796
2023-11-13 15:21:36 +00:00
Jessica Janiuk aa2d815648 fix(migrations): Add support for removing imports post migration (#52763)
This update removes imports from component decorators and at the top of the files. It only removes standalone imports though. It does not remove CommonModule if that is the only import.

PR Close #52763
2023-11-13 15:21:07 +00:00
AleksanderBodurri 54a7b33245 fix(devtools): check for all new DI debug APIs before trying to determine resolution path providers (#52791)
Previously, some versions of Angular 16.1.x that had 3/4 of the new DI debug APIs would enter a code path that required them to have access to the 4th.

Now DevTools checks for the existence of all 4 explicitly before going down this code path.

PR Close #52791
2023-11-10 18:37:05 +00:00
Miles Malerba 38aab6aa9d refactor(compiler): Handle trailing spaces in ICU placeholders (#52698)
In some cases ICU expression placeholders may have trailing spaces that
need to be trimmed when matching the placeholder to its corresponding
text binding.

PR Close #52698
2023-11-10 17:01:07 +00:00
Miles Malerba 12ffb25e94 refactor(compiler): Fix some issues with i18n expressions in ICUs (#52698)
We were previously counting the i18n expression index and deciding when
to apply i18n expressions based on the i18n context. These should be
done based on the i18n block instead.

PR Close #52698
2023-11-10 17:01:07 +00:00
Miles Malerba cb5d9a480e refactor(compiler): Change how ICUs are ingested (#52698)
The previous commit added support for interpolated text in ICUs, but it
made the assumption that the interpolation would be a single variable
read expression.

To properly support all kinds of interpolation expressions, this commit
refactors how ICUs are ingested to allow us to re-use the same logic we
use for bound text outside of ICUs.

To accomplish this, the `IcuOp` creation op has been removed in favor of
a pair of ops: `IcuStartOp` and `IcuEndOp`, that mark the beginning and
end of the ICU. Now, instead of inserting an `IcuUpdateOp` in the update
IR, we call `ingestBoundText` and use the presence of the surrounding
`IcuStartOp` and `IcuEndOp` to match the interpolation with the ICU.

PR Close #52698
2023-11-10 17:01:07 +00:00
Miles Malerba 825718f2b1 refactor(compiler): Support expressions inside ICUs (#52698)
Previously ICUs were assumed to only generate a single i18n expression
per ICU. However, it is possible for ICUs to contain text interpolations
which requires additional expressions. This commit adds support for
multiple expressions per ICU.

PR Close #52698
2023-11-10 17:01:07 +00:00
Miles Malerba 0b7e7fd3a5 refactor(compiler): Support element tags inside ICUs (#52698)
ICUs that contain element tags need extra parameters for the i18n
message. These are in addition to the element slot params that are
already added to the parent i18n block's params. In this commit we add a
new phase to fill in these placeholders.

PR Close #52698
2023-11-10 17:01:07 +00:00
Miles Malerba 22ff9cacce refactor(compiler): More consistent sorting of i18n params (#52698)
Previously the template pipeline sorted i18n message params before
adding the sub-message placeholders. Now its sorts after all
placeholders are added.

Both the template pipeline and TemplateDefinitionBuilder previously
failed to sort the post-processing params. They both now sort these as
well. This is safe to change in TemplateDefinitionBuilder, as it does
not change anything about the functionality, it simply ensures that
params map in the output has the keys ordered in a way that can be
easily reproduced in the template pipeline.

PR Close #52698
2023-11-10 17:01:07 +00:00
Doug Parker 6b164dc83a release: bump DevTools version to 1.0.8 (#52759)
PR Close #52759
2023-11-10 17:00:20 +00:00
Jessica Janiuk c01af4302f refactor(migrations): code clean up and add comments on exported functions (#52755)
This cleans up a bit of code to make maintenance easier. It also adds comments for all the exported methods so they are clear to anyone in the future.

PR Close #52755
2023-11-09 22:55:50 +00:00
Jessica Janiuk 01efb1b807 release: cut the v17.0.2 release 2023-11-09 12:08:18 -08:00
Pawel Kozlowski b16fc2610a fix(core): limit rate of markers invocations (#52742)
This PR assures that the performance markers are invoked
only once for a given feature.

Closes #52524

PR Close #52742
2023-11-09 19:58:26 +00:00
Sasidharan SD cfb42ee2c8 docs: add extended diagnostic NG8109 (#52721)
PR Close #52721
2023-11-09 19:39:24 +00:00
Mikita Himpel 47756d81e5 docs: fix programmatic-rendering example component name (#52731)
PR Close #52731
2023-11-09 19:38:19 +00:00
Nelson Gutierrez 90018f9327 docs: add missing backtick on title (#52711)
PR Close #52711
2023-11-09 19:32:24 +00:00
Patrick Hyatt 7b60b5196f docs: correct typescript type inference link (#52714)
PR Close #52714
2023-11-09 19:30:39 +00:00
Balaji 35e998effb docs: updating incorrect link in Class Binding page (#52715)
PR Close #52715
2023-11-09 19:28:06 +00:00
Mikhail Filin 158b1984bf docs: remove broken link pill in dynamic component page (#52744)
PR Close #52744
2023-11-09 19:18:30 +00:00
Jeevan Mahesha 27bf371e32 docs: removed the broken link (#52743)
PR Close #52743
2023-11-09 19:06:13 +00:00
Tom Wilkinson 56ec37dcbc refactor(common): Update packages/common/src/navigation/platform_navigation.ts (#52363)
Co-authored-by: Andrew Scott <atscott01@gmail.com>

PR Close #52363
2023-11-09 18:01:33 +00:00
Thomas Wilkinson d5fd614836 refactor(common): Add fake implementation of PlatformNavigation. (#52363)
This implementation does most, but not all, of the things the native
Navigation API does. Also adds a spec that tests all the currently
supported behaviors.

PR Close #52363
2023-11-09 18:01:33 +00:00
Thomas Wilkinson e2f3ae51df refactor(common): Add a new platform_navigation that provides the Navigation API. (#52363)
This allows using the Navigation API in Angular packages like Router.

PR Close #52363
2023-11-09 18:01:33 +00:00
Andrew Kushnir f61519ab90 refactor(core): delay applying component metadata until it's needed in tests (#52708)
When a component contains `@defer` blocks, Angular compiler generates the code to apply component metadata (from the `@Component` decorator) after resolving all dynamic dependencies. Currently, this function is invoked eagerly at runtime, which causes dynamic imports to be kicked off earlier than expected. With the change in this commit, Angular will start resolving async metadata when it becomes necessary during testing.

PR Close #52708
2023-11-09 16:58:06 +00:00
Vadim Makeev b651648db6 docs: make homepade example accessible (#52578)
PR Close #52578
2023-11-09 15:58:10 +00:00
Kristiyan Kostadinov a548c0333e fix(compiler-cli): incorrect inferred type of for loop implicit variables (#52732)
Fixes that all implicit variables in `@for` loops were inferred to be numbers, even though most are actually boolean.

Note that I also had to work around a weird TypeScript behavior in `tsDeclareVariable` where usually we declare variables in the following format:

```
var _t1: <type> = null!;
```

This works in most cases, but if the type is a `boolean`, TypeScript infers the variable as `never`, instead of `boolean`. I've worked around it by adding an `as boolean` to the initializer.

Fixes #52730.

PR Close #52732
2023-11-09 15:47:56 +00:00
cexbrayat 7a95cccf50 fix(compiler-cli): add interpolatedSignalNotInvoked to diagnostics (#52687)
This template diagnostic has been introduced in 8eef694def but was not enabled,
as it was not added to `ALL_DIAGNOSTIC_FACTORIES`.

PR Close #52687
2023-11-09 15:46:16 +00:00
Pawel Kozlowski 44c48a4835 fix(core): properly update collection with repeated keys in @for (#52697)
This change fixes a bug in the new list reconcilation algorithm
that could lead to an infinite loop in certain situations.

More specifically, it adjusts the internal MultiMap implementation
such that an entry returned from the .get call is the same entry
(for an identical key) removed by the .delete call.

The existing logic of the MultiMap was leading to a situation where
one view was requested and attached to LContainer, but a very different
view was removed from the MultiMap. This was leaving an attached LView
in a collection that was supposed to hold only detached views.

Closes #52524

PR Close #52697
2023-11-09 15:44:53 +00:00
cexbrayat 2cea80c6e2 fix(core): error code in image performance warning (#52727)
The warnings link to https://angular.io/errors/NG2965 which is a 404
The proper error page is https://angular.io/errors/NG0913

PR Close #52727
2023-11-09 15:44:24 +00:00
Sylvain DEDIEU 7d6752a806 docs(docs-infra): improve decorator deprecated property display in documentation (#52041)
Add the deprecated-api-item class on decorator-overview option code if deprecated. Add deprecated label on decorator-overview short description if deprecated. Add Add deprecated label on decorator option table header if option is deprecated.

PR Close #52041
2023-11-09 15:36:32 +00:00
Andrew Scott 354340d643 docs: fix broken http link (#52541)
fixes #52542

PR Close #52541
2023-11-09 15:35:59 +00:00
Andrew Scott e3950b4e1f docs: fix broken DI link on roadmap (#52541)
fixes #52539

PR Close #52541
2023-11-09 15:35:59 +00:00
Sam Verschueren 881bb4d719 docs: fix LCP element link (#52580)
PR Close #52580
2023-11-09 15:34:07 +00:00
Sasidharan SD 6c7d2b6fe3 docs: fix angular compatability version (#52585)
PR Close #52585
2023-11-09 15:33:38 +00:00
Sasidharan SD 96d554d8e7 docs: fix incorrect tag reference (#52586)
PR Close #52586
2023-11-09 15:01:03 +00:00
Sasidharan SD e994305d70 docs: fix repetetive text (#52587)
PR Close #52587
2023-11-09 15:00:27 +00:00
Sasidharan SD a87d50639b docs: fix cli command redirection (#52589)
PR Close #52589
2023-11-09 14:59:55 +00:00
Sasidharan SD 7e5d71de3e docs: fix prefetching typo issue (#52590)
PR Close #52590
2023-11-09 14:59:00 +00:00
Sasidharan SD bd8ac477c3 docs: add missing backtick (#52607)
PR Close #52607
2023-11-09 14:58:00 +00:00
Ryth-cs 1ce0f7b07a docs: correct reactive-forms typo (#52608)
PR Close #52608
2023-11-09 14:57:28 +00:00
Raghav Kanwal a08232793d docs: update typo in Guide/Testing (#52619)
PR Close #52619
2023-11-09 14:56:36 +00:00
technbuzz 8c3d41b5b3 docs: fix typo in component output guide (#52673)
We should use @Output rathar than @Input decorator for output events.
This comments fixes the typo by replacing Input with Output

PR Close #52673
2023-11-09 14:56:02 +00:00
Marianna Maglio 387051b078 docs: fix typos in tutorials/learn-angular (#52677)
PR Close #52677
2023-11-09 14:55:32 +00:00
Sasidharan SD d6fec2fc75 docs: fix developer preview link (#52693)
PR Close #52693
2023-11-09 14:54:55 +00:00
Jessica Janiuk 4626691198 release: cut the v17.0.1 release 2023-11-08 11:24:30 -08:00
Matthieu Riegler 5c6f3f8ec0 fix(http): Don't override the backend when using the InMemoryWebAPI (#52425)
When using `withFetch`,  the `PRIMARY_HTTP_BACKEND` token is set.

The InMemory Backend services will also set that token.

This means that providers order will matter and the latest on the list will be the one instantiated

PR Close #52425
2023-11-08 18:42:21 +00:00
Jessica Janiuk 70d30c28e0 fix(migrations): Add support for ng-templates with i18n attributes (#52597)
This makes sure that i18n attributes are preserved on ng-templates being removed during the migration.

fixes: #52517

PR Close #52597
2023-11-08 10:26:20 -08:00
Andrew Scott 6240613477 refactor(language-service): Add flag to allow disabling block syntax parsing (#52691)
This commit adds a flag to the language service config options to disable block
parsing in the compiler.

PR Close #52691
2023-11-08 10:25:22 -08:00
Kristiyan Kostadinov 227de98201 refactor(compiler): add flag to disable block syntax in language service (#52683)
Adds the private `_enableBlockSyntax` flag that can be used by the language service to disable blocks on apps that aren't on Angular v17.

PR Close #52683
2023-11-08 09:34:10 -08:00
Kristiyan Kostadinov a46c8cbf4e fix(docs-infra): fix menu icon size (#52689)
Fixes that the hamburger icon was too small, because the top nav is using the wrong kind of button. Switching it to the right one would require more refactoring so I went with the simpler approach for now.

PR Close #52689
2023-11-08 09:23:43 -08:00
cexbrayat 1d31a0c129 refactor(core): sanitize reactivity tests (#52632)
It was intriguing to see a double `fixture.detectChanges()` introduced by 38c9f08c8d
It turns out this is not needed.

PR Close #52632
2023-11-08 08:51:50 -08:00
Swami bd0f811405 docs: typo fix (#52511)
PR Close #52511
2023-11-08 08:51:28 -08:00
Andrew Scott f729215f0a refactor(core): Remove RootViewRef<T> because it is the same as ViewRef<T> (#52430)
`RootViewRef<T>` extends `ViewRef<T>` and overrides 3 methods with behavior
that is identical to `ViewRef<T>`. This commit removes `RootViewRef<T>`
because it is not needed.

PR Close #52430
2023-11-08 08:50:50 -08:00
Matthieu Riegler bd275b1b26 docs: add v17 versions support (#51443)
* Node 16 support is dropped per angular/angular-cli#25675
* TS 5.2 is supported per #51334
* TS 5.1 and lower support is dropped by #51792

PR Close #51443
2023-11-08 08:50:20 -08:00
Lucas 181d5755ee docs: updating information about polyfills (#52519)
PR Close #52519
2023-11-08 08:49:28 -08:00
Andrew Scott e1c0493135 test(core): Add test to ensure writing to signals in afterRender hooks throws error (#52475)
We do not yet handle running change detection again if `afterRender`
hooks write to signals.

PR Close #52475
2023-11-08 08:48:44 -08:00
Jessica Janiuk 4f125c5f9a fix(migrations): Switches to multiple passes to fix several reported bugs (#52592)
Rather than migrate all in one pass, this now migrates in a separate pass per control flow item plus one for templates at the end. This resolves issues with multiple control flow items on a single element as well as making sure ng-templates are fully migrated before being moved to new locations.

fixes: #52518
fixes: #52516
fixes: #52513

PR Close #52592
2023-11-08 08:47:10 -08:00
Alex Rickabaugh c30dde257b build: bump in-memory-web-api to v17 (#52676)
This commit updates the in-memory-web-api package versions from v16 -> v17.

PR Close #52676
2023-11-08 17:05:45 +01:00
Pawel Kozlowski 1cc87b26cb build: update aio to 17.0.0 (#52635) (#52674)
This commit updates the Angular version for AIO and its examples to 17.0.0

PR Close #52674
2023-11-08 17:04:51 +01:00
Alex Rickabaugh da429c59b6 Revert "fix(http): Don't override the backend when using the InMemoryWebAPI (#52425)" (#52630)
This reverts commit 49b037f811. Reason: it
breaks tests in aio-local.

PR Close #52630
2023-11-08 16:28:00 +01:00
Pawel Kozlowski fc6b2f2669 docs: add the v17 blog post link to the changelog (#52675)
This commit adds the short link 'http://goo.gle/angular-v17' to the project changelog.

PR Close #52675
2023-11-08 16:23:01 +01:00
Pawel Kozlowski fecd141dfa release: cut the v17.0.0 release 2023-11-08 13:23:45 +01:00
Andrew Scott 6b83328577 release: cut the v17.0.0-rc.3 release 2023-11-06 16:07:18 -08:00
Andrew Scott d4c20aca71 refactor(core): Add warning when signal equality is false for object.is (#52532)
This commit adds a warning when a signal equality function returns
`false` but `Object.is` returns `true`.

PR Close #52532
2023-11-06 15:53:10 -08:00
AleksanderBodurri a86661ff24 refactor(devtools): update Angular logo for extension and loading animation (#52546)
Previously these were using the pre v17 Angular logo.

Now these have been updated to use the new Angular logo for V17+.

PR Close #52546
2023-11-06 12:34:21 -08:00
Dylan Hunn 590c61889f refactor(compiler): Fix two-way binding source maps (#52479)
Now that two-way bindings work correctly with implicit receivers, we can fix the corresponing source map tests. The main issue was that we were not properly mapping `elementEnd` for elements with no closing tag (self-closing elements).

PR Close #52479
2023-11-06 11:43:00 -08:00
Dylan Hunn b44f2f9e47 refactor(compiler): Fix two-way bindings in template pipeline (#52479)
Some two-way bindings tests were not working properly, because we could not ingest the implicit receiver required to write to the `ngModelChanges` property. Now, we properly resolve that implicit receiver to the root component context.

Also, add some tests, both for the simple case, and the case where the listener is inside a nested view.

PR Close #52479
2023-11-06 11:43:00 -08:00
Dylan Hunn a48d65cdf4 refactor(compiler): Support extracting deps functions for defer in template pipeline (#52479)
Some `defer` blocks have external dependencies on other components or directives. These dependencies need to be extracted into deps functions, which either return local deps, or use a dynamic import for non-local deps. Template Pipeline can now generate these functions.

PR Close #52479
2023-11-06 11:43:00 -08:00
Dylan Hunn 42899c5aa0 refactor(compiler): Emit a template ref extractor on ng-templates with local refs (#52479)
When an `ng-template` has local refs, such as `<ng-template #foo>`, we must emit a `ɵɵtemplateRefExtractor` argument to the template creation functino. The template pipeline now supports this.

PR Close #52479
2023-11-06 11:42:59 -08:00
Dylan Hunn 2367b038fb refactor(compiler): Add template pipeline golden for differing consts (#52479)
The consts for this test are emitted in a different order, but the generated code is valid.

PR Close #52479
2023-11-06 11:42:59 -08:00
Dylan Hunn d8eab6f807 refactor(compiler): Add template pipeline goldens for some tests with const attributes (#52479)
`TemplateDefinitionBuilder` is somewhat unreliable about extracting constant attributes (e.g. `[attr.foo]="'one'"`). It never extracts const non-string expressions, and usually, but not always, extracts const string expressions. Template pipeline consistently extracts const strings, and we add new goldens for a couple such cases.

PR Close #52479
2023-11-06 11:42:59 -08:00
Dylan Hunn dab522f011 refactor(compiler): Support defer triggers with no arguments in template pipeline (#52479)
Some defer triggers, such as `hover`, expect a local reference as an argument. For example, `@defer (on hover(target))` waits until the user hovers over the target.

However, these defer conditions also have a nullary form, in which the trigger is implicitly the first element in the placeholder block. We now support that case in template pipeline.

PR Close #52479
2023-11-06 11:42:59 -08:00
Dylan Hunn 8400533555 refactor(compiler): Support deferWhen instructions in template pipeline (#52479)
We already supported `defer on` conditions, which become instructions in the create mode block.

Now, we also support `defer when` conditions, where are very similar, with the notable difference that they go in the update block (because a user-supplied condition must be re-evaluated on each update.)

PR Close #52479
2023-11-06 11:42:59 -08:00
Andrew Scott 43acd44cf8 refactor(core): Remove change detection flag used in g3 (#52530)
This has now been cleaned up internally and is no longer needed

PR Close #52530
2023-11-06 11:42:16 -08:00
twerske cab7e003b3 docs: add angular.dev (#52534)
PR Close #52534
2023-11-06 11:09:41 -08:00
Emma Twersky 2c3daebc5d docs: add angular.dev banner (#52535)
PR Close #52535
2023-11-06 11:04:13 -08:00
Miles Malerba 91dbcb5eab refactor(compiler): Add more comments for i18n template pipeline phases (#52503)
Adds some additional comments about the i18n termplate pipeline phases
to more clearly document how they work.

PR Close #52503
2023-11-06 09:49:48 -08:00
Miles Malerba fa9bca23f7 refactor(compiler): Add support for ICUs as part of another i18n message (#52503)
Previously we supported ICUs where the ICU itself represetned the entire
translated message. This change allows ICUs to act as a sub-message
inside other translated messages.

PR Close #52503
2023-11-06 09:49:47 -08:00
Miles Malerba 51d73ed957 refactor(compiler): Introduce i18n context objects (#52503)
Previously we assumed that all i18n messages that are eventually
extracted into the consts array would be generated based on an i18n
block. However, it is also possible to have messages generated directly
from ICUs. This change introduces an i18n context op, so that we can
consistently extract i18n messages from the context op in all cases.

PR Close #52503
2023-11-06 09:49:47 -08:00
Jessica Janiuk 9c2be715a3 fix(migrations): Fixes a bug in the ngFor pre-v5 alias translation (#52531)
The logic that transformed the value to get the alias name was incorrect.

fixes: #52522

PR Close #52531
2023-11-06 09:47:37 -08:00
Jessica Janiuk c267f54bc3 fix(migrations): Update regex to better match ng-templates (#52529)
This addresses an edge case where an ng-template name matches an opening element name, preventing the template from being removed.

fixes #52523

PR Close #52529
2023-11-06 09:05:55 -08:00
Kristiyan Kostadinov 83067b3ef2 fix(compiler): ng-template directive invoke twice at the root of control flow (#52515)
Discovered this while validating #52414 against Angular Material. We were projecting `<ng-template>` nodes at the root of `@if` and `@for` with the `ng-template` tag name which enables directive matching and applies the directive to the control flow node.

These changes fix the issue by never passing along the `ng-template` tag name.

PR Close #52515
2023-11-06 09:03:45 -08:00
Kristiyan Kostadinov 09e905ad67 fix(migrations): account for separator characters inside strings (#52525)
Fixes that the control flow migrations wasn't accounting for separator characters used inside string literals.

PR Close #52525
2023-11-06 09:00:23 -08:00
Kristiyan Kostadinov 57404d4723 fix(migrations): handle comma-separated syntax in ngFor (#52525)
This is something that came up when running the script against the Components repo. The `ngFor` syntax can be delimited either by semicolons or by commas, but the migration only accounted for commas.

PR Close #52525
2023-11-06 09:00:23 -08:00
AleksanderBodurri 1c92609719 test(devtools): fix transformInjectorResolutionPathsIntoTree tests (#52489)
Previously transformInjectorResolutionPathsIntoTree returned an array, now it returns a tree node so we update the test cases to reflect that.

PR Close #52489
2023-11-03 17:37:56 -07:00
AleksanderBodurri e5bd6e9ccc feat(devtools): implement zoom and pan in injector graph visualizer (#52489)
Previously only the trackpad could be used to navigate this view.

Now we can zoom and pan around using our mouse wheel and scroll.

Additionally, this commit fixes many issues related to the visualization of the injector graph visualization, allowing it to be more compact without impacting legibility and minimizing edge collisions in larger graphs.

PR Close #52489
2023-11-03 17:37:55 -07:00
AleksanderBodurri 5a816b8739 perf(devtools): optimize injector graph discovery (#52489)
Our algorithm for discovering the injector graph of an application involves calculating resolution paths for each angular node on a page, and then using those paths to construct the underlying tree.

Along the we way we perform many expensive computations that are candidates for optimization through caching. This commit implements this caching, resulting in a substantial increase in performance for large applications.

PR Close #52489
2023-11-03 17:37:55 -07:00
AleksanderBodurri c0d7bac111 feat(devtools): squash multi providers into 1 and allow them to be logged to the console (#52489)
Implements a feature allowing users to visualize multiproviders as one row in the providers table.

Also enables the user to log to console any provider in the table. This log includes information about the provider selected, the injector it was configured in, and also calls `Injector.get(Token)` to determine the value the provider evaluates to in it's injector.

PR Close #52489
2023-11-03 17:37:55 -07:00
AleksanderBodurri 3afc9d0cdb refactor(devtools): stop inspector from changing tab to components (#52489)
Previously this was the only page that used the inspector, so we automatically changed the tab out of convenience.

Now, the injector tree tab also does uses the inspector for some functionality, so we disable this behaviour.

PR Close #52489
2023-11-03 17:37:55 -07:00
Alan Agius de136105aa release: cut the zone.js-0.14.2 release (#52508)
PR Close #52508
2023-11-03 10:54:12 -07:00
Alan Agius 95accb07b4 docs: update ssr docs to add information about CommonEngine (#52506)
This commit add contructor information about `CommonEngine`

PR Close #52506
2023-11-03 09:50:13 -07:00
AleksanderBodurri a2ba5482c3 fix(core): use TNode instead of LView for mapping injector providers (#52436)
Previously, LViews were used here to be consistent with other debug APIs. Using LViews for tracking injector providers does not work because providers only get configured once per TNode type.

Now we use the TNode as the key to track element injector providers, allowing the injector for each item rendered in a list (`ngFor` or `@for`) to be targeted with debug APIs for inspecting providers

PR Close #52436
2023-11-03 09:36:00 -07:00
JiaLiPassion 842b2cceb6 fix(zone.js): disable wrapping unhandled promise error by default (#52492)
Before this commit, zone.js wraps the uncaught promise rejection error
to a new Error object includes more information such as Zone stack
traces. This feature is provided from the very beginning of Zone.js,
but this feature becomes very annoying and make the user difficult to
debug.

So this commit disable this wrapping behavior by default, and user can
enable this feature back by setting
`DISABLE_WRAPPING_UNCAUGHT_PROMISE_REJECTION` to `false`.

PR Close #52492
2023-11-03 09:33:20 -07:00
Kristiyan Kostadinov 6988a0070e fix(migrations): handle ngIf else condition with no whitespaces (#52504)
Fixes that the control flow migration wasn't migrating an `*ngIf` with an `else` condition that doesn't have spaces before the `else`.

Fixes #52502.

PR Close #52504
2023-11-03 09:32:47 -07:00
Aanchal Agarwal 236b448364 docs: omit repetitions (#52413)
PR Close #52413
2023-11-03 07:46:55 -07:00
Angular Robot 1f9ff84e28 build: update dependency multimatch to v7 (#52426)
See associated pull request for more information.

PR Close #52426
2023-11-03 07:45:31 -07:00
Alan Agius 7ff5152547 build: configure tslint to ban performance.mark usages (#52505)
While `performance.mark` is available on all supported browsers and node.js version this API is not available in JSDOM which is used by Jest and Cloudflare worker.

PR Close #52505
2023-11-03 07:43:37 -07:00
Alan Agius 80e7a0f8fa fix(core): guard usages of performance.mark (#52505)
While `performance.mark` is available on all supported browsers and node.js version this API is not available in JSDOM which is used by Jest and Cloudflare worker.

This commit, updates the usage to a safer variant.

PR Close #52505
2023-11-03 07:43:36 -07:00
Alex Rickabaugh 739c0d27ec refactor(core): mark effect as developer preview again (#52490)
Re-add the `@developerPreview` flags to `effect()`. While we don't expect
the `effect` API itself to change, we may change how other FW APIs interact
with `effect`s. Also, add a missing export for one of those effect APIs.

PR Close #52490
2023-11-02 15:29:45 -07:00
Alex Rickabaugh a8e57a1fab release: cut the v17.0.0-rc.2 release 2023-11-02 15:03:38 -07:00
Andrew Scott 32f417f77f refactor(core): Do not refresh view if producers did not actually change (#52476)
Producers represent values which can deliver change notifications.
When a producer value is changed, a change notification is propagated through the graph,
notifying live consumers which depend on the producer of the potential update.
Note here that this is a _potential_ update.

A producer may not have actually "changed" based on its equality function. With
this commit, before refreshing a view that is only marked for refresh
because its consumer is dirty, we poll producers for change to see if
they really have. If not, we can skip the refresh. The example test in this commit
shows that a `computed` which depends on a `signal` that is updated but
produces a value that is the same as before will _not_ cause the
component's template to refresh.

fixes #51797

PR Close #52476
2023-11-02 13:23:49 -07:00
Andrew Scott c99e5cf168 refactor(core): Update LView consumer to use only 1 consumer for a component (#52476)
This commit updates the reactive consumer used for `LView`s to be shared
between a component and its embedded views. This allows us to use the
consumer flag directly for a dirty indicator rather than needing to
find a component view for updating its flags.

In the future, this will also allow us to effectively poll producers to see if
they really changed before refreshing a view.

PR Close #52476
2023-11-02 13:23:49 -07:00
Andrew Scott 2ce2ad1c42 refactor(core): Remove warning about signal set during template execution (#52476)
The significance of the combination of #51854 and #52302 went mostly
unnoticed. The first removed a unidirectional data flow constraint for
transplanted views and the second updated the signal implementation to
share transplanted view logic. The result is that we automatically get behavior
that (mostly) removes `ExpressionChangedAfterItWasCheckedError` when signals are
used to drive application state to DOM synchronization.

fixes #50320

PR Close #52476
2023-11-02 13:23:49 -07:00
Charles Lyding 0d88e25311 docs: additional application builder SSR conversion information (#52485)
This change updates the new build system migration guide with additional
information regarding the steps needed to convert an existing SSR project
to use the new integrated SSR capabilities.

PR Close #52485
2023-11-02 11:06:21 -07:00
arturovt 79b21662fd refactor(core): do not run CDs when setting up image perf warnings (#52482)
This commit wraps the `load` event listener with `runOutsideAngular` to avoid
running unnecessary change detections on asynchronous tasks spawned within the
scope of the `ImagePerformanceWarning` functionality. This was previously causing
extra change detection cycles in development mode and interfering with debugging.

PR Close #52482
2023-11-02 11:03:42 -07:00
Jeremy Elbourn f9b226f9dc refactor(compiler): escape decorators in API JsDoc extraction (#52481)
TypeScript JsDoc parsing, by default, treats occurences of Angular decorators (e.g. `@Component`) in JsDoc comments as JsDoc tags. This commit escapes these decorator strings by copying the raw JS doc onto a dummy symbol in a new SourceFile to make TypeScript re-parse the comment.

PR Close #52481
2023-11-02 11:03:09 -07:00
Jeremy Elbourn 6d39551f53 build: add rules for generating block/element API data (#52480)
Adds build rules for "artificially" generating `DocEntry` collections for block and element APIs. The two rules are very similar, but _just_ different enough that it's worth having two separate implementations.

PR Close #52480
2023-11-02 11:02:08 -07:00
Jeremy Elbourn 5dd4bd6cf5 build: add target to generate api manifest (#52472)
This adds a target to generate a manifest of all public api symbols. The majority of inputs are generated from the extraction rules, but API entries that don't have a TypeScript source symbol (elements and blocks) are defined in hand-written json collections.

PR Close #52472
2023-11-02 11:00:59 -07:00
Pawel Kozlowski 6d4271c340 refactor(core): short-circuits invocations of signals equality (#52465)
This change skips signal equality calls on set / update when the
two values (current and the new one) are referentially identical.
The assumption is that equality function implementation should
never return false for 2 values that are the same (according to
the Object.is logic).

PR Close #52465
2023-11-02 10:59:59 -07:00
Dylan Hunn 0717c08b7d refactor(compiler): Delete some unused imports in template pipeline (#52464)
Remove a variety of unused imports.

PR Close #52464
2023-11-02 10:58:48 -07:00
Dylan Hunn 2837342852 refactor(compiler): Rename slot -> handle in slot consumers (#52464)
This name is a bit more precise, and avoids the `foo.slot.slot` "stuttering access" on consumers.

PR Close #52464
2023-11-02 10:58:48 -07:00
Dylan Hunn 1841d7903b refactor(compiler): Move an enum to enums.ts for Template Pipeline (#52464)
This enum belongs in the main enums file.

PR Close #52464
2023-11-02 10:58:48 -07:00
Dylan Hunn 90af00a07c refactor(compiler): Delete an unused OpKind in template pipeline. (#52464)
`DeferSecondaryBlock` is no longer used.

PR Close #52464
2023-11-02 10:58:48 -07:00
Dylan Hunn e06a25b6c3 refactor(compiler): Replace cpl with job in template pipeline (#52464)
Eliminate all the remaining `cpl` names, and use `job` instead, which is the predominant convention.

Also, replace `.views.values()` with `.unit` in a few places, and perform the corresponding rename.

PR Close #52464
2023-11-02 10:58:48 -07:00
Dylan Hunn 8358dcd7e3 refactor(compiler): Rename and comment template pipeline phases (#52464)
In this cleanup commit:
1. Add explanatory comments to all phases that were previously missing them.
2. Rename all phases, to eliminate the "phase" prefix, and directly describe their functions.

PR Close #52464
2023-11-02 10:58:48 -07:00
Angular Robot cc13d6f1cd build: update peter-evans/create-or-update-comment digest to 23ff157 (#52279)
See associated pull request for more information.

PR Close #52279
2023-11-02 10:43:24 -07:00
Angular Robot 0754122232 build: update actions/checkout digest to b4ffde6 (#52252)
See associated pull request for more information.

PR Close #52252
2023-11-02 10:32:11 -07:00
arturovt bf3281a6a5 fix(animations): remove finish listener once player is destroyed (#51136)
This commit removes the `finish` listener from the Animation object once
the animation is finished, effectively resolving a memory leak. Previously,
the `finish` listener captured `this`, which prevented `this` from being garbage collected.

PR Close #51136
2023-11-02 10:29:51 -07:00
Alex Rickabaugh 356da9c9f6 refactor(core): add a flag for whether we skip logic in checkNoChanges (#52488)
This can be used to patch different behavior in g3.

PR Close #52488
2023-11-01 21:43:21 -07:00
Doug Parker 4e4c678180 docs: update examples to use buildTarget instead of browserTarget (#52361)
`browserTarget` is deprecated and `buildTarget` is the newly preferred name.

PR Close #52361
2023-11-01 16:24:43 -07:00
Doug Parker 0f37b12a17 docs: update examples to use application builder (#52361)
`application` builder is preferred over `browser` builder. This updates all the examples I could find to use `application` builder. A couple notes of fixes that needed to happen:
1.  The testing example was broken because it relied on `~` imports in CSS files, which is a Webpack-specific features. However I don't think we need those custom styles at all, so I just removed the import altogether.
2.  A few tests seemed to be affected and needed to be cleaned up.

PR Close #52361
2023-11-01 16:24:43 -07:00
Alex Rickabaugh 7c950794ea Revert "refactor(core): Remove RootViewRef<T> because it is the same as ViewRef<T> (#52430)" (#52484)
This reverts commit a3028e2340 as it breaks
tests in g3.

PR Close #52484
2023-11-01 10:13:13 -07:00
Alex Rickabaugh c9a3708e55 Revert "refactor(core): rename ViewRef<T> to InternalViewRef<T> and remove existing InternalViewRef (#52430)" (#52484)
This reverts commit a568bc5d97 as it breaks
tests in g3.

PR Close #52484
2023-11-01 10:13:12 -07:00
Alex Rickabaugh ddef3ac9a4 fix(core): effects wait for ngOnInit for their first run (#52473)
When an effect is created in a component constructor, it might read signals
which are derived from component inputs. These signals may be unreliable or
(in the case of the proposed input signals) may throw if accessed before the
component is first change detected (which is what makes required inputs
available).

Depending on the scenario involved, the effect may or may not run before
this initialization takes place, which isn't a great developer experience.
In particular, effects created during CD (e.g. via control flow) work fine,
as do effects created in bootstrap thanks to the sync CD it performs. When
an effect is created through dynamic component creation outside of CD though
(such as on router navigations), it runs before the component is first CD'd,
causing the issue.

In fact, in the signal components RFC we described how effects would wait
until ngOnInit for their first execution for exactly this reason, but this
behavior was never implemented as it was thought our effect scheduling
design made it unnecessary. This is true of the regular execution of effects
but the above scenario shows that *creation* of the effect is still
vulnerable. Thus, this logic is needed.

This commit makes effects sensitive to their creation context, by injecting
`ChangeDetectorRef` optionally. An effect created with an injector that's
tied to a component will wait until that component is initialized before
initially being scheduled. TestBed effect flushing is also adjusted to
account for the additional interaction with change detection.

PR Close #52473
2023-11-01 08:07:35 -07:00
Alex Rickabaugh 935c1816fd fix(core): add rejectErrors option to toSignal (#52474)
By default, `toSignal` transforms an `Observable` into a `Signal`, including
the error channel of the Observable. When an error is received, the signal
begins throwing the error.

`toSignal` is intended to serve the same purpose as the `async` pipe, but
the async pipe has a different behavior with errors: it rejects them
outright, throwing them back into RxJS. Rx then propagates the error into
the browser's uncaught error handling logic. In the case of Angular, the
error is then caught by zone.js and reported via the application's
`ErrorHandler`.

This commit introduces a new option for `toSignal` called `rejectErrors`.
With that flag set, `toSignal` copies the async pipe's behavior, allowing
for easier migrations.

Fixes #51949

PR Close #52474
2023-10-31 14:59:26 -07:00
Jeremy Elbourn 2e12e277c5 refactor(compiler): rename decorator extracted "options" to "members" (#52462)
The property name `members` makes it easier to use the same rendering
code as other constructs.

PR Close #52462
2023-10-31 14:58:03 -07:00
Alex Castle 3bd85fb7b0 fix(common): apply fixed_srcset_width value only to fixed srcsets (#52459)
add logic to NgOptimizedImage to keep fixed_srcset_width from applying to large responsive images, which is incorrect behavior

PR Close #52459
2023-10-31 14:57:19 -07:00
Jessica Janiuk af46256043 docs: update defer guide to use Deferrable View language (#52457)
This updates the defer guide to use the recommended language of
Deferrable Views.

PR Close #52457
2023-10-31 14:55:48 -07:00
AleksanderBodurri 34a59967d7 refactor(core): ignore ENVIRONMENT_INTIIALIZER and INJECTOR_DEF_TYPES provides in getInjectorProviders (#52458)
These special providers are configured when `walkProviderTree` is called. Because of this, they do not maintain any equality between subsequent runs of `walkProviderTree`. This prevents us from being able to compare the provider objects for equality between runs.

This commit changes the behaviour of getInjectorProviders to ignore these providers. In the future we will consider another approach for differentiating these providers from ones provided by users rather than the framework.

PR Close #52458
2023-10-31 14:55:04 -07:00
Matthieu Riegler 792026bc7d build: add missing entries for the api extraction (#52452)
Were missing :

* `@angular/common/http/testing`
* `@angular/platform-browser/animations/async`

PR Close #52452
2023-10-31 14:53:34 -07:00
Kristiyan Kostadinov d2fca84bc4 refactor(compiler): implement control flow content projection fix in template pipeline (#52414)
Recreates the fix for content projection in control flow in the new template pipeline. I also had to make the following adjustments to the pipeline:
1. The `TemplateOp.tag` property was being used to generate the name of the template function, rather than the actual tag name being passed into `ɵɵtemplate`. Since the content projection fix requires the tag name to be passed in, I've introduced a new `functionNameSuffix` property instead.
2. `TemplateOp.block` was being used to determine whether to pass `TemplateOp.tag` into the `ɵɵtemplate` instruction. Now that we're always passing in the tag name after the refactor in point 1, we no longer need this flag.

In addition to the refactors above, I also made some minor cleanups where I saw the opportunity to do so.

PR Close #52414
2023-10-31 14:52:31 -07:00
Kristiyan Kostadinov 1f5039bbd6 fix(compiler): project control flow root elements into correct slot (#52414)
With the directive-based control flow users were able to conditionally project content using the `*` syntax. E.g. `<div *ngIf="expr" projectMe></div>` will be projected into `<ng-content select="[projectMe]"/>`, because the attributes and tag name from the `div` are copied to the template via the template creation instruction. With `@if` and `@for` that is not the case, because the conditional is placed *around* elements, rather than *on* them. The result is that content projection won't work in the same way if a user converts from `*ngIf` to `@if`.

These changes aim to cover the most common case by doing the same copying when a control flow node has *one and only one* root element or template node.

This approach comes with some caveats:
1. As soon as any other node is added to the root, the copying behavior won't work anymore. A diagnostic will be added to flag cases like this and to explain how to work around it.
2. If `preserveWhitespaces` is enabled, it's very likely that indentation will break this workaround, because it'll include an additional text node as the first child. We can work around it here, but in a discussion it was decided not to, because the user explicitly opted into preserving the whitespace and we would have to drop it from the generated code. The diagnostic mentioned point #1 will flag such cases to users.

Fixes #52277.

PR Close #52414
2023-10-31 14:52:31 -07:00
AleksanderBodurri 696f003553 fix(core): mutation bug in getDependenciesFromInjectable (#52450)
Previously, we would modified `dep.flags` directly to convert injection flags to booleans. This caused a mutation bug where subsequent calls to `getDependenciesFromInjectable` would result in the flags object containing false for every injection flag.

Now, we stop modifying `dep.flags` directly and instead assign the converted flags to a new object.

PR Close #52450
2023-10-31 14:21:36 -07:00
Alan Agius e5c3b25496 build: update node.js engines version to be more explicate about v20 support (#52448)
This commit adds Node.js 20 as explicitly supported version to match the Angular CLI engines.

See: https://github.com/angular/angular-cli/pull/26173

PR Close #52448
2023-10-31 14:18:36 -07:00
cexbrayat b9ea2d6900 fix(core): handle aliased index with no space in control flow migration (#52444)
The current regexp supposes that there is at least one space between the `=` and the aliased variable.
As it is possible to write `let myIndex=index`, this commit updates the regexp to handle such a case.

PR Close #52444
2023-10-31 13:45:00 -07:00
Mayuresh Dharwadkar abb4a9bad3 docs: Fix typos (#52442)
PR Close #52442
2023-10-31 13:44:14 -07:00
JoostK d517a75c9b fix(compiler-cli): use originally used module specifier for transform functions (#52437)
Prior to this change, the transform function would be referenced with a potentially
relative import into an external declaration file. Such imports are not portable
and should not be created in this context. This commit addresses the issue by threading
though the originally used module specifier by means of the `Reference` type.

Fixes #52324

PR Close #52437
2023-10-31 13:42:53 -07:00
JoostK 96fd73dc5d fix(compiler-cli): properly emit literal types in input coercion function arguments (#52437)
This commit fixes an issue where using literal types in the arguments of an input coercion
function could result in emitting invalid output, due to an assumption that TypeScript makes
when emitting literal types. Specifically, it takes the literal's text from its containing
source file, but this breaks when the literal type node has been transplanted into a
different source file. This issue has surfaced in the type-check code generator and is
already being addressed there, so this commit moves the relevant `TypeEmitter` class
from the `typecheck` module to the `translator` module, such that it can be reused for
emitting types in the type translator.

Fixes #51672

PR Close #52437
2023-10-31 13:42:53 -07:00
Swami fdd82857b1 docs(core): remove documentation of mutate function (#52435)
PR Close #52435
2023-10-31 13:42:15 -07:00
Kristiyan Kostadinov ddd9df68bb fix(compiler): allow decimals in defer block time values (#52433)
Fixes that our regex for parsing time values in defer blocks didn't allow for decimals. This isn't relevant for times in milliseconds, but it can be convenient to write something like `on timer(1.5s)`.

PR Close #52433
2023-10-31 13:39:27 -07:00
Andrew Scott 59b6ec6be8 docs(core): Deprecate ChangeDetectorRef.checkNoChanges (#52431)
The `checkNoChanges` method does not belong in the API of production interface. `checkNoChanges` is
limited to testing and should not be used in any application code. Test
code should use `ComponentFixture` instead of `ChangeDetectorRef`.
Additionally, it is not desirable to have the `checkNoChanges` API
available in a context where `detectChanges` is not run first.

DEPRECATED: `ChangeDetectorRef.checkNoChanges` is deprecated.

Test code should use `ComponentFixture` instead of `ChangeDetectorRef`.
Application code should not call `ChangeDetectorRef.checkNoChanges` directly.

PR Close #52431
2023-10-31 13:38:44 -07:00
Kristiyan Kostadinov 3f456821b5 refactor(compiler): account for comments when resolving implicit deferred triggers (#52449)
Adds some logic to skip over comments when resolving implicit `@defer` block triggers. This currently isn't a problem since we don't capture comments by default, but it may come up if we start capturing comments.

PR Close #52449
2023-10-31 13:35:00 -07:00
Kristiyan Kostadinov 2aaddd3f64 fix(compiler): allow comments between switch cases (#52449)
Fixes that the template parser was throwing an error if a comment is used directly inside an `@switch` block.

Fixes #52421.

PR Close #52449
2023-10-31 13:35:00 -07:00
Kristiyan Kostadinov 6c58252521 fix(compiler): compilation error when for loop block expression contains new line (#52447)
Fixes that the regex which captures the expression of a `@for` loop block wasn't accounting for line breaks.

Fixes #52446.

PR Close #52447
2023-10-31 13:30:42 -07:00
Andrew Scott d8280ace7d refactor(core): Remove RootViewRef<T> because it is the same as ViewRef<T> (#52430)
`RootViewRef<T>` extends `ViewRef<T>` and overrides 3 methods with behavior
that is identical to `ViewRef<T>`. This commit removes `RootViewRef<T>`
because it is not needed.

PR Close #52430
2023-10-31 13:22:56 -07:00
Andrew Scott b2c38399f9 refactor(core): rename ViewRef<T> to InternalViewRef<T> and remove existing InternalViewRef (#52430)
The `ViewRef<T>` interface extends `InternalViewRef` and is already not
part of the public API. There is no need for the extra `InternalViewRef`
interface. This confusing setup is likely leftover from the types
necessary to support both Ivy and ViewEngine.

PR Close #52430
2023-10-31 13:22:56 -07:00
Jeremy Elbourn 65ccaa4169 docs: minor revisions to control flow guide (#52411)
This commit makes some minor writing changes to the control flow guide for brevity, consistency, and active voice.

PR Close #52411
2023-10-31 13:20:35 -07:00
Matthieu Riegler 8156b3d4ec fix(http): Don't override the backend when using the InMemoryWebAPI (#52425)
When using `withFetch`,  the `PRIMARY_HTTP_BACKEND` token is set.

The InMemory Backend services will also set that token.

This means that providers order will matter and the latest on the list will be the one instantiated

PR Close #52425
2023-10-31 13:17:19 -07:00
Alex Rickabaugh 59a3475d77 refactor(core): global epoch to optimize non-live signal reads (#52420)
This commit adds a global epoch to the reactive graph, which can optimize
non-live reads.

When a non-live read occurs, a computed must poll its dependencies to check
if they've changed, and this operation is transitive and not cacheable.
Since non-live computeds don't receive dirty notifications, they're forced
to assume potential dirtiness on each and every read.

Using a global epoch, we can add an important optimization: if *no* signals
have been set globally since the last time it polled its dependencies, then
we *can* assume a clean state. This significantly improves performance of
large unwatched graphs when repeatedly reading values.

PR Close #52420
2023-10-31 13:12:18 -07:00
Charles Lyding 6e82ae5871 docs: update esbuild guide for v17 (#52407)
Update new build system guide to reflect stable status and the use of the `application` builder in existing projects.

PR Close #52407
2023-10-31 13:10:43 -07:00
Andrew Scott de3454a507 refactor(language-service): Improve autocomplete snippet of for block (#52405)
The `for` block has several parts which we know are required. This
commit improves the autocomplete snippet of the `for` block by adding
those required parts and providing placeholders.

PR Close #52405
2023-10-31 13:08:11 -07:00
Francesco Donzello 0451e7eabc docs: added missing imports for toSignal and toObservable (#52393)
PR Close #52393
2023-10-31 13:07:31 -07:00
Andrew Scott e355f05b9a refactor(language-service): Add quick info for built in control flow/blocks (#52386)
Adds hover info for:

* Defer blocks
* Triggers and trigger behavior keywords
* For loop empty block
* Track keyword in for loop block

resolves https://github.com/angular/vscode-ng-language-service/issues/1946

PR Close #52386
2023-10-31 12:56:45 -07:00
Dylan Hunn 595009ecf4 refactor(compiler): Implement the remaining defer on triggers (#52387)
The previous commits provided the scaffolding for `defer on`. In this commit, we build on that work, adding triggers for `immediate`, `timer`, `hover`, and `viewport`.

PR Close #52387
2023-10-31 12:45:18 -07:00
Dylan Hunn 1d7d53caa3 refactor(compiler): Introduce ConstCollectedExpr, and use it in defer on expressions (#52387)
Previously, we supported a `HasConst` trait, allowing an op to be const collected automatically. However, that approach had the shortcoming that each op could only collect a single constant.

Instead, we now provide a `ConstCollectedExpr`, which collects constants at the expression level, allowing ops to have multiple collectible consts.

Then, we use this new abstraction to support the `defer on` conditions.

PR Close #52387
2023-10-31 12:45:18 -07:00
Dylan Hunn 6a11e9e8b4 refactor(compiler): Implement defer conditions, and change the way slots are linked (#52387)
Previously, we had an "empty shell" implementation of defer conditions, and we used separate ops to represent secondary defer blocks.

Now, we have a real scaffolding for supporting the various defer conditions, and the secondary defer block information has been refactored onto the main defer op.

Additionally, to enable this, we refactor the way that using slot indices works. Instead of having a trait that causes users of slot indices to be linked to the allocated slot, we share a single `SlotHandle` object by reference. This allows an op to use slot information for more than one Xref at a time, and eliminates a layer of indirection.

Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>

PR Close #52387
2023-10-31 12:45:18 -07:00
Pawel Kozlowski 877ba3e3c1 refactor(core): use performance API for control flow and standalone (#52370)
This commit adds a standard performance marker that can be viewed in Chrome dev tools and other tooling.
See more info at https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark

PR Close #52370
2023-10-31 12:43:51 -07:00
Andrew Scott 3861a73135 perf(core): Update LView consumer to only mark component for check (#52302)
This commit updates the reactive template and host binding consumers to
only mark their declaration components for refresh, but not parents/ancestors.

This also updates the `AfterViewChecked` hook to run when a component is
refreshed during change detection but its host is not. It is reasonable
to expect that the `ngAfterViewChecked` lifecycle hook will run when a
signal updates and the component is refreshed. The hooks are typically
run when the host is refreshed so without this change, the update to
not mark ancestors dirty would have caused `ngAfterViewChecked` to not
run.

resolves #14628
resolves #22646

resolves #34347 - this is not the direct request of the issue but
generally forcing change detection to run is necessary only because a
value was updated that needs to be synced to the DOM. Values that use
signals will mark the component for check automatically so accessing the
`ChangeDetectorRef` of a child is not necessary. The other part of this
request was to avoid the need to "mark all views for checking since
it wouldn't affect anything but itself". This is directly addressed by
this commit - updating a signal that's read in the view's template
will not cause ancestors/"all views" to be refreshed.

PR Close #52302
2023-10-31 12:37:56 -07:00
marktechson e74b578bd9 docs: update home page for live stream event (#52456)
PR Close #52456
2023-10-31 11:58:18 -07:00
Emma Twersky b14f0dc5d6 docs: make banner persist until 11/8 (#52432)
PR Close #52432
2023-10-31 11:57:08 -07:00
cexbrayat 4461cefa4f fix(core): handle trackBy and aliased index in control flow migration (#52423)
Currently, the migration always use `$index` in the migrated trackBy function, whereas this variable might be aliased.
The compiler then errors with:

```
error TS2339: Property '$index' does not exist on type 'UsersComponent'.

110 @for (user of users; track byId($index, user); let i = $index) {
```

This commit updates the migration to use the aliased index if there is one.

PR Close #52423
2023-10-27 16:16:46 -07:00
Miles Malerba ce54ead2b5 refactor(compiler): Split the i18n placeholder mega-phase (#52390)
The i18n placeholder resolution phase has accumulated too much logic,
making it difficult to understand. This commit refactors it into several
smaller phases to make it easier to manage.

I suspect this will undergo further refactoring in the near future as I
work through the ICU logic. In particular `ExtractedMessageOp` feels
like a bit of a grab bag of properties, and the i18n const collection
phase is also starting to get quite heavy. This refactor at least feels
like a good start.

PR Close #52390
2023-10-27 16:16:04 -07:00
Miles Malerba f6c2b39812 test(compiler): Enable passing i18n tests (#52390)
Enables a handful of i18n tests that are currently skipped, but pass if
enabled. Some of them require alternate golden files because of
inconsequential differences in the cost array order.

PR Close #52390
2023-10-27 16:16:04 -07:00
Matthieu Riegler 8e17dd719d refactor(localize): mark TargetMessage and MessageId as public. (#52418)
Both entries are exported in the `index.ts`

PR Close #52418
2023-10-27 16:06:11 -07:00
Andrew Kushnir 57b9798cf6 docs: update SSR docs (#52408)
This commit updates the `ssr.md` file to restructure (and simplify) SSR docs.

PR Close #52408
2023-10-27 15:16:14 -07:00
Jessica Janiuk 2579c7121e refactor(migrations): Add optional path param for control flow migration (#52403)
This adds the option to pass in a path to the control flow migration in order to run the migration against one single file.

PR Close #52403
2023-10-27 15:15:22 -07:00
Jessica Janiuk d7397fb29b fix(migrations): Ensure control flow migration ignores new block syntax (#52402)
This fix ensures that the control flow migration does not encounter any problems when new block sytax already exists in a template.

PR Close #52402
2023-10-27 13:02:03 -07:00
Jessica Janiuk e40e55d902 fix(migrations): Remove unhelpful parsing errors from the log (#52401)
When running the control flow migration, unhelpful ICU parsing errors were being logged and creating a bunch of noise for users.

PR Close #52401
2023-10-27 13:00:24 -07:00
Pawel Kozlowski ffd0b4c30b docs: control flow API reference (#52397)
Adds API reference for the new built-in control flow.

PR Close #52397
2023-10-27 12:56:51 -07:00
Jeremy Elbourn 5dd2822523 refactor(compiler): extract api docs for inherited members (#52389)
This commit expands docs extraction for classes and interfaces to include inherited members. This relies on the type checker to get the _resolved_ members of the type so that the extractor doesn't need to reason about inheritance rules, which can get tricky (especially with regards to method overloads).

PR Close #52389
2023-10-27 12:54:14 -07:00
Jeremy Elbourn 7e8a214474 refactor(compiler): extract decorator API docs (#52389)
This commit adds decorators to the extracted API docs. It makes some
very hard-coded assumptions about the pattern used to declare decorators
that's extremely specific to what the framework does today.

PR Close #52389
2023-10-27 12:54:14 -07:00
Jessica Janiuk e92eda9a31 docs: Add defer guide (#52380)
This adds a user guide for how to use defer.

PR Close #52380
2023-10-27 12:50:24 -07:00
Ivad 499c22251d docs(docs-infra): fix typo in tap into the observable tutorial example (#52359)
PR Close #52359
2023-10-27 12:49:39 -07:00
Evan Kleiner becbcdcff0 docs: add warning for localhost proxy (#51948)
PR Close #51948
2023-10-27 12:32:22 -07:00
Alex Rickabaugh 384d7aacd0 fix(core): replace assertion with more intentional error (#52427)
Issue #50320 shows that in some cases, updating a signal that's a dependency
of a template during change detection of that template can have several
adverse effects. This can happen, for example, if the signal is set during
the lifecycle hook of a directive within the same template that reads the
signal.

This can cause a few things to happen:

* Straightforwardly, it can cause `ExpressionChanged` errors.
* Surprisingly, it can cause an assertion within the `ReactiveLViewConsumer`
  to fail.
* Very surprisingly, it can cause change detection for an `OnPush` component
  to stop working.

The root cause of these later behaviors is subtle, and is ultimately a
desync between the reactive graph and the view tree's notion of "dirty" for
a given view. This will be fixed with further work planned for change
detection to handle such updates directly. Until then, this commit improves
the DX through two changes:

1. The mechanism of "committing" `ReactiveLViewConsumer`s to a view is
   changed to use the `consumerOnSignalRead` hook from the reactive graph.
   This prevents the situation which required the assertion in the first
   place.

2. A `console.warn` warning is added when a view is marked dirty via a
   signal while it's still executing.

The warning informs users that they're pushing data against the direction of
change detection, risking `ExpressionChanged` or other issues. It's a
warning and not an error because the check is overly broad and captures
situations where the application would not actually break as a result, such
as if a `computed` marked the template dirty but still returned the same
value.

PR Close #52427
2023-10-27 12:30:17 -07:00
Angular Robot 612986bcd3 build: update cross-repo angular dependencies (#52191)
See associated pull request for more information.

PR Close #52191
2023-10-26 14:12:34 -07:00
Alan Agius da1b71e0a5 docs: update SSR doc to reflect version 17 (#52398)
Changes to SSR doc

PR Close #52398
2023-10-26 12:30:59 -07:00
Jessica Janiuk 6a01d62b9d fix(migrations): fix broken migration when no control flow is present (#52399)
This addresses a bug that caused the control flow migration to crash when no control flow was present in the template.

PR Close #52399
2023-10-26 09:40:11 -07:00
Pawel Kozlowski befd197933 docs: guide for the built-in control flow (#52369)
This change adds a dedicated developer guide for the
built-in control flow.

PR Close #52369
2023-10-26 09:38:56 -07:00
Alan Agius 9376e7f05e refactor(common): avoid repetitive globalThis in global locales (#52394)
This changes reduced slightly the bundle size as `global` can be minified unlike direct usage of `globalThis`.

PR Close #52394
2023-10-26 09:37:41 -07:00
Andrew Kushnir 576338a9f5 build: update zone.js version to 0.14.1 (#52385)
This commit updates the `package.json` of the zone.js package.

PR Close #52385
2023-10-26 09:28:32 -07:00
Andrea Canciani 8580542153 refactor: fix a number of typos throughout the codebase (#52249)
Fix some typos such as `boostrap`, `propery` and more, both in
documentation and in code (comments, identifiers).

PR Close #52249
2023-10-25 16:51:24 -07:00
Susheel Thapa 57630c3769 docs: fixed typos (#52297)
PR Close #52297
2023-10-25 16:39:09 -07:00
Alan Agius f1d42cef87 docs: update to standalone and routing by default (#52293)
This commit covers several changes:
 - routing enabled by default
 - standalone by default

PR Close #52293
2023-10-25 16:37:52 -07:00
Pawel Kozlowski 48816e8c22 docs: remove the dev preview warning from the signals guide (#52375)
Signals are out of dev preview now.

PR Close #52375
2023-10-25 16:37:23 -07:00
Jessica Janiuk d3cc0e998f ci: Add members to fw-migrations pullapprove group (#52378)
This adds jessicajaniuk and AndrewKushnir to the fw-migrations reviewers list.

PR Close #52378
2023-10-25 16:36:56 -07:00
Jessica Janiuk 13b16b905f docs: Adjust defer api summary for prefetch clarity (#52379)
This updates language to clarify exactly how prefetch works in a defer block configuration.

PR Close #52379
2023-10-25 16:36:29 -07:00
Alan Agius 40f75364d4 release: cut the zone.js-0.14.1 release (#52374)
PR Close #52374
2023-10-25 14:39:44 -07:00
Dylan Hunn 2b0698def0 release: cut the v17.0.0-rc.1 release 2023-10-25 14:35:56 -07:00
Andrew Scott 6858149eb1 fix(router): RouterTestingHarness should throw if a component is expected but navigation fails (#52357)
The `RouterTestingHarness` should throw an error if the call to `navigateByUrl`
expects a component to be activated but the navigation failed.

fixes #52344

PR Close #52357
2023-10-25 11:04:26 -07:00
AleksanderBodurri a803c89a21 fix(core): load global utils before creating platform injector in the standalone case (#52365)
This is needed so that the providers configured on platform creation are picked up by the injector profiler.

PR Close #52365
2023-10-25 10:51:24 -07:00
AleksanderBodurri 957effa404 fix(core): get root and platform injector providers in special cases (#52365)
Previously, because the platform injector does not have a provider container, this API would fail. Now, we account for this case specifically by returning the found providers immediately, without trying to calculate their importpaths.

Also previously, in the case where a boostrapped standalone component did not import any feature modules, the environment injector connected to that bootstrapped component would be the root injector configured by `bootstrapApplication`. This injector is configured through a `providers` array instead of an `imports` array, and also does not have a provider container. Similarly to the platform case, we account this for this by returning the found providers immediately if there is no provider container for our standalone component.

PR Close #52365
2023-10-25 10:51:23 -07:00
AleksanderBodurri ea6d75291f fix(core): emit provider configured event when a service is configured with providedIn (#52365)
Previously this case was missed by the default framework injector profiler. Now in ngDevMode this event emits correctly when a service is configured with `providedIn`. This includes the case where injection tokens are configured with a `providedIn`.

This commit also includes unit tests for this new case in the injector profiler.

PR Close #52365
2023-10-25 10:51:23 -07:00
Osama Heykal 403d217a59 docs: added missing 'next steps' sections (#52229)
PR Close #52229
2023-10-25 10:50:46 -07:00
Jessica Janiuk 1acff00468 docs: Add @defer API reference documentation (#52336)
This adds the initial API reference documentation for the new defer blocks.

PR Close #52336
2023-10-25 10:47:49 -07:00
Jessica Janiuk 4c878f90d2 fix(migrations): Add support for nested structures inside a switch statement (#52358)
This updates the code to handle switches more elegantly in line with how the other blocks are handled. This allows nesting to be handled just like other blocks.

PR Close #52358
2023-10-25 09:39:47 -07:00
Alvaro Junqueira 938007df9d docs: the Component import is not being used (#52323)
PR Close #52323
2023-10-25 09:35:24 -07:00
Naaajii cd903cc9f4 docs(docs-infra): fix codeblock snippet for APP_INITIALIZER (#52354)
fixes broken code snippet for standalone application using APP_INITIALIZER

PR Close #52354
2023-10-25 09:34:48 -07:00
Matthieu Riegler 9b32d9148e docs(core): fix the language code (#52352)
PR Close #52352
2023-10-25 09:32:19 -07:00
mgechev 0536b61bb8 docs: update the roadmap to reflect the progress as of v17 (#52356)
PR Close #52356
2023-10-25 09:31:46 -07:00
Alan Agius df68ad4731 fix(zone.js): use globalThis instead of global and window (#52367)
`globalThis` global property contains the global `this` value, which is usually akin to the global object. This is needed for better compatibility with CloudFlare workers were global nor window are defined as globals.

PR Close #52367
2023-10-25 09:31:18 -07:00
Alan Agius 6d0362cb44 refactor(core): modernize $localize checks (#52368)
Use nullish coalescing.

PR Close #52368
2023-10-25 09:30:51 -07:00
Alan Agius 1660f667e0 refactor(common): modernize code in locale file (#52368)
Use `globalThis` global property contains the global this value, which is usually akin to the global object.

PR Close #52368
2023-10-25 09:30:51 -07:00
Andrew Scott 1dd8558f82 fix(core): Ensure backwards-referenced transplanted views are refreshed (#51854)
This commit runs change detection in a loop while there are still dirty
views to be refreshed in the tree. At the moment, this only applies to
transplanted views but will also apply to views with changed signals.

fixes angular#49801

PR Close #51854
2023-10-24 14:50:19 -07:00
Kristiyan Kostadinov c9b1ddff4d fix(migrations): handle nested classes in control flow migration (#52309)
Fixes that the control flow migration was only processing top-level classes. Nested classes could come up during unit tests.

PR Close #52309
2023-10-24 14:34:16 -07:00
Kristiyan Kostadinov 54bc384661 fix(migrations): handle nested classes in block entities migration (#52309)
Fixes that the block entities migration was only processing top-level classes. Nested classes could come up during unit tests.

PR Close #52309
2023-10-24 14:34:16 -07:00
Alan Agius bd9e91ecf7 perf(http): reduce data transfer when using HTTP caching (#52347)
This commit reduces the property size in the http transfer cache to reduce the page payload.

Before
```html
<script id="ng-state" type="application/json">
{
  "4155228514": {
    "body": "....",
    "headers": {},
    "status": 200,
    "statusText": "OK",
    "url": "http://foo.com/assets/media.json",
    "responseType": "json"
  },
}
</script>
```

Now
```html
<script id="ng-state" type="application/json">
{
  "4155228514": {
    "b": "....",
    "h": {},
    "s": 200,
    "st": "OK",
    "u": "http://foo.com/assets/media.json",
    "rt": "json"
  },
}
</script>
```

PR Close #52347
2023-10-24 14:33:26 -07:00
Joey Perrott 4e00851c04 build: lock file maintenance (#52353)
See associated pull request for more information.

PR Close #52353
2023-10-24 14:29:17 -07:00
Jessica Janiuk 54fed68bbf fix(migrations): Fixes the root level template offset in control flow migration (#52355)
When migrating an ng-template later on in a file, the migrationResult was not being reset to zero and causing offsets to be double applied due to ng-template nodes being included in the migration loop.

PR Close #52355
2023-10-24 14:22:32 -07:00
Dylan Hunn 114a2f8153 refactor(compiler): Don't double-create pipes in switch cases (#52289)
Previously, we would emit *two* pipe creation instructions for each pipe in a switch case. This is because we were visiting both the transformed and raw versions of the pipe bindings.

Now, we clear the raw case expressions array after generating the transformed test expression.

Also, we introduce some new goldens, because our pipe creation order is harmlessly different.

PR Close #52289
2023-10-24 11:07:52 -07:00
Dylan Hunn 7002cfc811 refactor(compiler): Support content projection source maps (#52289)
The `projection` op should map onto the entire corresponding `ng-content`.

PR Close #52289
2023-10-24 11:07:52 -07:00
Dylan Hunn 0d23baa740 refactor(compiler): Update pipe test golden for alternative create order (#52289)
We roughly attempt to match TemplateDefinitionBuilder's pipe creation order, by placing pipe creation instructions after their target elements. However, we cannot fully emulate the "inside-out" ordering TemplateDefinitionBuilder uses when multiple pipes apply to one element, because TemplateDefinitionBuilder creates the pipes as expressions are visited, from the leaves up. Our order is perfectly adequate though.

We also add a non-compatibility-mode ordering, which just appends them to the end of the create block. This is better because it allows for more chaining opportunities.

PR Close #52289
2023-10-24 11:07:52 -07:00
Dylan Hunn 3c08f91a01 refactor(compiler): Fix a special case involving var counting for singleton propertyInterpolate (#52289)
Singleton property interpolation instructions consume only one variable, but are still emitted as an interpolation instruction (they cannot be collapsed because `propertyInterpolate` implicitly stringifies its argument.)

PR Close #52289
2023-10-24 11:07:52 -07:00
Dylan Hunn 20993f7a87 refactor(compiler): The projection instruction takes an array literal (#52289)
We were incorrectly emiting a extracted constant pool index for the final argument of the projection instruction. It actually takes an array literal.

(N.B.: This means we re-create the array every time! We should probably modify the runtime to use a const index for this.)

Additionally, we alter the projection op to not extend the element op base type.

PR Close #52289
2023-10-24 11:07:52 -07:00
Dylan Hunn 6ade8c9c8c refactor(compiler): Improve the ordering of update ops (#52289)
The correct order of attributes and properties is:

1. Interpolated properties
2. Interpolated attributes
3. Non-interpolated properties
4. Non-interpolated attributes

This includes an additional nuance: singleton attribute interpolations, such as `[attr.foo]="{{bar}}"`, will be "collaped" into a simple `attribute` instruction. However, this is *not* the case for singleton property interpolations! The ordering phase must take this nuance into account to match the TemplateDefinitionBuilder order.

After the project lands, it might be nice to also collapse singleton property interpolations.

PR Close #52289
2023-10-24 11:07:51 -07:00
Dylan Hunn e4df686ec6 refactor(compiler): Order elements before other phases (#52289)
Previously, we ran the ordering phase near the end of the compilation. However, this meant that phases like slot assignment and variable offset assignment would happen first, and then the nice, monotonically-increasing orders would be scrambled by the reordering.

It's much more intelligible to order first, and then perform these assignments. However, to make this happen, some modifications to the ordering phase are required. In particular, we can no longer rely on `advance` instructions to break up orderable groups.

PR Close #52289
2023-10-24 11:07:51 -07:00
Dylan Hunn 1fa5020739 refactor(compiler): Imitate TemplateDefinitionBuilder's variable offset assignment order (#52289)
Many instructions consume variable slots, which are used to persist data between update runs. For top-level instructions, the offset into the variable data array is implicitly advanced, because those instructions always run.

However, instructions in non-top-level expressions cannot be assumed to run every time, because they might be conditionally executed. Therefore, they cannot implicitly advance the offset into the variable data, and must be given an explicitly assigned variable offset.

TemplateDefinitionBuilder assigned offsets top-to-bottom for all instructions *except* pure functions. Pure functions would be assigned offsets lazily, on a second pass.

Template Pipeline can now imitate this behavior, when in compatibility mode: pure functions are assigned offsets on a second pass.

This also makes the "variadic var offsets" phase unnecessary -- the new approach is more general and correct.

PR Close #52289
2023-10-24 11:07:51 -07:00
Dylan Hunn d2df9fb59b refactor(compiler): Use already available context in closures, instead of saving it (#52289)
Previously, inside an event listener, template pipeline would always save the context from restoring a view, e.g.

```
const restored_ctx = r0.ɵɵrestoreView(s);
```

This is usually correct! However, consider the case of a listener in the template's root view. The appropriate context will already be available via closure capture, and we can just use it (as `ctx`).

Now, the context resolution phase understands that we don't need to use the restored view's saved context if we would have access to it by closure.

Note: we also create a new golden, because the const array is in a harmlessly different order.

PR Close #52289
2023-10-24 11:07:51 -07:00
Dylan Hunn fe82292583 refactor(compiler): Empty context variable reads are $implicit (#52289)
Previously, the template pipeline did not handle "empty" reads gracefully: it would emit syntactically invalid reads of empty properties. Now we read `$implicit`.

This allows us to enable a test that relies on `$implicit`. However, we also have to create another golden, because our variable inlining is more aggressive.

PR Close #52289
2023-10-24 11:07:51 -07:00
Dylan Hunn 439e83a974 refactor(compiler): Update golden for pipe binding collapsing (#52289)
We currently allow elements to be collapsed around pipe creation instructions. TemplateDefinitionBuilder disallows this, but only sometimes. Collapsing in this case is actually less generated code, and it's OK to allow it.

PR Close #52289
2023-10-24 11:07:51 -07:00
Dylan Hunn 4ade911e66 refactor(compiler): Enable already-passing tests (#52289)
Some tests are already passing, but were not enabled at the time they were previously fixed.

PR Close #52289
2023-10-24 11:07:50 -07:00
Alan Agius d2f8412322 refactor(platform-server): replace global usages with globalThis (#52342)
This commit updates a number of `global` usages to `globalThis` to better support other platforms like CF workers

PR Close #52342
2023-10-24 09:26:50 -07:00
Alan Agius 00dee8384c refactor(platform-server): remove dependency between @angular/platform-server and @angular/platform-server/init (#52342)
Previously, the cross entry-point dependency was created to share the `setDomTypes` function. This however, causes extra transformations "linking" during the application build since other Angular code in `@angular/platform-server` is pulled in.

With this commit we remove the cross dependency and thus remove the need for extra transformations in the server polyfill bundle with the result of having a slightly faster build.

See: https://github.com/angular/angular-cli/pull/26113

PR Close #52342
2023-10-24 09:26:50 -07:00
Alex Castle ceb7f1eaf0 docs(common): add preconnect generation to NgOptimizedImage docs (#52248)
add a note on automated preconnect generation to the NgOptimizedImage docs' preconnect section, and add a related FAQ entry.

PR Close #52248
2023-10-24 09:26:06 -07:00
Andrew Kushnir f069b3a71a refactor(core): ignore after and minimum when transition between states in tests (#52314)
This commit updates the logic to ignore `after` and `minimum` conditions when `DeferBlockFixture.render` method is used in tests.

Resolves #52313.

PR Close #52314
2023-10-24 09:25:14 -07:00
Andrew Kushnir ec1e652f8a refactor(core): report @defer errors using ErrorHandler (#52320)
This commit updates the code to report errors via `ErrorHandler` instance.
For dependency loading problems, errors are reported only when `@error` block is not provided.

PR Close #52320
2023-10-24 09:24:43 -07:00
cexbrayat a87586538a docs: remove test.ts file in aio (#52327)
Same as 7ba5dc87ed, but for aio
This file is not necessary since CLI v15+

PR Close #52327
2023-10-24 09:23:02 -07:00
Jessica Janiuk 6a3a7b0d13 refactor(migrations): Fixes offset calculations for nesting (#52332)
This updates offset to handle pre and post offset properly for nested situations, rather than relying on solely nestCount. This should properly apply offset calculations at the right time to handle any nested situation.

PR Close #52332
2023-10-24 09:22:26 -07:00
Andrew Scott 0c1cf7ac6b test(core): fix test observing broken OnPush checkNoChanges (#52337)
The test is actually observing that OnPush results in a view not being checked
when checkNoChanges runs.

PR Close #52337
2023-10-24 09:21:55 -07:00
Doug Parker 394c0fb719 docs: fix typo (#52339)
PR Close #52339
2023-10-24 09:21:15 -07:00
Kristiyan Kostadinov 6795cccbbb fix(compiler): account for type-only imports in defer blocks (#52343)
Fixes that `@defer` blocks didn't account for type-only imports which could cause the import to be considered as not deferrable.

PR Close #52343
2023-10-24 09:20:49 -07:00
Angular Robot 96ad3bf065 docs: update Angular CLI help [17.0.x] (#52331)
Updated Angular CLI help contents.

Closes #52280

PR Close #52331
2023-10-23 13:45:59 -07:00
Dylan Hunn 3f7d081112 refactor(compiler): Support track functions and context variables in @for loops for template pipeline (#52001)
The template pipeline can now generate track functions, and extract them into the constant pool (or optimize them if needed). Additionally, context variables such as `$index` can be used inside track functions and for loop bodies.

PR Close #52001
2023-10-23 13:44:30 -07:00
Dylan Hunn 2560115793 refactor(compiler): Support @for blocks in template pipeline (#52001)
Add support for `repeaterCreate` and `repeater` instructions. Correctly count decls and vars, and support primary and empty blocks.

`track` functions are not yet extracted.

PR Close #52001
2023-10-23 13:44:30 -07:00
Dylan Hunn 9060cebc02 refactor(compiler): Create an alias concept on views (#52001)
View compilations previously had context variables, which were variables available in the view that would result in a property read on the context object.

We now also support the notion of aliases. An alias is a variable available in the view compilation, which might be derived from a context variable, which it may reference by name. It is always inlined at all usage sites, and therefore is not allowed to depend on the current context.

Under the hood, aliases rely on the new `AlwaysInline` mode.

Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>

PR Close #52001
2023-10-23 13:44:30 -07:00
Dylan Hunn db81193ce6 refactor(compiler): Create an AlwaysInline variable mode (#52001)
The template pipeline now supports lexical variables that are always inlined into their call sites, even if multiple call sites exist.

An `AlwaysInline` variable may not rely on the current context, because it will potentially be inlined at several different locations.

Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>

PR Close #52001
2023-10-23 13:44:29 -07:00
Emma Twersky af6a75a837 docs: add event banner (#52334)
PR Close #52334
2023-10-23 13:40:02 -07:00
Gerald Monaco f206d1041f refactor(core): use performance API for afterRender feature logging (#52235)
Add a standard performance marker that can be viewed in Chrome Dev Tools and other tooling. See more info at https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark

PR Close #52235
2023-10-23 12:03:42 -07:00
Alan Agius f5aed23924 docs: update app-shell docs to reflect v17 (#52294)
Update app-shell docs to reflect v17 changes

PR Close #52294
2023-10-23 12:03:15 -07:00
Andrew Scott 8473675db2 refactor(core): Remove duplicate null check in helper function (#52312)
This commit is a small refactor to remove the top-level null check on the
variable that's already checked for null in the main loop

PR Close #52312
2023-10-23 12:02:48 -07:00
Alan Agius 0c66e2424c fix(platform-server): resolve relative requests URL (#52326)
Prior to this commit relative HTTP requests were not being resolved to absolute even thought the behaviour is documented in https://angular.io/guide/universal#using-absolute-urls-for-http-data-requests-on-the-server.

This caused relative HTTP requests to fail when done on the server because of missing request context. This change is also required to eventually support HTTP requests handled during prerendering (SSG).

Closes #51626

PR Close #52326
2023-10-23 12:02:21 -07:00
Dylan Hunn 9d565cd6d6 fix(language-service): Autocomplete block keywords in more cases (#52198)
Previously, autocompletions were not available in two main cases. We correct them.

1. Autocompletions immediately after `@` were usually not working, for example `foo @|`. We fix this by causing the lexer to not consider the `@` part of the text node.
2. Autocompletions such as `@\nfoo`, where a newline follows a bare `@`, were not working because the language service visitor considered us inside the subsequent text node. We fix this by adding a block name span for the block keyword, and special-case whether we are completing inside the name span. If we are, we don't continue to the following text node.

PR Close #52198
2023-10-23 12:01:52 -07:00
Andrew Kushnir 182d574fa3 refactor(core): defer triggers cleanup (#52291)
This commit adds the logic to cleanup all triggers once defer block is triggered.

When a trigger is created, its cleanup function is stored alongside other defer block info. Prefetch and regular triggers are store in different slots, since we need to invoke them at different time.

PR Close #52291
2023-10-23 12:00:19 -07:00
Joey Perrott 569f57daa9 build: update lockfile (#52270)
Update lockfiles throughout

PR Close #52270
2023-10-23 09:30:39 -07:00
Andrew Kushnir dfc77e5f58 refactor(core): use performance API for defer feature (#52288)
This commit adds a standard performance marker that can be viewed in Chrome dev tools and other tooling. See more info at https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark

PR Close #52288
2023-10-23 09:29:37 -07:00
Andrew Kushnir 6005fe2d70 refactor(core): use performance API for hydration-related features (#52288)
This commit adds a standard performance marker that can be viewed in Chrome dev tools and other tooling. See more info at https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark

PR Close #52288
2023-10-23 09:29:37 -07:00
Kristiyan Kostadinov 1dc14d9853 perf(core): avoid unnecessary callbacks in after render hooks (#52292)
A few performance improvements and code cleanups in the after render hooks:
1. We were wrapping each `destroy` callback in another callback, because it was typed as `|undefined`. This is unnecessary, because the callback is guaranteed to exist. These changes pass the `destroy` function around directly and avoid the additional callback.
2. In server platforms we were recreating a noop `AfterRenderRef` on each invocation. We can save some memory by returning the same one.
3. Reworks the `AfterRenderCallback` so that it injects `NgZone` and `ErrorHandler` itself, instead of expecting them to be passed in. This reduces the amount of repetition in the code.

PR Close #52292
2023-10-23 09:29:10 -07:00
Alan Agius 129b5d8bde docs: update prerendering guide (#52300)
This commits update the prerendering docs with the version 17 changes.

PR Close #52300
2023-10-23 09:28:42 -07:00
Andrew Kushnir 7a064e372a refactor(core): avoid invoking IntersectionObserver in defer triggers on the server (#52306)
This commit updates the logic to make sure that DOM-specific triggers do not produce errors on the server.

Resolves #52304.

PR Close #52306
2023-10-23 09:28:15 -07:00
Kristiyan Kostadinov 81c315ec6e fix(compiler): template type checking not reporting diagnostics for incompatible type comparisons (#52322)
In #52110 the compiler was changed to produce `if` statements when type checking `@switch` in order to avoid a bug in the TypeScript compiler. In order to avoid duplicate diagnostics, the main `@switch` expression was ignored in each of the `@case` comparisons. This appears to have caused a regression where comparing incompatible types wasn't being reported anymore.

These changes resolve the issue by wrapping the expression in parentheses which allows the compiler to report comparison diagnostics while ignoring diagnostics in the expression itself.

Fixes #52315.

PR Close #52322
2023-10-23 09:27:24 -07:00
Andrew Scott 4dce8766f8 fix(router): Ensure newly resolved data is inherited by child routes (#52167)
The current way of computing a route's params and data recomputes
inherited data from the inheritance root every time. When the
inheritance strategy is "emptyOnly", this isn't necessarily the root of
the tree, but some point along the way (it stops once it reaches an
ancestor route with a component).

Instead, this commit updates parameter inheritance to only inherit data
directly from the parent route (again, instead of recomputing all
inherited data back to the inheritance root). The only requirement for
making this work is that the parent route data has already calculated
and updated its own inherited data. This was really already a
requirement -- parents need to be processed before children.

In addition, the update to the inheritance algorithm in this commit
requires more of an understanding that a resolver running higher up in
the tree has to propagate inherited data downwards. The previous
algorithm hid this knowledge because resolvers would recompute inherited
data from the root when run. However, routes that did not have resolvers
rerun or never had resolvers at all would not get the updated resolved data.

fixes #51934

PR Close #52167
2023-10-19 10:26:28 -07:00
Alex Castle 0b4c013aac refactor(common): use performance API for NgOptimizedImage feature logging (#52205)
add a standard performance marker that can be viewed in Chrome dev tools and other tooling. See more info
at https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark

PR Close #52205
2023-10-19 09:39:06 -07:00
Sylvain DEDIEU 958346107f refactor(core): no need for signals property in component interface since inherited from directive (#52039)
Removed the signals property definition from the Component interface since it already exists in the Directive interface and Component inherits from Directive

PR Close #52039
2023-10-19 09:37:57 -07:00
Andrew Kushnir a207421ada refactor(core): check "skip hydration" condition only when hydration info is present (#52221)
This commit refactors a couple places to improve performance:

* avoid checking parent tree if a current node has "skip hydration" flag
* avoid calling `isInSkipHydrationBlock` if there is no hydration info present

PR Close #52221
2023-10-19 09:27:55 -07:00
Alan Agius 7cc9f193fe refactor(platform-server): replace Node.js URL API usage (#52231)
This commit replace the usage of URL node API to WHATWG URL API.

See: https://nodejs.org/api/url.html#the-whatwg-url-api

PR Close #52231
2023-10-19 09:26:45 -07:00
Kristiyan Kostadinov 30f993a356 test(core): clean up unnecessary nesting in old tests (#52239)
A lot of our tests are wrapped in `{}` which serves no purpose, aside from increasing the nesting level and, in some cases, causing confusion. The braces appear to be a leftover from a time when all tests were wrapped in a `function main() {}`. The function declaration was removed in #21053, but the braces remained, presumably because it was easier to search&replace for `function main()`, but not to remove the braces at the same time.

PR Close #52239
2023-10-19 09:26:15 -07:00
Etienne FRANK aaf00092c8 docs(forms): replace fb with formBuilder (#52261)
Shorten variable names isn't a good practice. To avoid spreading it, we removed it from Angular's documentation.

PR Close #52261
2023-10-19 09:24:40 -07:00
Andrew Scott 44f08baf63 docs: Update control flow diagnostic to direct devs to built-ins (#52268)
The commit adds messaging to the control flow template diagnostic to direct developers to the new
built-in control flow syntax in Angular.

PR Close #52268
2023-10-19 09:24:08 -07:00
Matthieu Riegler b4c1ffbfa1 refactor(forms): Log a warning when FormGroup keys include a dot. (#50642)
Due to the dotted synthax to resolve controls, keys in FormGroups cannot include dots.

fixes #50608

PR Close #50642
2023-10-18 12:11:25 -07:00
Andrew Kushnir 4567a090c9 test(core): add benchmark for hydration runtime logic (#52206)
This commit adds a benchmark for hydration runtime logic, which contains 2 parts: a baseline (create DOM nodes from scratch) and a main scenario (DOM matching instead of re-creating nodes).

PR Close #52206
2023-10-18 12:07:13 -07:00
Andrew Kushnir fc3cde6cff test(core): add benchmark for defer runtime logic (#52222)
This commit adds a benchmark for `@defer` runtime logic and uses `@if` as a baseline.

PR Close #52222
2023-10-18 12:06:45 -07:00
Kristiyan Kostadinov 1a8a5cf68f refactor(core): avoid duplicate work when checking if hydration is disabled (#52253)
Minor refactor to avoid lowercasing the `ngSkipHydration` attribute on each call. Since it's static, we can do it once ahead of time.

PR Close #52253
2023-10-18 12:06:03 -07:00
cexbrayat 866d0f422d refactor(core): remove test.ts files in integration tests (#52109)
These files are not necessary since CLI v15+

PR Close #52109
2023-10-18 11:52:55 -07:00
Quentin b00dd23846 docs: fix typo (#52233)
Fix word: standalone

PR Close #52233
2023-10-18 11:51:49 -07:00
Jeevan Mahesha 6fbe371b2c docs: updated the export default router to satisfies instead of typecast (#52269)
PR Close #52269
2023-10-18 11:51:20 -07:00
Pawel Kozlowski edd060efbf release: cut the v17.0.0-rc.0 release 2023-10-18 18:59:22 +02:00
Andrew Kushnir 1091239d2d refactor(core): remove developer preview note from hydration stats note (#52197)
This commit updates the message that we output in the console (once hydration is completed) to drop the reference to the developer preview.

PR Close #52197
2023-10-18 18:21:49 +02:00
Andrew Kushnir dc6ca34d4c docs: remove developer preview note from hydration feature in docs (#52197)
PR Close #52197
2023-10-18 18:21:49 +02:00
Andrew Kushnir 33bd523be3 docs: promote provideClientHydration and related symbols to stable (#52197)
This commit removes the `@developerPreview` annotation from the `provideClientHydration` function and related symbols, promoting them to stable.

PR Close #52197
2023-10-18 18:21:49 +02:00
Andrew Kushnir 08553046bf docs: promote renderApplication to stable (#52197)
This commit removes the `@developerPreview` annotation from the `renderApplication`, promoting it to stable.

PR Close #52197
2023-10-18 18:21:49 +02:00
Andrew Kushnir 603f30cab0 docs: promote withFetch and FetchBackend to stable (#52197)
This commit removes the `@developerPreview` annotation from the `withFetch` and `FetchBackend` APIs, promoting them to stable.

PR Close #52197
2023-10-18 18:21:49 +02:00
vivekkoya eccbf36dbd docs: Update BAZEL.md with correct bazelrc documentation link (#52090)
PR Close #52090
2023-10-18 18:15:04 +02:00
Quentin 419855629d docs: fix typo (#52258)
Fix typo in aio/content/errors/NG05104.md file

PR Close #52258
2023-10-18 18:13:44 +02:00
Angular Robot 37768da011 build: update all non-major dependencies (#51897)
See associated pull request for more information.

PR Close #51897
2023-10-18 17:49:46 +02:00
Angular Robot 1e941f6f84 build: update scorecard action dependencies (#52126)
See associated pull request for more information.

PR Close #52126
2023-10-18 17:45:31 +02:00
Angular Robot 920f072824 build: update io_bazel_rules_sass digest to 425ecaf (#52173)
See associated pull request for more information.

PR Close #52173
2023-10-18 17:37:09 +02:00
Pawel Kozlowski 37d627dbd4 perf(core): minimze trackBy calculations (#52227)
Re-organize code to minimize number of calls to the
trackBy function.

PR Close #52227
2023-10-18 14:04:24 +02:00
Pawel Kozlowski 1032c1e1a5 perf(core): cache LiveCollectionLContainerImpl (#52227)
This change avoid re-creation of the LiveCollectionLContainerImpl instance
every time the repeater runs (on every change detection).

PR Close #52227
2023-10-18 14:04:24 +02:00
Pawel Kozlowski 8e4a7ab52b perf(core): avoid repeated access to LContainer and trackBy calculation (#52227)
Assuming that the trackBy function is a pure derivation from the collection
object and its index, we can skip trackBy calculation if items in the live
and new colelction have the same identity and index. Additionally this change
minimizes access to the LContainer array.

PR Close #52227
2023-10-18 14:04:24 +02:00
Pawel Kozlowski 3fec271fa3 refactor(core): move key calculation in list reconciler (#52227)
We can speedup items comparision by having access to raw values
and delay key calculation in certain conditions.

PR Close #52227
2023-10-18 14:04:24 +02:00
Pawel Kozlowski f9ef762bc7 refactor(core): remove the at method from the LiveCollection type (#52227)
The at operation is private and doesn't have to be part of the public interface.

PR Close #52227
2023-10-18 14:04:24 +02:00
Miles Malerba e87ac245e0 docs(compiler): Clarify the purpose of i18n param resolution time (#52250)
Adds some additional doc comments clarifying when the `Creation`
resolution time is used vs the `Postprocessing` resolution time.

PR Close #52250
2023-10-18 14:00:04 +02:00
Miles Malerba 39a6f62551 refactor(compiler): Wrap bare ICUs in an i18n block (#52250)
ICUs can be used outside of an i18n block. In this case the ICU should
be automatically wrapped in a new i18n block. This commit adds a new
phase to handle wrapping these bare ICUs.

PR Close #52250
2023-10-18 14:00:04 +02:00
Miles Malerba 96267922fe refactor(compiler): Resolve ICU params during i18n post-processing (#52250)
ICU params in i18n messages are now resolved in the post-processing call
rather than in the initial message creation. This matches the output
generated by TemplateDefinitionBuilder.

PR Close #52250
2023-10-18 14:00:04 +02:00
Miles Malerba ba37440cbf refactor(compiler): Add support for ingesting ICUs (#52250)
ICUs are now ingested by adding ops to both the creation and update IR.
Both of these ops are ultimately removed before reification, but they
are needed to coordinate and link data between the creation and update
ops. This is done in a new ICU extraction phase that removes both ICU
ops and adds an i18nExpr op to the update IR.

PR Close #52250
2023-10-18 14:00:04 +02:00
Alan Agius 5d3f66d1a6 Revert "perf(platform-browser): disable styles of removed components instead of removing (#51808)" (#52238)
This reverts commit 65786b2b96 due to an oberved perf regression in Pantheon.

See: http://b/303667704

PR Close #52238
2023-10-18 11:34:21 +02:00
Quentin 36993f3459 docs: fix typo (#52247)
Fix word: corresponding

PR Close #52247
2023-10-18 11:29:41 +02:00
Angular Robot d811d82a12 build: update babel dependencies to v7.23.2 (#52236)
See associated pull request for more information.

PR Close #52236
2023-10-17 18:11:09 +02:00
Quentin c6e4cf12f0 docs: fix typo (#52232)
Fix word: privileges

PR Close #52232
2023-10-17 18:10:05 +02:00
Jeremy Elbourn a318e6ac7c refactor(compiler): extract generic info for api reference (#52204)
This commit extracts the API reference info for generic parameters for
classes, methods, interfaces, and functions. It includes any constraints
and the default type if present.

PR Close #52204
2023-10-17 12:29:24 +02:00
Alan Agius c9cde3ab10 perf(platform-browser): only append style element on creation (#52237)
Prior to this change the style element was appended to host element multiple times. Whilst the actual element was not added multiple to the DOM multiple times. This causes a performance regression and it caused repainting.

This can be observed in the below benchmark.

```js
(() => {
  const time = (name, fn) => {
    const t = performance.now();
    fn();
    console.log(name, performance.now() - t);
  }

  const s = document.createElement("style");
  s.textContent = "@layer x{} @font-face { font-family: foo; }";

  time("append and enable", () => {
    document.head.append(s);
    s.disabled = false;
  });
  time("compute body color", () => {
    getComputedStyle(document.body).color;
  });
  time("compute body layout", () => {
    document.body.offsetTop;
  });
  time("append and disable", () => {
    document.head.append(s);
    s.disabled = false;
  });
  time("compute body color", () => {
    getComputedStyle(document.body).color;
  });
  time("compute body layout", () => {
    document.body.offsetTop;
  });
})();
```

Output
```
append and enable 0.20000000298023224
compute body color 0.7999999970197678
compute body layout 2.899999998509884
append and disable 0.10000000149011612
compute body color 0.7000000029802322
compute body layout 2.2999999970197678
```

When commenting the 2nd `document.head.append(s);`, the results are slightly different and we can see that calling `getComputedStyle` does not incur any performance impact this is a result of no repainting.

```
append and enable 0.10000000149011612
compute body color 0.7999999970197678
compute body layout 3.1999999955296516
append and disable 0.10000000149011612
compute body color 0
compute body layout 0
```

Pantheon benchmarks: http://docs/spreadsheets/d/1iLRLGCmVYZHuVRdI7dO_WM7wnQ1DvkS-tJzi-0-u1KY?resourcekey=0-kwtrf0nbAhcPqAGdqbdz4g#gid=0

PR Close #52237
2023-10-17 11:18:02 +02:00
Miles Malerba 35fd10a9fd test(compiler): Update golden partial file (#52202)
Updates the golden partial file to account for the newly added test

PR Close #52202
2023-10-17 10:13:23 +02:00
Miles Malerba e760fd7865 refactor(compiler): Fix handling of structural directive on i18n element (#52202)
Placing a structural directive on an element with an `i18n` attribute
was generating too many i18n blocks. This was due to both the element
and the template generating their own i18n block. To fix the issue, we
no longer generate top-level i18n blocks for structural directive
templates.

PR Close #52202
2023-10-17 10:13:23 +02:00
Miles Malerba 4e135947e6 refactor(compiler): Fix handling of sturctural directive on ng-template (#52202)
Structural directives on an ng-template (e.g. <ng-template *ngIf>) were
being assigned the wrong tag name ('ng-template' instead of null).

PR Close #52202
2023-10-17 10:13:23 +02:00
Miles Malerba 6fe4f44b1d refactor(compiler): Fix i18n placeholders for slef-closing elements (#52195)
Fixes handling of placeholders for self-closing tags. Self-closing tags
set a combined value for the start tag placeholder, rather than separate
values for the start and close placeholders.

This commit also enables a number of now passing tests. For some of
these tests I had create a separate golden file due to the different
ordering of the const array. In the template pipeline, i18n and
attribute const collection happen in different pahses and we therefore
get a different order than TemplateDefinitionBuilder, which collected
everything in one pass. The order should not affect the overall behavior.

PR Close #52195
2023-10-16 19:25:05 +02:00
Miles Malerba 920820a1a8 refactor(compiler): Add support for i18n post-processing (#52195)
Runs post-processing on any i18n messages that have multiple values
assigned to a single placeholder.

PR Close #52195
2023-10-16 19:25:05 +02:00
Miles Malerba 6735f5f634 refactor(compiler): Fix propagation of child i18n params (#52195)
The way we were propagating params up to parent i18n ops didn't account
for the fact that a parent and child could both have a value for the
same placeholder. In order to properly merge the value for these cases,
we need to propagate the params up *before* serialization. Therefore I
removed the standalone param propagation phase and folded the logic into
the placeholder resolution phase.

PR Close #52195
2023-10-16 19:25:05 +02:00
Miles Malerba 2d197f0c65 refactor(compiler): Remove unnecessary checks for empty container types (#52195)
I added these in an earlier PR when we were considering moving the empty
elements phase earlier. Since we decided not to do that, this commit
cleans up unnecessary references to the empty versions of the element to
simplify the code and types.

PR Close #52195
2023-10-16 19:25:05 +02:00
cexbrayat e5720edb46 fix(core): handle if alias in control flow migration (#52181)
This adds the support of `if ` conditions with `as` clause when migrating to the control flow syntax.
It now adds the required semicolon before the `as` when migrating the template.

Before: `@if (user$ | async as user) {`
After: `@if (user$ | async; as user) {`

PR Close #52181
2023-10-16 18:35:19 +02:00
Quentin eaf735da58 docs: fix typo (#52218)
Fix word: adjustments

PR Close #52218
2023-10-16 18:33:22 +02:00
Quentin bd1e78d746 docs: fix typo (#52219)
Fix word: incompatibilities

PR Close #52219
2023-10-16 18:30:46 +02:00
Kristiyan Kostadinov 81a287a79a fix(compiler): avoid error in template parser for tag names that can occur in object prototype (#52225)
Fixes that the compiler was throwing an error if an element tag name is the same as a built-in prototype property (e.g. `constructor` or `toString`). The problem was that we were storing the tag names in an object literal with the `Object` prototype. These changes resolve the issue by creating an object without a prototype.

Fixes #52224.

PR Close #52225
2023-10-16 18:22:15 +02:00
Andrew Miller 2fa5e702de docs(language-service): add neovim setup to angular language service docs (#52212)
PR Close #52212
2023-10-16 18:19:12 +02:00
Matthieu Riegler 65c2f02ccb refactor(core): remove hack on render3 (#51238)
Once useful, the hack to prevent circular dependency serves no purpose
We can safely remove it.

PR Close #51238
2023-10-16 17:43:36 +02:00
Osama Heykal a6be2e221f docs: add missing next steps section (#52220)
Added missing 'next steps' section in the tutorial.

PR Close #52220
2023-10-16 16:27:15 +02:00
Gerald Monaco 6ae68f39b9 refactor(core): run internal work outside of public afterRender phases (#52145)
Public afterRender phases have specific API guarantees which can be invalidated if the internal framework is implemented using them. Instead, the framework should use dedicated internal functions.

PR Close #52145
2023-10-16 12:24:00 +02:00
Andrew Kushnir 450f360bd7 refactor(core): simplify hydration annotation key (#52207)
This commit drops the `ɵ` symbol from hydration annotation key: `__ɵnghData__` -> `__nghData__`. This helps ensure that there are no UTF8 symbols that might be damaged in case a web server is misconfigured.

Noticed while working on https://github.com/angular/angular/pull/52206.

PR Close #52207
2023-10-16 11:25:57 +02:00
Kristiyan Kostadinov c1dc86d186 refactor(core): tree shake depepdency interceptor token (#52199)
We have the `DEFER_BLOCK_DEPENDENCY_INTERCEPTOR` DI token that we use in tests to intercept the dependency loading function from deferred blocks, however we were referencing it in a way that caused it to be retained in production bundles as well.

These changes guard the call site with `ngDevMode` since the token is only used for testing.

PR Close #52199
2023-10-16 11:17:24 +02:00
Kristiyan Kostadinov a58301f980 refactor(core): minor fixes for the block entities migration (#52209)
Contains the following minor improvements to the block entities migration:
* The migration won't be stopped anymore if it can't read a template file.
* The migration will exit early if a template doesn't contain the two characters we need to migrate.
* Reduced the amount of code that is wrapped by a try/catch to avoid suppressing errors.

PR Close #52209
2023-10-16 11:15:31 +02:00
thomas b2ba678e73 docs: add thomas laforge to GDE resources and add angularchallenges to resources (#52075)
PR Close #52075
2023-10-16 11:13:01 +02:00
Paul Gschwendtner 2d98726ec9 refactor(core): remove unused helper for setting LView for reactive consumer (#52192)
This code path is never hit because the assignment of the lview happens
in `commitLViewConsumerIfHasProducers`.

PR Close #52192
2023-10-13 14:08:35 +02:00
Thomas Wilkinson 030a68b3df refactor(router): Introduce StateManager interface (#52171)
Move existing logic into `HistoryStateManager`

PR Close #52171
2023-10-13 13:48:17 +02:00
Matthieu Riegler 6fd863d6e1 refactor(core): cleanup DebugElement (#50896)
* `style` is never `null`.
* adding some typing
* Add 2 todos per #49777

PR Close #50896
2023-10-13 12:24:17 +02:00
Matthieu Riegler ba9fc2419e refactor(core): deprecate the NgProbeToken (#51396)
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.

PR Close #51396
2023-10-13 12:19:05 +02:00
Ward Bell e90f5e5f22 docs: Phase 2 Sample Code Conversions to Standalone (#51918)
Phase 2 sample code conversions per instructions in doc: https://docs.google.com/document/d/1QqnVK8Mc0O1gU9ctPrs-JJ42V9_dHCuEttD_01pXh34/edit

**Included**

1. ajs-quick-reference

Minor changes to remove references to NgModule. Converted sample to standalone.

2. architecture

Migrated the code sample. Made minor changes to remove references to NgModule. I explicitly deprecated the `architecture-module.md` page and removed it from the navigation.

4. deprecations / deprecations-guide

Migrated the code sample which required pulling NgModule and Reactive Forms material into a new `deprecated` folder. Made minor changes to clarify when advice was specific to NgModule (see `loadChildren` in particular).

5. displaying-data

Deleted this `displaying-data` sample entirely as there is no need for a sample app just to display a single, vanilla data binding in the deprecated `zone.md` page. Replaced reference in `zone.md` with an inline code snippet.

10. ngcontainer

Converted the code sample. There is no guide page for this sample. It can be displayed in Stackblitz

**Excluded**

3. cli-builder

Code sample is not an app; nothing to convert.

6-9 - related to getting-started and setup.

Waiting until Angular team is ready to proceed.

11. providers

This is in its own commit and PR 51918 because it may not make sense to convert. See that PR for details.

12. routing-with-urlmatcher

No work needed. Already Standalone.

13 schematics-for-libraries

Non-trivial (see doc notes) and Angular may decide to leave as is. Should have own PR.

14 setup

Non-trivial (see doc notes) and Angular may decide to leave as is. Should have own PR.

PR Close #51918
2023-10-13 11:20:09 +02:00
Kristiyan Kostadinov 8e5d54a3d5 refactor(core): clean up viewport trigger event tracking (#52156)
When the `viewport` triggers were first introduced, we ended up having to use a service to keep track of them, because using the same global event handling as the other events led to some inconsistent test failures. It looks like the failures were caused by the same bug fixed #52115 so now we can switch back to the previous approach which is a bit more compact.

PR Close #52156
2023-10-13 11:16:26 +02:00
Miroslav Foltýn 54f7578d55 docs(router): add clarification for behavior of paramsInheritanceStrategy: 'emptyOnly' (#52170)
Follows up to the https://github.com/angular/angular/issues/52108 which was opened due to the confusion surrounding paramsInheritanceStrategy: 'emptyOnly'.

PR Close #52170
2023-10-13 11:14:23 +02:00
Andrew Kushnir a6fcf75423 test(core): verify directive order inside and outside of @defer blocks (#52194)
This test verifies that the order does not change when a particular part of code is wrapped by the `@defer` block.

PR Close #52194
2023-10-13 11:10:20 +02:00
cexbrayat 99e7629159 fix(core): do not remove used ng-template nodes in control flow migration (#52186)
This fixes an issue where `ng-template` nodes were removed even when used in other places than control flow directives.

Template to migrate:
```html
<ng-template #blockUsedElsewhere><div>Block</div></ng-template>
<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>
```

Before:
```html
<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>
```

After:
```html
<ng-template #blockUsedElsewhere><div>Block</div></ng-template>
<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>
```

PR Close #52186
2023-10-12 19:28:23 +02:00
Jessica Janiuk 6f19117a6a refactor(core): Add better error handling to control flow migration (#52189)
This adds some clear error handling and messaging for when errors occur during the control flow migration.

PR Close #52189
2023-10-12 19:27:00 +02:00
cexbrayat ffe9b1fcc2 fix(core): handle for alias with as in control flow migration (#52183)
This adds the support of `let index as myIndex` in `*ngFor` for the control flow migration.

Before: `@for (itm of items; track itm)`
After: `@for (itm of items; track itm; let myIndex = $index)`

PR Close #52183
2023-10-12 19:15:20 +02:00
Matthieu Riegler 0792424df2 refactor(animations): make AnimationBuilder tree-shakable (#52097)
This commit allows also to use the `AnimationBuilder` when using `provideAnimationsAsync()`

fixes #52096

PR Close #52097
2023-10-12 18:13:22 +02:00
Nicolas Frizzarin 5c70148d20 docs: add Nicolas Frizzarin to GDE resources (#52003)
This PR add Nicolas Frizzarin to the GDE resources

docs: fix typo on description

PR Close #52003
2023-10-12 17:44:49 +02:00
cexbrayat 65b460448e fix(common): missing space in ngSwitch equality warning (#52180)
This adds a missing space between the sentences of the `===` vs `==` ngSwitch warning.

PR Close #52180
2023-10-12 15:44:47 +02:00
Andrew Kushnir 4cd1b3d38b refactor(core): better organization of @defer runtime code (#52152)
This commit splits the `render3/instructions/defer.ts` file (that contained most of the runtime code) into smalle
r files that are easier to maintain.

There are no functional changes in this PR, just organizing code.

PR Close #52152
2023-10-12 12:43:54 +02:00
Angular Robot 4e9d6878a5 build: update cross-repo angular dependencies (#52159)
See associated pull request for more information.

PR Close #52159
2023-10-12 12:42:24 +02:00
Pawel Kozlowski 2bf088e7bb Revert "refactor(compiler-cli): remove MethodIdentifier type (#49611)" (#52174)
This reverts commit c2b1a242e8.

PR Close #52174
2023-10-12 12:35:50 +02:00
Matthieu Riegler 2e5ee1c198 refactor(compiler-cli): remove MethodIdentifier type (#49611)
`MethodIdentifier` is unused as is `IdentifierKind.Method`. They both can be removed.

PR Close #49611
2023-10-11 12:34:51 -07:00
Angular Robot 371e26f6b3 docs: update Angular CLI help [main] (#52168)
Updated Angular CLI help contents.

PR Close #52168
2023-10-11 12:19:22 -07:00
Angular Robot d50d3b85bd docs: update events (#52053)
Generated `events.json` with the latest events retrieved from the Firebase DB.

PR Close #52053
2023-10-11 12:18:06 -07:00
Matthieu Riegler 073ebfe09e fix(compiler): apply style on :host attributes in prod builds. (#49118)
In prod builds, selectors are optimized and spaces a removed. #48558 introduced a regression on selectors without spaces. This commit fixes tihs.

Fixes #49100

PR Close #49118
2023-10-11 11:32:19 -07:00
Andrew Scott 926db6dd36 release: cut the v17.0.0-next.8 release 2023-10-11 10:12:33 -07:00
4554 changed files with 260471 additions and 63297 deletions
+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:16.13-browsers@sha256:6c7a82701665dda03e92d682360fa2e4358e07dab8d1b6a7e48f7d36e3d98117
FROM cimg/node:18.13.0@sha256:45d0ee279f522c4562a464df71108104cc9b2187205333ffd0707d4f05589731
LABEL name="Angular dev environment" \
+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@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: ./.github/actions/yarn-install
- uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
- uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
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@031962443584a0ac5cbd9d1c1b78b241453e4702
- uses: angular/dev-infra/github-actions/previews/pack-and-upload-artifact@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
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@8ade135a41bc03ea155e62e844d188df1ea18608 # v4
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
- 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@031962443584a0ac5cbd9d1c1b78b241453e4702
- uses: angular/dev-infra/github-actions/previews/upload-artifacts-to-firebase@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
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@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
with:
persist-credentials: false
- uses: angular/dev-infra/github-actions/branch-manager@031962443584a0ac5cbd9d1c1b78b241453e4702
- uses: angular/dev-infra/github-actions/branch-manager@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
+4 -4
View File
@@ -19,7 +19,7 @@ jobs:
exit: true
# Indicate that the benchmark command was received.
- uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3
- uses: peter-evans/create-or-update-comment@23ff15729ef2fc348714a3bb66d2f655ca9066f2 # v3
with:
comment-id: ${{github.event.comment.id}}
token: '${{secrets.BENCHMARK_POST_RESULTS_GITHUB_TOKEN}}'
@@ -28,7 +28,7 @@ jobs:
- uses: alessbell/pull-request-comment-branch@aad01d65d6982b8eacabed5e9a684cd8ceb98da6 # v1.1
id: comment-branch
- uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
- 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}}
@@ -38,7 +38,7 @@ jobs:
- uses: ./.github/actions/yarn-install
- uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
- uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
bazelrc: ./.bazelrc.user
@@ -53,7 +53,7 @@ jobs:
id: benchmark
name: Running benchmark
- uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3
- uses: peter-evans/create-or-update-comment@23ff15729ef2fc348714a3bb66d2f655ca9066f2 # v3
with:
issue-number: ${{github.event.issue.number}}
token: '${{secrets.BENCHMARK_POST_RESULTS_GITHUB_TOKEN}}'
+2 -2
View File
@@ -23,7 +23,7 @@ jobs:
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
# Checking out the pull request commit is intended here as we need to run the changed code tests.
@@ -31,7 +31,7 @@ jobs:
- name: Install node modules
run: yarn install --frozen-lockfile
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/setup@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- 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
+41 -30
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@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
node-module-directories: |
@@ -60,13 +60,13 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/setup@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Install node modules
run: yarn install --frozen-lockfile
- name: Run unit tests
@@ -78,13 +78,13 @@ jobs:
runs-on: ubuntu-latest-4core
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/setup@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Setup Bazel Remote Caching
uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Install node modules
run: yarn install --frozen-lockfile --network-timeout 100000
- name: Run CI tests for framework
@@ -94,15 +94,15 @@ jobs:
runs-on: ubuntu-latest-4core
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
node-module-directories: |
./aio/node_modules
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/setup@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Install node modules for aio
run: yarn install --cwd aio --frozen-lockfile
- name: Run AIO tests with upstream packages
@@ -110,20 +110,35 @@ jobs:
- 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@e52eb8237f2ed71195f87ce8046467a176568e58
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@e52eb8237f2ed71195f87ce8046467a176568e58
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@e52eb8237f2ed71195f87ce8046467a176568e58
- 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
aio-local:
runs-on:
labels: ubuntu-latest-4core
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
node-module-directories: |
./aio/node_modules
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/setup@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Install node modules
run: yarn install --cwd aio --frozen-lockfile
- name: Run AIO tests with local packages
@@ -138,15 +153,15 @@ jobs:
labels: ubuntu-latest
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
node-module-directories: |
./aio/node_modules
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/setup@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Install node modules for aio
run: yarn install --cwd aio --frozen-lockfile
- name: Set the stable branch environment variable
@@ -182,13 +197,13 @@ jobs:
labels: ubuntu-latest
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/setup@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Install node modules
run: yarn install --frozen-lockfile
- run: echo "https://${{secrets.SNAPSHOT_BUILDS_GITHUB_TOKEN}}:@github.com" > ${HOME}/.git_credentials
@@ -200,7 +215,7 @@ jobs:
labels: ubuntu-latest-4core
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
node-module-directories: |
@@ -208,9 +223,9 @@ jobs:
./packages/zone.js/node_modules
./packages/zone.js/test/typings/node_modules
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/setup@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Install node modules
run: yarn install --frozen-lockfile
- run: |
@@ -218,7 +233,6 @@ jobs:
//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/
@@ -229,29 +243,26 @@ jobs:
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
# 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
- 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-4-cores
runs-on: ubuntu-latest-4core
env:
JOBS: 2
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
# Checking out the pull request commit is intended here as we need to run the changed code tests.
@@ -259,9 +270,9 @@ jobs:
- name: Install node modules
run: yarn install --frozen-lockfile
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/setup@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Setup Bazel Remote Caching
uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Set up Sauce Tunnel Daemon
run: yarn bazel run //tools/saucelabs-daemon/background-service -- $JOBS &
env:
+4 -4
View File
@@ -12,14 +12,14 @@ jobs:
labels:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
- uses: angular/dev-infra/github-actions/commit-message-based-labels@031962443584a0ac5cbd9d1c1b78b241453e4702
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: angular/dev-infra/github-actions/commit-message-based-labels@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
post_approval_changes:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
- uses: angular/dev-infra/github-actions/post-approval-changes@031962443584a0ac5cbd9d1c1b78b241453e4702
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: angular/dev-infra/github-actions/post-approval-changes@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
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@031962443584a0ac5cbd9d1c1b78b241453e4702
- uses: angular/dev-infra/github-actions/feature-request@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
+2 -2
View File
@@ -13,8 +13,8 @@ jobs:
statuses: write
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
- uses: angular/dev-infra/github-actions/google-internal-tests@031962443584a0ac5cbd9d1c1b78b241453e4702
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: angular/dev-infra/github-actions/google-internal-tests@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
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@031962443584a0ac5cbd9d1c1b78b241453e4702
- uses: angular/dev-infra/github-actions/unified-status-check@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
+4 -4
View File
@@ -22,15 +22,15 @@ jobs:
version: ['https://next.angular.io/', 'https://angular.io/']
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
node-module-directories: |
./aio/node_modules
- name: Setup Bazel
uses: angular/dev-infra/github-actions/bazel/setup@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/setup@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Setup Bazel RBE
uses: angular/dev-infra/github-actions/bazel/configure-remote@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/bazel/configure-remote@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
- name: Install node modules in aio
run: yarn install --frozen-lockfile --cwd aio
- name: Run basic e2e and deployment config tests.
@@ -44,7 +44,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Initialize environment
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
cache-node-modules: true
node-module-directories: |
+4 -4
View File
@@ -25,12 +25,12 @@ jobs:
steps:
- name: 'Checkout code'
uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
with:
persist-credentials: false
- name: 'Run analysis'
uses: ossf/scorecard-action@08b4669551908b1024bb425080c797723083c031 # v2.2.0
uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
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@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
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@ddccb873888234080b77e9bc2d4764d5ccaaccf9 # v2.21.9
uses: github/codeql-action/upload-sarif@b374143c1149a9115d881581d29b8390bbcbb59c # v3.22.11
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@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
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@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/create-pr-for-changes@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
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@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
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@031962443584a0ac5cbd9d1c1b78b241453e4702
uses: angular/dev-infra/github-actions/create-pr-for-changes@1173ab9b7174e4ec6ff3a3455226ca75594edaa0
with:
branch-prefix: docs-update-events
pr-title: 'docs: update events'
+4
View File
@@ -57,3 +57,7 @@ baseline.json
# Husky
.husky/_
aio/content/examples/.DS_Store
# Ignore cache created with the Angular CLI.
.angular/
+2
View File
@@ -29,6 +29,8 @@ 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/**',
],
},
'buildifier': true,
+25 -5
View File
@@ -182,6 +182,8 @@ groups:
- crisbeto
- devversion
- dylhunn
- jessicajaniuk
- AndrewKushnir
# =========================================================
# Framework: Core
@@ -339,7 +341,9 @@ groups:
'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/**/{*,.*}',
])
reviewers:
@@ -517,10 +521,8 @@ groups:
contains_any_globs(files, [
'packages/platform-server/**/{*,.*}',
'aio/content/guide/prerendering.md',
'aio/content/guide/universal.md',
'aio/content/examples/universal/**/{*,.*}',
'aio/content/guide/universal-ngmodule.md',
'aio/content/examples/universal-ngmodule/**/{*,.*}'
'aio/content/guide/ssr.md',
'aio/content/examples/ssr/**/{*,.*}',
])
reviewers:
users:
@@ -938,6 +940,7 @@ groups:
- alxhub
- AndrewKushnir
- atscott
- jessicajaniuk
- jelbourn
# =========================================================
@@ -1054,6 +1057,22 @@ groups:
- dylhunn
- mgechev
# =========================================================
# Docs: Angular Dev Site
# =========================================================
angular-dev:
<<: *defaults
conditions:
- >
contains_any_globs(files, [
'adev/**/{.*,*}'
])
reviewers:
users:
- twerske
- josephperrott
- jelbourn
# =========================================================
# Docs-infra
# =========================================================
@@ -1165,10 +1184,11 @@ groups:
'tools/esm-interop/**/{*,.*}',
'tools/gulp-tasks/**/{*,.*}',
'tools/legacy-saucelabs/**/{*,.*}',
'tools/manual_api_docs/**/{*,.*}',
'tools/npm-patches/**/{*,.*}',
'tools/rxjs/**/{*,.*}',
'tools/saucelabs/**/{*,.*}',
'tools/saucelabs-daemon/**/{*,.*}',
'tools/saucelabs/**/{*,.*}',
'tools/symbol-extractor/**/{*,.*}',
'tools/testing/**/{*,.*}',
'tools/tslint/**/{*,.*}',
+1
View File
@@ -13,6 +13,7 @@ exports_files([
"scripts/ci/payload-size.sh",
"scripts/ci/payload-size.js",
"package.json",
"angular.json",
])
filegroup(
+572 -270
View File
@@ -1,16 +1,400 @@
<a name="16.2.9"></a>
# 16.2.9 (2023-10-11)
### forms
<a name="17.0.9"></a>
# 17.0.9 (2024-01-10)
### common
| 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)) |
| [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.0-next.7"></a>
# 17.0.0-next.7 (2023-10-04)
## Deprecations
<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 |
| -- | -- | -- |
| [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
@@ -19,41 +403,219 @@
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 |
| -- | -- | -- |
| [08482f2c7d](https://github.com/angular/angular/commit/08482f2c7dcbcd100981dfb266a6e63f64432328) | fix | Retain correct language service when `ts.Project` reloads ([#51912](https://github.com/angular/angular/pull/51912)) |
### service-worker
| [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 |
| -- | -- | -- |
| [cc7973f5a5](https://github.com/angular/angular/commit/cc7973f5a5cddbc5288db7d572757819327a40c3) | fix | throw a critical error when handleFetch fails ([#51960](https://github.com/angular/angular/pull/51960)) |
| [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.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 -->
@@ -79,61 +641,6 @@
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.0-next.6"></a>
# 17.0.0-next.6 (2023-09-27)
## Breaking Changes
### 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.
- The `setupTestingRouter` function has been removed. Use
`RouterModule.forRoot` or `provideRouter` to setup the `Router` for
tests instead.
## Deprecations
### animations
- The `AnimationDriver.NOOP` symbol is deprecated, use `NoopAnimationDriver` instead.
### animations
| Commit | Type | Description |
| -- | -- | -- |
| [0598613950](https://github.com/angular/angular/commit/0598613950c76f4a13601c6942e30ab4ce1e3b67) | refactor | deprecation of `AnimationDriver.NOOP` ([#51843](https://github.com/angular/angular/pull/51843)) |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [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)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [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)) |
| [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 |
| -- | -- | -- |
| [c7127b98b5](https://github.com/angular/angular/commit/c7127b98b555449f99e24a81c828ab7b1c6c4a4e) | feat | add schematic to escape block syntax characters ([#51905](https://github.com/angular/angular/pull/51905)) |
| [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)) |
| [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)) |
| [dcf18dc74c](https://github.com/angular/angular/commit/dcf18dc74c260253bbf394626beb712a831824f3) | fix | allow toSignal calls in reactive context ([#51831](https://github.com/angular/angular/pull/51831)) |
### platform-browser
| Commit | Type | Description |
| -- | -- | -- |
| [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)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [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)) |
| [3c6258c85b](https://github.com/angular/angular/commit/3c6258c85b37535c1178e84509b7c9ed3a1359e4) | fix | Remove deprecated setupTestingRouter function ([#51826](https://github.com/angular/angular/pull/51826)) |
### service-worker
| Commit | Type | Description |
| -- | -- | -- |
| [dcaad169ec](https://github.com/angular/angular/commit/dcaad169ec8bf0a61d032ae1ae68fb90d1face09) | fix | throw a critical error when `handleFetch` fails ([#51885](https://github.com/angular/angular/pull/51885)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.7"></a>
# 16.2.7 (2023-09-27)
### core
@@ -147,76 +654,6 @@
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.0-next.5"></a>
# 17.0.0-next.5 (2023-09-20)
## 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
-
### core
- Angular now required `zone.js` version `~0.14.0`
- Versions of TypeScript older than 5.2 are no longer supported.
### router
- `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';
```
###
| 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)) |
### 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)) |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [7f6d9a73ab](https://github.com/angular/angular/commit/7f6d9a73ab8b658d0d8148080dfefb2550bee6b4) | feat | expand class api doc extraction ([#51733](https://github.com/angular/angular/pull/51733)) |
| [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)) |
### 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)) |
| [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)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [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)) |
| [e23aaa7d75](https://github.com/angular/angular/commit/e23aaa7d75efdd52be4dd7ca9267bc60d36059c2) | feat | drop support for older TypeScript versions ([#51792](https://github.com/angular/angular/pull/51792)) |
| [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)) |
### language-service
| Commit | Type | Description |
| -- | -- | -- |
| [e2416a284f](https://github.com/angular/angular/commit/e2416a284ff086752c809689ef74588f02e5f0e4) | feat | Enable go to definition of styleUrl ([#51746](https://github.com/angular/angular/pull/51746)) |
### 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)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [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.6"></a>
# 16.2.6 (2023-09-20)
### core
@@ -226,124 +663,16 @@
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.0-next.4"></a>
# 17.0.0-next.4 (2023-09-13)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [59387ee476](https://github.com/angular/angular/commit/59387ee476dff1a893a01fe5cbee3c95b93c0cdb) | feat | support styles and styleUrl as strings ([#51715](https://github.com/angular/angular/pull/51715)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [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)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.5"></a>
# 16.2.5 (2023-09-13)
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.0-next.3"></a>
# 17.0.0-next.3 (2023-09-06)
## Breaking Changes
### core
- `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`.
### router
- `urlHandlingStrategy` has been removed from the Router public API.
This should instead be configured through the provideRouter or RouterModule.forRoot APIs.
### core
| Commit | Type | Description |
| -- | -- | -- |
| [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)) |
| [88a0af64fd](https://github.com/angular/angular/commit/88a0af64fde58cbf71e8e2a22c39fabb8f0ee8fb) | perf | generate arrow functions for pure function calls ([#51668](https://github.com/angular/angular/pull/51668)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [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)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.4"></a>
# 16.2.4 (2023-09-06)
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.0-next.2"></a>
# 17.0.0-next.2 (2023-08-30)
## Breaking Changes
### 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,
}]
```
### router
- 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.
### animations
| Commit | Type | Description |
| -- | -- | -- |
| [698c058e1c](https://github.com/angular/angular/commit/698c058e1c975c573722407f4843a4a774ceb92a) | fix | remove code duplication between entry-points ([#51500](https://github.com/angular/angular/pull/51500)) |
| [18be804c03](https://github.com/angular/angular/commit/18be804c038e8d81a60c9a72521cfa640c8a1d5a) | fix | remove unnecessary escaping in regex expressions ([#51554](https://github.com/angular/angular/pull/51554)) |
### common
| Commit | Type | Description |
| -- | -- | -- |
| [86c5e34601](https://github.com/angular/angular/commit/86c5e34601d7901a11688124aa902646524177eb) | fix | remove code duplication between entry-points ([#51500](https://github.com/angular/angular/pull/51500)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [de2550d988](https://github.com/angular/angular/commit/de2550d9886394e1ecde586d72bf2bab5b65cb39) | fix | correct incomplete escaping ([#51557](https://github.com/angular/angular/pull/51557)) |
| [3bca9db4a5](https://github.com/angular/angular/commit/3bca9db4a56d61ac22b4ce87591d8862606177c8) | fix | remove unnecessary escaping in regex expressions ([#51554](https://github.com/angular/angular/pull/51554)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [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)) |
| [45d2ded0ea](https://github.com/angular/angular/commit/45d2ded0ea9ef414948256099f8dc9c4598fdc2b) | fix | correct incomplete escaping ([#51557](https://github.com/angular/angular/pull/51557)) |
| [006577f39c](https://github.com/angular/angular/commit/006577f39c0e46e37491e44687142521fe7fab54) | fix | handle hydration of view containers that use component hosts as anchors ([#51456](https://github.com/angular/angular/pull/51456)) |
| [1423bfbf8f](https://github.com/angular/angular/commit/1423bfbf8ffa3b43d0dea41054c8f950e669a697) | fix | remove unnecessary escaping in regex expressions ([#51554](https://github.com/angular/angular/pull/51554)) |
| [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)) |
| [685d01e106](https://github.com/angular/angular/commit/685d01e1065dad6dc52eaac9eb9527100994f5ce) | perf | chain template instructions ([#51546](https://github.com/angular/angular/pull/51546)) |
### language-service
| Commit | Type | Description |
| -- | -- | -- |
| [88b1575271](https://github.com/angular/angular/commit/88b157527172d70ed3e5aa11aa8b7963a8612e49) | fix | correct incomplete escaping ([#51557](https://github.com/angular/angular/pull/51557)) |
### 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)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [c62e680098](https://github.com/angular/angular/commit/c62e680098a8c26fb2234336613185f7ab273483) | fix | Remove deprecated Router properties ([#51502](https://github.com/angular/angular/pull/51502)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.3"></a>
# 16.2.3 (2023-08-30)
### animations
@@ -369,28 +698,6 @@
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.0-next.1"></a>
# 17.0.0-next.1 (2023-08-23)
### common
| Commit | Type | Description |
| -- | -- | -- |
| [d910bf8a84](https://github.com/angular/angular/commit/d910bf8a843c07a096969d5e47b49f60981b00e9) | fix | Allow safeUrl for ngSrc in NgOptimizedImage ([#51351](https://github.com/angular/angular/pull/51351)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [5bd9fbd2c3](https://github.com/angular/angular/commit/5bd9fbd2c3ab4467074fac5e4d689b3c85bf08cd) | 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 |
| -- | -- | -- |
| [9cc52b9b85](https://github.com/angular/angular/commit/9cc52b9b85ffa5cb65c6886e81b5bff10dde8d52) | feat | support TypeScript 5.2 ([#51334](https://github.com/angular/angular/pull/51334)) |
| [a9b3c006f8](https://github.com/angular/angular/commit/a9b3c006f8593e0187298df21418644070312a40) | fix | guard the jasmine hooks ([#51394](https://github.com/angular/angular/pull/51394)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [96d94ad130](https://github.com/angular/angular/commit/96d94ad13072032326446e8a20658c9f38fd1b8e) | fix | Ensure `canceledNavigationResolution: 'computed'` works on first page ([#51441](https://github.com/angular/angular/pull/51441)) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.2"></a>
# 16.2.2 (2023-08-23)
### common
@@ -412,11 +719,6 @@
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.0-next.0"></a>
# 17.0.0-next.0 (2023-08-16)
<!-- CHANGELOG SPLIT MARKER -->
<a name="16.2.1"></a>
# 16.2.1 (2023-08-16)
### router
+17 -17
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.png" alt="angular-logo" width="120px" height="120px"/>
<img src="aio/src/assets/images/logos/angular/angular_renaissance.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://www.angular.io"><strong>www.angular.io</strong></a>
<a href="https://angular.dev/"><strong>angular.dev</strong></a>
<br>
</p>
@@ -129,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.
- [Twitter][twitter]
- [X (formerly Twitter)][X (formerly Twitter)]
- [Discord][discord]
- [Gitter][gitter]
- [YouTube][youtube]
@@ -141,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.io/start
[quickstart]: https://angular.dev/tutorials/learn-angular
[changelog]: CHANGELOG.md
[ng]: https://angular.io
[documentation]: https://angular.io/docs
[ng]: https://angular.dev
[documentation]: https://angular.dev/overview
[angularmaterial]: https://material.angular.io/
[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
[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
[node.js]: https://nodejs.org/
[npm]: https://www.npmjs.com/get-npm
[codeofconduct]: CODE_OF_CONDUCT.md
[twitter]: https://www.twitter.com/angular
[X (formerly 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.io/guide/animations
[animations]: https://angular.dev/guide/animations
+4 -4
View File
@@ -80,7 +80,7 @@ yarn_install(
"//:.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-680aab4562e5bb684518ca496cb449a6c447601d.patch",
"//tools/esm-interop:patches/npm/@angular+build-tooling+0.0.0-e0ec7b60641d7f6369be45d8d02663fd50f320be.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",
@@ -196,10 +196,10 @@ cldr_xml_data_repository(
# sass rules
http_archive(
name = "io_bazel_rules_sass",
sha256 = "923b2c470e981b6e96b17e5b9ec7a6141eab808d52ebffdbd94695f5a42a5184",
strip_prefix = "rules_sass-9a327e5badc3fdd5141479410675c356133e1e41",
sha256 = "7a90567717c3417a23ff4b21963a698a6e9aa669ac9e682121ea33f218a2816a",
strip_prefix = "rules_sass-425ecafa8268bc013d684216363fe75bc802323e",
urls = [
"https://github.com/bazelbuild/rules_sass/archive/9a327e5badc3fdd5141479410675c356133e1e41.zip",
"https://github.com/bazelbuild/rules_sass/archive/425ecafa8268bc013d684216363fe75bc802323e.zip",
],
)
+102
View File
@@ -0,0 +1,102 @@
load("//:packages.bzl", "link_packages")
load("@build_bazel_rules_nodejs//:index.bzl", "copy_to_bin")
load("@npm//@angular-devkit/architect-cli:index.bzl", "architect")
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/**/*",
],
)
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",
])
copy_to_bin(
name = "application_files_bin",
srcs = APPLICATION_FILES,
)
architect(
name = "build",
args = [
"angular-dev:build",
"--output-path=build-app",
],
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",
],
)
+105
View File
@@ -0,0 +1,105 @@
{
"$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",
// TODO(josephperrott): enabled prerender
"prerender": false,
"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"],
"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"
}
}
+135
View File
@@ -0,0 +1,135 @@
/*!
* @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);
}
}
@@ -0,0 +1,158 @@
/*!
* @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);
}
@@ -0,0 +1,23 @@
/*!
* @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}
};
@@ -0,0 +1,221 @@
/*!
* @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
@@ -0,0 +1,8 @@
{
"extends": "../../tsconfig.json",
"ts-node": {
"compilerOptions": {
"module": "es2020"
}
}
}
@@ -0,0 +1,55 @@
/*!
* @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
@@ -0,0 +1,77 @@
/*!
* @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
@@ -0,0 +1,30 @@
@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
@@ -0,0 +1,86 @@
@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
@@ -0,0 +1,37 @@
/*!
* @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
@@ -0,0 +1,125 @@
/*!
* @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
@@ -0,0 +1,24 @@
/*!
* @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
@@ -0,0 +1,97 @@
/*!
* @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,
],
};
@@ -0,0 +1,10 @@
/*!
* @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
@@ -0,0 +1,12 @@
/*!
* @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
@@ -0,0 +1,12 @@
/*!
* @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
@@ -0,0 +1,28 @@
/*!
* @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',
}
@@ -0,0 +1,125 @@
<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>
@@ -0,0 +1,59 @@
.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;
}
}
@@ -0,0 +1,42 @@
/*!
* @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();
});
});
@@ -0,0 +1,28 @@
/*!
* @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;
}
@@ -0,0 +1,98 @@
@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;
}
}
@@ -0,0 +1,124 @@
@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);
}
}
}
@@ -0,0 +1,450 @@
<!-- 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>
@@ -0,0 +1,283 @@
@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;
}
}
@@ -0,0 +1,101 @@
/*!
* @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');
});
});
@@ -0,0 +1,228 @@
/*!
* @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');
}
});
}
}
@@ -0,0 +1,30 @@
/*!
* @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();
});
});
@@ -0,0 +1,89 @@
/*!
* @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();
});
}
}
@@ -0,0 +1,25 @@
<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>
@@ -0,0 +1,72 @@
@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);
}
@@ -0,0 +1,42 @@
/*!
* @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();
});
});
@@ -0,0 +1,214 @@
/*!
* @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 ?? '';
}
}
@@ -0,0 +1,95 @@
/*!
* @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');
});
});
@@ -0,0 +1,51 @@
/*!
* @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;
}
}
@@ -0,0 +1,50 @@
/*!
* @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: /, '');
}
@@ -0,0 +1,88 @@
/*!
* @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 {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: 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,
}),
);
});
});
});
@@ -0,0 +1,89 @@
/*!
* @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),
);
}
}
@@ -0,0 +1,122 @@
/*!
* @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']]);
});
});
});
@@ -0,0 +1,71 @@
/*!
* @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}`);
}
}
}
@@ -0,0 +1,28 @@
/*!
* @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();
});
});
@@ -0,0 +1,43 @@
/*!
* @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)!;
}
}
@@ -0,0 +1,59 @@
/*!
* @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();
});
}
}
@@ -0,0 +1,46 @@
/*!
* @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;
}
}
@@ -0,0 +1,27 @@
/*!
* @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();
});
});
@@ -0,0 +1,19 @@
/*!
* @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]();
}
}
@@ -0,0 +1,94 @@
/*!
* @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);
},
},
];
}
@@ -0,0 +1,64 @@
/*!
* @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');
});
});
@@ -0,0 +1,94 @@
/*!
* @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';
}
@@ -0,0 +1,24 @@
/*!
* @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();
});
});
@@ -0,0 +1,90 @@
/*!
* @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();
}
}
@@ -0,0 +1,105 @@
/*!
* @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,
});
}
}
@@ -0,0 +1,69 @@
<!-- 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>
}
@@ -0,0 +1,185 @@
: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);
}
}
}
@@ -0,0 +1,203 @@
/*!
* @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 '../../../../../shared/src/lib/utils/test-utils.spec';
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();
}
});
});
@@ -0,0 +1,175 @@
/*!
* @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);
}
});
}
}
@@ -0,0 +1,176 @@
/*!
* @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]);
}
});
});
@@ -0,0 +1,458 @@
/*!
* @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;
}
}
@@ -0,0 +1,89 @@
/*!
* @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-.',
},
]),
];
@@ -0,0 +1,27 @@
/*!
* @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 {html} from '@codemirror/lang-html';
import {angular} from '@codemirror/lang-angular';
import {css} from '@codemirror/lang-css';
import {sass} from '@codemirror/lang-sass';
import {javascript} from '@codemirror/lang-javascript';
import {angularComponent} from '../utils/component-ts-syntax';
import {LRLanguage, LanguageSupport} from '@codemirror/language';
export const LANGUAGES: Record<string, LanguageSupport | LRLanguage> = {
'component.ts': angularComponent(),
'main.ts': angularComponent(),
html: angular({base: html()}),
svg: html(),
ts: javascript({typescript: true}),
css: css(),
sass: sass(),
scss: sass(),
json: javascript(),
};
@@ -0,0 +1,246 @@
/*!
* @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 type {TagStyle} from '@codemirror/language';
import {tags} from '@lezer/highlight';
export const SYNTAX_STYLES: TagStyle[] = [
/** A comment. */
{tag: tags.comment, color: 'var(--code-comment)'},
/** A language keyword. */
{tag: tags.keyword, color: 'var(--code-keyword)'},
/** A string literal */
{tag: tags.string, color: 'var(--code-string)'},
/** A number literal. */
{tag: tags.number, color: 'var(--code-number)'},
/** A tag name, subtag of typeName. */
{tag: tags.tagName, color: 'var(--code-tags)'},
/** The name of a class. */
{tag: tags.className, color: 'var(--code-component)'},
/** A line comment. */
{tag: tags.lineComment, color: 'var(--code-line-comment)'},
/** A block comment. */
{tag: tags.blockComment, color: 'var(--code-block-comment)'},
/** A documentation comment. */
{tag: tags.docComment, color: 'var(--code-doc-comment)'},
/** Any kind of identifier. */
{tag: tags.name, color: 'var(--code-name)'},
/** The name of a variable. */
{tag: tags.variableName, color: 'var(--code-variable-name)'},
/** A type name */
{tag: tags.typeName, color: 'var(--code-type-name)'},
/** A property or field name. */
{tag: tags.propertyName, color: 'var(--code-property-name)'},
/** An attribute name, subtag of propertyName. */
{tag: tags.attributeName, color: 'var(--code-attribute-name)'},
/** A label name. */
{tag: tags.labelName, color: 'var(--code-label-name)'},
/** A namespace name. */
{tag: tags.namespace, color: 'var(--code-namespace)'},
/** The name of a macro. */
{tag: tags.macroName, color: 'var(--code-macro-name)'},
/** A literal value. */
{tag: tags.literal, color: 'var(--code-literal)'},
/** A documentation string. */
{tag: tags.docString, color: 'var(--code-doc-string)'},
/** A character literal (subtag of string). */
{tag: tags.character, color: 'var(--code-character)'},
/** An attribute value (subtag of string). */
{tag: tags.attributeValue, color: 'var(--code-attribute-value)'},
/** An integer number literal. */
{tag: tags.integer, color: 'var(--code-integer)'},
/** A floating-point number literal. */
{tag: tags.float, color: 'var(--code-float)'},
/** A boolean literal. */
{tag: tags.bool, color: 'var(--code-bool)'},
/** Regular expression literal. */
{tag: tags.regexp, color: 'var(--code-regexp)'},
/** An escape literal, for example a backslash escape in a string. */
{tag: tags.escape, color: 'var(--code-escape)'},
/** A color literal . */
{tag: tags.color, color: 'var(--code-color)'},
/** A URL literal. */
{tag: tags.url, color: 'var(--code-url)'},
/** The keyword for the self or this object. */
{tag: tags.self, color: 'var(--code-self)'},
/** The keyword for null. */
{tag: tags.null, color: 'var(--code-null)'},
/** A keyword denoting some atomic value. */
{tag: tags.atom, color: 'var(--code-atom)'},
/** A keyword that represents a unit. */
{tag: tags.unit, color: 'var(--code-unit)'},
/** A modifier keyword. */
{tag: tags.modifier, color: 'var(--code-modifier)'},
/** A keyword that acts as an operator. */
{tag: tags.operatorKeyword, color: 'var(--code-operator-keyword)'},
/** A control-flow related keyword. */
{tag: tags.controlKeyword, color: 'var(--code-control-keyword)'},
/** A keyword that defines something. */
{tag: tags.definitionKeyword, color: 'var(--code-definition-keyword)'},
/** A keyword related to defining or interfacing with modules. */
{tag: tags.moduleKeyword, color: 'var(--code-module-keyword)'},
/** An operator. */
{tag: tags.operator, color: 'var(--code-operator)'},
/** An operator that dereferences something. */
{tag: tags.derefOperator, color: 'var(--code-deref-operator)'},
/** Arithmetic-related operator. */
{tag: tags.arithmeticOperator, color: 'var(--code-arithmetic-operator)'},
/** Logical operator. */
{tag: tags.logicOperator, color: 'var(--code-logic-operator)'},
/** Bit operator. */
{tag: tags.bitwiseOperator, color: 'var(--code-bitwise-operator)'},
/** Comparison operator. */
{tag: tags.compareOperator, color: 'var(--code-compare-operator)'},
/** Operator that updates its operand. */
{tag: tags.updateOperator, color: 'var(--code-update-operator)'},
/** Operator that defines something. */
{tag: tags.definitionOperator, color: 'var(--code-definition-operator)'},
/** Type-related operator. */
{tag: tags.typeOperator, color: 'var(--code-type-operator)'},
/** Control-flow operator. */
{tag: tags.controlOperator, color: 'var(--code-control-operator)'},
/** Program or markup punctuation. */
{tag: tags.punctuation, color: 'var(--code-punctuation)'},
/** Punctuation that separates things. */
{tag: tags.separator, color: 'var(--code-separator)'},
/** Bracket-style punctuation. */
{tag: tags.bracket, color: 'var(--code-bracket)'},
/** Angle brackets (usually `<` and `>` tokens). */
{tag: tags.angleBracket, color: 'var(--code-angle-bracket)'},
/** Square brackets (usually `[` and `]` tokens). */
{tag: tags.squareBracket, color: 'var(--code-square-bracket)'},
/** Parentheses (usually `(` and `)` tokens). Subtag of bracket. */
{tag: tags.paren, color: 'var(--code-paren)'},
/** Braces (usually `{` and `}` tokens). Subtag of bracket. */
{tag: tags.brace, color: 'var(--code-brace)'},
/** Content, for example plain text in XML or markup documents. */
{tag: tags.content, color: 'var(--code-content)'},
/** Content that represents a heading. */
{tag: tags.heading, color: 'var(--code-heading)'},
/** A level 1 heading. */
{tag: tags.heading1, color: 'var(--code-heading1)'},
/** A level 2 heading. */
{tag: tags.heading2, color: 'var(--code-heading2)'},
/** A level 3 heading. */
{tag: tags.heading3, color: 'var(--code-heading3)'},
/** A level 4 heading. */
{tag: tags.heading4, color: 'var(--code-heading4)'},
/** A level 5 heading. */
{tag: tags.heading5, color: 'var(--code-heading5)'},
/** A level 6 heading. */
{tag: tags.heading6, color: 'var(--code-heading6)'},
/** A prose separator (such as a horizontal rule). */
{tag: tags.contentSeparator, color: 'var(--code-content-separator)'},
/** Content that represents a list. */
{tag: tags.list, color: 'var(--code-list)'},
/** Content that represents a quote. */
{tag: tags.quote, color: 'var(--code-quote)'},
/** Content that is emphasized. */
{tag: tags.emphasis, color: 'var(--code-emphasis)'},
/** Content that is styled strong. */
{tag: tags.strong, color: 'var(--code-strong)'},
/** Content that is part of a link. */
{tag: tags.link, color: 'var(--code-link)'},
/** Content that is styled as code or monospace. */
{tag: tags.monospace, color: 'var(--code-monospace)'},
/** Content that has a strike-through style. */
{tag: tags.strikethrough, color: 'var(--code-strikethrough)'},
/** Inserted text in a change-tracking format. */
{tag: tags.inserted, color: 'var(--code-inserted)'},
/** Deleted text. */
{tag: tags.deleted, color: 'var(--code-deleted)'},
/** Changed text. */
{tag: tags.changed, color: 'var(--code-changed)'},
/** An invalid or unsyntactic element. */
{tag: tags.invalid, color: 'var(--code-invalid)'},
/** Metadata or meta-instruction. */
{tag: tags.meta, color: 'var(--code-meta)'},
/** Metadata that applies to the entire document. */
{tag: tags.documentMeta, color: 'var(--code-document-meta)'},
/** Metadata that annotates or adds attributes to a given syntactic element. */
{tag: tags.annotation, color: 'var(--code-annotation)'},
/** Processing instruction or preprocessor directive. Subtag of meta. */
{tag: tags.processingInstruction, color: 'var(--code-processing-instruction)'},
];
@@ -0,0 +1,76 @@
/*!
* @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 CODE_EDITOR_THEME_STYLES = {
'&': {
position: 'relative',
width: '100%',
height: '100%',
'background-color': 'var(--code-editor-background)',
color: 'var(--code-editor-text-base-color)',
},
'.cm-gutters': {
border: 'none',
},
'.cm-gutter': {
'background-color': 'var(--code-editor-background)',
color: 'var(--code-editor-code-base-color)',
},
'.cm-line.cm-activeLine': {
'background-color': 'var(--code-editor-active-line-background)',
},
'.cm-activeLineGutter': {
'background-color': 'var(--code-editor-active-line-background)',
},
'&.cm-focused .cm-selectionBackground': {
'background-color': 'var(--code-editor-focused-selection-background) !important',
},
'.cm-selectionBackground': {
'background-color': 'var(--code-editor-selection-background) !important',
},
'.cm-cursor': {
'border-color': 'var(--code-editor-cursor-color)',
},
'.cm-tooltip': {
color: 'var(--code-editor-tooltip-color)',
border: 'var(--code-editor-tooltip-border)',
'border-radius': 'var(--code-editor-tooltip-border-radius)',
background: 'var(--code-editor-tooltip-background)',
'overflow-y': 'scroll',
'max-height': '70%',
'max-width': '100%',
'margin-right': '10px',
},
'.cm-tooltip.cm-tooltip-autocomplete > ul': {
background: 'var(--code-editor-autocomplete-background)',
},
'.cm-tooltip .keyword': {
color: 'var(--code-module-keyword)',
},
'.cm-tooltip .aliasName': {
color: 'var(--code-variable-name)',
},
'.cm-tooltip .localName': {
color: 'var(--code-variable-name)',
},
'.cm-tooltip-autocomplete ul li[aria-selected]': {
background: 'var(--code-editor-autocomplete-item-background)',
color: 'var(--code-editor-autocomplete-item-color)',
},
'.cm-tooltip-lint': {
background: 'var(--code-editor-lint-tooltip-background)',
color: 'var(--code-editor-lint-tooltip-color)',
},
'.cm-panels': {
background: 'var(--code-editor-panels-background)',
color: 'var(--code-editor-panels-color)',
},
'.cm-foldPlaceholder': {
background: 'var(--code-editor-fold-placeholder-background)',
},
};
@@ -0,0 +1,118 @@
/*!
* @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 {
Completion,
CompletionContext,
CompletionResult,
autocompletion,
closeCompletion,
completeFromList,
insertCompletionText,
} from '@codemirror/autocomplete';
import {EditorView} from '@codemirror/view';
import {Subject, filter, take} from 'rxjs';
import {EditorFile} from '../code-mirror-editor.service';
import {TsVfsWorkerActions} from '../workers/enums/actions';
import {AutocompleteRequest} from '../workers/interfaces/autocomplete-request';
import {AutocompleteItem, AutocompleteResponse} from '../workers/interfaces/autocomplete-response';
import {ActionMessage} from '../workers/interfaces/message';
import {TransactionSpec} from '@codemirror/state';
// Factory method for autocomplete extension.
export const getAutocompleteExtension = (
emitter: Subject<ActionMessage>,
currentFile: Signal<EditorFile>,
sendRequestToTsVfs: (request: ActionMessage<AutocompleteRequest>) => void,
) => {
return autocompletion({
activateOnTyping: true,
override: [
async (context: CompletionContext): Promise<CompletionResult | null> => {
try {
const contextPositions = context.state.wordAt(context.pos);
sendRequestToTsVfs({
action: TsVfsWorkerActions.AUTOCOMPLETE_REQUEST,
data: {
file: currentFile().filename,
position: context.pos,
from: contextPositions?.from,
to: contextPositions?.to,
content: context.state.doc.toString(),
},
});
const completions = await new Promise<AutocompleteResponse | undefined>((resolve) => {
emitter
.pipe(
filter((event) => event.action === TsVfsWorkerActions.AUTOCOMPLETE_RESPONSE),
take(1),
)
.subscribe((message: ActionMessage<AutocompleteResponse>) => {
resolve(message.data);
});
});
if (!completions) {
return null;
}
const completionSource = completeFromList(
completions.map((completionItem) => {
const suggestions: Completion = {
type: completionItem.kind,
label: completionItem.name,
boost: 1 / Number(completionItem.sortText),
detail: completionItem?.codeActions?.[0]?.description,
apply: (view, completion, from, to) =>
applyWithCodeAction(view, {...completion, ...completionItem}, from, to),
};
return suggestions;
}),
);
return completionSource(context);
} catch (e) {
return null;
}
},
],
});
};
const applyWithCodeAction = (
view: EditorView,
completion: Completion & AutocompleteItem,
from: number,
to: number,
) => {
const transactionSpecs: TransactionSpec[] = [
insertCompletionText(view.state, completion.label, from, to),
];
if (completion.codeActions?.length) {
const {span, newText} = completion.codeActions[0].changes[0].textChanges[0];
transactionSpecs.push(
insertCompletionText(view.state, newText, span.start, span.start + span.length),
);
}
view.dispatch(
...transactionSpecs,
// avoid moving cursor to the autocompleted text
{selection: view.state.selection},
);
// Manually close the autocomplete picker after applying the completion
closeCompletion(view);
};
@@ -0,0 +1,55 @@
/*!
* @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 {Diagnostic, linter} from '@codemirror/lint';
import {TsVfsWorkerActions} from '../workers/enums/actions';
import {Signal} from '@angular/core';
import {EditorFile} from '../code-mirror-editor.service';
import {ActionMessage} from '../workers/interfaces/message';
import {DiagnosticsRequest} from '../workers/interfaces/diagnostics-request';
import {Subject, filter, take} from 'rxjs';
import {DiagnosticWithLocation, DiagnosticsState} from '../services/diagnostics-state.service';
// Factory method for diagnostics extension.
export const getDiagnosticsExtension = (
eventManager: Subject<ActionMessage>,
currentFile: Signal<EditorFile>,
sendRequestToTsVfs: (request: ActionMessage<DiagnosticsRequest>) => void,
diagnosticsState: DiagnosticsState,
) => {
return linter(
async (view): Promise<Diagnostic[]> => {
sendRequestToTsVfs({
action: TsVfsWorkerActions.DIAGNOSTICS_REQUEST,
data: {
file: currentFile().filename,
},
});
const diagnostics = await new Promise((resolve) => {
eventManager
.pipe(
filter((event) => event.action === TsVfsWorkerActions.DIAGNOSTICS_RESPONSE),
take(1),
)
.subscribe((response: ActionMessage<Diagnostic[]>) => {
resolve(response.data);
});
});
const result = !!diagnostics ? (diagnostics as DiagnosticWithLocation[]) : [];
diagnosticsState.setDiagnostics(result);
return result;
},
{
delay: 400,
},
);
};
@@ -0,0 +1,143 @@
/*!
* @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 {Tooltip, hoverTooltip} from '@codemirror/view';
import {marked} from 'marked';
import {Subject, filter, take} from 'rxjs';
import type {JSDocTagInfo, SymbolDisplayPart} from 'typescript';
import {EditorFile} from '../code-mirror-editor.service';
import {TsVfsWorkerActions} from '../workers/enums/actions';
import {DisplayTooltipRequest} from '../workers/interfaces/display-tooltip-request';
import {DisplayTooltipResponse} from '../workers/interfaces/display-tooltip-response';
import {ActionMessage} from '../workers/interfaces/message';
export const getTooltipExtension = (
emitter: Subject<ActionMessage<DisplayTooltipResponse>>,
currentFile: Signal<EditorFile>,
sendRequestToTsVfs: (request: ActionMessage<DisplayTooltipRequest>) => void,
) => {
return hoverTooltip(
async (_, pos: number): Promise<Tooltip | null> => {
sendRequestToTsVfs({
action: TsVfsWorkerActions.DISPLAY_TOOLTIP_REQUEST,
data: {
file: currentFile().filename,
position: pos,
},
});
const response = await new Promise<DisplayTooltipResponse>((resolve) => {
emitter
.pipe(
filter((event) => event.action === TsVfsWorkerActions.DISPLAY_TOOLTIP_RESPONSE),
take(1),
)
.subscribe((message) => {
resolve(message.data!);
});
});
if (!response?.displayParts) return null;
const {displayParts, tags, documentation} = response;
return {
pos,
create() {
const tooltip = document.createElement('div');
tooltip.appendChild(getHtmlFromDisplayParts(displayParts));
// use documentation if available as it's more informative than tags
if (documentation?.[0]?.text) {
tooltip.appendChild(getMarkedHtmlFromString(documentation[0]?.text));
} else if (tags?.length) {
tooltip.appendChild(getTagsHtml(tags));
}
return {
dom: tooltip,
// Note: force the tooltip to scroll to the top on mount and on position change
// because depending on the position of the mouse and the siez of the tooltip content,
// the tooltip might render with its initial scroll position on the bottom
mount: (_) => forceTooltipScrollTop(),
positioned: (_) => forceTooltipScrollTop(),
resize: false,
};
},
};
},
{
hideOnChange: true,
},
);
};
function forceTooltipScrollTop() {
const activeTooltip = document.querySelector('.cm-tooltip');
// only scroll if the tooltip is scrollable
if (activeTooltip && activeTooltip.scrollHeight > activeTooltip.clientHeight) {
activeTooltip.scroll(0, -activeTooltip.scrollHeight);
}
}
function getMarkedHtmlFromString(content: string): HTMLDivElement {
const wrapper = document.createElement('div');
wrapper.innerHTML = marked(content);
return wrapper;
}
function getHtmlFromDisplayParts(displayParts: SymbolDisplayPart[]): HTMLDivElement {
const wrapper = document.createElement('div');
let displayPartWrapper = document.createElement('div');
for (const part of displayParts) {
const span = document.createElement('span');
span.classList.add(part.kind);
span.textContent = part.text;
// create new div to separate lines when a line break is found
if (part.kind === 'lineBreak') {
wrapper.appendChild(displayPartWrapper);
displayPartWrapper = document.createElement('div');
} else {
displayPartWrapper.appendChild(span);
}
}
wrapper.appendChild(displayPartWrapper);
return wrapper;
}
function getTagsHtml(tags: JSDocTagInfo[]): HTMLDivElement {
const tagsWrapper = document.createElement('div');
let contentString = '';
for (let tag of tags) {
contentString += `\n@${tag.name}\n`;
if (tag.text) {
for (const {text} of tag.text) {
contentString += text;
}
}
}
tagsWrapper.innerHTML = marked(contentString);
return tagsWrapper;
}
@@ -0,0 +1,24 @@
/*!
* @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 {DiagnosticsState} from './diagnostics-state.service';
describe('DiagnosticsState', () => {
let service: DiagnosticsState;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(DiagnosticsState);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
@@ -0,0 +1,30 @@
/*!
* @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 {Diagnostic} from '@codemirror/lint';
import {BehaviorSubject, distinctUntilChanged} from 'rxjs';
export interface DiagnosticWithLocation extends Diagnostic {
lineNumber: number;
characterPosition: number;
}
@Injectable({
providedIn: 'root',
})
export class DiagnosticsState {
private readonly _diagnostics$ = new BehaviorSubject<DiagnosticWithLocation[]>([]);
// TODO: use signals when zoneless will be turned off
diagnostics$ = this._diagnostics$.asObservable().pipe(distinctUntilChanged());
setDiagnostics(diagnostics: DiagnosticWithLocation[]): void {
this._diagnostics$.next(diagnostics);
}
}
@@ -0,0 +1,116 @@
/*!
* @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 {parser as jsParser} from '@lezer/javascript';
import {parseMixed, SyntaxNode, SyntaxNodeRef, Input, NestedParse} from '@lezer/common';
import {LRLanguage} from '@codemirror/language';
import {angularLanguage} from '@codemirror/lang-angular';
import {sassLanguage} from '@codemirror/lang-sass';
export function angularComponent() {
return LRLanguage.define({
parser: jsParser.configure({
dialect: 'ts',
wrap: parseMixed((node, input) => getAngularComponentMixedParser(node, input)),
}),
});
}
/**
* Use the Angular template parser for inline templates in Angular components
*/
function getAngularComponentMixedParser(node: SyntaxNodeRef, input: Input): NestedParse | null {
const nodeIsString = ['TemplateString', 'String'].includes(node.name);
if (!nodeIsString) return null;
if (isComponentTemplate(node, input)) return {parser: angularLanguage.parser};
if (isComponentStyles(node, input)) return {parser: sassLanguage.parser};
return null;
}
function isComponentTemplate(node: SyntaxNodeRef, input: Input): boolean {
if (!node.node.parent) return false;
const expectedParents = [
'Property', // `template:` in `@Component({ template: "..." })`
'ObjectExpression', // `{` in `@Component({ template: "..." })`
'ArgList', // the decorator arguments in `@Component({ template: "..." })`
'CallExpression', // `()` in `@Component({ template: "..." })`
'Decorator', // `@Component` in `@Component({ template: "..." })`
];
const {node: parentNode} = node.node.parent;
if (nodeHasExpectedParents(parentNode, expectedParents)) {
const templateCandidateProperty = input
.read(parentNode.node.from, parentNode.node.to)
.toString()
.trim();
// is a Component's decorator `template`
if (templateCandidateProperty.startsWith('template:')) return true;
}
return false;
}
function isComponentStyles(node: SyntaxNodeRef, input: Input): boolean {
if (!node.node.parent || !node.node.parent?.node.parent) return false;
const expectedParents = [
'ArrayExpression', // `[` in `@Component({ styles: [``] })`
'Property', // `styles:` in `@Component({ styles: [``] })`
'ObjectExpression', // `{` in `@Component({ styles: [``] })`
'ArgList', // the decorator arguments in `@Component({ styles: [``] })`
'CallExpression', // `()` in `@Component({ styles: [``] })`
'Decorator', // `@Component` in `@Component({ styles: [``] })`
];
const {node: parentNode} = node.node.parent;
if (nodeHasExpectedParents(parentNode, expectedParents)) {
const propertyNode = node.node.parent.node.parent;
const stylesCandidateProperty = input
.read(propertyNode.from, propertyNode.to)
.toString()
.trim();
// is a Component's decorator `styles`
if (stylesCandidateProperty.startsWith('styles:')) {
return true;
}
}
return false;
}
/**
* Utility function to verify if the given SyntaxNode has the expected parents
*/
function nodeHasExpectedParents(
node: SyntaxNode,
orderedParentsNames: Array<SyntaxNode['name']>,
): boolean {
const parentNameToVerify = orderedParentsNames[0];
if (parentNameToVerify !== node.name) return false;
// parent was found, remove from the array
orderedParentsNames.shift();
// all expected parents were found, node has expected parents
if (orderedParentsNames.length === 0) return true;
if (!node.parent) return false;
return nodeHasExpectedParents(node.parent.node, orderedParentsNames);
}
@@ -0,0 +1,22 @@
/*!
* @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 enum TsVfsWorkerActions {
INIT_DEFAULT_FILE_SYSTEM_MAP = 'default-fs-ready',
CREATE_VFS_ENV_REQUEST = 'create-vfs-env-request',
CREATE_VFS_ENV_RESPONSE = 'create-vfs-env-response',
CODE_CHANGED = 'code-changed',
UPDATE_VFS_ENV_REQUEST = 'update-vfs-env-request',
AUTOCOMPLETE_REQUEST = 'autocomplete-request',
AUTOCOMPLETE_RESPONSE = 'autocomplete-response',
DIAGNOSTICS_REQUEST = 'diagnostics-request',
DIAGNOSTICS_RESPONSE = 'diagnostics-response',
DEFINE_TYPES_REQUEST = 'define-types-request',
DISPLAY_TOOLTIP_REQUEST = 'display-tooltip-request',
DISPLAY_TOOLTIP_RESPONSE = 'display-tooltip-response',
}
@@ -0,0 +1,18 @@
/*!
* @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
*/
/**
* Gets autocompletion proposal entries at a particular position in a file.
*/
export interface AutocompleteRequest {
file: string;
content: string;
position: number;
from?: number;
to?: number;
}
@@ -0,0 +1,22 @@
/*!
* @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 type {CodeAction} from 'typescript';
export interface AutocompleteItem {
kind: string;
name: string;
sortText: string;
codeActions?: CodeAction[];
}
/**
* Autocomplete response which contains all proposal entries.
*/
export type AutocompleteResponse = AutocompleteItem[];
@@ -0,0 +1,15 @@
/*!
* @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
*/
/**
* Request contains current state ('code') of provided file.
*/
export interface CodeChangeRequest {
code: string;
file: string;
}
@@ -0,0 +1,14 @@
/*!
* @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 interface Typing {
path: string;
content: string;
}
export type DefineTypesRequest = Typing[];
@@ -0,0 +1,27 @@
/*!
* @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
*/
/**
* Request will be used to examine diagnostics for the given `file`.
*/
export interface DiagnosticsRequest {
file: string;
}
export interface DiagnosticsResult {
from?: number;
to?: number;
message: string;
source?: string;
code: number;
severity: string;
lineNumber?: number;
characterPosition?: number;
}
export type DiagnosticsResponse = DiagnosticsResult[];
@@ -0,0 +1,15 @@
/*!
* @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
*/
/**
* Gets autocompletion proposal entries at a particular position in a file.
*/
export interface DisplayTooltipRequest {
file: string;
position: number;
}
@@ -0,0 +1,15 @@
/*!
* @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 {JSDocTagInfo, SymbolDisplayPart} from 'typescript';
export interface DisplayTooltipResponse {
displayParts: SymbolDisplayPart[] | null;
tags: JSDocTagInfo[] | null;
documentation: SymbolDisplayPart[] | null;
}

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