This commit introduces basic autocompletion support for the new block keywords. After typing `@`, the language service suggests the various block names.
PR Close#52121
PR #49672 added a g3-flavored migration for compiler option removal, but g3
doesn't use those options at all. So this migration is unnecessary and we
can remove it.
PR Close#52141
Adds a check to the viewport cleanup function to prevent it from re-processing elements that have been fully cleaned up, because it can lead to the `IntersectionObserver` being destroyed even though there are still pending triggers. This can happen, because we have cleanup callbacks both for the block is loaded, but also when the placeholder view is destroyed.
Fixes#52113.
PR Close#52115
Fixes that the new block syntax was generating instructions in the wrong order which meant that pipes were being declared too early. This meant that if the block is first in the template, any pipes used in it won't be able to inject things like `ChangeDetectorRef`.
These changes update the compiler and add a bunch of tests to ensure that pipes work as expected.
Fixes#52102.
PR Close#52112
Since expressions in event listener are added inside of a callback, type narrowing won't apply to them anymore. These changes add the logic to create a guard expression that will re-narrow the expression in the callback.
Fixes#52052.
PR Close#52069
Since expressions in event listener are added inside of a callback, type narrowing won't apply to them anymore. These changes add the logic to create a guard expression that will re-narrow the expression in the callback.
Fixes#52052.
PR Close#52069
When a route has loadComponent, its children should not inherit params and
data unless paramsInheritanceStrategy is 'always'.
fixes#52106
BREAKING CHANGE: 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`.
PR Close#52114
This commit updates `@defer` logic related to handling `after` and `minimum` parameters tree-shakable.
If `after` or `minimum` was used on a `@loading` or `@placeholder` blocks, compiler generates an extra argument for the `ɵɵdefer` instruction. This extra argument is a reference to a function that brings timer-related code.
PR Close#52042
The error message now contains the code location of the component. It now looks like: "Error: NG01001: Orphan component found! Trying to render the component Main (at $PROJECT_ROOT/src/main.ts:8) without first loading the NgModule ..."
PR Close#51919
The current error stringifier only includes the class name. In this change a new stringifier is added which returns a more helpful string which includes the file path and line number. Note that this is only the case with components, and for other class types (directive, pipes) it will fallback to the current stringifier. Subsequent changes can cover the case of directive and pipes as well.
PR Close#51919
A new field `debugInfo` is added to the component definition. Now the runtime ɵsetClassDebugInfo stores the debug info for components in this new field.
PR Close#51919
A new statement will be generated for components which will attach some useful debug info to them to be used in runtime error handling. Currently this only happens in full and local compilation modes.
PR Close#51919
A new utility function `compileClassDebugInfo` is introduced which creates compile result necessary to generate statement for attaching some useful debug info into angular classes. An example of teh new statement would be:
```
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Main, { className: "Main", filePath: "$PROJECT_ROOT/src/main.ts", lineNumber: 8 }); })();
```
Currently, the debug info contains:
- the class name
- the file path in which it is defined
- the line number in which it is defined
The debug info will be used in runtime to generate more helpful error messages.
PR Close#51919
This commit updates the tracking of dirty child views to be a flag
rather than a counter. This is a much more simple method and less likely
to get into the same 'always-wrong' situation that could happen with the
counter (if it is off by 1 once, it's off by 1 forever and you either
get infinite change detection or your view is never refreshed).
PR Close#51515
The current implementation assumes a qualified name consists of just two identifier, e.g., Foo.Bar. However it can be more nested, like Foo.Bar.Baz.XX.YY. While such nested patterns are quite uncommon and devs mostly just use two identifier here, the TS compiler seems to throw error if we make such assumption and it broke quite a lot of targets in g3 when compiled in local mode. So here we handle this nested property of qualified names.
PR Close#51947
This commit removes the `withNoDomReuse` function to minimize public API. The `withNoDomReuse` function used to disable DOM reuse, which is the main feature of the `provideClientHydration()`.
The `withNoDomReuse()` function was in the "developer preview" mode, so the removal happens without prior deprecation.
BREAKING CHANGE:
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.
PR Close#52057
Fixes that, depending on the matching and import order, in some cases we weren't throwing the error saying that a directive matched multiple times on the same element.
Fixes#52072.
PR Close#52073
Cleans up the i18n placeholder resolution phase by extracting the
details of how the map is serialized into its own class, instead of
mixing it with the phase's traversal logic.
PR Close#51988
Template instructions exist in the parent view, but for the purposes of
the i18n placeholders, they should use the subTemplateIndex of the i18n
op wrapping their view.
PR Close#51988
The custom logic in the generate advance phase for i18n expressions did
not work in all cases. Instead we add a new phase to update the
expression's target op, and then allow the standard advance generation
code to determine the number of advance instructions needed.
Co-authored-by: Dylan Hunn <dylhunn@users.noreply.github.com>
PR Close#51988
Fills in values for sub-template placeholders in i18n messages. This
includes both the tag placeholders for ng-template tags, as well as
merging in any placeholders from the child i18n block.
PR Close#51988
Adds an additional sub-template index parameter to child i18n blocks
that are propagated from the root block. This additional paramete
indicates the index of the template in the i18n message.
Co-authored-by: Dylan Hunn <dylhunn@users.noreply.github.com>
PR Close#51988
This commit adds support for extracting function overloads. Interestingly, this worked in an earlier version when the code was extracting all statements in every source file, but the existing compiler API for extracting all exported declarations from an entry-point only returns the first function declaration in cases when there are overloads.
This also marks abstract classes as abstract, required inputs as required, and filters out Angular-private APIs.
PR Close#52040
This commit adds the code to mark newly created embedded views (that represent `@defer` block states) as dirty to indicate that the view sgould be checked during the next change detection cycle.
Resolves#52094.
PR Close#52095
We type check `@switch` blocks by generating identical TS `switch` statements in the TCB, however TS currently has a bug where parenthesized `switch` block expressions don't narrow their types. Since we use parenthesized expressions to wrap AST nodes for diagnostics, this will bug will affect all Angular-generated `switch` statements.
These changes work around the issue by generating `if`/`else if`/`else` statements that represent the `switch`.
Some alternatives that were considered:
1. Moving the `switch` expression to a constant - this is fairly simple to implement, but it won't fully resolve the narrowing issue since the same constant will have to be used in expressions inside the different cases.
2. Removing the outer-most parenthesis from the switch expression - this works and allows us to continue using switch statements, but because we use parenthesized expressions to map diagnostics to their template locations, I wasn't sure if it won't lead to worse template dignostics.
Fixes#52077.
PR Close#52110
This change adjust the equality comparator used by NgSwitch - now it
defaults to === from previously used ==. This change is based on the
following reasoning:
- align behaviour with the built-in switch block);
- improve performance (avoid type coercion);
- enable better type-checking.
BREAKING CHANGE:
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.
Fixes#33873
PR Close#51504
This change removes the `mutate` method from the `WritableSignal` interface and
completely drops it from the public API surface.
The initial API proposal for Angular signals included the mutate method, allowing
in-place modification of JS objects, without changing their references (identity).
This was based on the reasoning that identity change on modification is not necessary
as we can send the “modified” notification through the signals graph.
Unfortunately the signal-specific change notification is lost as soon as we read
signal value outside of a reactive context (outside of a reactive graph).
In other words - any code outside of the Angular signals library can’t know
that an object is modified.
Secondly, to make the mutate method work, we’ve defaulted the signal value equality function
to the one that considers non-primitive values as always different.
This is unfortunate for people working with immutable data structures
(this is notably the case for the popular state management libraries)
as the default equality function de-optimizes memoization in computed,
making the application less performant.
Given the above reasons we prefer to remove the mutate method in the signals library -
at least for now. There are just too many sharp edges and tradeoffs that we don’t fully
understand yet.
BREAKING CHANGE:
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]);
```
PR Close#51986
This commit reorganizes the Angular code a bit, and moves signals into a
newly defined `@angular/core/primitives` location. This will be used inside
g3 to allow non-Angular targets to depend on the signals core without
incurring a dependency on the whole framework.
PR Close#51986
This commit refactors the signals API surface of Angular out of the
//packages/core/src/signals package. This is done in preparation of moving
the core signals package into a new 'primitives' package that's decoupled
from the public API.
PR Close#51986
The code already supports `DatePipeConfig` to have only some properties
set, and not all. But the typing disallows it. This aligns the typing
with the code.
PR Close#51287
`provideClientHydration()` accepts new `HydrationFeature` : `HttpTransferCacheOptions`.
`withHttpTransferCacheOptions` accepts an option object:
* `includeHeaders` : list of headers entries to keep in the cache with the request
* `filter` a callback to determine if a request should be cached
* `includePostRequests`: to include POST requests in the allowed methods
Implements some of the features requested in #50117
PR Close#52029
Fixes that the compiler wasn't picking up pipes used inside defer block triggers as dependencies. We had implemented the `visitDeferredTrigger` visitor method, but it wasn't being called, because we weren't going through the `visitAll` method of the deferred block. We don't use `visitAll`, because child nodes have to be processed differently than the connected blocks and triggers.
Fixes#52068.
PR Close#52071
The `_enabledBlockTypes` config option was removed recently, since we've enabled @-syntax by default. This commit removes `_enabledBlockTypes` references from the `compiler-cli` test cases.
PR Close#52066
This commit adds a logic to produce a warning in case HttpClient doesn't use fetch during SSR.
It's recommended to use `fetch` for performance and compatibility reasons.
PR Close#52037
This change removes the `mutate` method from the `WritableSignal` interface and
completely drops it from the public API surface.
The initial API proposal for Angular signals included the mutate method, allowing
in-place modification of JS objects, without changing their references (identity).
This was based on the reasoning that identity change on modification is not necessary
as we can send the “modified” notification through the signals graph.
Unfortunately the signal-specific change notification is lost as soon as we read
signal value outside of a reactive context (outside of a reactive graph).
In other words - any code outside of the Angular signals library can’t know
that an object is modified.
Secondly, to make the mutate method work, we’ve defaulted the signal value equality function
to the one that considers non-primitive values as always different.
This is unfortunate for people working with immutable data structures
(this is notably the case for the popular state management libraries)
as the default equality function de-optimizes memoization in computed,
making the application less performant.
Given the above reasons we prefer to remove the mutate method in the signals library -
at least for now. There are just too many sharp edges and tradeoffs that we don’t fully
understand yet.
BREAKING CHANGE:
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]);
```
PR Close#51821
Two key refactors to enable deeper language service support for blocks:
(1) We now generate accurate source spans for the various block types. Additionally, all the top-level source spans for a block are now *inclusive* of all the connected or descending blocks. This helps the language service visit connected blocks.
(2) The language service's template visitor was previously skipping over the AST nodes corresponding to several block types. We are now careful to visit all such nodes.
PR Close#52038
Fixes a bug with REMOVE_STYLES_ON_COMPONENT_DESTROY when a component is destroyed and re-created, its previous stylesheets will not be re-used and instead a new stylesheet will still be created each time.
PR Close#52019
This commit adds runtime code to support `after` and `minimum` parameters in the `@placeholder` and `@loading` blocks. The code uses the `TimerScheduler` service added earlier for `on timer` triggers.
PR Close#52009
Adds an `UnknownBlock` node to the Ivy AST to represent blocks that haven't been recognized by the compiler. This will make it easier to integrate blocks into the language service.
PR Close#52047
Adds some logic to treat incomplete blocks as empty blocks so that we can recover from them. Also logs an error about the incomplete block.
PR Close#52047
Updates the lexer to parse blocks as incomplete, instead of throwing errors. This will allow us to better handle them further down in the pipeline.
PR Close#52047
Revert (with improvements of): dcf18dc74c
We recently landed a change that allows `toSignal` to be called
from within reactive contexts (e.g. `effect`/`computed`). After
more thorough investigatio and consideration with the team, we
feel like allowing `toSignal` to be called in such contexts is
encouraging non-ideal / hard-to-notice code patterns.
e.g. a new subscription to an observable is made every time `toSignal`
is invoked. There is no caching done here. Additionally, multiple new
subscriptions can trigger unintended side-effects- that may slow down
the app, result in incorrect/unexpected behavior or perform unnecessary
work.
Users should instead move the `toSignal` call outside of the `computed`
or `effect` and then read the signal values from within their `computed`. e.g.
```ts
computed(() => {
const smth = toSignal(coldObservable$)
return smth() + 2;
}
```
--> should instead be:
```ts
const smth = toSignal(coldObsverable$);
computed(() => smth() + 2);
```
In cases where a new subscription for each invocation is actually intended, a manual
subscription can be made. That way it's also much more obvious to users
that they are triggering side-effects every time, or causing new
subscriptions.
PR Close#52049
GC and render events can happen _while_ running scripts as well as
outside of the script blocks. The new metric entries capture both
the gc and render time happening in the scrip blocks.
PR Close#50771
This adds API doc extraction for interfaces, largely using the same code paths for classes. The primary difference between classes and interfaces is that classes have member _declarations_ while interfaces have member _signatures_. This largely doesn't matter for the purposes of extraction, but the types are distinct with no common base types, so we have to do a fair amount of type unioning and aliasing.
PR Close#52006
Upgrade the existing warning so it now logs an error instead, when an LCP element is determined to not be usings the `priority` attribute. Error is logged, not thrown.
PR Close#52004
When the `ts.Project` creates the language service plugin (in this case,
the Angular Language Service), it sets the project's language service to
the new language service returned by the plugin create:
https://sourcegraph.com/github.com/microsoft/TypeScript@b12af0fa2bbd4b015e59adcfb49988cea7f919a1/-/blob/src/server/project.ts?L2035-2044
The project may be reloaded in response to various events, such as a
change to the tsconfig file, which then recreates the plugin. When this
happens, the language service that gets passed to the plugin `create`
function will not be the typescript language service, but rather the
previous instance of the new language service returned by the last call
to `create`.
This commit ensures that subsequent calls to `create` for the
`NgLanguageService` plugin for a project after the first call are able
to retrieve and hold on to the _TypeScript_ language service.
fixes https://github.com/angular/vscode-ng-language-service/issues/1923
PR Close#51912
A couple tests were already passing, and just needed to be enabled. This includes tests pertaining to:
* ng-template
* host binding styling slots
* and host animation bindings
* some literal tests (which were missing some $foo$ escaped names)
We add pipeline-specific versions of the following tests, and enable them:
* A local refs test. The consts for the element attributes and the consts for local reference are collected in the reverse order, but the emitted template is functionally the same.
* A safe accesstest. Consider the expression `$any(val)?.foo`. `TemplateDefinitionBuilder` extracts a temporary variable: `($tmp_0_0$ = $ctx$.val) == null ? null : $tmp_0_0$.foo`. It presumably does this because it considers the `$any(...)` to be a function call. However, this is not a real call, so Template Pipeline safely ignores it and declines to generate a temporary.
* Another local refs test. AttributeMarker.Template is emitted at the end of the const array (instead of the middle)
PR Close#51950
Consider an `ng-template` which is generated as a result of a structural directive:
```
<div *ngFor="let inner of items"
(click)="onClick(inner)"
[title]="getTitle()"
>
```
This should logically expand into something like the following:
```
<ng-template [ngForOf]="..." >
<div (click)="..." [title]="..."></div>
</ng-template>
```
Note that the `(click)` handler and the `[title]` property are only present on the inner div, *not* on the enclosing generated `ng-template`.
Previously, Template Pipeline would place these bindings on *both* the tempate and the inner element.
However, we can't just remove them completely, because these bindings should still be matchable on the generated `ng-template` (which is very surprising, but nonetheless true).
We resolve this issue with two improvements:
(1) The ingestion step is now much smarter about determining not only if a binding is on a template element, but whether it actually targets that template element.
(2) We use `ExtractedAttributeOp` directly, rather than going through `BindingOp`, to cause the `ng-template` to still receive these bindings in its `consts` array for matching purposes.
PR Close#51950
For components, the parser already extracts the `important` property (and it is later disregarded). However, because host bindings use a totally separate parsing code path, this was never happing for host bindings.
Here, we add some code to the host style parsing phase to drop the `!important` suffix.
We could solve this category of problems for good by parsing host bindings with the same code as template bindings.
PR Close#51950
Previously, we always generated temporary variable declarations at the beginning of each view's update block. This is wrong, for two reasons:
1. Temporaries can be used in the create block
2. When listeners use temporaries, we should declare them inside the listener.
Now, we always place temporaries at the beginning of the enclosing OpList, and recursively try to generate them when we find a listener.
PR Close#51950
Currently, if there are 2 nested @defer blocks with the same dependency, Angular throws an error at runtime to indicate that there was a duplicate component def in the registry. This commit updates the logic to only append dependencies when they didn't previously exist in the registry.
PR Close#51964
#51885 patched a call site that threw an error but there were 2 others call that needed to be wrapped in the same way by a try/catch.
`initializeFully` is part of the calls in `responseWith(handleFetch)`.
Same #51885, throwing `SwCriticalError`allows the driver to fallback to `safeFetch` and ensure `responseWith` doesn't fail.
Fixes#50378
PR Close#51960
Currently the TCB for aliased `if` blocks looks something like this:
```
// Markup: `@if (expr; as alias) { {{alias}} }
if (block.condition) {
var alias = block.condition;
"" + alias;
}
```
The problem with this approach is that the type of `alias` won't be narrowed. This is something that `NgIf` currently supports.
These changes resolve the issue by emitting the variable outside the `if` block and using the variable reference instead:
```
// Markup: `@if (expr; as alias) { {{alias}} }
var alias = block.condition;
if (alias) {
"" + alias;
}
```
PR Close#51952
The context of an embedded view ref at some point was switched from a
getter to an actual assignable property. This is something we reverted
with the previous commit as it introduces additional complexity for our
generated code (in terms of closures capturing the `ctx`).
This change impacted the template outlet code because we actively relied
on swapping out the full context if the user changes it. Previousl,
before we allowed to swap out the context (in v16), we mutated the
initial view context if it didn't change structurally- and in other
cases the view was re-created. We improved this performance aspect with
the changes to allow for the context to be swapped out + actually also
fixed a bug where the initial context object was mutated and the user
could observe this change.
This commit adjusts for context not being replacable- while still
keeping the bugs fixed and preserving the performance wins of not
having to destroy/re-create the view whenever the context changes.
Benchmarks: https://hackmd.io/J0Ci_JzxQ0K1AA1omXhIQQ
PR Close#51887
This partially reverts commit a3e17190e7
and deprecates behavior added.
The context of an embedded view ref at some point was switched from a
getter to an actual assignable property. This is something we revert
as it introduces additional complexity for our generated code
(in terms of closures capturing the `ctx`), creates technical
limitations for Angular's internals and the usage pattern is rarely
used (and can be addressed via simple assignments, `Object.assign` or
the use of a proxy if replacing the full context object is still
desirable)
DEPRECATED: Swapping out the context object for `EmbeddedViewRef`
is no longer supported. Support for this was introduced with v12.0.0, but
this pattern is rarely used. There is no replacement, but you can use
simple assignments in most cases, or `Object.assign , or alternatively
still replace the full object by using a `Proxy` (see `NgTemplateOutlet`
as an example).
Also adds a warning if the deprecated
PR Close#51887
When adding a new view flag, you currently need to adjust the last number of the last
3 flags. All of these share the same number so the shifting ones can just use
the base-10 IndexWithinInitPhaseShift.
PR Close#51839
Reworks a few more places to output arrow functions instead of function declarations in order to reduce the amount of code we generate. Some of these places include:
* Factories in injectable definitions.
* Forward references.
* `dependencies` function in the component definition.
* `consts` function in the component definition.
PR Close#52010
Updates the TCB for `@for` loop blocks to allow nullable values. The runtime already supports it and this makes it easier to switch from `NgFor`.
Fixes#51993.
PR Close#51997
The new list reconcilation algorithm, an alternative to
the DefaultIterableListDiffer. It works by performing updates
in place instead of creating intermediate data describing changes
to apply. For lists expressed as an Array it performs additional
optimizations for the moves and swap scenarios.
The new list diffing approach is meant to be used in the new control
flow and should me much faster as compared to the ngFor with the
DefaultIterableListDiffer.
PR Close#51980
The template pipeline now supports basic forms of `defer` blocks. This includes the `loading`, `placeholder`, and `error` blocks, as well as the loading and placeholder configuration options.
Lazy dependencies and prefetch are not yet implemented.
PR Close#51942
Previously, we had many individual constants collected at different places in the template pipeline, using `job.addConst(...)`. Now, this trait can be used to cause any op or expression to receive const collection.
PR Close#51942
Ops with `ConsumesSlotOpTrait` have a self-xref, and are assigned a corresponding `slot`.
Ops with `UsesSlotIndexTrait` have a `target`-xref, and are assigned the `slot` of that `target`.
In both cases, the field name `slot` is used, but it means different things. Therefore, any op which both consumes and uses a slot will have a collision of two different meanings on its `slot` field.
This commit renames `slot` to `slotTarget` in the `UsesSlotIndexTrait`, to eliminate this collision.
PR Close#51942
Enables the new `@` block syntax by default by removing the `enabledBlockTypes` flags. There are still some internal flags that allow special use cases to opt out of the block syntax, like during XML parsing and when compiling older libraries (see #51979).
PR Close#51994
Increases the `minVersion` of component declarations that use bloks to v17 in order to indicate to users that they need to update if the library they're using is on the new syntax, while preserving backwards compatibility for libraries that do not use the syntax.
PR Close#51979
Adds some logic to enable parsing of block syntax in the linker. Note that the syntax is only enabled on code compiled with Angular v17 or later.
PR Close#51979
We were previously emitting pure functions as `function foo(args) {return bar;}`, but `TemplateDefinitionBuilder` uses arrow functions instead (`const foo = (args) => bar`). By matching this behavior, we can enable many additional tests.
PR Close#51961
This is a deceptively simple fix for a deep issue. Consider the following template:
```
<button [title]="myTitle" [id]="(auth().identity() | async)" [tabindex]="1">
```
`TemplateDefinitionBuilder` allocates the following variable (binding) slots:
v[0] = [title] binding
v[1] = [id] binding
v[2] = [tabindex] binding
v[3] = pipe binding
v[4] = pipe binding
As you can see, all three top-level property bindings were assigned variable indices. Then, variables for nested expressions were assigned.
Before this change, Template Pipeline would choose the following order:
v[0] = [title] binding
v[1] = [id] binding
v[2] = pipe binding
v[3] = pipe binding
v[4] = [tabindex] binding
With this order, nested expressions have their variables counted and assigned before subsequent top-level property bindings. This results in different variable indices for `pipeBinding` expressions that are not inside the final property binding.
However, this is not just different -- it's actually incorrect! Consider a case like the following:
```
<button [p1]="c ? (a | pipe) : 3" [p2]="b | pipe">
```
These pipe bindings are executed *conditionally*. This means that, because we don't count and assign all the "fixed" variable slots first, i.e. those belonging to the property bindings, their indices might end up incorrect, depending on whether or not a pipeBinding happened as part of the update block.
With this change, we count all variables on top-level ops first, and then descend into all expressions.
PR Close#51961
Fixes an issue where if animations are enabled, deferred blocks don't remove their placeholder blocks immediately from the DOM. The problem is that we register the event handlers in `afterRender` which runs outside the zone, but the logic that removes the DOM nodes during animations is tied to change detection.
These changes resolve the issue by binding the listeners inside the zone. This was the intention from the beginning, I just forgot that `afterRender` runs outside the zone.
Fixes#51970.
PR Close#51971
Currently, there is no change detection scheduled after triggering `on idle` condition, since `requestIdleCallback` is not patched by Zone.js. This commit invokes the callback in NgZone, so that the code that is invoked within the callback can use zones and a new change detection round is scheduled as needed.
Fixes#51973.
PR Close#51975
This API allows for inspection of a given injector to determine it's type (Element, Environment, Null) as well as it's "source".
- For Environment injectors the source is the source of the injector; `injector.source`.
- For Element injectors the name is the DOM Element that created the injector.
- For the Null Injector this is the string `"Null Injector"`.
PR Close#51900
This commit adds hydration support for repeaters (for loops) and empty blocks. The logic looks up a dehydrated view and use this information for hydration. Otherwise, DOM elements for a view are created from scratch.
PR Close#51920
An `if` block can specify an alias for its main expression. We now support these in the template pipeline:
- We generate a temporary variable for the original expression
- We pass the temporary to the `conditional` instruction's context argument
- We provide the alias's name in the ambient context variables map
The context variables map now also accepts a name whose lookup value on the context object is empty. This will be interpreted as a read of the entire context object.
PR Close#51931
This is a pure refactor: we previously crammed a lot of data into a complicated array on the conditional op. Now, we use a new conditional branch expression to store that information.
PR Close#51931
This entails adding a bit of extra logic to the existing conditional ingestion and corresponding phase, because `if` blocks lack a test expression.
Additionally, enable a couple more `switch` tests by resolving a curious issue -- we now consume a variable for conditionals.
PR Close#51931
Rather than rely on the empty element collapsing phase to run first, add
logic to the empty element phase to ignore pipes when deciding whether
to collapse an element.
PR Close#51876
Refactors the i18n handling to only pass the relevant information from
the i18n AST through to the IR, instead of passing the entire
I18nMetadata.
PR Close#51876
Matches the behavior of `TemplateDefinitionBuilder`, advancing to the
last element in the i18n block before evaluating i18n expressions.
PR Close#51876
Moves the empty element phase earlier, to before pipe creation. This
ensures that adjacent i18nStart/i18nEnd ops will be collapsed into a
isingle i18n op, rather than remaining uncollapsed if a pipe is inserted
between them.
PR Close#51876
Adds support for i18n expressions in i18n messages, and allows i18n
messages on templates.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
Co-authored-by: Dylan Hunn <dylhunn@users.noreply.github.com>
PR Close#51876
`provideLazyLoadedAnimations()` returns providers which allow the lazy loading of the animation module.
Lazy loading of the animation code can shave off up to 16KB gzipped of the main bundle.
PR Close#50738
Adds support for defining `viewport`, `interaction` and `hover` triggers with no parameters. If the framework encounters such a case, it resolves the trigger to the root element of the `@placeholder` block. Triggers with no parameters have the following restrictions:
1. They have to be placed on an `@defer` block that has an `@placeholder`.
2. The `@placeholder` can only have one root node.
3. The root placeholder node has to be an element.
PR Close#51922
If a trigger element can't be accessed from the defer block, we don't generate any instructions for it. These changes add a diagnostic that will surface the error to users.
PR Close#51922
Prior to this change `this.isStable.pipe(first((isStable) => isStable)).toPromise()` had to be done in multiple places across the framework and the Angular CLI see https://github.com/angular/angular-cli/pull/25856#discussion_r1328158846. In the majority of cases an Observable based `isStable` API is not needed. This also removes the need for RXJS operator imports.
PR Close#51807
This commit updates the `if` and `switch` logic to support hydration. The logic attempts to find dehydrated views in containers while processing `if` and `switch` instructions. If a dehydrated is found, its used to further match elements. Otherwise, DOM elements for a view are created from scratch.
PR Close#51915
Previously, dehydrated views lookup was triggered only when ViewContainerRef was injected. The new control flow logic uses lower level APIs, thus having the code only in the ViewContainerRef is not sufficient.
This commit adds the logic to invoke the process of dehydrated views lookup from the `template` instruction, thus enabling it for new control flow instructions as well.
PR Close#51915
Changes `TemplateDefinitionBuilder` to output i18n message parameters in
sorted order to make it easier for the template pipeline to generate
identical output. This does not result in any functional change, but
will make it much easier to shared output golden files with the template
pipeline.
PR Close#51911
This commit updates hydration runtime code to avoid creating an empty array when we can avoid it. Instead, we just check whether the field is `null` directly (without using nullish coalescing).
PR Close#51917
#51891 introduces a new syntax that assigns a new meaning to the `@` and `}` in Angular templates. This is problematic for existing apps which may have the characters in their templates already, because it can lead to syntax errors.
These changes add an `ng update` schematic that will replace any usages of the special characters with their HTML entities.
PR Close#51905
Fixes that we were allocating slots for the expressions of `if`, `else if`, `switch` and `case` blocks which we weren't using for anything.
PR Close#51913
This commit updates runtime logic of defer blocks to schedule a single `requestIdleCallback` for a group of defer blocks created within a single change detection cycle (for example, as a result of a defer block being defined in a for loop).
PR Close#51750
The router currently restricts all further redirects after an absolute
redirect. Because there's no documented reason for _why_ this
restriction is in place, I'm now deeming this unnecessary. Developers
should not be restricted in this manner. Instead, configs that may
have caused infinite redirects in the past should be updated to not be
infinite. It is confusing to ignore configs with redirects after an
absolute redirect occurred because it creates different matching rules
depending on the whether an absolute redirect has happened or not.
For additional context on why I believe removing this restriction is
necessary, #13373 asks for allowing `redirectTo` to be a function. It
would make sense to allow this function to return a `UrlTree` like other
guards in the Router. When guards in the `Router` return `UrlTree`, they
cancel the current navigation and start a new one to re-do the route
matching. Since we're already in the router matching part, we don't need
to cancel the navigation. However, the restriction on absolute redirects
here then creates a weird situation where developers wouldn't see any
other redirects if they returned a `UrlTree` as an absolute redirect
from `redirectTo`.
resolves#39770
BREAKING CHANGE: 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.
PR Close#51731
Currently the field encapsulation undergoes some static analysis to check if it is `ViewEncapsulation` enum. Such static check fails in local compilation mode in g3 as the symbol cannot be resolved. On the other hand this field has to be resolved statically as its value determined the generated code. So in local compilation mode we add a lighter resolving logic which relies only on local information.
PR Close#51848
Currently the field changeDetection undergoes some static analysis to check if it is `ChangeDetectionStrategy` enum. Such static check fails in local compilation mode in g3 as the symbol cannot be resolved. So in local compilation mode we bypass such resolving and just write the expression as is into the component definition.
PR Close#51848
On Safari, the cache might fail on methods like `match` with an `Internal error`. Critical errors allows to fallback to `safeFetch()` in the `Driver`.
fixes: #50378
PR Close#51885
Switches the syntax for blocks from `{#block}{/block}` to `@block {}` based on the feedback from the community.
Read more about the decision-making process in our blog: https://blog.angular.io/meet-angulars-new-control-flow-a02c6eee7843
The existing block types changed in the following ways:
**Conditional blocks:**
```html
<!-- Before -->
{#if cond}
Main content
{:else if otherCond}
Else if content
{:else}
Else content
{/if}
<!-- After -->
@if (cond) {
Main content
} @else if (otherCond) {
Else if content
} @else {
Else content
}
```
**Deferred blocks**
```html
<!-- Before -->
{#defer when isLoaded}
Main content
{:loading} Loading...
{:placeholder} <icon>pending</icon>
{:error} Failed to load
{/defer}
<!-- After -->
@defer (when isLoaded) {
Main content
} @loading {
Loading...
} @placeholder {
<icon>pending</icon>
} @error {
Failed to load
}
```
**Switch blocks:**
```html
<!-- Before -->
{#switch value}
{:case 1}
One
{:case 2}
Two
{:default}
Default
{/switch}
<!-- After -->
@switch (value) {
@case (1) {
One
}
@case (2) {
Two
}
@default {
Default
}
}
```
**For loops**
```html
<!-- Before -->
{#for item of items; track item}
{{item.name}}
{:empty} No items
{/for}
<!-- After -->
@for (item of items; track item) {
{{item.name}}
} @empty {
No items
}
```
PR Close#51891
This commit disables a couple newly-added tests related to `on idle` trigger condition for @defer blocks. Tests would be re-enabled back once we identify the reason of flakiness and fix it.
PR Close#51895
Reworks the `setClassMetadata` calls to generate arrow functions instead of full anonymous function declarations. While this won't have an effect on production bundle sizes, it's easier to read and it should lead to small parsing time gains in dev mode.
PR Close#51637
This commit adds a logic to handle `on immediate` conditions both as a main condition, as well as a prefetching condition (i.e. `prefetch on immediate`).
PR Close#51630
Adds support for `on viewport` and `prefetch on viewport` triggers which will load the deferred content when the element comes into the view.
PR Close#51874
Adds support for `on hover` and `prefetch on hover` triggers. Some code had to be moved around so it could be reused from the `on interaction` triggers.
PR Close#51874
Updates the logic that generates the instructions for the `on interaction` and `prefetch on interaction` triggers to their final shape. Now the instructions take two arguments:
1. `triggerIndex` - index at which to find the trigger in the view where it will be rendered.
2. `walkUpTimes` - tells the runtime how many views up it needs to go to find the trigger element. If the argument is omitted, it means that the trigger is in the same view as the deferred block. A positive number means that the runtime needs to go up X amount of times to find the trigger. A negative number means that the trigger is inside the root view of the placeholder block. Negative numbers are capped at -1 since the placeholder is always in the same position at runtime.
PR Close#51830
Reworks the compiler to use the API introduced in #51816 to match triggers to the element nodes they point to. This will be used to generate the new instructions for `on interaction` and `prefetch on interaction`.
PR Close#51830
The `NoopAnimationDriver` as static property of `AnimationDriver` prevents it from being removed by tree shaking. This commit deprecates it and exposes the `NoopAnimationDriver` on the public API to replace its usage.
DEPRECATED:
The `AnimationDriver.NOOP` symbol is deprecated, use `NoopAnimationDriver` instead.
PR Close#51843
The `Writable` type is usefull when we want overwrite readonly properties and we still want to maintain code navigation/reference. It should be use instead of type assertions.
PR Close#49754
The `Writable` type is usefull when we want overwrite readonly properties and we still want to maintain code navigation/reference. It should be use instead of `any` type assertions for example.
PR Close#49754
The `Writable` type is usefull when we want overwrite readonly properties and we still want to maintain code navigation/reference. It should be use instead of `any` type assertions for example.
PR Close#49754
The `Writable` type is usefull when we want overwrite readonly properties and we still want to maintain code navigation/reference. It should be use instead of `any` type assertions for example.
PR Close#49754
The `Writable` type is usefull when we want overwrite readonly properties and we still want to maintain code navigation/reference. It should be use instead of `any` type assertions for example.
PR Close#49754
The `Writable` type is usefull when we want overwrite readonly properties and we still want to maintain code navigation/reference. It should be use instead of `any` type assertion for example.
PR Close#49754
We control most flags via Starlark and therefore limit configuration
options via `tsconfig` to a minimum. We do not intend to support the
enabled block types option via Starlark, so this commit allows for
the option to be picked up.
(This is useful for benchmarking the new control flow blocks).
PR Close#51862
This change simply flip the flag which enables using the deps tracker in JIT compilation (the logic is already implemented in a previous PR). Some tests which depend on the old JIT implementation (e.g., patching the scope info into the type) are modified accordingly.
PR Close#51415
Using verification helpers such as `isComponent` may trigger JIT compilation. Now in some tests such compilation is made purposely to fail, and so in such cases any reference to the `depsTracker.clearScopeCacheFor` method will cause the exception to be thrown earlier than expected which results in teh test failure. Such scenario is the case in the next commit when we enable using the deps tracker in the jit compilation. Note that such failure is only for the framework tests and is a very edge case. The tests in downstream apps will not lead to such scenario of failure at all.
PR Close#51415
This commit adds an option to the view transition feature to skip the first transition.
This option is not available in RouterModule.forRoot.
resolves#51815
PR Close#51825
The `setupTestingRouter` function is a factory function for creating a
new instance of the `Router`. This function is effectively a no-op.
Developers should use `RouterModule.forRoot` or `provideRouter` in tests
instead.
BREAKING CHANGE: The `setupTestingRouter` function has been removed. Use
`RouterModule.forRoot` or `provideRouter` to setup the `Router` for
tests instead.
PR Close#51826
This PR moves the Observable subscription of toSignal outside of the
reactive context. As the result the toSignal calls are allowed in the
computed, effect and all other reactive consumers.
This is based on the reasoning that we already allow signals creation
in a reactive context. Plus a similar change was done to the async pipe
in the https://github.com/angular/angular/pull/50522Fixes#51027
PR Close#51831
This commit adds the necessary mechanisms to perform cleanup of prefetch triggers when resource loading starts. Previously, this logic was missing, which resulted in retaining those triggers.
PR Close#51856
So far this docs extraction has pulls API info from all exported symbols in the program. This commit changes to extracting only symbols that are exported via a specified entry-point. This commit also exports the docs entities through the compiler-cli `index.ts`.
PR Close#51828
This commit refactors the loadChildren callback execution of the router config loader
into a function that can be used with SSR for the purposes of route extraction.
PR Close#51818
Certain tools in g3 which dynamically bootstrap a component (e.g., custom routers) simply swallow the exception coming from bootstrapping the component and show an empty outlet. Such cases are very difficult to debug as the dev has no clue why the component was not rendered. As bad as this pattern is, fixing all such tools for a better error handling is beyond the scope of our effort. Instead, in this change we print the error messages coming from calculating component dependencies (part of component rendering) to the console for a better visibility into the error. This change only affects local compilation where the component dependencies are calculated in runtime. This change can potentially shed light into many failures of local compilation in g3.
PR Close#51824
Standalone component need to include the imported NgModules as part of their dependencies in order to be able to use the injection tokens coming from these NgModules. To do so, in this change the imported NgModules are included in the standalone component compilation scope.
PR Close#51819
Currently the compiler in local mode assumes that the standalone component imports are array expressions. This is not always true as they can be const variables as well. This change allow non-array expressions for standalone component imports field and passes that expression to the downstream tools such as deps tracker to compute the component's deps in runtime.
PR Close#51819
Current implementation assumes that NgModule imports/exports fields are always arrays and thus it concats them for the injector definition. But this is not always the case and imports/exports could be non-arrays such as const variable. Such pattern happens in g3 and so must be addressed.
PR Close#51819
Adds support for template type checking of the `track` expression of a `for` loop block. Tracking expressions are treated as any other expression for type checking, however we have some special validation that doesn't allow them to access template variables and local references.
PR Close#51690
Adds support for template type checking inside `for` blocks. It is implemented by generating a JS `for...of` statement inside the TCB. The various loop variables (e.g. `$index`) are implemented by declaring a local number variable.
PR Close#51690
Adds support for template type checking inside `if` blocks. It is implemented by generating a JS `if` statement inside the TCB which allows us to do type narrowing of the expression. The `as` parameter is implemented by declaring a variable inside the `if` statement.
PR Close#51690
Adds support for template type checking inside `switch` blocks. It is implemented by generating a JS `switch` statement inside the TCB which allows us to do type narrowing of the expression.
PR Close#51690
The browserUrlTree is only used to support the onSameUrlNavigation: 'ignore' logic. We can achieve this functionality without having this state tracked inside the Router. Instead, we can re-examine what ignore means: We don't want to rerun the matching logic, guards, or resolvers when we already know that nothing is changing.
Outside of the "navigated", there are two things that constitute a "change":
1. The browser URL might change. Because of skipLocationChange, the browser URL might not always match the internal state of the Router (we can navigate to a path but skip updating the browser URL). If we're navigating to a place that would change the browser URL, we should process the navigation. Theoretically, all we need to really do is update the browser URL instead of processing the whole navigation w/ guards, redirects, and resolvers. But this doesn't matter that much because the default value for runGuardsAndResolvers will skip all of this anyways.
2. The internal state of the Router might change. That is, we're navigating to a new path and may or may not be updating the updating the browser URL.
If either of the above are true, we process the navigation. If both are false, we aren't changing anything so we can safely ignore the navigation request (as long as onSameUrlNavigation === 'ignore').
Why is this change important?
* Simplification of Router internals. The Router has a lot of special case handling and one-offs to handle a limited set of scenarios. Removing these when possible makes the code easier to follow
PR Close#48065
Adds a utility to the `BoundTarget` that helps with resolving which element a deferred block is pointing to. We need a separate method for this, because deferred blocks have some special logic for where the trigger can be located.
PR Close#51816
When the `TargetBinder` was written, the only embedded-view-based nodes were templates, but now we have `{#if}`, `{#switch}` and `{#defer}` which have similar semantics. These changes rework the binder to account for the new nodes.
PR Close#51816
Content project allows the content to specify its own selector for matching against content projection slots, using the `ngProjectAs` special attribute. We can now treat this attribue specially, and generate the appropriate flag in the consts array, followed by the parsed CSS selector.
PR Close#51544
Supporting content projection requires us to emit three new kinds of output:
1. An `ngContentSelectors` field on the component metadata, which points to an array in the constant pool with all of the `select` attributes from `<ng-content>` elements.
2. One `projectionDef` instruction at the beginning of each root view template function for a component. That `projectionDef` points to a constant pool expression, which contains *parsed* selectors for all `<ng-content>` elements in the root's entire view tree.
3. A `projection` instruction for each `<ng-content>` slot in the view tree. These each get a data slot, a monotonically increasing "content slot", and a pointer to the tag's attributes in the component const array.
We support the first two features entirely within a new compilation phase.
The third feature, collection of processed attributes, is a bit trickier. We now treat `<ng-content>` tags as element-like ops, and use the normal attribute ingestion pipeline to process any attributes, and assign the appropriate `ConstIndex`.
**Note**: We also split up a number of the tests into two expectations files, one for the view functions, and one for other const listerals from the constant pool. This is because `TemplateDefinitionBuilder` emits the literals in a quirky order (mixed in with the view functions) due to how it lazily generates view functions. Our eager ordering is totally different, but by splitting the expectations, we can still share the same tests with `TemplateDefinitionBuilder`.
PR Close#51544
The new built-in control flow design includes calls to the `template` instruction with fewer arguments. This was previously handled implicitly, but it's more extensible to add an explicit flag to the template op to handle this case.
PR Close#51544
The `malformedUriErrorHandler` is used as a recovery mechanism for when the `UrlSerializer`
throws an error when parsing a URL string. If custom error handling is
desired for this, it should instead be done inside the
`UrlSerializer.parse` method itself. There's no reason to have an entire
feature option built around what can otherwise just be `try...catch`.
BREAKING CHANGE: `malformedUriErrorHandler` is no longer available in
the `RouterModule.forRoot` options. URL parsing errors should instead be
handled in the `UrlSerializer.parse` method.
PR Close#51745
Currently deps tracker includes the exported scope of the exported NgModule only in the exported scope of that NgModule. This is in agreement with what AoT does today. But JIT diverges from this behavior by including these exported scopes into the compilation scope as well. Since deps tracker is going to be used for both AoT (local compilation mode) and JIT, the question might be which behavior the deps tracker should follow? Today it follows the AoT one, but it breaks some tests in Google which seem to depend on this behavior of JIT. So it is better to migrate deps tracker to what JIT does. This leads to a wider compilation scope in local compilation compared to full compilations, but it won't break any existing thing.
PR Close#51791
This change contains runtime logic needed to flatten the NgModule bootstrap field in local compilation mode. While it is quite odd to pass a "nested" array as NgModule bootstrap, it is still required to support this case in local compilation mode since it is supported in full compilation mode.
PR Close#51767
Today in local compilation mode the NgModule bootstrap definition is moved as it is into the runtime `ɵɵdefineNgModule`. This runtime was initially made for AoT full compilation mode and assumes that the bootstrap info is already flattened and resolved. This is not the case in local compilation where the bootstrap is the raw expression coming from the NgModule decorator and can be a nested array. To get around this problem we move the bootstrap along with other scope info (e.g., declarations, imports, exports) to the runtime`ɵɵsetNgModuleScope` to be further analyzed and flattened in runtime.
PR Close#51767
This change flattens the imports info on standalone component decorators in runtime dev mode by adding flattening logic to the deps tracker. Such flattening has no effect in AoT full compilation mode since these arrays are already resolved and flattened by AoT static analysis, but in local compilation mode it is needed since the raw array as appears on the component decorator will be passed to the deps tracker, and so it needs to be flattened.
This change does not affect prod runtime since deps tracker is only used in dev mode.
PR Close#51767
This change flattens the imports/exports/declarations info on ngModule decorators in runtime dev mode by adding flattening logic to the runtime `ɵɵsetNgModuleScope`. Such flattening has no effect in AoT full compilation mode since these arrays are already resolved and flattened by AoT static analysis, but in local compilation mode it is needed since the raw array as appears on the NgModule decorator will be passed to the runtime `ɵɵsetNgModuleScope`, and so it needs to be flattened.
This change has to effect on prod runtime as `ɵɵsetNgModuleScope` is not used in prod.
PR Close#51767
Currently when ESBuild bundles an application importing from
`@angular/core`, the signals library will be discovered during
export analysis. ESBuild will come across the constants for the reactive
signal graph- and end up considering some of these as side-effects given
the pattern of using a spread assignment for extending from e.g.
`REACTIVE_NODE` (a similar issue may occur if we e.g. extend from the
computed reactive node).
See more details on the issue: https://github.com/evanw/esbuild/issues/3392
Even though, ESBuild preserves these constants now, and all of its
dependencies— Terser will consider these as side-effect free and
eliminate these constants. This may require multiple passes though, and
might not be sufficient, depending on the chain of reactive node
extensions. E.g. in the signals branch we noticed some constants
unnecessarily being preserved.
PR Close#51809
Based on top of #51717
This commit adds extraction for enums, pipes, and NgModules. It also adds a couple of tests for JsDoc extraction that weren't covered in the previous commit.
PR Close#51733
Based on top of #51713
This commit adds docs extraction for information provided in JsDoc comments, including descriptions and Jsdoc tags.
PR Close#51733
Based on top of #51697
Adds extraction for accessors (getters/setters), rest params, and resolved type info for everything so far. This also refactors function extraction into a new class and splits tests for common class info and directive info into separate files.
PR Close#51733
Based on top of #51685
This expands on the extraction with information for directives, including inputs and outputs. As part of this change, I've refactored the extraction code related to class and to directives into their own extractor classes to more cleanly separate extraction logic based on type of statement.
PR Close#51733
Based on top of #51682
This expands on the skeleton previously added to extract docs info for classes, including properties, methods, and method parameters. Type information and Angular-specific info (e.g. inputs) will come in future PRs.
PR Close#51733
This commit adds a barebones skeleton for extracting information to be used for extracting info that can be used for API reference generation. Subsequent PRs will expand on this with increasingly real extraction. I started with @alxhub's #51615 and very slightly polished to get to this minimal commit.
PR Close#51733
This commit adds support for zone.js 0.14.0 and drops support for older versions
BREAKING CHANGE: Angular now required `zone.js` version `~0.14.0`
PR Close#51774
Another try at deflaking the tests on Windows. I'm trying a couple of fixes here:
1. I noticed that it's usually the indexer tests that fail during flaky runs. These tests also happen to be the only ones that don't pass in the `files` argument of `NgtscTestEnvironment.setup`. When `files` isn't passed in, we don't hit the file path that sets up the `MockFileSystem`. With these changes I make it so that we always initialize the mock file system.
2. The missing file system error usually comes from the `absoluteFrom` call that initializes the optional `workingDir` argument. My theory is that because it's a default value for an argument, it gets called too early before everything is initialized. These changes move the `absoluteFrom` call further down until it's needed.
PR Close#51804
upgrade the warning for lazy-loaded lcp images when using NgOptimizedImage to an error
BREAKING CHANGE:
Previously when NgOptimizedImage directive detected that an LCP image is lazy-loaded, a console warning was produced. Now the directive throws an error to make it more discoverable in a console. If you receive this error, refer to this guide for additional information: https://angular.io/guide/image-directive#step-4-mark-images-as-priority
PR Close#51748
Terser does not treat `Symbol` as side-effect free- so if we end up with
a symbol export being loaded, it will result in the symbol being
retained.
We noticed this in the signals prototyping where symbols exported
from `computed` ended up appearing in symbol bundling tests.
PR Close#51776
This commit moves the destroy logic from 'effect' in the lower-level
'watch' so this implementation is shared among varius watch implementations.
PR Close#51757
Certain code patterns and tools in Google (and possibly 3P world) lead to the situation that a component is bootstrapped/rendered without its ng-module being loaded in the browser. Technically speaking this should be an anti-pattern since the ng-module could contain some runtime logic (e.g., providing something, calling some services, etc) and its not being loaded leads to unexpected behaviour. However, in many cases ng-module is an empty class and its only usage is for providing scope, and since in AoT full compilation mode we already hard-code dependencies into components so we can get away with not loading the ng-module. But in AoT local compilation mode it is not possible to get away since the component's dependencies are computed in runtime and the presence of the corresponding ng-module in the browser is needed. For this reason in this change it is forbidden to attempt to render a component without first loading its ng-module in local compilation mode and an explicit error message is created to make this situation clear. This error message can help with catching such cases when running TGP in Google.
It would be an interesting question as to whether to ban this situation in full compilation mode as well, as it is error prone and these errors are sometimes very hard to debug.
PR Close#51726
This commit removes access to deep imports and `zone-testing-bundle` and `zone-testing-node-bundle`
This commit removed access to deep and legacy `dist` imports. `zone-testing-bundle` and `zone-testing-node-bundle` are also no longer generated.
BREAKING CHANGE:
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';
```
PR Close#51752
This commit adds explicit type annotations to the reactive node prototype objects,
such that the prototypes are type-checked against the interface they are supposed
to (partially) implement. This also allows IDEs to better track usages of reactive
node properties, improving code navigation.
PR Close#51722
When a producer is no longer used, the consumer has to update its internal data structure
that keeps track of all producers. There used to be an issue where only half of the stale
producers would actually be removed from this data structure, as the intended upper bound
of the number of producers to remove would decrease with each removed producer, therefore
not reaching all producers that should be removed from the data structure.
This commit fixes the issue by truncating the arrays directly, without going through
individual `pop` operations. An assertion that would catch the inconsistent state in
the internal data structures of the signal graph has been introduced.
PR Close#51722
BREAKING CHANGE: 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
PR Close#51755
The `verifyPlaceholdersIntegrity` check in the compliance tests was basically a noop, because it was returning false inside a `forEach` callback. Fixing it revealed that it had fallen out of date, because one of the regexes it uses was incorrect. The problem is that it assumed the placeholder keys would always be string literals, however it's possible that they're identifiers. These changes resolve the issue by not looking at the keys at all since we don't do anything with them.
PR Close#51751
Adds support for passing in `@Component.styles` as a string. Also introduces a new `styleUrl` property on `@Component` for providing a single stylesheet. This is more convenient for the most common case where a component only has one stylesheet associated with it.
PR Close#51715
The code for detecting a Windows CI run from #51701 didn't work, because Bazel isolates the environment variables. These changes work around the issue by passing in a custom variable with the `--test_env` flag.
PR Close#51738
Currently internally Angular has some customized tsconfig files, because we don't align with the tsconfig of the rest of g3. These changes enable `noImplicitReturns` and `noPropertyAccessFromIndexSignature` to align better with the internal config.
PR Close#51728
Previously effects were queued as they became dirty, and this queue was
flushed at various checkpoints during the change detection cycle. The result
was that change detection _was_ the effect runner, and without executing CD,
effects would not execute. This leads a particular tradeoff:
* effects are subject to unidirectional data flow (bad for dx)
* effects don't cause a new round of CD (good/bad depending on use case)
* effects can be used to implement control flow efficiently (desirable)
This commit changes the scheduling mechanism. Effects are now scheduled via
the microtask queue. This changes the tradeoffs:
* effects are no longer limited by unidirectional data flow (easy dx)
* effects registered in the Angular zone will trigger CD after they run
(same as `Promise.resolve` really)
* the public `effect()` type of effect probably isn't a good building block
for our built-in control flow, and we'll need a new internal abstraction.
As `effect()` is in developer preview, changing the execution timing is not
considered breaking even though it may impact current users.
PR Close#51049
The View Transitions API enables easy animations when transitioning between different DOM states. This commit adds an opt-in feature to the Router which runs the component activation and deactivation logic in the document.startViewTransition callback. If the browser does not support this API, route activation and deactivation will happen synchronously.
resolves#49401
PR Close#51314
Improves the error handling story for after*Render by delegating errors to an ErrorHandler, so that one failure does not break every callback.
PR Close#51662
To further modernize and improve the performance of the i18n digest generation,
The 64-bit aspects of the process now use the native `BigInt` instead of a
custom JavaScript implementation. This removes the need for the big_integer
helper code and associated tests as the code was not used anywhere else in the
framework. Only the `BigInt` constructor, `BigInt.asUintN` function, and
`.toString` function are currently used. `BigInt` literals can unfortunately
not yet be used due to the bazel test devmode setup which compiles the TypeScript
code at an EcmaScript level that does not yet support the literals.
Browser support information:
- BigInt constructor: https://caniuse.com/mdn-javascript_builtins_bigint_bigint
- BigInt asUintN: https://caniuse.com/mdn-javascript_builtins_bigint_asuintn
- BigInt toString: https://caniuse.com/mdn-javascript_builtins_bigint_tostring
PR Close#48321
This is needed to better support native ESM modules and avoid the otherwise necessary deep imports like `zone.js/fesm2015/zone-node.js` due to disallowed directory imports.
PR Close#51652
For redirects, most of the logic between wildcard and regular redirects
is identical. Combine what can be combined there. Once that was done,
the first part of the matching for redirects looks almost identical to the regular
matching. Create helpers and combine simplify code where possible there
as well.
PR Close#51543
This commit updates the return types of the matching functions to only
return an array when more than one return value is actually possible.
PR Close#51543
Reworks the pure functions to use arrow functions with an implicit return instead of function expressions. This allows us to shave off some bytes for each pure function, because we can avoid some of the syntax.
PR Close#51668
This commit updates the logic to add `prefetch on idle` support for defer blocks. Previously, the `on idle` logic was already implemented for the main loading and rendering. This commit reuses the same logic to bring it to the prefetching mechanism.
PR Close#51629
This flag allows message event listeners to prevent callbacks from executing within the NgZone if they contain a special `__ignore_ng_zone__` flag.
This functionality is built with Angular DevTools in mind, where it prevents an infinite change detection loop in inspecting applications that have message event listeners:
CD -> Inspected app emits componentTreeDirty event to DevTools -> DevTools emits event to get new component Tree from Inspected app -> Inspected app message event listener fires -> CD
PR Close#51339
This commit removes the `urlHandlingStrategy` from the public Router's API
BREAKING CHANGE:
`urlHandlingStrategy` has been removed from the Router public API.
This should instead be configured through the provideRouter or RouterModule.forRoot APIs.
PR Close#51631
These changes build on top of #51514 to add support for advanced expressions inside the `track` parameter of `for` loop blocks. There are two different outputs that the compiler can generate:
1. If the tracking function only references the item or `$index`, the compiler generates a pure arrow function as a constant references in the `repeaterCreate` instruction.
2. If the tracking function has references to properties outside of the `for` loop block, the compiler will rewrite those references to go through `this` and generate a function declaration. The runtime will `bind` the declaration to the current component instance so that the rewritten `this` references are resolved correctly.
Advanced tracking expression come with the following limitations to ensure the best possible performance:
1. They can only reference the item, `$index` and properties directly on the component instance. This means that there'll be an error when accessing this like local template variables and references. While we could get this to work, we would have to traverse the context tree at runtime which will degrade the performance of the loop, because it's a linear time operation that is performed on each comparison. Furthermore, allowing local references would require us re-evaluate the list when any one of them has changed.
2. Pipes aren't allowed inside the tracking function.
3. Object literals and pipes used inside the tracking expression will be recreated on each invocation.
PR Close#51618
Adds an instruction that allows us to access the containing component instance directly instead of having to traverse the context tree. This will be necessary for the tracking function of `for` loop blocks.
PR Close#51618
Adds type checking for the contents of `if`, `switch` and `for` blocks.
**Note:** this is just an initial implementation to get some basic type checking working and to figure out the testing setup. We'll need special TCB structures for this syntax so that we can support type narrowing.
PR Close#51570
When `preserveWhitespaces` is enabled, `switch` blocks can end up with content inside their main block due to the indentation that is usually used for the nested cases. This was tripping up the validation that doesn't allow content inside the main block of `switch`.
These changes update the validation to ignore empty text nodes.
PR Close#51570
This commit updates the runtime implementation of defer blocks to avoid their triggering on the server. This behavior was described in the RFC (https://github.com/angular/angular/discussions/50716, see "Server Side Rendering Behavior" section): only a placeholder is rendered on the server at this moment. This commit also updates the logic to make sure that the placeholder content is hydrated after SSR.
PR Close#51530
This commit fixes a bug in the change detection algorithm that would
ignore the `OnPush`/dirty flag of a component's host when it is created
dynamically. That is, `OnPush` components that were not marked dirty but
were created as embedded views would have their host bindings and `ngDoCheck`
function always run even if they were not dirty.
BREAKING CHANGE: `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`.
PR Close#51356
This commit refactors the router internals to track state inside a separate
`StateManager`. This helps open the door to managing the state in
different, swappable providers. The current interface needed by the
Router is: `currentUrlTree`, `rawUrlTree`, `browserUrlTree`,
`routerState`, and `handleNavigationEvent` (other properties are because
some router properties are writeable when they shouldn't be). This is
a suprisingly small interface and can hopefully be made smaller in the
future (i.e. removing 1 or more of the 3 tracked of `UrlTree`s).
PR Close#48481
This commit switches the signals library from a bidirectional symmetric
dependency graph using weak references, to a bidirectional _asymmetric_
graph which uses strong references. This is made possible with a reference
counting algorithm which only tracks producer -> consumer references for
effect-like "live" consumers, preventing memory leaks.
The new algorithm should be simpler and faster than the previous
implementation as weak references are fairly slow to create and traverse.
A tradeoff is that non-live consumers must now poll their producers when
read, as they cannot rely on dirty notifications.
As part of this refactoring, the `ReactiveNode` class is replaced with an
interface instead, and methods are moved to standalone functions. This is
paired with instantiating individual signals/computeds via `Object.create`
against a prototype node which contains static or initial values. This
technique, in conjunction with the rest, greatly improves the performance
of node creation.
PR Close#51226
In preparation for adding support for phases to after*Render, which will increase the implementation size, this commit splits out the optional logic so that it can be tree-shaken and dynamically loaded.
PR Close#51541
`NGMODULE_VE_DEPENDENCY_ON_IVY_LIB` was a ViewEngine related error. This commit removes the doc page but keeps a redirection for older versions still throwing this error.
PR Close#51588
The data `Observable` is not updated unless there have been changes to
the object. The current diffing does not look at `symbol` keys of the
object but the `title` property is stored as a private `symbol`. This
commit updates the object diffing to include symbols.
fixes#51401
PR Close#51561
- Emphasized the importance of using the same InjectionToken instance for both provider and injection call.
- Added examples to illustrate correct usages to prevent NullInjectorError.
PR Close#51386
This change aligns the settings between G3 and P3 as `REMOVE_STYLES_ON_COMPONENT_DESTROY_DEFAULT` is already set to `true` internally.
BREAKING CHANGE: `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,
}]
```
PR Close#51571
This commit removes deprecated properties on the Router. These are meant
to be configured through DI and not meant to be changed during runtime.
BREAKING CHANGE: 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.
PR Close#51502
The localize package intentionally duplicates some logic from the
compiler to avoid adding a dependency. This is now an error in the
packaging rule to prevent common pitfalls/code duplication. Here it's
an explicit decision though so we mark it as such and ask for the check
to be ignored for the particular import.
PR Close#51500
The upgrade package duplicaes some of code due to relative
imports between entry-points. This caused bundlers to
inline shared functions twice in both FESM outputs.
This is an acceptable limitation and we are not changing this
because the primary entry-point is not synced into G3. It's non-trivial
to remove these cross relative imports right now because the primary
entry-point is not even built in G3 so instead we just ignore the
relative imports using a re-export file.
Note: To simplify this change, we continue using namespace exports
as exporting individual named exports for all these possible usages
is rather cumbersome and also we had existing namespace imports for
e.g. `angular1.ts`. The code of upgrade is rarely edited these days
PR Close#51500
The common packages were duplicating a little bit of code due
to relative imports between entry-points. This caused bundlers to
inline shared functions twice in both FESM outputs.i
PR Close#51500
The animations packages were duplicating a little bit of code due
to relative imports between entry-points. This caused bundlers to
inline shared functions twice in both FESM outputs.
PR Close#51500
We were collecting all ES2022 files from entry-points (including
transitive files). Those are later on combined and filtered so that
we know which files to copy over to the package. There was no
deduping here. This did not have an effect, but could be a source
of slowness in `ng_package` and also breaks validation checks which
could show same errors multiple times for the same file.
PR Close#51500
Fixes that there was code duplication between the primary entry-point,
the testing entry-point and the rxjs-interop entry-point.
This code duplication resulted in additional code size (really
neglibible here because rxjs-interop did not duplicate large parts of
core, and `testing` is not used in production).
On the other hand though, the duplication resulted in a subtle JIT
dependency tracking issue due to the `depsTracker` no longer being a
singleton. This caused test failures as in:
https://github.com/angular/angular/pull/51415.
PR Close#51500
Introduces a check into `ng_package` that will ensure that there are no
cross entry-point or cross-package relative imports that would end up
contributing to duplicate code. Not only would duplicate code result in
size increases, but also it could cause subtle hard-to-debug bugs,
especially when cross imports rely on e.g. singletons. Like for example
the deps tracker that is used in angular/core but also in
angular/core/testing.
PR Close#51500
With the new control flow and defer blocks it'll be common for several template instructions to be declare one after another. These changes add support for chaining to the `template` instruction which will allow us to save some bytes.
PR Close#51546
Adds the initial implementation to generate the instructions for the `for` loop block.
**Note:** the expressions we support in the `track` paramateter are currently limited to tracking by identity or index, or a specific property of the item. Supporting more advanced expression will require additional work that I'll do in a follow-up PR.
PR Close#51514
This commit fixes an issue where serialization of a view container fails in case it uses a component host as an anchor. This fix is similar to the fix from #51247, but for cases when we insert a component (that acts as a host for a view container) deeper in a hierarchy.
Resolves#51318.
PR Close#51456
`switch` blocks are part of the new control flow syntax. This commit adds support for processing them, and emitting the appropriate templates and conditional instructions.
PR Close#51518
This commit adds runtime implementation of a basic preloading mechanism for defer blocks. The base prefetching logic invokes a dependency loading function (generated by the compiler) when a corresponding `prefetch when` condition is triggered. The `prefetch on` triggers would be implemented in followup PRs.
We plan to explore additional prefetching techniques and will followup with more PRs later (based on the research).
PR Close#51529
Component compilation and host binding compilation previously used separate compilation emit functions. This was a bit messy, because we had to manage the relative orders of both phase lists. Indeed, there was already some inconsistency between the precise orders!
This commit refactors the emit functions to share the same phase list, and thus guarantees they will always be in the same order.
PR Close#51498
`syntheticHostListener` and `listener` have ordering dependencies. We reuse the existing ordering phase, and generalize it to also order create mode instructions.
PR Close#51498
Animation listeners on host bindings result in a special `syntheticHostListener` instruction. We can now emit this instruction.
Additionally, the naming phase for events has been slightly refactored to smoothly incorporate whether the event is from a host listener, as well as whether it is an animation listener.
PR Close#51498
For host bindings, `TemplateDefinitionBuilder` seems to use a different binding ordering, in which style bindings come after all the property bindings. We approximate that by treating `hostProperty` differently from `property` in the ordering phase.
PR Close#51498
The template pipeline is already capable of parsing and processing class and style attributes on templates. We now extend that functionality to host bindings.
The parser, for some reason, splits out class and style attributes into a `specialAttributes` field. We merge them back into the main attributes map, and allow the template pipeline to process them normally.
PR Close#51498
TemplateDefinitionBuilder only extracts host attributes if they are text attributes. For example, `[attr.foo]="'my-value'"` is not extracted despite being a string literal, because it is not a text attribute.
PR Close#51498
Host property bindings can be animation bindings, and should be ingested and emitted as such, as well as being processed by the renaming phase.
PR Close#51498
Host bindings can apply static attributes. These will be extracted to a `hostAttrs` field on the host binding function's metadata.
In order to achieve this, we add an `attributes` field to the host binding job. Then, we peform attribute exraction on host bindings. We finally populate the `attributes` field directly, instead of relying on a `consts` array.
PR Close#51498
Convert `CompilationJob` into a abstract class in order to extract common code. Separate host binding jobs and units, in order to allow for more code sharing.
PR Close#51498
Adds a new phase to resolve element placeholders in i18n messages.
This requires adding the i18n message to element ops, which means the
creation of i18n start/end ops can now be done in a separate phase
instead of during ingestion.
PR Close#51353
Creates a new `ExtractedMessageOp` which is consumed by the const
collection pahse to serialize the i18n message into the consts array.
Also adds support to the consts array for initialization statements.
PR Close#51353
Adds i18n block start & end ops, as well as a new phase to construct the
i18n message variable to be added to the consts array.
Co-authored-by: Alex Rickabaugh <alx+alxhub@alxandria.net>
Co-authored-by: Dylan Hunn <dylhunn@gmail.com>
PR Close#51353
This commit adds an initial implementation of the `{#defer}` block runtime, which supports the `when` conditions. More conditions and basic prefetching support will be added in followup PRs.
PR Close#51347
Extends the compiler to add support for generating arrow functions in the output AST. This will be required for the `for` control flow block and we can potentially leverage it in other places to reduces the amount of generated code.
PR Close#51436
Rather than the navigation transitions managing Router state, this
commit updates the Router to manage its own state based on ongoing
transition events. In the future, this can be abstracted even further to
have a totally separate class that manages the Router state. This would
allow the potential for swapping state manager implementations rather
than having to implement all types of state management in a single place.
One finding during tests was that unexpected errors thrown by the state management code moved
to the Router here will no longer be caught by the transition pipe's `catchError`.
This only includes calls to the following public Api methods:
* `go`, `replaceState`, `historyGo`, `isCurrentPathEqualTo` on `Location`
* `UrlSerializer.serialize`
* `UrlHandlingStrategy.merge`.
None of these methods should throw if the router is expected to function.
These might throw when tests include incomplete mocks, which is not
supported, or in cases where the actual browser methods like
`replaceState` would throw. This will already result in unexpected/unsupported
behavior. The failure case here is now arguably better - the navigation
itself still completes but the state update (either updating Router
internal state or updating the browser URL) fails separately and is
unhandled.
PR Close#48427
Setting the page ID is currently broken for the first page because the
helper method's second parameter is optional, which allowed the initally
`undefined` page ID to be used again when the router performs its
initial navigation.
fixes#50983
PR Close#51441
Updates the control flow tests to use the compiler instead of manually-written instructions. Also adds a couple of tests that I was using along the way to verify that things work as expected.
PR Close#51380
Adds the logic to generate the instructions for `if` blocks. There are two primary use cases we need to account for:
A conditional that doesn't use the `as` parameter of the `if` block. To support it we generate a nested ternary expression that evaluates to the index of the template whose condition is truthy. If the block doesn't have an `else` branch, we pass in a special `-1` value which means that no view will be rendered.
Example with an `else`:
```ts
// {#if expr}
// ...
// {:else if otherExpr} ...
// {:else} ...
// {/if}
if (rf & 1) {
ɵɵtemplate(0, App_Conditional_0_Template, 0, 0);
ɵɵtemplate(1, App_Conditional_1_Template, 0, 0);
ɵɵtemplate(2, App_Conditional_2_Template, 0, 0);
}
if (rf & 2) {
ɵɵconditional(0, ctx.expr ? 0 : ctx.otherExpr ? 1 : 2);
}
```
Example without an `else`:
```ts
// {#if expr}
// ...
// {:else if otherExpr} ...
// {/if}
if (rf & 1) {
ɵɵtemplate(0, App_Conditional_0_Template, 0, 0);
ɵɵtemplate(1, App_Conditional_1_Template, 0, 0);
}
if (rf & 2) {
ɵɵconditional(0, ctx.expr ? 0 : ctx.otherExpr ? 1 : -1);
}
```
If a conditional captures it's value in an alias (e.g. `{#if expr; as foo}`) we need to assign the value to a temporary variable before passing it along to `conditional`.
```ts
// {#if expr; as alias}...{/if}
if (rf & 1) {
ɵɵtemplate(0, App_Conditional_0_Template, 1, 0);
}
if (rf & 2) {
let App_contFlowTmp;
ɵɵconditional(0, (App_contFlowTmp = ctx.expr) ? 0 : -1, App_contFlowTmp);
}
```
PR Close#51380
Angular 16.1 introduced the input transform feature, requiring the partial compilation output to be extended
with a reference to the input transform function. This has resulted in a subtle breaking change, where older
versions of the Angular linker can no longer consume libraries that have started to use this feature.
We do try to support using a 16.1 library from an Angular 16.0 application, but if a library actually
adopts a new feature then this is no longer possible. In such cases, it is desirable to report a message
telling the user that their version of the Angular compiler is too old, as determined by the `"minVersion"`
property that is present in each partial declaration. This version would still indicate that the declaration
required at least Angular 14.0 to be compiled, but this is not accurate once input transforms are being
used. Consequently, this error would not be reported, causing a less informative error once the input transform
was being observed.
Fixes#51411
PR Close#51413
In local compilation mode it is not possible to use an imported string for component's template or styles as it cannot be resolved statically in compile time. There are some such use cases in g3 and potentially devs might incorporate such pattern. At the moment such pattern will cause the local compilation fail with generic error messages (e.g., so and so at position 1 is not a reference, etc). This change makes specific error messages with helpful hints for such cases. These new error messages can help devs to quickly resolve the issue as well as make it possible to identify existing issues in g3.
PR Close#51338
The runtime `ɵɵsetNgModuleScope` is modified to accept raw scope info as passed to it in local compilation mode. The runtime further registers the ng-module in the deps tracker. Then the runtime `ɵɵgetComponentDepsFactory` is implemented to use the deps tracker to get the component dependencies which leads to a valid and working Angular code.
PR Close#51377
The standalone components import as passed to the deps tracker will be the raw import, i.e., it is either a Type or a module with providers or a factory of these. So we use the existing type `RawScopeInfoFromDecorator` for these imports instead of the current one to be more realistic.
PR Close#51377
The current logic requires that standalone component always provide an array of raw imports. But such array could be dropped from the downstream tools if the component has no imports. So it is more natural to allow undefined raw imports for standalone components and treat it as empty array.
PR Close#51377
This refactoring is needed for next commit not to produce circular deps as we start using the `depsTracker` inside `ɵɵsetNgModuleScope`. The runtime `ɵɵsetComponentScope` is not needed to move but it moved to the new file just for consistency sake.
PR Close#51377
`tsickle` is not used in any code paths in 3P and we can remove
this complexity. The `tsickle` npm package has not been released
in a while and we are risking breakages with e.g. future TypeScript
versions.
Note that the `ng_module` rule was updated to not emit through
tsickle at all. The tsickle in 1P is done directly by `tsc_wrapped`
and our code path in `compiler-cli` is not needed at all.
PR Close#50602
This commit updates TestBed to wait for async component metadata resolution before compiling components.
Async metadata is added by the compiler in case a component uses defer blocks, which contain deferrable
symbols.
PR Close#51182
This commit updates compiler logic to generate the `setClassMetadataAsync` calls for components that used defer blocks. The `setClassMetadataAsync` function loads deferrable dependencies and invokes the `setClassMetadata` synchronously once everything is loaded. This change is needed to avoid eager references to deferrable symbols in component metadata in generated code.
PR Close#51182
Fixes that we weren't processing `when` conditions correctly which led to a compilation error when a pipe is used inside the expression.
PR Close#51368
We enabled a lint rule internally to require that multi-provided
`InjectionToken`s have a `readonly` array type, the tokens in this
PR do not follow this rule and are causing lint violations.
Fixes#51124
PR Close#51125
The runtime `ɵɵsetNgModuleScope` is modified to accept raw scope info as passed to it in local compilation mode. The runtime further registers the ng-module in the deps tracker. Then the runtime `ɵɵgetComponentDepsFactory` is implemented to use the deps tracker to get the component dependencies which leads to a valid and working Angular code.
PR Close#51309
The standalone components import as passed to the deps tracker will be the raw import, i.e., it is either a Type or a module with providers or a factory of these. So we use the existing type `RawScopeInfoFromDecorator` for these imports instead of the current one to be more realistic.
PR Close#51309
The current logic requires that standalone component always provide an array of raw imports. But such array could be dropped from the downstream tools if the component has no imports. So it is more natural to allow undefined raw imports for standalone components and treat it as empty array.
PR Close#51309
This refactoring is needed for next commit not to produce circular deps as we start using the `depsTracker` inside `ɵɵsetNgModuleScope`. The runtime `ɵɵsetComponentScope` is not needed to move but it moved to the new file just for consistency sake.
PR Close#51309
This change simply flip the flag which enables using the deps tracker in JIT compilation (the logic is already implemented in a previous PR). Some tests which depend on the old JIT implementation (e.g., patching the scope info into the type) are modified accordingly.
PR Close#51293
Using verification helpers such as `isComponent` may trigger JIT compilation. Now in some tests such compilation is made purposely to fail, and so in such cases any reference to the `depsTracker.clearScopeCacheFor` method will cause the exception to be thrown earlier than expected which results in teh test failure. Such scenario is the case in the next commit when we enable using the deps tracker in the jit compilation. Note that such failure is only for the framework tests and is a very edge case. The tests in downstream apps will not lead to such scenario of failure at all.
PR Close#51293
Empty path routes are effectively 'passthrough' routes that do not
appear in the URL. When these exist in the route tree, we do not want to
apply named outlet commands to that tree location. Instead, we skip past
this location in the tree, effectively squashing/removing this
passthrough route from the tree.
fixes#50356
PR Close#51292
An empty runtime is added just to make the local compiled angular files valid to run. A separate PR will implement the runtime in the right way using the deps tracker.
PR Close#51089
A factory generator function called "i0.ɵɵgetComponentDepsFactory" is added to generate a factory function for component dependencies. This function will use the deps tracker to calculate the component's dependencies.
For standalone components the component imports (if exists) will be passed to this function. Alternatively this function can grab the imports directly from the decorate, but such extraaction needs some runtime logic which overlapps with what the trait compiler is doing. So better to pass the imports directly to this function at compile time.
PR Close#51089
In local mode the compiler combines the raw imports and exports and pass them to the injector definition as the imports field. It is not possible to filter out ng modules at compile time though, and it will be done in runtime.
Unit tests also added, and since that was the first time adding tests for local compilation some tweaks had to be made in order to disable diagnostics in local compilation mode in order for tests to run (such situation is also the case in real compilation where we ignore all teh diagnostics basically)
PR Close#51089
A minor error is present within the documentation. Specifically, in the documentation for the CanActivateFn function, a reference is made to the CanActivateChildFn function. However, it appears that the CanActivateChildFn function is not utilized or referenced elsewhere in the documentation of CanActivateFn.
PR Close#51283
The current change is done behind a flag which is set to false. So no change in code path took place here. In a followup PR the flag is changed to true which will make the actual change.
PR Close#51122
For cases when a root component also acts as an anchor node for a ViewContainerRef (for example, when ViewContainerRef is injected in a root component), there is a need to serialize information about the component itself, as well as an LContainer that represents this ViewContainerRef. Effectively, we need to serialize 2 pieces of info: (1) hydration info for the root component itself and (2) hydration info for the ViewContainerRef instance (an LContainer). Each piece of information is included into the hydration data (in the TransferState object) separately, thus we end up with 2 ids. Since we only have 1 root element, we encode both bits of info into a single string: ids are separated by the `|` char (e.g. `10|25`, where `10` is the ngh for a component view and 25 is the `ngh` for a root view which holds LContainer).
Previously, we were only including component-related information, thus all the views in the view container remained dehydrated and duplicated (client-rendered from scratch) on the client.
Resolves#51157.
PR Close#51247
This refactoring adds utility functions to add / remove LView from LContainer.
Those utils are preparation for the control flow and defer work.
Existing code was refactored to use the new utility functions and avoid
any code duplication.
PR Close#51191
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).
fixes#51160
PR Close#51170
This commit updates the logic to drop regular imports when all symbols that it brings can be defer-loaded.
The change ensures that there is no mix of regular and dynamic imports present in a source file.
PR Close#51171
Fixes that if a directive/pipe is used after a nested `defer` block, we weren't tracking it as lazy anymore. This was due to the fact that we were resetting the `isInDeferBlock` to false every time instead of the previous value.
PR Close#51262
Adds validations for the following invalid deferred block structures:
* Duplicated triggers.
* Multiple `minimum` parameters on `placeholder` and `loading` blocks.
* Multiple `after` parameters on `loading` blocks.
PR Close#51262
Stores the `deferred` block triggers as a map instead of an array, because triggers can't be duplicated and because having to search through an array will be inconvenient later on.
I've also added a `DeferredBlock.visitAll` method to deduplicate the logic from the various visitor implementations.
PR Close#51262
Adds a new phase that converts previously extracted
ExtractedAttributeOps representing a style attribute into individual
ExtractedAttributeOps representing each of the style properties set in
the style attribute.
PR Close#51258
Refactors ElementAttributes to be an implementation detail of the const
collection phase, rather than an object that is added to all ElementOps.
PR Close#51258
Refactors the attribute extraction phase to create a new temporary op
called `ExtractedAttributeOp` rather than directly populating
`ElementAttributes`.
PR Close#51258
Updates the template pipeline's temporary variables phase to reuse
temporary variables within an expression. The algorithm implemented here
reuses variables more aggressively than TemplateDefinitionBuilder. This
change in behavior is acceptable, as it is unlikely to cause any
failures, and implementing the exact behavior observed in
TemplateDefinitionBuilder would be difficult.
PR Close#51100
In some cases it is not feasible to have the template pipeline produce
the exact same compiled output as the TemplateDefinitionBuilder. This
commit adds support to the testing infrastructure to have different
expected output files for each. This option should be used sparingly, as
we want the output to be as close as possible.
PR Close#51100
Updates the TemplateDefinitionBuilder class to generate the `defer` instruction for `{#defer}` blocks. Also generates dependency function that would be invoked at runtime (with dynamic imports inside).
PR Close#51162
This commit brings the logic to calculate teh set of dependencies for each defer block. For each dependency we also identify whether it can be defer-loaded or not.
PR Close#51162
This is a minor refactoring of the ComponentHandler class logic to extract helper function and types to the top level for simplicity and reuse across other functions of the class.
PR Close#51162
This commit updates the logic of the TemplateBinder and DirectiveBinder classes to recognize defer blocks. The logic is updated to prevent Directive and Pipe matching inside the defer block. Instead, the scope for those blocks would be calculated separately.
PR Close#51162
This commit adds a new class called `DeferredSymbolTracker` to keep track of all usages of a particular symbol within a source file and allow to detect whether a symbol can be defer loaded (i.e. if there are any references to a symbol).
PR Close#51162
Creates unit tests for the following APIs
- setInjectorProfiler
- getInjectorProviders
- getInjectorResolutionPath
- getDependenciesFromInjectable
Modifies existing tests in
- packages/examples/core/di/ts/injector_spec.ts
- packages/core/test/render3/jit/declare_injectable_spec.ts
- packages/core/test/render3/jit/declare_factory_spec.ts
because they setup framework injector context manually.
Exports setInjectorProfilerContext in packages/core/src/core_private_export.ts in order for use
in the the modified tests above.
PR Close#48639
This commit introduces 3 new APIs.
getDependenciesFromInstantiation:
- Given an injector and a token that was instantiated by that injector, discover all of the things were injected in the instance of that token
- This API is meant to enable recursive inspection of dependencies. Dependencies returned by this API include which injector they were providedIn, which enables the continous use of getDependenciesFromInstantiation to determine the dependencies of dependencies
getInjectorProviders:
- Given an injector, discover all of the providers that were configured in that injector.
- This API returns information on the configured providers of an injector, including the import path that leads to the container that the provider originated from (NgModule or standalone directive). This enables fine grained inspection to determine where a specific provider comes from.
getInjectorParent:
- Given an injector, discover the parent of that injector.
- This function is meant to be used recursively to discover the entire resolution path from a starting injector to the NullInjector.
These APIs were designed to be used together. For example, getInjectorParent can be used to discover the structure of an injector hierarchy. Once that's done, getInjectorProviders can be used to determine the providers of each injector in that hierarchy.
Another example: getDependenciesFromInstantiation can be used to discover the dependencies of a specific injector constructed instance. From there, we can use getInjectorParent to discover the injector resolution path and map each dependency to a path from the starting injector to the injector that it was provided in.
PR Close#48639
walkProviderTree and processInjectorTypesWithProviders both perform some generic traversal logic of the import graph of an input NgModule or Standalone component. Currently, these functions pass around a `providersOut` array that is used to collect providers at each step of the traversal.
This PR converts those functions to accept visitor callbacks instead of the `providersOut` array. This is done to make the traversal logic of these functions reusable, while leaving it up to the visitor to determine the logic that fires for each visited node.
This refactor would allow us to reuse `walkProviderTree` for injector debugging APIs that could support some cool features in DevTools, like tracing the injector resolution path of an injected property on a component instance all the way up to the specific imported module/standalone component.
PR Close#48639
Currently, understanding dependency injection in Angular requires a lot of context and has been sited in our surveys as one of the largest points of confusion that our users have with the framework. This commit is the beginning of our approach to make debugging dependency injection in Angular easier.
This commit introduces injector profiler callbacks in parts of the framework to emit injector events. It also introduces a default handler for these events. This default handler parses the stream of events to construct some data structures that will support new injector debug APIs.
We have implemented a similar pattern in the past to minimize overhead. There is also the possiblity of making the internal `setInjectorProfiler` function a public debug API in the future, so that users can implement their own handlers to debug DI events. Lastly DI in Angular maps nicely to a stream of events.
For production applications there is no runtime overhead. For applications in dev mode there is some additional overhead from the default profiler handling injector events and holding debug data in memory.
For production applications, dead code elimination should strip all of the code used by this PR.
PR Close#48639
Adds the `ɵsetEnabledBlockTypes` utility that can be used when writing JIT tests using `defer` blocks. Intended usage:
```ts
import {ɵsetEnabledBlockTypes as setEnabledBlockTypes} from '@angular/compiler/src/jit_compiler_facade';
describe('deferred tests', () => {
beforeEach(() => setEnabledBlockTypes(['defer']));
afterEach(() => setEnabledBlockTypes([]));
it('should work', () => {
// test goes here
});
});
```
PR Close#51183
Change sourceSpan for Comment nodes to cover the whole comment
instead of just the opening token.
The primary motivation for this is the interaction between ESLint and
`@angular-eslint`. ESLint can detect unused `eslint-disable` directives
in comments and automatically remove them when running with `--fix`.
This is based on ranges computed from AST spans, and as a result
does not work inside Angular templates - right now all comments
claim to be 4 characters long so only the opening `<!--` is removed.
PR Close#50855
This commit updates the Injector.create function to accept the `Provider` type in addition to the `StaticProvider` type. This should make it easier to work with the Injector.create function and have less type casts if you have a list of `Provider`s available.
PR Close#49587
Host property bindings beginning with `attr.` should have `Attribute` binding kind, and result in an `attribute` instruction.
This should really be handled in the parser in the future.
PR Close#51188
Templates may contain special `svg` and `math` elements, as well as logical descendants of those elements (e.g. `svg` may contain `g`). These will be parsed with a special colon-prefixed *namespace identifier*, such as `:svg:svg`, or `:svg:g`, or `:math:infinity`.
The template pipeline now considers these namespace prefixes, and stores them specially on the Element and Template data structures, ultimately generating the appropriate runtime instructions to change namespaces when needed.
PR Close#51188
When a container-like element has the `ngNonBindable` special attribute, bindings are disabled for it and its descendants. This requires emitting the `disableBindings` and `enableBindings` instructions when nested content exists.
PR Close#51188
Previously we refactored the compilation to use the concepts of "jobs" and "units." However, old type aliases were provided to avoid changing all call-sites in bulk. Here, those aliases are deleted, and call sited updated:
1. `ComponentCompilation` becomes `ComponentCompilationJob`.
2. `ViewCompilation` becomes `ViewCompilationUnit`.
PR Close#50899
Interestingly, host bindings are parsed quite differently from template functions. For example, bindings such as `[style.foo]: 3px` would be parsed into a value, unit, and type when bound to a template, but will not be parsed as such when used in a host binding.
In this commit, we remedy this shortcoming by adding support for bindings in host binding functions to the template pipeline. In particular, we create a phase to process these bindings, and transform them into the correct output binding kind.
Additionally, we fix some other minor bugs and omissions.
Finally, we enable compilation of host bindings with the template pipeline, which requires us to turn off a number of failing tests.
PR Close#50899
Alter the compiler code to ingest and process host bindings, using the newly updated compilation passes.
This is currently switched off in the outer compiler layer, but lays the foundation for actually generating the host binding functions using template pipeline.
PR Close#50899
Today, bindings on templates are ingested in highly distinct ways, depending on the parsed binding kind, as well as special cases for `style` and `class`. This makes it very difficult to also ingest them for host bindings without duplicating all this subtle logic.
To solve this, we introduce two major related refactors:
1. Move all processing of attributes into phases. This dramatically reduces the amount of code in `ingest.ts`, which is now only responsible for ingesting an abstract `BindingOp`. The later phases replace each `BindingOp` with more specific ops for each binding kind. For example, `binding_specialization.ts` transforms each abstract `BindingOp` into a concrete `PropertyOp`, `AttributeOp`, etc. Likewise, `style_binding_specialization.ts` performs special-case transformations for style and class bindings. This approach has the additional advantage of separating the creation of attribute and property bindings from other special cases.
2. Eliminate all interpolation ops. Instead, allow the expression inside of an op to be of a new `Interpolation` type. The reify code will then emit the appropriate instruction variant (interpolated or unary).
3. Separate some concerns that were previously mixed in, such as empty bindings and listeners on templates.
These refactors cause major downstream code changes across the system, especially to attribute extraction and variable counting.
PR Close#50899
Modify most of the remaining necessary phases to accept generic `CompilationJobs`. This includes `phasePureLiteralStructures`, `phaseNullishCoalescing`, `phaseExpandSafeReads`, `phaseVariableOptimization`, `phaseNaming`, and `phasePureFunctionExtraction`.
PR Close#50899
Refactor `compilation.ts` by introducing two new concepts:
1. A compilation unit, which has create and update ops. Compilations of individual views are compilation units, as are individual host bindings.
2. Aa compilation job, which has several compilation units. For example, a whole component is a compilation job, because it can have many view compilation units. A host binding compilation is a job in addition to a unit, because each host binding unit is always a singleton.
Then, we begin modifying phases to accept general compilation jobs instead of component compilations specifically, which will allow us to run them on host bindings. In particular, we update the following phases: `phaseReify`, and `phaseChaining`.
PR Close#50899
Add a compatibility setting to the component compilation. Accordingly, remove all the custom compatibility flags passed to each phase, and use the main setting instead.
PR Close#50899
Begin producing source maps for the template pipeline, for a couple fundamental kinds of instructions, including elements, templates, properties, text, and interpolations.
PR Close#50899
Previously, `$event` was interpreted as a lexical read on the enclosing context. Now, a new pass converts such reads into simple output AST reads of `$event`, so they are not processed by the context resolution or naming phases. Additionally, the same pass sets a field on the enclosing listener op, so that the reify phase does not have to search for reads of `$event`.
PR Close#50899
`$any(...)` casts should be dropped, except when they are an explicit call on `this.$any(...)`. Fix a bug in which we were transforming `ThisReceiver` into an implicit receiver.
PR Close#50899
Fixes that using braces in the block parameters would result in incorrect tokens being produced. Currently we don't have any blocks that allow object literal parameters, but it may come up in the future.
PR Close#51143
Accessing the `Zone` variable without checking if it's defined or not
leads to an error "Zone is not defined" if zone.js is not imported (nooped).
This commit adds an additional check before getting the current zone where
the `doRequest` is being called.
PR Close#51119
This commit updates the output AST (and related visitors) to support dynamic imports. This functionality will be used later to generate the output for defer blocks.
PR Close#51087
This includes implementation of methods getComponentDependencies and registerNgModule.
In order to correlate ng-modules with their declarations it is required to use the method registerNgModule to regiater the ng-module. However, the actual correlation will happen lazily once getComponentDependencies method is called. This lazy behaviour also allows for forward refs to be resolved.
The method getComponentDependencies will be used in local compilation mode to compute the rendering component deps in runtime.
PR Close#50980
The implementation is more or less follows the pattern in render3/jit/module.ts#transitiveScopesFor helper. A few additional helper functions also added to jit utils.
PR Close#50980
Adds the logic to create `defer`-specific AST nodes from the generic HTML `BlockGroup` and `Block`. The logic for parsing the triggers will be in the next commit.
PR Close#51050
Adds attribute and attribute interpolation bindings to the ordering
algorithm that decides the order of various property, style, and
attribute ops.
PR Close#50805
Ensures that all property and attribute ops are ordered consistently
regardless of the order they appear in the template. This ensures
correct precedence (e.g. `[style.color]="'#000'"` awlays wins out over
`[style]="{color: '#fff'}"`)
PR Close#50805
Single argument class and style interpolations (e.g.
`style.color="{{color}"`) should be converted to standard class and
property operations with no interpolation (e.g. `[style.color]="color")
PR Close#50805
Having the request run in the angular zone has the consequence of triggering the CD for every read of the response stream.
This commit wraps the whole `doRequest` to run outside angular with every callback on the observer being called inside the zone.
Fixes#50979.
PR Close#50981
Currently, a listener on an element containing a dash, will result in
runtime errors because the function name will be generated using a dash.
e.g.
```
function MyApp_Template_some-comp_bla_0() {}
```
throwing with a syntax error due to the dash. We fix this by re-using
the sanitize identifier function from the current template definition
builder.
PR Close#50946
A minimal change to full compilation mode to work in local mode. Now compiler can compile components without ctor injections, though the compiled code missing the following items which will be added in subsequent commits:
* it does not produce `dependencies` for component definition.
* it fails if component has ctor injection
PR Close#50545
The compiler will only include analysis and compile phases in local mode. Also a new `compileLocal` method is added to the annotation handler for local compilation.
This commit makes no change to the full/partial compilation code paths.
PR Close#50545
⚠️Disclaimer⚠️ this PR implements syntax that is still in an open RFC. It will be adjusted once the RFC is closed.
These changes implement the `BlockGroup` and `Block` AST nodes that will then be used to generate instructions based on the new syntax. A `BlockGroup` is a container for `Block` instances. The first block of a block is always implicit and required while any subsequent blocks are optional.
PR Close#50953
An internal compiler option named `supportJitMode` is now available for use by the Angular CLI.
This option currently controls the emit of NgModule selector scope information. This emitted
information is only needed in AOT mode when an application also uses JIT. However, AOT mode
combined with JIT mode is not currently supported nor will work in the Angular CLI. With
the Angular CLI, JIT mode is only supported if the entire application is built in JIT mode.
Without this option, the CLI needs to manually perform a code transform to remove the information
and also replicate TypeScript's import eliding. This is can be a complicated operation and must
be continually kept up to date with any changes to both the Angular compiler and TypeScript.
The introduction of this new option alleviates these concerns while also removing several build
time actions that would otherwise need to be performed on every application build.
PR Close#51007
Removing the renderer from cache is not needed when `REMOVE_STYLES_ON_COMPONENT_DESTROY` is enabled. This change retains the behaviour of keeping the renderer cached for the entire lifecycle of the application the same way it is done when `REMOVE_STYLES_ON_COMPONENT_DESTROY` is disabled.
This seems to have be causing an increase in scripting. See: http://b/290666638
PR Close#51005
This commit fixes a memory leak.
`_namespaceLookup` was cleared before the call to `processLeaveNode()` which was using the lookup.
Without that lookup `clearElementCache()` wasn't called thus keeping a reference to the element.
Fixes#24197 & #50533
PR Close#50929
⚠️Disclaimer⚠️ this PR implements syntax that is still in an open RFC. It will be adjusted once the RFC is closed.
These changes extend the lexer to recognize the concepts of a block group (`{#foo paramA; paramB}{/foo}`) and a block (`{:foo paramA; paramB;}`) which will be useful later on for the control flow and defer proposals. Block groups can be used anywhere and require a closing tag while block can only be used inside of a block.
The idea is that in the next PRs the markup AST will be expanded to have some more specialized node like `ConditionalBlock` or `DeferBlock` which will then be turned into instructions.
PR Close#50895
This commit adds the ability to generate attribute instructions as a result of property bindings such as `[attr.foo]='bar'` or `attr.foo='{{bar}}'`. "Singleton" interpolations, such as the previous example, will also be transformed into a simple `attribute` instruction.
PR Close#50818
Prior to this change, we've used `componentDef.id` as a key in a Map that acts as a cache to avoid re-creating injector instances for standalone components. In v16, the logic that generates the id has changed from an auto-incremental to a generation based on metadata. If multiple components have similar metadata, their ids might overlap.
This commit updates the logic to stop using `componentDef.id` as a key and instead, use the `componentDef` itself. This would ensure that we always have a correct instance of an injector associated with a standalone component instance.
Resolves#50724.
PR Close#50954
JSDoc comments should start with 2 stars or the annotations would not be picked up by the AIO workflow.
With this fix, the internal methods are no longer visible in the doc.
PR Close#50893
JSDoc comments should start with 2 stars or the annotations would not be picked up by the AIO workflow.
With this fix, the internal methods are no longer visible in the doc.
PR Close#50893
The option 'local compile' is added for the test cases, and the locally compiled file for an input `abc.ts` is compared by default with the file `abc.local.js`. This allows to use the same input `abc.ts` for both full compilation (compared with `abc.js`) and local compilation (compared with `abc.local.js`). An example is provided in the next commit when compliance tests are added for the NgModule local compilation.
PR Close#50577
The new interface is discrete-unioned with the existing interface to cover the cases for local and global (i.e., full and partial) compilation modes.
This change of interface required some adjustmeents cross repo which explains the changes made to other files.
PR Close#50577
All attempts related to obtaining R3Reference for bootstrap, imports, exports and declarations are cut in local compilation mode.
This will allow the analysis to pass without any error diagnostics, but the result is a quite empty meta info. Next commits will add data to the meta so that the NgModule can be compiled more accurately.
PR Close#50577
In the past, we had an implementation of the "Angular 2" router that
also worked with AngularJS. Published as `@angular/router`. We continued
to expose that router implementation in G3 and some applications still
use it. Now, when upgrading, they are seeing issues where the router
throws because it cannot find a route config/ or `$canActivate` on the
controller- simply because there is no `controller` function for
downgraded components.
We can fix this and unblock the update by simply ensuring a controller
function is defined.
PR Close#50871
Previously, the template pipeline save/restore view logic only added the
save/restore operation in listeners inside embedded views. However, this
operation is also needed if local refs are accessed within a listener body.
This commit updates the logic to detect more accurately whether save/restore
is needed.
PR Close#50834
This commit updates the implementation of the `getNativeRequestAnimationFrame`
and checks whether the current code runs in the browser before retrieving
`requestAnimationFrame`. `requestAnimationFrame` is not available when the code
is running in the Node.js environment. We have to fallback to `setTimeout` for
delaying the change detection.
PR Close#50820
The expression `a()?.b` should expand into `(tmp = a()) === null ? null : tmp.b`, in order to avoid calling the function `a()` twice.
This commit modifies the null-safe-expansion algorithm to emit temporary assignments, and provides the reification code to actually generate the declarations, assignments, and reads.
Note also that, with our bottom-up algorithm, there are some tricky cases when a function call exists inside an indexed access, such as `f1()?.[f2()?.a]?.b`. We add some special logic to avoid generating a double-assignment to the temporary storing the result of `f2()`.
Finally, there are opportunities to reuse the same temporary in expressions like `a?.[f()]?.[f()]`. We save this for the next commit.
PR Close#50688
Prior to this commit, the renderer destroy method was being called before the animation complete. This is problematic when using `REMOVE_STYLES_ON_COMPONENT_DESTROY` as it causes the styles to be removed too early.
This commit, updates this destroy logic to be call the render destroy once the animations complete.
This has been reported internally in:
- http://b/271251353#comment12
- http://b/282004950#comment5
PR Close#50860
This PR fixes GC memory numbers reported by benchpress,
where previously reported amount was always 0.
This is due to the fact that Chrome browser reports GC
events as a single X event now, instead of a B / E pair
of events.
PR Close#50760
Prior to this commit, the renderer destroy method was being called before the animation complete. This is problematic when using `REMOVE_STYLES_ON_COMPONENT_DESTROY` as it causes the styles to be removed too early.
This commit, updates this destroy logic to be call the render destroy once the animations complete.
This has been reported internally in:
- http://b/271251353#comment12
- http://b/282004950#comment5
PR Close#50677
Exposes the function used to transform an input on `ComponentFactory.inputs` and `ComponentMirror.inputs`. We'll need this to support input transforms in `elements`.
PR Close#50713
The previous API design for the runtime deps tracker was done with only local compilation in mind. Now if we want to use it for JIT as well then some new requirements come along which are addressed by this commit as follows:
- JIT scopes need distinct sets for directive and pipes. Thus the ScopeData interface is modified to include these info.
- JIT needs access to scopes for various operations. So methods `getNgModuleScope` and `getStandaloneComponentScope` are added to the tracker's public api.
- Test bed needs to clear the scope cache for its override mechanism. So method `clearScopeCacheFor` is added to the tracker's public api for this reason.
PR Close#50606
The types and interfaces re;ated to the runtime deps tracker are added. Also an empty implementation is added to be completed in follow up PRs (after the interfaces are confirmed in this PR).
The added files are not used anywhere, so the change should not affect anything in anyway.
PR Close#50606
The existing microbenchmarks are not widely known
and are not used to drive design / coding decissions.
At the same time those test add to the maintanance cost:
- use hand-written instructions;
- plug into runtime internals and are fragile;
- require development of mocks for the runtime internals.
Those tests are removed since they are costly to maintain
and, at the same, don't provide enough value.
PR Close#50786
An internal compiler option named `supportTestBed` is now available for use by the
Angular CLI. This option currently controls the extraction and emit of Angular class
metadata. This emitted information is only needed in AOT mode when using certain
TestBed APIs. However, AOT mode is currently not available for unit testing within
the Angular CLI. As a result, the metadata is not used within CLI generation applications
and in particular production applications. Without this option, the CLI needs to
manually perform a code transform to remove the metadata and also replicate TypeScript's
import eliding. This is can be a complicated operation and must be continually kept
up to date with any changes to both the Angular compiler and TypeScript. The introduction
of this new option alleviates these concerns.
PR Close#50604
We have a lint rule configured that enforces that any abstract member
implementation uses an explicit `override` identifier. This ensures that
downstream classes will have errors if the parent abstract class
suddenly removes the abstract member.
The lint rule, living in the dev-infra repository, occasionally does
miss some places due to a temporary TS version mismatch that causes
syntax kind indices to be different. Looks like we are now matching
again and there is a new lint failure that got introduced recently. This
commit fixes that error.
PR Close#50772
This commit wraps the `assertNonZeroRenderedHeight` and `assertNoImageDistortion`
with `runOutsideAngular` to setup the `load` event listener outside of the Angular zone.
This was previously causing extra change detection cycles in development mode and
interfered debugging stuff.
PR Close#50723
This commit updates benchpress to include the text representation of
results in the JSON report. This is useful when results of multiple
tests are read from the Bazel testlogs and then printed together in
e.g. a GitHub comment, or at the end of a script (not in the middle
of the surroundings of the Bazel executions).
The text representation could have been built directly based on the
JSON raw metrics, but it would be unnecessary work and duplication
to get a similar output as with the console reporter- so we can
just include this information in the report.
PR Close#50745
A larger investigation on why this is flaky is needed. Currently the
test is flaky with around 77% sucess rate and negatively impacts team
productivity. Subjectively, as reported by team members this it's much
more flaky than a success rate of 77%.
PR Close#50718
If a library is compiling with Angular v16.1.0, the library will break
for users that are still on Angular v16.0.x. This happens because the
`DirectiveDeclaration` or `ComponentDeclaration` types are not expecting
an extra field for `signals` metadata. This field was only added to the
generic types in `16.1.0`- so compilations fail with errors like this:
```
Error: node_modules/@angular/material/icon/index.d.ts:204:18 -
error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 9 type arguments.
```
To fix this, we quickly roll back the code for inserting this metadata
field. That way, libraries remain compatible with all v16.x framework
versions.
We continue to include the `signals` metadata if `signals: true` is set.
This is not public API anyway right now- so cannot happen- but imagine
we expose some signal APIs in e.g. 16.2.x, then we'd need this metadata
and can reasonably expect signal-component library users to use a more
recent framework core version.
PR Close#50714
The component exposed by the fixture is not important thus marked as `unknown`.
Exposing the fixture of the `RouterTestingHarness` allows to use the methods & properties of that fixture and makes it compatible with testing libraries relying on `ComponentFixture`
Fixes#48855
PR Close#50280
If the compiler CLI is running through closure compiler, the trait
decorator handlers are converted from classes to functions as ES5
is picked as default output target for the bundled version.
The problem is that currently all trait handlers end up having the
same `name`. i.e. an empty string, and therefore adopting previous
traits from a previous build iteration result in the incorrect handler
being used for e.g. registrering, compiling etc- causing
ambiguous/confusing errors down the line in other parts.
We can look into changing the output target in the future, but even
then we are safer using an actual literal due to property renaming.
```$$closure$$NgModuleDecoratorHandler = function() {}`.
It is is questionable if we should just simply NOT run the compiler
through JSCompiler.
PR Close#50673
Extend toSignal to accept any Subscribable (instead of only Observable)
for consistency with AsyncPipe and for broader compatibility with any
observable library (that is compatible with the Subscribable interface).
This is only a type change as the implementation does not use anything
else than the Subscribable interface anyway.
PR Close#50162
Angular's null-safe access operators differ from Javascript's built-in semantics, in that they short-circuit to `null` instead of `undefined`. This necessitates providing a custom transformation, instead of relying on Typescript or Javascript itseld.
The old TemplateDefinitionBuilder uses a top-down approach based on the Visitor pattern, in which it recursively extracts the left-most safe access, and hoists it to a null check at the top. See `expression_converter.ts` for details.
In this commit, we replace that approach with a new bottom-up algorithm, as part of the template pipeline. This requires an intermediate expression type to represent the not-yet-expanded ternary operators, and is split into its own pass.
Null-safe function calls are not yet implemented, since they will rely on a future temporary variable allocation pass.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50594
Create a pass that expands nullish coalescing operators into null checks.
This is not yet finished because we need to emit temporary variable assignments, which we will do using a future temporary variable allocation pass. Also, TemplateDefinitionBuilder is a bit quirky, and we still need to exactly match its behavior.
Nevertheless, this is good enough to prevent the diffs from getting ruined as a result of nullish coalescing operations.
PR Close#50594
It is sometimes useful to clone an expression tree, in order to copy it and mutate it in a phase, without affecting other subtrees due to the copy-by-reference.
PR Close#50594
Refactor attribute and property binding ingestion and add an attribute extraction phase
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
Co-authored-by: Dylan Hunn <dylhunn@users.noreply.github.com>
Only add the value to the ElementAttributes map for style and attribute kinds
Other kinds should not have their value represented in the consts array
Add missing attribute ingesiton for templates
Unify how template and element bindings are ingested
This resolves the issue of missing listener attributes on templates. In
order to avoid emitting extraneous instructions, listener ops on
templates are stripped in the attribute extraction phase instead.
Handle different binding types separately in ingest
Cleanup code and comments
Disable test that fails on new explicit error.
Previously the test was passing because ingestPropertyBinding treated
attribute bindings as normal bindings which happened to be ok for the
particular test. Now there's an explicit error that attrbiute bindings
aren't yet handled which causes the test to fail
Address feeback
PR Close#50664
This commit refactors the code of NgOptimizedImage directive to switch from getter/setter approach to convers inputs to use the `transform` function instead.
PR Close#50580
This commit updates an internal hydration logic to make sure that the content of components with i18n blocks is cleaned up before we start rendering it.
Resolves#50627.
PR Close#50644
Add a flag to disable specific tests when testing the template pipeline
Mark the currently failing tests
Add the template pipeline tests to CI
Update package.json
Co-authored-by: Paul Gschwendtner <paulgschwendtner@gmail.com>
PR Close#50582
Update Glob to fast-glob to remove the dependence of Inflight that contains a memory leak
Signed-off-by: Kevin Gay <5970002+GayKevin@users.noreply.github.com>
PR Close#50632
This commit introduces a new `HttpBackend` implentation which makes requests using the fetch API
This feature is a developer preview and is opt-in.
It is enabled by setting the providers with `provideHttpClient(withFetch())`.
NB: The fetch API is experimental on Node but available without flags from Node 18 onwards.
PR Close#50247
This commits adds configures `//packages/common/http/test` to use Node.js 18 toolchain which is needed to test the fetch implementation which use Node.js 18 APIs.
We also disable RBE for this target as it doesn't work with Node.js 18 right now. See https://github.com/angular/dev-infra/issues/1017
PR Close#50247
In local mode compilation the TS semantic check issues tons of diagnostics due to the fact that the file dependencies (.d.ts files) are not available in the program. So it needs to be disabled.
This commit should not cause any issue for the exsiting projects as it just removes a diagnostic in the local compilation mode.
PR Close#50486
Fixes an error that surfaced in #50580 where the compiler was throwing an error in JIT mode when reading the result of `compileDirectiveDeclaration`. It is caused by the fact that input transform functions were being passed around directly, instead of being wrapped in an AST node.
PR Close#50600
Prior to this change in some cases errors tht happen during routing were not being surfaced. This is due to the fact that the router has floating promises, and the platform was being destroyed prior to these being settled.
PR Close#50587
Components are implied to be self-referencing, but if they explicitly set themselves in the `imports` array, they would throw an error because we weren't filtering them out.
Fixes#50525.
PR Close#50559
Previously, with `mergeMap` we did not cancel previous subscriptions to zoneIsStable which caused the application to be stablized before hand.
Closes: #50562
PR Close#50573
In https://github.com/angular/angular/pull/49144 we introduced a change to only path `Promise.prototype.then` due to Node.js `SafePromise` complaining about `Promise.prototype.then` called on incompatible receiver. This however introduced a number of regressions. This commit reverts this change and re-introduces the changes to patch the entire promise on Node.
The original `SafePromise` problem is no longer reproducible as of Node.js version 18.13+ as it was addressed as part of https://github.com/nodejs/node/pull/45175.
While the Angular CLI does not yet generate ESM server bundles, users using ESM with dynamic imports will require using Node.js 18.13 or later.
Closes#50513, closes#50457, closes#50414 and closes#49930
PR Close#50552
This commit adds end-to-end support for pipes in the template pipeline. This
support works across multiple steps:
1. Pipes are first ingested as `ir.PipeBindingExpr`s during the ingest step.
2. A "pipe creation" phase inserts operations to instantiate each required
pipe, based on the presence of those `ir.PipeBindingExpr`s.
3. A "variadic pipe" phase transforms pipes with more than 4 arguments into
variadic pipe bindings, which use a literal array argument. This literal
array will be later memoized into a pure function invocation.
4. A special phase (`phaseAlignPipeVariadicVarOffset`) reconciles a
difference in variable slot assignment logic between the template pipeline
and the `TemplateDefinitionBuilder`, to ensure that the pipeline output can
pass the existing tests. This phase should not affect runtime semantics and
can be dropped once matching output is no longer necessary.
5. Reification emits pipe instructions based on the argument count.
PR Close#50118
The logic for `insertBefore` in template pipeline operation lists has a bug
when inserting at the end of a list. This commit fixes the safety assertions
to be more accurate.
PR Close#50118
This commit transforms literal arrays and maps within expressions in the
template pipeline into `ir.PureFunctionExpr` expressions, in order to
memoize the allocation of objects and arrays inside the update pass of
change detection.
PR Close#50118
Previously the helper operations for transforming expressions in the
template pipeline would only operate against `ir.Expression`s. This commit
changes them to process `o.Expression`s instead, paving the way to use them
for transformations of native expressions in addition to IR expressions.
PR Close#50118
This commit adds support for generating pure functions in the output
`ConstantPool` based on `ir.PureFunctionExpr`s. Note that nothing yet
generates these pure function forms - in the future they will be used both
in the implementation of the `pipeBindV` instruction as well as literal
arrays and maps in expressions.
PR Close#50118
This commit adds the `ConstantPool` to `ComponentCompilation`, making it
available to all phases of the template pipeline. Constant extraction is a
common operation in pipeline phases.
PR Close#50118
This commit adds a "shared constant" concept to the `ConstantPool`. This
is a generalization of the `LiteralFactory` concept the pool previously
supported. For stability's sake, the existing concept isn't modified, but
could be unified in the future.
PR Close#50118
This commit introduces a new trait `UsesVarOffset` for expressions which
consume variable slots and thus need an offset into the variable slot space
to locate their slots.
PR Close#50118
The template pipeline implements variadic instruction generation for text
node interpolation using an `InterpolationConfig` concept. This commit
refactors that code to generalize it to work not just with interpolations,
but with all instruction generation for variadic instructions.
PR Close#50118
This commit adds support to the template pipeline to ingest and process
literal array and map expressions. A future phase may process these literal
expressions and memoize them into pure functions where required.
PR Close#50118
Prior to this commit, comments in CSS were being removed. This caused inline sourcemaps to break to the shift in lines.
This caused sourcemaps to break in the ESBuild based builder as this always adds comments at the top of the file with the filename.
Example
```css
/* src/app/app.component.scss */
* {
color: red;
background: transparent;
}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9hcHAvYXBwLmNvbXBvbmVudC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBOzs7Ozs7Ozs7Q0FBQTtBQVdBO0VBQ0UsVUFBQTtFQUNBLHVCQUFBO0FBREYiLCJzb3VyY2VzQ29udGVudCI6WyIvL01FRElBIFFVRVJZIE1BTkFHRVJcbi8qXG4gIDAgLSA2MDA6IFBob25lXG4gIDYwMCAtIDkwMDogVGFibGV0IHBvcnRyYWl0XG4gIDkwMCAtIDEyMDA6IFRhYmxldCBsYW5kc2NhcGVcbiAgMTIwMCAtIDE4MDA6IE5vcm1hbCBzdHlsZXNcbiAgMTgwMCsgOiBCaWcgRGVza3RvcFxuICAxZW0gPSAxNnB4XG4gIFRoZSBzbWFsbGVyIGRldmljZSBydWxlcyBhbHdheXMgc2hvdWxkIHdyaXRlIGJlbG93IHRoZSBiaWdnZXIgZGV2aWNlIHJ1bGVzXG4gIEZpeGluZyBPcmRlciA9PiBCYXNlICsgVHlwb2dyYXBoeSA+PiBHZW5lcmFsIExheW91dCArIEdyaWQgPj4gUGFnZSBMYXlvdXQgKyBDb21wb25lbnRcbiovXG5cbioge1xuICBjb2xvcjogcmVkO1xuICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbn1cbiJdLCJzb3VyY2VSb290IjoiIn0= */
```
Closes#50308
PR Close#50346
This commit wraps the actual subscription/unsubscription in the `async`
pipe with `untracked`, to ensure that any signal reads/writes which might
take place in `Observable` side effects are not attributed to the template.
Fixes#50382
PR Close#50522
The PreloadLinkCreator instance was assigned to a variable named preloadLinkChecker, which is confusing because PreloadLinkChecker is also a thing.
PR Close#50521
Before this commit, building everything to run `@angular/core` tests:
```
INFO: Elapsed time: 76.496s, Critical Path: 72.92s
INFO: 225 processes: 125 internal, 5 linux-sandbox, 2 local, 93 worker.
INFO: Build completed successfully, 225 total actions
```
After:
```
Use --sandbox_debug to see verbose messages from the sandbox
INFO: Elapsed time: 15.952s, Critical Path: 10.75s
INFO: 200 processes: 128 internal, 4 linux-sandbox, 2 local, 66 worker.
```
This being on a specialist Cloudtop.
PR Close#50426
According to the HTML specification most attributes are defined as strings, however some can be interpreted as different types like booleans or numbers. [In the HTML standard](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes), boolean attributes are considered `true` if they are present on a DOM node and `false` if they are omitted. Common examples of boolean attributes are `disabled` on interactive elements like `<button>` or `checked` on `<input type="checkbox">`. Another example of an attribute that is defined as a string, but interpreted as a different type is the `value` attribute of `<input type="number">` which logs a warning and ignores the value if it can't be parsed as a number.
Historically, authoring Angular inputs that match the native behavior in a type-safe way has been difficult for developers, because Angular interprets all static attributes as strings. While some recent TypeScript versions made this easier by allowing setters and getters to have different types, supporting this pattern still requires a lot of boilerplate and additional properties to be declared. For example, currently developers have to write something like this to have a `disabled` input that behaves like the native one:
```typescript
import {Directive, Input} from '@angular/core';
@Directive({selector: 'mat-checkbox'})
export class MatCheckbox {
@Input()
get disabled() {
return this._disabled;
}
set disabled(value: any) {
this._disabled = typeof value === 'boolean' ? value : (value != null && value !== 'false');
}
private _disabled = false;
}
```
This feature aims to address the issue by introducing a `transform` property on inputs. If an input has a `transform` function, any values set through the template will be passed through the function before being assigned to the directive instance. The example from above can be rewritten to the following:
```typescript
import {Directive, Input, booleanAttribute} from '@angular/core';
@Directive({selector: 'mat-checkbox'})
export class MatCheckbox {
@Input({transform: booleanAttribute}) disabled: boolean = false;
}
```
These changes also add the `booleanAttribute` and `numberAttribute` utilities to `@angular/core` since they're common enough to be useful for most projects.
Fixes#8968.
Fixes#14761.
PR Close#50420
This commits refactors the HTTP client to use `InitialRenderPendingTasks` instead of Zone.js macrotask. This is another approach to https://github.com/angular/angular/pull/50406 which was revert due to a failure in G3.
PR Close#50425
This commit updates the `ApplicationRef.isStable` API to account for
pending rendering task. This is needed as once a pending rendering task
is done, new macrotask and microtask could be created which previously caused these not
to be intercepted and thus ignored when doing SSR.
PR Close#50425
Injecting `ViewContainerRef` into a component makes it effectively a container. The leave animation wasn't triggered on containers before this fix.
fixes angular#48667
PR Close#48705
Previously, we've used to have server-specific logic for HttpClient, so there was a need to re-provide it with the right config. Since v16, that logic was refactored and there is no need to re-provide HttpClient anymore. The code in the `provideServerRendering()` was retained for historical reasons and it makes application configuration more difficult, because it forces developers to copy HttpClient config into server config as well (otherwise it would not be take into account).
This commit removes the `provideHttpClient()` call from the `provideServerRendering()` function. This is **not** a breaking change, since we've also merge browser application config in the `app.config.server.ts`, so if an application is configured to use HttpClient, it will continue to work on both client and server sides.
Resolves#50454.
PR Close#50459
We have a code path that accesses the `originalKeywordKind` property which logs a deprecation warning in version 5.1, but isn't available in some of the earlier versions that we support. These changes add a compatibility layer that goes through the non-deprecated function, if it exists.
PR Close#50460
This commit schedules the macrotask creation to happen before the XHR `loadStart` event. This is needed as in some cases, Zone.js becomes stable too early.
With this commit, we also update the internal `createBackgroundMacroTask` method to use Zone.js `scheduleMacroTask` as otherwise the `setTimeout` would cause `fakeAsync` tests to fail due to pending timers.
Closes#50405
PR Close#50406
When an embedded view injector is present anywhere above a node in the tree, the `Self` flag was effectively ignored. With this change, embedded view injectors are not checked at all when the `Self` flag is present, because resolution should stop at the current node before reaching any embedded view injector(s).
Fixes#49959
PR Close#50270
As a preliminary work for #50399, I'd like to add this test to see the effect of treeshaking that will be brought by the incomming refactoring of the AnimationModule.
This is animations test ported to standalone.
PR Close#50413
Remove convertIndexImportShorthand tsickle option. It's going to be
removed from tsickle in https://github.com/angular/tsickle/pull/1442.
`false` is the default value, so setting it here has no effect
currently.
PR Close#50343
Adds the necessary compiler changes to support input transform functions. The compiler output has changed in the following ways:
### Directive handler
The directive handler now extracts a reference to the input transform function and it resolves the type of its first parameter. It also asserts that the type can be referenced in the compiled output and that it doesn't clash with any pre-existing `ngAcceptInputType_` members.
### .d.ts
In the generated declaration files the compiler now inserts an `ngAcceptInputType_` member for each input with a `transform` function. The member's type corresponds to the type of the first parameter of the function, e.g.
```typescript
// foo.directive.ts
@Directive()
export class Foo {
@Input({transform: (incomingValue: string) => parseInt(incomingValue)}) value: number;
}
// foo.directive.d.ts
export class Foo {
value: number;
static ngAcceptInputType_value: string;
}
```
### Type check block
If an input has `transform` function, the TCB will use the type of its first parameter for the setter type. This uses the same infrastructure as the `ngAcceptInputType_` members.
### Directive declaration
The generated runtime directive declaration call now includes the `transform` function in the `inputs` map, if the input is being transformed. The function will be picked up by the runtime in the next commit to do the actual transformation.
```typescript
// foo.directive.ts
@Directive()
export class Foo {
@Input({transform: (incomingValue: string) => parseInt(incomingValue)}) value: number;
}
// foo.directive.js
export class Foo {
ɵdir = ɵɵdefineDirective({
inputs: {
value: ['value', 'value', incomingValue => parseInt(incomingValue)]
}
});
}
```
PR Close#50225
Closes#49686
Revert "docs(docs-infra): Remove unused annotation template (#50114)" (#50206)
This reverts commit a1ca162fd6.
This commit causes failures in g3, because `@Annotation` is load-bearing for
tsickle's decorator downleveling transformation.
PR Close#50206
refactor(compiler): generate ng-container instructions (#50008)
ElementContainer instructions refer to `ng-container` element tags, which don't produce corresponding DOM nodes. Much like element instructions, container instructions can also have their start and end tags combined.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
Co-authored-by: Andrew Scott <atscott@users.noreply.github.com>
PR Close#50008
refactor(compiler): handle binary operators (#50008)
We should be able to ingest binary operators. This involves parsing the left and right ASTs, and converting the operator string to a logical `BinaryOperator`.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(compiler): handle chains in event listeners (#50008)
It's possible to have chains of statements, exclusively in event listeners. A listener with a chain looks like the following:
```
(click)="onClick($event); 1 == 1"
```
We handle this by generating multiple statements, one for each expression in the chain, and only making the final statement the return statement. We place this logic in code specific to listeners, since they are the only place this construct can appear.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(compiler): generate property instructions for `ng-template` inputs (#50008)
When ingesting an `ng-template`, inputs might be on the `inputs` or the `templateAttrs` field. More investigation is required to pinpoint the specifics of `templateAttrs`.
For now, we can process them both and generate the appropriate update-mode property instructions.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(compiler): support `KeyedRead` expressions (#50008)
The compiler can now accept key read expressions (e.g. `foo[bar]`), where both the receiver and index are sub-expressions.
PR Close#50008
refactor(compiler): extract save/restore view logic to separate phase (#50008)
Saving and restoring the view is significant enough that it makes sense to handle it independently. This makes for easier reasoning about how view save/restore works.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(core): remove webworker related checks on `assertDomNode` (#50061)
Since the drop of the webworker platform the node can't be a `WebWorkerRenderNode`.
PR Close#50061
refactor(platform-server): import `xhr2` dynamically in the ServerXhr class (#50095)
This commit updates the `@angular/common/http` and `@angular/platform-server` packages to allow dynamic import of the `xhr2` dependency. The `xhr2` dependency has side-effects that rely on a global scope and as a result in some environments those side-effectful calls fail. With the changes from this PR, the import is delayed until it's actually needed, which gives a chance for the underlying platform to setup global scope (via shims) as needed.
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#50095
build: remove unused deps (#50116)
* All `@types` package removed have typings in their package.
* brotli is unused
* tmp is unused
* vlq is unused
PR Close#50116
fix(core): bootstrapApplication call not rejected when error is thrown in importProvidersFrom module (#50120)
Fixes that the promise returned by `bootstrapApplication` wasn't being rejected when a module imported using `importProvidersFrom` throws an error. The problem was that the function that resolves the providers happens very early as the injector is being constructed.
Fixes#49923.
PR Close#50120
docs(forms): warn the user about getting old values and show how to avoid (#50123)
PR Close#50123
docs(forms): warn the user about getting old values and show how to avoid (#50123)
Co-authored-by: Andrew Kushnir <43554145+AndrewKushnir@users.noreply.github.com>
PR Close#50123
docs(forms): warn the user about getting old values and show how to avoid (#50123)
PR Close#50123
refactor(core): Throw an error when the document is not initialized. (#50143)
In case the document is accessed but not available we should throw ASAP an error to prevent non explicit errors.
PR Close#50143
fix(core): only try to retrieve transferred state on the browser (#50144)
Prior to this commit we tried to retrieve transferred state on both browser and server. Doing this on the server was redundant and could causes issues as `document` might be undefined.
Closes#50138
PR Close#50144
build: update dependency https-proxy-agent to v6 (#50152)
See associated pull request for more information.
PR Close#50152
docs: changed component name to home.component.ts in point 2 of step 3 (#50170)
PR Close#50170
docs: fix obs variable name to obs$ (#50196)
PR Close#50196
docs: Fixed Spelling 'servivce' to 'service' (#50204)
PR Close#50204
docs: fix filename in first-app (#50207)
Same mistake as #50204 but a different file.
PR Close#50207
refactor(core): Update CD traversal to use 'modes' (#50005)
Rather than maintaining separate traversal functions that act differently, this change
updates the change detection traversal to share more code and use different modes
to control the type of traversal being performed.
PR Close#50005
docs: delete aborted documentation files (#49962)
Those files were created as part of #47391 but the content was never merged.
PR Close#49962
refactor(compiler): Remove unused TransformVisitor & NullVisitor (#48646)
NullVisitor & TransformVisitor are unused and unexported outside the compiler package, we can remove them.
PR Close#48646
build: lock file maintenance (#49914)
See associated pull request for more information.
PR Close#49914
test(zone.js): update zone.js test for jasmine upgrade (#49914)
Update test cases to pass jasmine 6.x update.
PR Close#49914
refactor(common): cleanup platformLocation (#50054)
* Drop the usage of @Inject()
* Drop `supportsState` as its supported by evergreen browsers.
PR Close#50054
refactor(compiler): introduce internal transplanted type (#50104)
Adds a new AST for a `TransplantedType` in the compiler which will be used for some upcoming work. A transplanted type is a type node that is defined in one place in the app, but needs to be copied to a different one (e.g. the generated .d.ts). These changes also include updates to the type translator that will rewrite any type references within the type to point to the new context file.
PR Close#50104
build(devtools): make sure linker runs on fesm2022 bundles (#50086)
Since DevTools' Angular framework dependencies are built from local files, they are always up to date. [Recently](https://github.com/angular/angular/pull/49332) these dependencies started being published as fesm2022 instead of fesm2020. We also have an Angular dependency `ngx-flamegraph` that was built and published as fesm2020.
The easiest fix to make sure all of our Angular based dependencies are processed by the linker would be to update the filterPaths field in that file from `/fesm2020/` to `/fesm2020|fesm2022/`. When v16 releases, we can update ngx-flamegraph and publish it with the new APF, letting us change filterPaths to just `/fesm2022/`.
PR Close#50086
build(devtools): target es2020 explicitly (#50086)
We do this because of a bug caused by https://github.com/evanw/esbuild/issues/2950 and a recent change to how angular static properties are attached to class constructors. Targeting esnext or es2022 will cause the static initializer blocks that attach these static properties on class constructors to reference a class constructor variable that they do not have access to.
Because of this we explicitly target es2020 in our Angular DevTools builds.
PR Close#50086
docs: update releases guide for v16 (#50128)
Also clarify that the deprecations guide is for _noteworthy_ deprecations and may not be comprehensive.
PR Close#50128
docs: update starter lesson to contain example images from the start (#50212)
We received feedback that the starter lesson should also include the stock images.
PR Close#50212
fix(core): handle hydration of root components with injected ViewContainerRef (#50136)
This commit fixes an issue where a root component with an injected ViewContainerRef (for ex. `inject(ViewContainerRef)`) was triggering a certain code path during hydration which didn't handle this case correctly.
Resolves#50133.
PR Close#50136
feat(core): support TypeScript 5.1 (#50156)
Updates the project to support building with TypeScript 5.1.
PR Close#50156
docs: standalone component preloading config (#50193)
The preloading modules documentation were missing information about how to apply preloading strategies to standalone application ( `ng new AppName --standalone` ).
Feel free to fix anything not in line with the Angular documentation style guide, as this is my first attempt at contributing :)
- Added example for `app.config.ts` providing info on the `withPreloading(<preloading strategy>)` you can add to the `provideRouter()` RouterFeatures.
- Specified that preloading modules also applies for standalone components.
PR Close#50193
refactor(router): remove private export of `withPreloading` (#50194)
`withPreloading` is part of the public API.
PR Close#50194
fix(core): handle projection of hydrated containters into components that skip hydration (#50199)
This commit updates hydration logic to support a scenario where a view container that was hydrated and later on projected to a component that skips hydration. Currently, such projected content is extracted from the DOM (since a component that skips hydration needs to be re-created), but never added back, since the current logic treats such content as "already inserted".
Closes#50175.
PR Close#50199
fix(core): add additional component metadata to component ID generation (#50203)
This commit add `exportAs`, `signals`, `inputs` and `outputs` into account when generating a component ID.
See: https://github.com/angular/angular/issues/50158#issuecomment-1537061939
PR Close#50203
docs: fix link label. (#50209)
Removing a duplicate https protocol.
PR Close#50209
docs: fix typos on first-app tutorial (#50211)
PR Close#50211
refactor(core): drop `next` prefix from hydration guide link (#50214)
This commit updates the content of the console log to drop the `next.` prefix from hydration guide link.
PR Close#50214
build: update github/codeql-action action to v2.3.3 (#50216)
See associated pull request for more information.
PR Close#50216
docs(docs-infra): Remove warning for `@Annotation`. (#50218)
Per #50206, `@Annotation` is needed for tsickle. This commit removes the warning "Invalid tags found" produced by dgeni for the annotation decorator.
PR Close#50218
docs: fix typo on hydration in Preserve Whitespaces Configuration (#50236)
PR Close#50236
docs: release notes for the v16.0.1 release
release: cut the v16.1.0-next.0 release
refactor(core): simplify state transfer escaping (#50201)
This commit removes unnecessary transfer state escaping and updates this process to be done by the means of a `replacer` and `reviver` method as this removes the need to export the escaping and unescaping methods.
The only thing that we need to escape is `<script` and `</script` which are done by the browsers, but not Node.js.
PR Close#50201
build: lock file maintenance (#50227)
See associated pull request for more information.
(cherry picked from commit d5f92bdd64)
PR Close#50227
refactor: remove unused benchmarks (#50108)
The benchmarks in the 'old' directory are not used / maintained.
PR Close#50108
refactor: remove benchpres tests for other frameworks (#50108)
Some of the benchpress tests were written against other UI
frameworks (ex.: incremental DOM, initial version of ivy)
and those frameworks are no longer a valuable comparision target.
PR Close#50108
docs(docs-infra): Warning message when using absolute links to aio in the documentation (#50213)
This commit adds a processor to check for absolute links to angular.io. Absolute links to aio should be avoided because they will appear as external links.
PR Close#50213
docs: replace absolute links to aio with relative links. (#50213)
This change follows the introduction of the warning message from a transform processor to prevent absolute links to angular.io.
PR Close#50213
refactor(elements): remove unnecessary polyfill deps (#50115)
`webcomponents/custom-elements` and `document-register-element` are unnecessary now that we support only evergreen browsers.
PR Close#50115
build: update dependency firebase-tools to v12 (#50223)
See associated pull request for more information.
PR Close#50223
fix(core): allow onDestroy unregistration while destroying (#50237)
Ensure that all onDestroy callbacks are called by allowing unregistering of onDestroy hooks while destroying.
Fixes#50221
PR Close#50237
docs: fix v13 dependencies versions. (#50243)
Fixing a small mistake.
Fixes#50242
PR Close#50243
docs: split unsupported versions table in two. (#50243)
To ease the maintenance of this table and keep the same number of columns between active and unsupported versions.
PR Close#50243
build: bump in-memory-web-api dependency versions (#50246)
This commit updates in-memory-web-api package versions from v15 -> v16.
PR Close#50246
build: lock file maintenance (#49879)
See associated pull request for more information.
PR Close#49879
docs: update Angular CLI help [main] (#50256)
Updated Angular CLI help contents.
PR Close#50256
docs: fix mistake in tutorial (#50261)
PR Close#50261
build: update dependency @rollup/plugin-commonjs to v25 (#50264)
See associated pull request for more information.
PR Close#50264
docs: add missing "when" (#50262)
PR Close#50262
fix(docs-infra): labels with links should have the same font weight (#50258)
Fix anchor tag styling inside label.api-status-label to match font weight of label styling that does not have anchor tag.
PR Close#50258
build: update all non-major dependencies (#50217)
See associated pull request for more information.
PR Close#50217
build: share Saucelabs browsers between karma test targets using background Saucelabs daemon and custom karma launcher (#49200)
This upgrades the Saucelabs Bazel step on CI to use the more efficient Saucelabs daemon
PR Close#49200
build: address review feedback; added scripts/test/run-saucelabs-tests.sh script for local testing (#49200)
more chars to meet the linters requirements
PR Close#49200
build: address review feedback; should be ready to land now... additional chars to meet commit msg formatting requirements (#49200)
plus more additional chars here
PR Close#49200
build: don't run saucelabs tests yet on PRs... that will happen in a followup (#49200)
additional test to make linter happy
PR Close#49200
refactor(core): remove legacy way of preventing default actions (#50257)
Setting `returnValue = false` to prevent the default action of events hasn't been necessary since IE9.
PR Close#50257
docs: fix inconsistencies in getting started (#50275)
Fixes#50274
PR Close#50275
docs: fix mistake in first-app-lesson-03 (#50278)
The correct filename is `home.component.ts`.
fixes#50277
PR Close#50278
docs(docs-infra): Remove internal constructors from the doc. (#50282)
Internal constructor should not be exposed in the doc. This removes them.
Related to #50281
PR Close#50282
docs(docs-infra): Add a deprecated label to APIs (#50287)
This adds a deprecated label next to the other labels on the API pages for methods & properties.
Fixes#44265
PR Close#50287
docs: Glossary link to N (#50294)
The shortcut to N was missing resulting in a rendering issue.
PR Close#50294
docs: add Enea to GDE contributors list (#50254)
PR Close#50254
docs: update events (#50309)
Generated `events.json` with the latest events retrieved from the Firebase DB.
PR Close#50309
fix(core): allow passing value of any type to `isSignal` function (#50035)
Unlike the current signature where the input argument must a function, this change allows an input of any type to be passed to the `isSignal` function.
PR Close#50035
refactor(common): Reduce the precision to 2 digits in the ngOptimizedImage distortion warning message (#50276)
Using toFixed().
fixes#50273
PR Close#50276
refactor(core): Improve `ExpressionChangedAfterItHasBeenCheckedError` (#50286)
Related to #50272 and #18970, this improves the error message of NG100 by including the class name of the component where the error was triggered.
PR Close#50286
refactor(forms): remove unnecessary Array.from (#50314)
The Array.from isn't necessary since we're just iterating over the map keys.
PR Close#50314
docs: updated 'conceptual preview' title (#50326)
PR Close#50326
docs: fix typo in NG0912 error guide (#50322)
PR Close#50322
docs: fix typo in dependency injection guide (#50323)
PR Close#50323
docs: fix typo in security guide (#50324)
PR Close#50324
Revert "fix(core): add additional component metadata to component ID generation (#50203)" (#50334)
This reverts commit 52c74d3b4a.
The reason for revert: breaking some apps in Google's codebase.
PR Close#50334
docs: added wiki link for domain model (#50180)
Closes#49570
PR Close#50180
build: update all non-major dependencies (#50316)
See associated pull request for more information.
PR Close#50316
docs: update live demo for change detector (#50328)
fixes#44553
PR Close#50328
docs: remove plnkr link from markForCheck example (#50328)
PR Close#50328
refactor(core): Add a warning when `ApplicationRef.isStable` doesn't emit `true` (#50295)
Hydration requires a stable App to run some logic.
With this warning developers will be informed about potential issues encountered when running an unstable app.
Fixes#50285
PR Close#50295
fix(core): add additional component metadata to component ID generation (#50336)
This commit add `exportAs`, `signals`, `inputs` and `outputs` into account when generating a component ID.
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#50336
docs: release notes for the v16.0.2 release
release: cut the v16.1.0-next.1 release
docs: fixed typo
PR Close#50145
Fixes that the host directives feature was incorrectly throwing the conflicting alias error when an aliased binding was being exposed under the same alias.
Fixes#48951.
PR Close#50364
This commit add `exportAs`, `signals`, `inputs` and `outputs` into account when generating a component ID.
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#50336
Hydration requires a stable App to run some logic.
With this warning developers will be informed about potential issues encountered when running an unstable app.
Fixes#50285
PR Close#50295
Related to #50272 and #18970, this improves the error message of NG100 by including the class name of the component where the error was triggered.
PR Close#50286
Unlike the current signature where the input argument must a function, this change allows an input of any type to be passed to the `isSignal` function.
PR Close#50035
This commit removes unnecessary transfer state escaping and updates this process to be done by the means of a `replacer` and `reviver` method as this removes the need to export the escaping and unescaping methods.
The only thing that we need to escape is `<script` and `</script` which are done by the browsers, but not Node.js.
PR Close#50201
This commit updates hydration logic to support a scenario where a view container that was hydrated and later on projected to a component that skips hydration. Currently, such projected content is extracted from the DOM (since a component that skips hydration needs to be re-created), but never added back, since the current logic treats such content as "already inserted".
Closes#50175.
PR Close#50199
This commit fixes an issue where a root component with an injected ViewContainerRef (for ex. `inject(ViewContainerRef)`) was triggering a certain code path during hydration which didn't handle this case correctly.
Resolves#50133.
PR Close#50136
Adds a new AST for a `TransplantedType` in the compiler which will be used for some upcoming work. A transplanted type is a type node that is defined in one place in the app, but needs to be copied to a different one (e.g. the generated .d.ts). These changes also include updates to the type translator that will rewrite any type references within the type to point to the new context file.
PR Close#50104
Rather than maintaining separate traversal functions that act differently, this change
updates the change detection traversal to share more code and use different modes
to control the type of traversal being performed.
PR Close#50005
Prior to this commit we tried to retrieve transferred state on both browser and server. Doing this on the server was redundant and could causes issues as `document` might be undefined.
Closes#50138
PR Close#50144
Fixes that the promise returned by `bootstrapApplication` wasn't being rejected when a module imported using `importProvidersFrom` throws an error. The problem was that the function that resolves the providers happens very early as the injector is being constructed.
Fixes#49923.
PR Close#50120
This commit updates the `@angular/common/http` and `@angular/platform-server` packages to allow dynamic import of the `xhr2` dependency. The `xhr2` dependency has side-effects that rely on a global scope and as a result in some environments those side-effectful calls fail. With the changes from this PR, the import is delayed until it's actually needed, which gives a chance for the underlying platform to setup global scope (via shims) as needed.
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#50095
Saving and restoring the view is significant enough that it makes sense to handle it independently. This makes for easier reasoning about how view save/restore works.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
When ingesting an `ng-template`, inputs might be on the `inputs` or the `templateAttrs` field. More investigation is required to pinpoint the specifics of `templateAttrs`.
For now, we can process them both and generate the appropriate update-mode property instructions.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
It's possible to have chains of statements, exclusively in event listeners. A listener with a chain looks like the following:
```
(click)="onClick($event); 1 == 1"
```
We handle this by generating multiple statements, one for each expression in the chain, and only making the final statement the return statement. We place this logic in code specific to listeners, since they are the only place this construct can appear.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
We should be able to ingest binary operators. This involves parsing the left and right ASTs, and converting the operator string to a logical `BinaryOperator`.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
ElementContainer instructions refer to `ng-container` element tags, which don't produce corresponding DOM nodes. Much like element instructions, container instructions can also have their start and end tags combined.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
Co-authored-by: Andrew Scott <atscott@users.noreply.github.com>
PR Close#50008
This reverts commit a1ca162fd6.
This commit causes failures in g3, because `@Annotation` is load-bearing for
tsickle's decorator downleveling transformation.
PR Close#50206
Using `@angular/platform-browser-dynamic` is no longer required for JIT scenarios with Ivy. Instead `@angular/compiler` should be imported instead.
This change is part of the effort to reduce the server bundles sizes, which is needed to support cloud workers.
BREAKING CHANGE:
Users that are using SSR with JIT mode will now need to add `import to @angular/compiler` before bootstrapping the application.
**NOTE:** this does not effect users using the Angular CLI.
PR Close#50064
This commit introduces an interface for `toSignal` options to mirror that of
`toObservable`, and adjusts docs for both symbols. It also adds the ability
for `toSignal` to manually specify `DestroyRef` (similarly to
`toObservable` accepting an injector) or for `toSignal` automatic cleanup to
be disabled (in which case the subscription persists until the Observable
completes). Either option allows `toSignal` to be used outside of a DI
context, like `toObservable`.
PR Close#50071
This commit adds back `ngcc` as a no-op operation. When invoked it will warn providing details about removing `ngcc`.
In Angular 17, this will be removed.
PR Close#50045
The original code uses clientWidth and clientHeight which returns the
width and height of the element including the padding. This results in
the aspect ratio being determined incorrectly and the image distortion
warning triggering. The new code uses getComputedStyle which returns
the width and height without padding.
Another advantage of using getComputedStyle is that, unlike clientWidth
and clientHeight, the number returned is a decimal which provides
greater accuracy. This could allow for lowering the ASPECT_RATIO_TOLERANCE.
PR Close#49889
Due to assertNoImageDistortion using clientWidth and clientHeight, and these properties returning integers, rounding errors occur that exceed the aspect ratio tolerance.
Increasing the tolerance could hide actual distortion so correcting the calculation to use floats would be best and could even allow for a lower tolerance.
PR Close#49889
The image distortion detection performed uses clientWidth/clientHeight which includes the padding.
This leads to images with padding being detected as distorted while they are not and distortion being masked by padding.
PR Close#49889
This commit adds an LView flag to indicate that a view is a "signal"
view and updates view creation code to correctly set the flag
based on the declaration component metadata.
PR Close#49988
Both the render and update instructions live in the same file and are
only separated via a "render*" vs "refresh*" naming convention. This
commit moves these functions to completely separate files.
PR Close#50017
It's likely that the flag and counters used to track transplanted views
needing a refresh will be reused to signal views as well. The two follow
a similar rule: While the parents might not be "Dirty", there is still a
child/descendant view somewhere that needs to be refreshed during change
detection.
PR Close#50000
This commit refactors the logic of the `platform-server` to avoid using `platformDynamicServer` when `ngJitMode` is disabled. This is needed to avoid including JIT compiler into the source code of the server bundle, when this compil
er is not needed.
PR Close#50007
The LViewFlags are using manually written 0bxxxxx numbers which can be very hard to read
once there are more than a handful of 0s and 1s. The bit shifting feels a lot more
legible.
PR Close#49987
This commit adds the `signals: boolean` property to the internal
directive/component metadata. This does not add it to the public API
yet, as the feature has no internal support other than compiler
detection.
PR Close#49981
This adds context to the error message in the case that a DOM node is not found during the hydration process. It outputs the expected DOM structure based on the lView and tNode rather than an unhelpful text message.
PR Close#49977
As described in
https://github.com/angular/angular/discussions/49681#discussioncomment-5628930,
if an `Observable` created from a signal with `toObservable` is
subscribed to in a template, it will initially have `null` as the value.
Immediately after the template is done executing, effects are flushed
and this results in the `AsyncPipe` getting a new value before the
`checkNoChanges` pass, resulting in `ExpressionChanged` error.
```
template: '{{obs$ | async}}'
...
obs$ = toObservable(signal(0));
```
Instead, this commit updates the `toObservable` to synchronously emit
the initial value to the Observable stream.
Side note here: We don't exactly encourage this pattern. Instead of
using `AsyncPipe`, the template should just read signals.
PR Close#49894
Hydration relies on a signal from ZoneJS when it becomes stable inside an application, so that Angular can start serialization process on the server or post-hydration cleanup on the client (to remove DOM nodes that remained unclaimed).
Providing a custom or a "noop" ZoneJS implementation may lead to a different timing of the "stable" event, thus triggering the serialization or the cleanup too early or too late. This is not yet a fully supported configuration.
This commit adds a warning (non-blocking) for those cases.
PR Close#49944
In this mode the compiler generates code based on each individual source file without using its dependencies. This mode is suitable only for fast edit/refresh during development.
PR Close#49846
This commit updates hydration logic to hanlde a case when the same component is used multiple times in a template and in some of those cases, component is opted-out of hydration, for example:
```
<cmp ngSkipHydration />
<cmp />
```
Previously, the first occurrence of the `<cmp>` would result in storing the `ssrId` on a TView as `null` (since hydration is disabled for the component) and the second component instance reused the `null` as a value, thus also skipping hydration.
With the changes from this commit, the `ssrId` would be set when we come across a hydratable instance. We also make sure that the `ssrId` value never changes after we first set it to a non-`null` value.
PR Close#49943
This change explicitly resets a reactive consumer before setting inputs
on directive instances. This is to assure that any potential input setters
do _not_ run in the reactive context.
PR Close#49906
When binding an array to `class` like `[class]="['foo', 'bar']"`, the runtime treats it the same as a literal binding with all the values being `true`, e.g. `{foo: true, bar: true}`. While object literals can only have string keys, arrays can have any value which can lead to errors if the array contains non-string values.
These changes add some logic to stringify the keys and ignore invalid ones.
Fixes#48473.
PR Close#49924
This commit updates hydration logic to handle cases when there are projection slots present in a template inside of an `<ng-container>` and when there are regular elements follow an <ng-content> slot (see tests for additional information). With this combination, the logic that annotates regular element locations should fallback to calculating a path from a reference node to that node. In case of an <ng-container>, the comment node is located *after* the node that needs an annotation. An existing logic was mistakenly returning an empty path, which was represented as a pointer to teh reference node. This commit fixes that and triggers a fallback to using a component host node as a reference in this case.
Resolves#49918.
PR Close#49920
Empty text nodes are not present in the server-rendered HTML output, thus we inject a special marker
at a text node location to later restore an empty text node at the client. Currently, we treat text nodes with spaces as "empty" as well, however those spaces are present in the HTML and text nodes are created in a browser. Adding extra annotation in this case results in extra text nodes created on the client and may trigger hydration issues. This commit updates the code to avoid treating text nodes with spaces as "empty".
PR Close#49877
This commit adds a phase to the template pipeline to merge `nextContext()`
instructions that follow each other without context reads in between. That
is, the sequence:
```typescript
nextContext();
var v1 = nextContext();
```
becomes:
```typescript
var v1 = nextContext(2);
```
PR Close#49797
This commit modifies the `ListenerOp` operation to capture the context
needed to generate the "correct" (per `TemplateDefinitionBuilder`) function
name for the handler function for the listener.
PR Close#49797
The `resetView` instruction in the template pipeline had a copy-paste error
where it was emitting a call to `reference` instead. This commit fixes the
issue.
PR Close#49797
This commit adds a chaining phase which post-processes reified template
pipeline operations, and collapses chainable instructions into chained
calls. Performing chaining as a post-processing step after reification
allows the specifically selected instruction variants to be known when
considering chaining two operations.
PR Close#49797
This commit adds a variable optimization pass to the template pipeline. The
pipeline generates all variables which might be referenced within a given
view's template function, regardless of whether other operations will read
those values.
The variable optimizer post-processes the IR and performs several variable-
related optimizations:
* It transforms variable declarations to side effectful expressions when the
variable is not used, but its initializer has global effects which other
operations rely upon.
* It removes variable declarations if those variables are not referenced and
either they do not have global effects, or nothing relies on them.
* It inlines variable declarations when those variables are only used once
and the inlining is semantically safe.
PR Close#49797
This commit teaches the template pipeline how to generate `textInterpolate`
when there's a single expression with no surrounding static text.
PR Close#49797
This commit reverses the generate template functions when adding them to the
constant pool in the template pipeline. This seems to better match the
ordering in which `TemplateDefinitionBuilder` generates template functions.
Further study is needed to determine if this is exactly accurate.
PR Close#49797
`advance()` was not emitted correctly by the template pipeline. There were
two problems:
* it was not handled in `transformExpressionsInOp()`.
* it was not added to the list correctly in `phaseGenerateAdvance()`.
This commit addresses both problems.
PR Close#49797
This commit fixes a broken assertion in the template pipeline concerning the
ownership of nodes in `insertBefore`, as well as adjusts a few other
assertions.
PR Close#49797
The template pipeline previously included an error when a static attribute
binding was found on an `<ng-template>`, under the assumption that this case
didn't happen in reality. It turns out that it does, so this commit removes
the error in favor of a comment to investigate the case further.
PR Close#49797
The template pipeline previously reified the parameters to `template()`
incorrectly. This commit adjusts the output to correctly reference the
attributes of the `template()` call.
PR Close#49797
This commit introduces a flag which is tracked while visiting expression
nodes in the template pipeline. This flag can be used to differentiate when
in an immediate evaluation context vs. a closure, which is useful for
certain operations.
PR Close#49797
The `TemplateDefinitionBuilder` has a specific pattern it uses for template
function names for embedded view template functions. This commit changes the
template pipeline to use the same format, allowing the generated code to
match between them.
PR Close#49797
The `TemplateDefinitionBuilder` uses the same name for the same semantic
variables across different views declared in a component. This commit
refactors the template pipeline's concept of `ir.SemanticVariable` to share
instances across all `ViewCompilation`s. This allows the `name` of the
variable to be stored on the `ir.SemanticVariable` instance instead of on
the `ir.VariableOp` (which makes sense as variables are often named based on
the `ir.SemanticVariable` anyway).
PR Close#49797
The template pipeline was previously reading the context of the wrong view,
resulting in incorrect generated code. Previously only `ctx` was being used,
since the context read was always that of the current view being compiled,
even for variables which exist on the contexts of parent views.
PR Close#49797
The template pipeline was emitting fields on the component definition in a
different order than the `TemplateDefinitionBuilder`, which causes test
failures. Additionally, the `consts` field was being emitted even if it was
empty.
PR Close#49797
This fix assures that templates functions executed in the creation mode
are run outside of the reactive context. This avoids the situation where
signal reads in a directive constructor (executed as part of the creation
mode) would mark the host component as dirty.
Fixes#49871
PR Close#49883
This commit updates the docs for the `withNoDomReuse` function, which lets to opt out of non-destructive hydration.
The docs now mention the need to configure an initial navigation option for the Router to be blocking, i.e.
use `withEnabledBlockingInitialNavigation()` Router feature.
PR Close#49895
The `targetPageId` was pre-calculated at the start of a navigation using
the same logic that exists in `setBrowserUrl` now. Doing the calculation
ahead of time is not necessary and complicates the transition state.
PR Close#49799
Effects should run in the same zone they were created in. However, if ZoneJS is not used at all,
effects should just run (without zone). This is similar to what's done
in the elements `ComponentNgElementStrategy`.
fixes#49798
PR Close#49890
NgModules which import standalone components currently list those components
in their injector definitions, because we assume that any standalone
component may export providers from its own imports.
This commit adds an optimization for that emit, which attempts to statically
analyze the NgModule imports and determine which standalone components, if
any are present, do not export providers and thus can be omitted.
This analysis is imperfect, because some imported components may be declared
outside of the current compilation, or transitively import types which are
declared outside the compilation. These types are therefore _assumed_ to
carry providers and so the optimization isn't applied to them.
PR Close#49837
Currently, the `ViewRef.rootNodes` output is missing anchor (comment) nodes for inner `ViewContainerRef`s,
when an achor node was created for that instance of a `ViewContainerRef` (which happens in all cases except
when an <ng-container> was used as a host for a view container).
This issue affects hydration logic, which relies on the number of root nodes within a view to properly determine
segments in DOM that belong to a particular view.
Resolves#49849.
PR Close#49867
This commit updates the code to log hydration setup warning in dev mode only. Previously, the warning was retained in the code even after optimization, thus making it into production bundles. The warning is meant to let developers know that hydration was enabled, but wasn't activated, so it's safe to tree-shake it away from production bundles.
PR Close#49876
The change in 8c3b92cfb3 inspired a followup refactor where the `_render` method can just accept a PlatformRef and an ApplicationRef instances directly.
PR Close#49851
The `canceledNavigationResolution: 'computed'` option does not correctly
assign page IDs or restore them when redirects result in navigating to
the current URL. This change ensures that the page IDs are still
incremented and restored correctly in this scenario.
PR Close#49793
It might happen that the lifecycle scope represented by DestroyRef becomes
invalid before an onDestroy hook is registered (ex. injector or component
instance got destroyed). In such cases registration of the onDestroy hooks
should no longer be possible.
Fixes#49658
PR Close#49804
The new asReadonly method on the WritableSignal interface makes
it possible to create readonly instance of a writable signal.
Readonly signals can be accessed to read their value,
but can't be changed using set, update or mutate methods.
PR Close#49802
This commit fixes an issue were on the server the HTTP cache was being disabled prematurely which caused HTTP calls performed in `ngOnInit` life cycle hooks not to be cached.
PR Close#49826
This commit updates the code to avoid deep links into the `@angular/core`, which triggers a build issue in apps when a code is referenced.
PR Close#49823
This commit renames an internal token to better align it with the naming of the function (to highlight the fact that it's responsible for DOM part of the hydration).
PR Close#49800
Angular doesn't support IE anymore. We can remove the workarounds related to IE.
Some workarounds are keep because of the support of domino but the comments related to IE are removed.
PR Close#49763
Some libraries could use numbers in headers. this fix prevents Angular from
throwing an error by casting those numerical values into strings.
Fixes#49353
PR Close#49379
`toObservable` creates an `effect` that watches for updates to the
source signal. We should allow writes to signals in this effect, which
would be consumed by downstream observers.
PR Close#49769
From Ben:
> When dealing with any reactive function call you don't control
> like `observer.next()` (or anything similar), you want to catch the error
> in the producer call, in this case `signal()`. You don't want to catch errors
> in the `observer.next` call itself.
PR Close#49769
The initial value used for signals by default is now `undefined`. In
addition, there is a new option to express that the signal should emit a
value synchronously (`requireSync: true`). When this value is specified,
the function will throw _on creation_ if the subscribing to the
`Observable` does not result in a synchronous emit.
PR Close#49769
`RouterOutlet` components can initialize _during_ change detection (for
example, if they exist in an embedded view). When this happens, data
from the router should be bound immediately to the routed components
rather than not being available until the next round of change
detection. This is mostly just a problem for testing because change
detection is triggered manually. It would be surprising to have to
detect changes _twice_ on the fixture in order to get data bound to the
routed component.
PR Close#49741
The `ActivatedRoute` exposes several `Observable` members that are
`BehaviorSubject` under the hood. In order to update the values of those
subjects, we cast the `Observable` type internally. Instead, the
`BehaviorSubject` should be kept and re-exposed as public API
separately.
PR Close#49741
Accessing `pendingTasks.whenAllTasksComplete` too early causes the `InitialRenderPendingTasks` to return a resolved promise too early. This commit changes the way we access `whenAllTasksComplete` to only happen when the application is stabilized.
PR Close#49784
Current in the `InitialRenderPendingTasks` when the `collection` size is 0 a new promise is created a the status is changed to completed. This causes the promise that is created during the class initialization phase to never be resolved which causes SSR to hang indefinitely.
PR Close#49784
The compiler currently does not check to make sure that directives in
the host bindings are exported. These directives are part of the public
API of the component so they do have to be.
PR Close#49527
Previously, since the `HttpXhrBackend` is a singleton, the macrotask was created and completed only for the initial request since it was stored as in property in the class instance. This commit replaces this logic to create a macro task for every XHR request.
Closes#49730
PR Close#49776
This change makes is possible to use async functions
(ones returning a promise) as effect run functions.
To make it possible, the signature of the effect function
changed: effect cleanup function is registered now
(using a dedicated callback passed to the effect creation)
instead of being returned from the effect function.
PR Close#49783
This commit updates the logic that adds the "ng-server-context" attribute to the root elements to also include information about SSR feature enabled got an application.
PR Close#49773
Fixes that the compiler was matching directives based on `attr` bindings which doesn't correspond to the runtime behavior. This wasn't a problem until now because the matched directives would basically be a noop, but they can cause issues with required inputs.
PR Close#49713
This commit adds a Bazel flag which controls a constant in the compiler code.
When this flag (`--//packages/compiler:use_template_pipeline`) is specified, the
prototype template pipeline code is enabled.
This is not used in any production workflows and only works in the local Angular
repository. It will be used to develop the template pipeline against the
existing compliance tests.
PR Close#48580
This commit adds `transformTemplate` and `emitTemplateFn()` to the template
pipeline. These operations respectively apply all template compilation phases
in the right order, and then generate a final template function AST from the
template IR.
PR Close#48580
This commit introduces `phaseReify()` which performs "reification" of IR
operations. This converts previously semantic operations (e.g. `ir.Element`)
into generated instruction calls (`element(...)`). At the end of reification,
all operations have been converted into `ir.StatementOp`s, and the IR AST should
be suitable for emitting as generated code.
Note that after reification, more transformations may still be applied. For
example, instruction chaining will be performed post-reification, since it
depends on the exact selected instructions for each operation.
PR Close#48580
This commit introduces a new pipeline phase `phaseNaming()`, which tags
operations that generate function and variable declarations with generated names
to use when emitting those operations.
Currently this phase is using placeholder names. Eventually, we will want to
align its output with the current `TemplateDefinitionBuilder` names, in order to
pass the existing tests.
PR Close#48580
When executing the template update pass, the runtime keeps an internal
declaration slot pointer for which declaration (element, template, etc) is
the current subject of any binding or interpolation instructions. In between
update operations which reference different declarations, this pointer needs to
be adjusted, which is the job of the `advance()` instruction.
This commit introduces `phaseGenerateAdvance()` which inserts `advance()`
operations wherever necessary to satisfy this runtime requirement.
PR Close#48580
Operations and expressions in component update blocks can make use of variable
slots for storing data between executions (for example, the previous values of
expressions to use in change detection comparisons). The runtime must be told
how many variable slots to allocate for each view in a component declaration.
This commit adds a `phaseVarCounting()` phase to count the number of variables
used in different operations and expressions in a view. It makes uses of a new
marker trait `ConsumesVarsTrait` to determine which operations & expressions to
consider.
PR Close#48580
Every declaration a template is stored in a data slot in the runtime. The
indices of these slots are passed to the declaration instructions in the
creation mode. In the update mode, several instructions (like `reference()` for
local references) also use the slot indices to reference declared items.
This commit introduces `phaseSlotAllocation()` to the template pipeline, which
allocates slots for declarations which need them, and propagates those slot
indices to other instructions which need to reference declared items via their
slot indices. To perform this association, the `XrefId` of the declared items
is used to link declarations with usages.
Slot allocation is abstracted from operations by the way of a new concept in the
pipeline: traits. A trait is a "mixin" on an operation, expression, or both that
allows phases to process any operation/expression which implements the trait
without needing specific logic for each concrete implementing type. Two traits
are introduced to support slot allocation: the `ConsumesSlotOpTrait` for
declarations which require a slot to be allocated, and the
`UsesSlotIndexExprTrait` for expressions which reference a declaration by its
slot index.
PR Close#48580
This commit serializes the attributes on element-like structures in the template
and converts them to constant arrays, which it lifts into the `consts` array for
the entire component compilation.
PR Close#48580
As an optimization, the runtime provides an `element()` instruction to use in
place of `elementStart()` and `elementEnd()` when there are no instructions
between them. This commit merges `ElementStart` and `ElementEnd` IR operations
into `Element` operations in that special case.
PR Close#48580
Local references declared on elements need to be represented in element/template
instructions via an index into the `consts` array. This commit adds the
`phaseLocalRefs()` phase to lift local reference declarations into the `consts`
array accordingly.
PR Close#48580
`phaseResolveContexts()` resolves `ir.ContextExpr` expressions within views.
Each `ir.ContextExpr` represents a reference to a particular view context. For
the context of the view being compiled, this is available in the view's template
function `ctx` parameter. For parent views, this is available in context
variables which were added previously.
`phaseResolveContexts()` replaces these `ir.ContextExpr` operations with
resolved references to the requested views.
PR Close#48580
This commit introduces `phaseResolveNames()` to the template pipeline. This
phase processes any `ir.LexicalReadExpr`s, which represent unresolved
identifiers from the user's expressions in the template, and attempts to match
them to concepts in the lexical scope of the template (such as local refs) or
to a property read of a component or embedded view context.
PR Close#48580
This commit implements the first "phase" of the template pipeline. Phases are
individual steps in compilation that perform a transformation of the IR in order
to move closer to generating runtime code for the template.
This first phase is `phaseGenerateVariables()`. This phase introduces variable
definition operations into the IR to define variables in each view. These
variables either represent internal operations (saving/restoring the view
context for listeners, for example) or variables created from user-defined names
such as local references or template context properties.
Every view has all possibly-referenced variables generated, regardless of
whether they're actually referenced by other operations. A future phase will
optimize the variables in each view, inlining those which are only read once and
removing those which are not referenced at all.
PR Close#48580
This commit implements `ingest()`, which converts a parsed template AST into
template pipeline IR. This is the first step of template compilation.
PR Close#48580
This commit adds the IR operations and expressions required to "ingest" a
template into the template pipeline. They form the starting point for template
compilation.
Ingestion is implemented in a following commit.
PR Close#48580
This commit adds support for custom derived `o.Expression` types in the template
pipeline. A base class is added with one current implementor
(`ir.LexicalReadExpr`). `ir.Expression`s encode semantic operations within
expression ASTs of IR operations.
PR Close#48580
This commit introduces the "template pipeline", a new compilation flow for
template compilation. This new flow is intended to eventually replace the
`TemplateDefinitionBuilder`. For now, it's being implemented in parallel with
the existing system with the goal of eventually passing all of the existing
compliance tests.
The new pipeline is based on an "intermediate representation" of a template -
operations which semantically encode what needs to happen at runtime to render
and change-detect the template. Using an IR allows for different concerns of
template compilation to be processed independently, which solves the biggest
problem with `TemplateDefinitionBuilder` today (the lack of separation of
concerns).
This commit introduces the IR concept of an operation and related typings, as
well as the structures used to represent templates and views during compilation.
Future commits will expand on this foundation as work on the pipeline proceeds.
PR Close#48580
The cache state is only used only the first server request. Restarting the server uses the cache on first request.
Subsequent requests skip the cache because the value is mutated.
This change ensures a new cache state is returned on every request.
PR Close#49749
This reverts commit 2279f4d4620eba083a9832ed096890b69a25ec42.
Reverting that commit based off PR feedback that this change should only affect the parsing of sergments and node encoding of the url
PR Close#47332
fix router segment name parsing to allow segements to container an unscaped = character. Currently if you have a url like /some-site/folder=/some-file then then middle segment "folder=" will stop parsing at the = sign and register that part of the path as just "folder"
Fixes#21381
PR Close#47332
This commit updates the minimum supported Node version across packages from 16.13.0 -> 16.14.0 to ensure compatibility with dependencies.
PR Close#49771
This commit updates the logic to avoid enabling hydration in case server response doesn't contain hydration-related info serialized. It can happen when `provideClientHydration()` call only happens on the client, but not on the server.
PR Close#49750
This commit updates the logic to detect a situation when hydration support was enabled only on the client. If that happens, Angular produces a warning in a console with a link to the error guide.
PR Close#49743
New `ng new` apps no longer generate `enableProdMode` calls when an app is created. The prod mode is enabled via CLI flags (and configuration in the `angular.json` if needed).
PR Close#49723
The Domino DOM emulation library doesn't support shadow DOM. For such components we can not guarantee that client and server representations would match perfectly. To avoid hydration mismatch errors, such components are opted out of hydration.
PR Close#49722
Currently, non-destructive hydration for i18n blocks is not supported (but support is coming!).
This commit updates the serialization logic from throwing an error when it comes across an i18n
block to annotating a component with a skip hydration flag.
PR Close#49722
The `TransferState` class was updated in v14 in a way that the `BrowserTransferStateModule` was no longer required. The `BrowserTransferStateModule` was deprecated in v14.1 and it's currently empty. This commit removes the `BrowserTransferStateModule`.
BREAKING CHANGE: The deprecated `BrowserTransferStateModule` was removed, since it's no longer needed. The `TransferState` class can be injected without providing the module. The `BrowserTransferStateModule` was empty starting from v14 and you can just remove the reference to that module from your applications.
PR Close#49718
This commits updates the render to able to handle the slight differences between platform-server and platform-browser.
This is needed to eventually be able to remove `ServerRendererFactory2` and `EmulatedEncapsulationServerRenderer2` from platform-server.
PR Close#49630
This commit adds a hook to `WritableSignal` that is called whenever the
signal's value is updated via the mutation API. This hook allows consumers
to implement logic which is synchronous with signal sets (e.g. executing
effects). It's currently unused.
PR Close#49708
Angular lifecycle hooks should never be run as part of the reactive
context: we do not expect that signal reads in lifecycle hooks
report to any consumers.
In the current Angular some of the lifecycle hooks can be flushed
early, while executting template update pass. We need to make sure
that signal reads in those lifecycle hooks do not register as part
of the effect that marks components for check.
"
PR Close#49701
`ComponentRef.setInput` internally calls `markDirtyIfOnPush` which only marks
the given view as dirty but does not mark parents dirty like `ChangeDetectorRef.markForCheck` would.
f071224720/packages/core/src/render3/instructions/shared.ts (L1018-L1024)
`markDirtyIfOnPush` has an assumption that it’s being called from the parent’s template. That is, we don’t need to mark dirty to the root, because we’ve already traversed down to it.
The function used to only be called during template execution for input
bindings but was added to `setInput` later. It's not a good fit because
it means that if you are responding to events such as an emit from an `Observable`
and call `setInput`, the view of your `ComponentRef` won't necessarily get checked
when change detection runs next. If this lives inside some `OnPush` component tree
that's not already dirty, it only gets refreshed if you also call
`ChangeDetectorRef.markForCheck` in the host component (because it will be "shielded" be a non-dirty parent).
PR Close#49711
Previously, attempting to turn off the `experimentalDecorators` TypeScript configuration
option within an Angular project would result in build time errors. These errors were due
to an exposed Decorator signature from `@angular/core` that TypeScript thought was incompatible
with standard decorators. However, Angular's class decorators (`Component`, `Directive`, `Pipe`,
`Injectable`, `NgModule`) are actually already compatible with standard decorators. The export types for
the decorators only needed to be updated to reflect that compatibility. With the updated exported types,
applications will now successfully compile and execute in AOT mode with one important dependency injection
caveat explained in the note below.
For JIT mode applications that are built with the Angular CLI, `@ngtools/webpack`, or use `tsickle`,
there were also no additional changes required. These tools automatically convert property decorators
(now called field decorators) at build time to store Angular property metadata directly on the relevant
class. Building with these tools is the overwhelmingly common method of building an application. Any
applications that do not use one of these tools will not function at runtime in JIT mode if using standard
decorators. The behavior and code for when experimental decorators is enabled has been left intact.
NOTE: Angular constructor dependency injection that requires parameter decorators is not supported.
The standard decorator specification does not support parameter decorators. The `inject` function must be
used for all cases that previously required a parameter decorator. This includes such decorators as `Inject`,
`Optional`, `Self`, `SkipSelf`, `Host`, and `Attribute`. Constructor dependency injection that relies only
on the supplied parameter type will continue to function as expected if using AOT; as well as in JIT mode
if using the Angular CLI, `@ngtools/webpack` directly, or `tsickle`.
Documentation for the `inject` function can be found at: https://angular.io/api/core/inject
The decorator specification proposal can be found at: https://github.com/tc39/proposal-decorators
PR Close#49492
Previously, this PR cleaned up a bug introduced by #48679. However, since that PR needed to be rolled back, this PR now just checks in the test, to prevent that issue from re-occurring in the future.
PR Close#49693
The `ReflectiveInjector` symbol has been deprecated in v5 (11 major versions ago). This commit removes ReflectiveInjector and related symbols.
BREAKING CHANGE: The `ReflectiveInjector` and related symbols were removed. Please update the code to avoid references to the `ReflectiveInjector` symbol. Use `Injector.create` as a replacement to create an injector instead.
PR Close#48103
`RouterTestingModule` is not needed as of v16. Instead, TestBed
automatically provides `MockPlatformLocation` in order to help test
navigations in the application. The location mocks in the
RouterTestingModule aren't necessary anymore.
There doesn't appear to be any real documentation around
`RouterTestingModule` other than the API docs.
PR Close#49427
The previous fix for squashing empty children didn't quite work when the
existing route had segments. The result would be that the segments from
the existing route were dropped from the final URL.
PR Close#49691
This commit adds support by default for HTTP caching when using `provideClientHydration`. Users can opt-out of this behaviour by using the `withoutHttpTransferCache` feature.
```ts
import {
bootstrapApplication,
provideClientHydration,
withNoHttpTransferCache,
} from '@angular/platform-browser';
// ...
bootstrapApplication(RootCmp, {
providers: [provideClientHydration(withNoHttpTransferCache())]
});
```
PR Close#49699
In modern browsers, the 'javascript:' URL scheme is the only scheme that
can execute JavaScript when passed in a navigation URL context (e.g.
`a.href` value). Validate URL shemes to only contain characters allowed
in the URL specification ([a-zA-Z-+.]), and that are not javascript
(case insensitive). This is not a breaking change. The URL sanitization
is loosen.
PR Close#49659
This commit adds the `provideClientHydration` function to the public API. This function can be used to enable the non-destructive Angular hydration.
Important note: the non-destructive hydration feature is in Developer Preview mode, learn more about it at https://angular.io/guide/releases#developer-preview.
Before you can get started with hydration, you must have a server side rendered (SSR) application. Follow the [Angular Universal Guide](https://angular.io/guide/universal) to enable server side rendering first. Once you have SSR working with your application, you can enable hydration by visiting your main app component or module and importing `provideClientHydration` from `@angular/platform-browser`. You'll then add that provider to your app's bootstrapping providers list.
```typescript
import {
bootstrapApplication,
provideClientHydration,
} from '@angular/platform-browser';
// ...
bootstrapApplication(RootCmp, {
providers: [provideClientHydration()]
});
```
Alternatively if you are using NgModules, you would add `provideClientHydration` to your root app module's provider list.
```typescript
import {provideClientHydration} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
@NgModule({
declarations: [RootCmp],
exports: [RootCmp],
bootstrap: [RootCmp],
providers: [provideClientHydration()],
})
export class AppModule {}
```
You can confirm hydration is enabled by opening Developer Tools in your browser and viewing the console. You should see a message that includes hydration-related stats, such as the number of components and nodes hydrated.
Co-authored-by: jessicajaniuk <72768744+jessicajaniuk@users.noreply.github.com>
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#49666
To match the behaviour of Array.filter, typeguards can now be used on QueryList.filter to narrow the return type.
Fixes#38446
BREAKING CHANGE: QueryList.filter now supports type guard functions, which will result in type narrowing. Previously if you used type guard functions, it resulted in no changes to the return type. Now the type would be narrowed, which might require updates to the application code that relied on the old behavior.
PR Close#48042
It seems that changes in prior commits led to a new error in the Windows CI job,
likely due to its sandboxing setup in Bazel. This commit adds an explicit type
annotation that should avoid the error.
PR Close#49136
There used to be a subclass of `TraitCompiler` in ngcc, but now that ngcc has been removed
we can update `TraitCompiler` to no longer expose certain fields and methods.
PR Close#49136
There's an issue where formatting with `clang-format` doesn't agree with itself on how
the docblock for a field named `import` should be indented; if it is indented then it
removes the indentation, but then linting the source file reports an error where it
wants to revert the indentation change. By using computed property syntax this bug
is avoided.
PR Close#49136
The concept of "internal" and "adjacent" type expression used to be necessary to support
ngcc, as it had to process downleveled class declarations using an IIFE, where the class
name within the IIFE could be different from the outer class name. With the removal of
ngcc we no longer need to make this distinction, so this commit removes these concepts
entirely.
PR Close#49136
ngcc's reflection host would recognize tslib helpers and some JS builtin methods to allow
the static interpreter to evaluate compiled and downleveled JS code, but now that ngcc
has been removed this functionality is no longer being used.
PR Close#49136
This commit simplifies various parts of ngtsc to no longer support synthetic decorators,
downleveled enum members and inline declarations. These concepts were present to support
ngcc, but can be dropped now that ngcc has been removed.
PR Close#49136
This commit adds a new option for `provideHttpClient` called
`withHttpTransferCache()`. When this option is passed, requests done on the server are cached and reused during the bootstrapping of the application in the browser thus avoiding duplicate requests and reducing load time.
This is the same as `TransferHttpCacheModule` in https://github.com/angular/universal/blob/main/modules/common/src/transfer_http.ts
PR Close#49509
This commit updates the logic to handle a case when the `ngSkipHydration` attribute is applied to the root node of an app. In this case, the hydration info should not be serialized and the contents of the app on the client should be cleared up before initial rendering.
PR Close#49675
This change exposes the onDestroy callback on the ApplicationRef
as the public API. It is useful for cases where people need to
execute cleanup logic on application teardown.
Closes#49087
PR Close#49677
The navigation transition clears the current navigation in the finalize
operator of the current navigation Observer. This commit both completes
the `bootstrapDone` observable and updates the transition to only take 1
emit from the completed navigation. Either of these changes on their own
would fix the issue. The latter is a preventative measure in case a
mistake like the former is made again.
fixes#49567
PR Close#49572
This commit adds a provider function that allows developers to configure
the `NgZone` instance for the application. In the future, this provider
will be used for applications to specifically opt-in to change detection
powered by ZoneJS rather than it being provided by default.
This API does _not_ specifically provide support for developers to define their own
`NgZone` implementation or opt in to `NoopNgZone` directly. Both of
these are possible today, but are effectively unsupported (applications
that use these are left to their own devices to run change detection at
the appropriate times). That said, developers can still use DI in
`bootstrapApplication` to provide an `NgZone` implementation instead,
it's just not specifically available in the
`provideZoneChangeDetection` function.
PR Close#49557
This commit updates the `bootstrapApplication` method to get the
`NgZone` instance from DI. This will allow a future change to enable
developers to configure `NgZone` in DI rather than adding the options to
the top level like in `bootstrapModuleFactory` (which is done in order
to get the NgZone instance without going through DI).
PR Close#49557
This commit removes a code that increments the `rendererCreateComment` counter unnecessarily. The counter gets incemented even in hydration scenarios where we do not create a comment node. The counter still gets incemented in the right locations (when we *actually* create a node).
PR Close#49656
The easiest way to access route data is now to use direct bindings to
component inputs rather than going through `ActivatedRoute`.
The tour of heroes guide still uses `ActivatedRoute` for now. I was
hesitant to remove all of the content in one swoop and the tour of
heroes is quite a bit more involved.
PR Close#49633
Adds ability for `RouterOutlet` to bind `Router` information to the routed
component's inputs. This commit also exposes some helpers for
implementers of custom outlets to do their own input binding if desired.
Resolves#18967
PR Close#49633
* Prevent reads of signals during the notification process. This shouldn't
ever be triggered by user code but is more of a preventative for
internal misuse. Reading a signal during notification would/could create
glitches where the values being read are not updated to reflect the
values being updated by the notification.
* Prevent signal writes inside of computed's. These are meant to be
derived values and should not have any side-effects like writing new
values to other signals
* Prevent signal writes inside of effects by default. Writing to signal
values during the execution of an effect can lead to the
`ExpressionChangedAfterItHasBeenCheckedError` if writing to signals
that represent global state which is read in a parent component. This is
mostly just a problem for `OnPush`/`CheckAlways` components, but with
signals being new and pure signal components not even available yet,
it will be the majority for a long time.
PR Close#49631
The change in effect timing collided with the introduction of these
rxjs-interop tests, resulting in them failing after the merge.
This commit adjusts the tests to rely on the real effect timing.
PR Close#49651
This commit removed the deprecated `EventManager` method `addGlobalEventListener`.
BREAKING CHANGE: Deprecated `EventManager` method `addGlobalEventListener` has been removed as it is not used by Ivy.
PR Close#49645
This commit implements an RxJS operator `takeUntilDestroyed` which
terminates an Observable when the current context (component, directive,
etc) is destroyed. `takeUntilDestroyed` will inject the current `DestroyRef`
if none is provided, or use one provided as an argument.
PR Close#49154
This commit adds the basic sketch for the implementation of `fromObservable`
and `fromSignal`, the two basic primitives which form the RxJS interop layer
with signals.
PR Close#49154
This commit adds the infrastructure for `@angular/core/rxjs-interop`, a new
core entrypoint which provides bidirectional interoperability between
Angular's built-in reactivity system of synchronous signals, and the RxJS
`Observable` abstraction.
The new entrypoint is set up as an empty shell in this commit, with its
implementation to follow in a followup.
PR Close#49154
We've been experimenting with the DeepReadonly type that would make
signal values deeply read-only and prevent accidental changes without
going to the owner of data. What we've found out during the experiments
is that additional safety net has more drawbacks than benefits: it just
introduces too much friction to be practical for daily usage.
PR Close#49154
This commit adds a logic to output basic hydration stats into a console. This is also helpful to ensure that hydration is enabled and works.
PR Close#49617
This commit adds a new metric into the `ngDevMode` to count a number of components that skipped hydration (where `ngSkipHydration` attribute was applied).
PR Close#49617
This commit updates the `effect` primitive and significantly changes the
timing of effect execution.
Previously, effects were scheduled via the microtask queue. This commit
changes effects to run throughout the change detection process instead.
Running effects this way avoids needing additional rounds of change
detection to resolve effects, with the tradeoff that they're harder to use
for model-to-model synchronization (which can be seen as a good thing).
PR Close#49641
This commit consolidates the `RendererFactory` and `Sanitizer` properties
of `LView` onto a single object, the `LViewEnvironment`. These properties
are both set from DI when the root view is created, and not overridden when
child views are created (but inherited from the parent view).
This is a precursor commit to adding the `EffectManager` into the
`LViewEnvironment`.
PR Close#49641
When navigating in the Router, the current approach does the redirects
and the creation of the `RouterStateSnapshot` in two separate steps
(applyRedirects and recognize). These two steps duplicate the route
matching logic, resulting in user code on routes being executing twice
(custom `UrlMatcher` and `canMatch` guards). This also duplicates the
complex matching logic in two places, which increases the bundle size
and maintenance burden.
This commit combines the `applyRedirects` and `recognize` steps into a
single matching algorithm.
fixes#26081
PR Close#49163
This change extends the effect API surface so effects can, optionally,
return a cleanup function. Such function, if returned, is executed
prior to the subsequent effect run.
PR Close#49625
This commit updates the logic in the Router that keep track of the initial navigation from being a synchronous to a microtask (Promise.resolve) to allow redirects during the initial navigation.
PR Close#49619
This commits adds `makeStateKey`, `StateKey` and `TransferState` methods in `@angular/core` as public API and deprecated the same exported symbols in `@angular/platform-browser`.
DEPRECATED: `makeStateKey`, `StateKey` and `TransferState` exports have been moved from `@angular/platform-browser` to `@angular/core`. Please update the imports.
```diff
- import {makeStateKey, StateKey, TransferState} from '@angular/platform-browser';
+ import {makeStateKey, StateKey, TransferState} from '@angular/core';
```
PR Close#49563
Setting the `nonce` attribute using the property is not supported by Domino. This change update the usage to use `setAttribute` and also add a test to verify that the `nonce` is set when it should.
PR Close#49624
These two options where created for a feature which was never completed. https://github.com/angular/universal/pull/1860
Eventually these options should be added to `withTransferCache` HTTP logic.
DEPRECATED: `PlatformConfig.baseUrl` and `PlatformConfig.useAbsoluteUrl` platform-server config options are deprecated as these were not used.
PR Close#49546
This commit adds a background macrotask when an XHR request is performed. The macrotask is started during `loadstart` and ended during `loadend` event.
The macrotask is needed so that the application is not stabilized during HTTP calls. This is important for server rendering, as the application is rendering when the application is stabilized.
The application is stabilized when there are no longer pending Macro and Micro tasks intercepted by Zone.js, Since an XHR request is none of these, we create a background macrotask so that Zone.js is
made aware that there is something pending.
Prior to this change, we patched the `HttpHandler` in `@angular/platform-server` but this is not enough, as there can be multiple `HttpHandler` in an application, example when importing `HttpClient` in a lazy loaded component/module.
Which causes a new unpatched instance of `HttpHandler` to be created in the child injector which is not intercepted by Zone.js and thus the application is stabalized and rendered before the XHR request is finalized.
NB: Zone.js is fundamental for SSR and currently, it's not possible to do SSR without it.
Closes: #49425
PR Close#49546
Signal functions are marked with a `[SIGNAL]` symbol property, which was
previously set to `true`.
This commit changes the `[SIGNAL]` property to have the `ReactiveNode` as
its value instead. This doesn't change the behavior of the signal library
itself, but exposes the signal internals in a way where developer tooling
can look at any signal and interact with its dependency graph.
PR Close#49529
Previously the signals implementation maintained separate interfaces for
`Producer` and `Consumer` nodes, with implementers choosing to implement
one or both interfaces. Operations defined against those interfaces were
exposed as importable functions to be called with the object implementing
the relevant contract as the first argument.
This commit refactors the implementation to merge both abstractions into a
single `ReactiveNode` base class, which represents both producers and
consumers in the graph. Implementers choose to interact with a subset of the
`ReactiveNode` API depending on their role in the graph. Operations are now
available as protected methods on the base class, instead of separate
functions.
PR Close#49529
Previously, effects were queued in the global microtask queue and executed
directly. This had an undesired consequence: whichever effect scheduled
first determined the zone in which all other effects would run, *and* that
zone depended on where the signal happened to be set which triggered that
first effect. This behavior would be extremely unpredictable.
This commit adds zone awareness to the effect API. effects now capture the
current zone when they're created, and this zone is used to run the effect
callback regardless of which zone set the signal.
PR Close#49529
This commit adds a `DeepReadonly` type to the signals API, and makes signal
getters return an immutable version of their value type. This doesn't
prevent all mutation but adds some friction against modifying the values
within signals outside of the proper mutation APIs.
PR Close#49529
The `effect` implemented in the signal library is useful for testing but
does not integrate with Angular. This commit moves that code to the
actual framework package and integrates it with automatic cleanup via
`DestroyRef`. A simpler effect implementation is used in the signal tests to
test the `Watch` primitive.
Further commits will update the scheduling to tie effects together with
change detection.
PR Close#49529
This commit switches the `signal` and `computed` APIs to accept an optional
options argument as their second argument, instead of an equality function
directly. The equality function has moved to an option in the options
argument.
PR Close#49529
This commit renames the `SettableSignal` interface to align with recent
naming changes. `WritableSignal` is considered a more suitable name since
it supports more mutation operations than just directly setting.
PR Close#49529
This commit adds an assertion function to the public API, which allows
authors of functions which rely on `inject` to validate that they're being
called with the right context. This mostly produces a nicer error message
than calling `inject()` and relying on Angular's default error message for
that.
PR Close#49529
This fixes two cases where DOM node navigation during hydration would be broken. It also fixes an infinite loop on clearing DOM during skip hydration blocks
PR Close#49615
This commit implements a simple tracker of the pending tasks during initial rendering. The class allows adding and removing tasks from the set. The class also exposes a promise that gets resolved once the last task is removed.
This tracker is needed to keep track of ongoing processes like Router navigation (and potentially HTTP requests) and acts as a signaling mechanism to SSR and hydration that the application is in the "stable" state and a serialization can be performed.
This class would also act as a future replacement for the `ApplicationRef.isStable` for zoneless applications.
PR Close#49576
When navigating in the Router, the current approach does the redirects
and the creation of the `RouterStateSnapshot` in two separate steps
(applyRedirects and recognize). These two steps duplicate the route
matching logic, resulting in user code on routes being executing twice
(custom `UrlMatcher` and `canMatch` guards). This also duplicates the
complex matching logic in two places, which increases the bundle size
and maintenance burden.
This commit combines the `applyRedirects` and `recognize` steps into a
single matching algorithm.
fixes#26081
PR Close#49163
`ComponentRef.setInput` currently sets the input on the component regardless
of the previous value the method was called with. This results in
different behavior from bindings in templates, which only set inputs
when the value differs in the `Object.is` check from its previous value.
BREAKING CHANGE: ComponentRef.setInput will only set the input on the
component if it is different from the previous value (based on `Object.is`
equality). If code relies on the input always being set, it should be
updated to copy objects or wrap primitives in order to ensure the input
value differs from the previous call to `setInput`.
PR Close#49607
Currently we are unsafely unquoting CSS values which in some cases causes valid values to become invalid and invalid values to become valid.
Example:
```html
<div style="width:"1px;""></div>
```
In the above case, `width` has an invalid value of `"1px"`, however the compiler will transform it to `1px` which makes it valid.
On the other hand, in the below case
```html
<div style="content:"foo""></div>
```
`content` has a valid value of `"foo"`, but since the compiler unwraps it to `foo` it becomes invalid. For correctness, we should not remove quotes.
```js
const div = document.createElement('div');
div.style.width='"1px"';
div.style.content='foo';
div.style.width; // ''
div.style.content; // ''
div.style.width='1px';
div.style.content='"foo"';
div.style.width; // '1px'
div.style.content; // '"foo"'
```
More information about values can be found https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
PR Close#49460
Currently when the value of a styling property that has a unit is empty string a invalid value is generated.
Example:
`[style.width.px] = ""` will generate a value of `"px"`, when instead it should be `""`.
This causes browser to reset the value to an empty string. This is however not the case in Domino with changes in bfc9114d1e.
This commit fixes the issues and generate correct values.
PR Close#49460
The class-based guard and resolver interfaces are deprecated. The
`Router` types only support functional guards definitions. Classes can
still be used as the underlying implementation of functional guards and
resolvers but there will not be an interface requiring a specific structure
for those classes.
There are also helper functions like `mapToCanActivate` that allow
converting the existing class-based guards directly to functional guards
at the route definition. This will be done in a separate migration.
PR Close#49337
This commit updates the serialization logic to avoid serializing a path for a node that was content projected (based on template information), but is not present in the DOM. This can happen if a <ng-content> is used with the *ngIf="false", for example: `<ng-content *ngIf="false" />`.
PR Close#49590
This commit updates the `LView` in Angular to be a `Consumer` of
signals. If a signal is read when executing a template, it marks the
view dirty. In addition, if a signal is read when executing host
bindings, it also marks views dirty.
One interesting thing about signal reads in host bindings
is that they perform a bit better than what we can do with today's
APIs. In order to re-execute host bindings for an `OnPush` component that
might have changed, you would probably inject `ChangeDetectorRef` and call
`markForCheck`. This will mark the _current component_ and parents
dirty. However, host bindings are executed as part of refreshing the
_parent_ so there is really no need to re-execute the current component
if the only thing that changed is the host bindings. When a signal is
read in host bindings, it marks the parent dirty and not the component
that defined the host binding.
Additionally, this commit avoids allocating a full consumer for each
`LView` by re-using a consumer until template execution results in a
signal read. At this point, we assign that consumer to the `LView` and
create a new consumer to "tentatively" use for the future `LView`
template executions.
Co-authored-by: Dylan Hunn <github@dylanhunn.com>
PR Close#49153
Close#49110
From jest 29 and jest-preset-angular v13, the module transform logic
changed, and now jest-preset-angular use the use the tsconfig target
other than the hardcoded one, https://github.com/thymikee/jest-preset-angular/issues/2010
But jest-angular-preset doesn't introduce the @babel/plugin-transform-async-to-generator
which is needed by angular since `async/await` still need to be transformed
to promise for ES2017+ target.
So for now, we disable to output the uncaught error console log for a temp solution,
until jest-preset-angular find a proper solution.
PR Close#49325
Close#47209
Remove legacy browsers support, so we don't need to patch EventTarget
for very old browsers and cause issues in the new environment.
PR Close#49327
The preloading strategy did not handle a `loadComponent` on a route with
a static `children`. It only preloaded children if they were also
`loadChildren` or both were not lazy loaded.
fixes#49558
PR Close#49571
The `moduleId` directive field does not have any effect as of Ivy. In
View Engine it was used for resolving template and styles relative
to the component source location- but ultimately this is not needed
as the Angular compiler knows the source file location at build time,
and at runtime never even consulted `moduleId`. An XHR is always issue
using the extact specified URL.
For Angular CLI users, relative URLs in JIT are still possible because
the CLI has a TS transform that will replace the references with actual
Webpack imports.
`moduleId` does not seem worth keeping in the future, as it's not used
currently, and even if we would consider supporting relative JIT resource
URLs through it, it would be deeply coupled to CommonJS `module.id`.
DEPRECATED: The `@Directive`/`@Component` `moduleId` property is now
deprecated. It did not have any effect for multiple major versions and
will be removed in v17.
PR Close#49496
Previously, we've annotated all disconnected DOM nodes, even if they are not used in content projection. However, this situation is only possible in content projection and if it happens in other cases (for example, when a node was removed using direct DOM manipulations), this should be a mismatch error.
PR Close#49549
This diagnostic ensures that the special attribute `ngSkipHydration` is not a binding and has no other value than `"true"` or an empty value.
Fixes#49501
PR Close#49512
