This makes it possible to batch effects, where we can "reopen" consumers
during initial render and then finalize them after we are finally done
adding all the effects to a batch:
```
function createBatch() {
const effect = // ... create effect node
resetConsumerBeforeComputation(effect);
return effect;
}
// pseudo-code
function appendEffect(effectBatch, updater) {
if (value is a signal) {
const prevConsumer = setActiveConsumer(effectBatch.node);
const output = value();
setActiveConsumer(prevConsumer);
effectBatch.push({ signal, updater });
return output;
}
}
function finalizeBatch(effectBatch) {
if (effectBatch.length > 0) {
finalizeConsumerAfterComputation(effectBatch.node);
}
}
const effectBatch = createBatchEffectNode();
appendEffect(signal1, (newValue) => /* something */);
appendEffect(signal2, (newValue) => /* something different */);
finalizeBatch(effectBatch);
```
PR Close#62549
This updates the enter and leave logic to use the stored LView data to dispatch the enter and leave animations at the right points in the lifecycle. This should fix issues with signals not being available yet, parallel animations, and also eliminate the need for the element registry.
fixes: #63391fixes: #63388fixes: #63369
PR Close#63710
When animate.leave is used, stylesheet pruning causes issues. Stylesheets with the appropriate animations get pruned before the animations can run. This will delay the removal in the case that the registry is present.
fixes: #62942
PR Close#62943
This commit updates the logic to better handle a situation when there is a cyclic DI dependency detected. Previously, the error message used to contain the name of the token that triggered the problem. With this change, the DI resolution path would also be included, so that it's easier to find and resolve the cycle.
PR Close#50902
This way, an arbitrary service can implement Angular's service requirements without a hard dependency on @angular/core
ex:
class Foo {
bar = inject(Bar);
}
registerInjectable(Foo);
PR Close#62087
In this commit, the `ngServerMode` check is moved outside the RxJS `pipe()` to ensure that server-only logic is excluded from client bundles. Previously, the `tap()` operator and its closure were always included in the output, even though `ngServerMode` was false on the client and the side effect was never triggered.
By guarding the observable chain earlier, this reduces the RxJS stack frame depth, which simplifies debugging by avoiding unnecessary operator noise in client-side stack traces.
The resulting logic is also easier to reason about and avoids evaluating `HttpResponse` instances where not needed.
PR Close#62238
Instead of dev-infra maintaining a custom ESBuild + Terser pipeline that
tries to emulate the Angular CLI, we are switching the bundling core
tests to a new rule that really leverages the Angular CLI.
This involves some file renames and small adjustments. In addition, we
leverage the updated symbol tracking rule to output new goldens that can
work with multiple bundle files (as generated by the Angular CLI;
especially with defer and its "lazy" chunks).
PR Close#61566
In this commit, we switch from using the `isPlatformServer` runtime call to the `ngServerMode`.
Note: constructors haven't been touched in order to prevent any breaking changes for the public API.
PR Close#59496
A minor performance improvement for `ɵɵdefineComponent` where the underlying `extractDefListOrFactory` call had a chain of `.map.filter` which meant that we were unnecessarily creating intermediate arrays just to filter out the null values. These changes switch to simple `for` loop to get around it.
PR Close#61445
This properly cleans up stale control flow branches in the case
that branches change between server and client at the same
timing as NgIf / NgSwitch.
fixes: #58670fixes: #60218
PR Close#60425
When the browser parses a valid html5 response like this:
```html
<!-- ... -->
<title>My page</title>
</head>
<!--nghm-->
<app-root></app-root>
<!-- ... -->
```
The resulting DOM will only start adding nodes to the body when it
runs into the first non-header tag. E.g.:
```yml
- head
- title "My page"
- comment "nghm"
- body
- app-root
```
This isn't a sign that comments are modified, so it seems worth to
handle it gracefully.
PR Close#60429
Replaces all the places where we use `InjectFlags` internally with the `InternalInjectFlags` which has the benefit of being a `const` enum and allowing us to consolidate the flags and object literal eventually.
PR Close#60318
This should keep the existing behavior intact. Right now retrieve never returns back NOT_FOUND. This should not be the case, but tests fail if I do add this behavior so itll have to be later.
PR Close#60192
Note that this does NOT use the retrieve method yet. I believe we need to move the logic for notFoundValue into the inject implementation.
PR Close#60154
Prior to this change, cyclic injection didn't trigger any error in prod mode, resulting into injecting the `CIRCULAR` object.
This could lead to strange errors where no method would be found on the token.
fixes#60074
PR Close#60118
Reworks the `InputBinding` and `OutputBinding` functionality to be in object literals constructed in functions, rather than classes, because it seems like Terser was having a hard time tree shaking the classes when the functions weren't used.
PR Close#60137
Adds the new `outputBinding` function that allows users to listen to outputs on dynamically-created components in a similar way to templates. For example, here we create an instance of `MyCheckbox` and listen to its `onChange` event:
```ts
interface CheckboxChange {
value: string;
}
createComponent(MyCheckbox, {
bindings: [
outputBinding<CheckboxChange>('onChange', event => console.log(event.value))
],
});
```
Note that while it has always been possible to listen to events like this by getting a hold of of the instance and subscribing to it, there are a few key differences:
1. `outputBinding` behaves in the same way as if the event was bound in a template which comes with some behaviors like forwarding errors to the `ErrorHandler` and marking the view as dirty.
2. With `outputBinding` the listeners will be cleaned up automatically when the component is destroyed.
3. `outputBinding` accounts for host directive outputs by binding to them through the host. E.g. if the `onChange` event above was coming from a host directive, `outputBinding` would bind to it automatically.
Currently `outputBinding` is available only in `createComponent`, `ViewContainerRef.createComponent` and `ComponentFactory.create`, but it will serve as a base for APIs in the future.
PR Close#60137
Adds the ability to bind to inputs on dynamically-created components, either by targeting the component itself or one of its directives. The new API looks as follows:
```ts
const value = signal(123);
createComponent(MyComp, {
// Bind the value `'hello'` to `someInput` of `MyComp`.
bindings: [inputBinding('someInput', () => 'hello')],
directives: [{
type: MyDir,
// Bind the `value` signal to the `otherInput` of `MyDir`.
bindings: [inputBinding('otherInput', value)]
}]
});
```
This behavior overlaps with `ComponentRef.setInput`, with a few key differences:
1. `setInput` sets the value on *all* inputs whereas `inputBinding` only targets the specified directive and its host directives. This makes it easier to know which directive you're targeting.
2. `inputBinding` is executed as if it's in a template, making it consistent with how bindings behave for selector-matched components, whereas `setInput` executes outside the lifecycle of the component.
3. It resolves a long-standing issue with `setInput` where it wasn't possible to set the initial value of an input before the first change detection run.
Currently `inputBinding` is used only for `createComponent`, `ViewContainerRef.createComponent` and `ComponentFactory.create`, however it is going to be base for more APIs in the future.
PR Close#60137
This change casts the injector back and forth since all instances of
injector currently don't implement the `retrieve` method. Note that
the retrieve method is seen as optional, so that Angular can revert back to
inject if necessary.
PR Close#60090
This change removes the reporting of errors from the
`ChangeDetectorRef.detectChanges` API. The reporting results in the
error being "handled" in two ways, both by reporting to error handler
and rethrowing the error. This rethrown error generally ends up being
caught further up and again reported to the error handler. The error
handler is meant to be for uncaught errors, and since Angular is not at
the top of the stack of the call of `CDR.detectChanges`, it does not
know what is being done with the rethrown error.
Note that for zone-based applications, this will likely have no effect
other than removing duplicate reporting of the error. If the rethrown
error is not already being caught, it will reach the NgZone's error
trap and still be reported to the application `ErrorHandler`.
PR Close#60056
Sets up the infrastructure that will allow to write only to a specific directive and its host directives as a base for future functionality.
I've also renamed `setInputsForProperty` to be a bit more explicit that its sets all inputs.
PR Close#60075
If we want to target an input write to a directive, we have to know the index at which its instance is stored. Technically we can already find this by looking through `TView.data`, but that'll require a linear lookup for each write which can get slow.
These changes introduce the new `TNode.directiveToIndex` map which allows us to quickly find the index of a directive based on its definition, as well as any host directives that its might've brought in.
PR Close#60075
Currently `TNode.inputs`/`TNode.outputs` store all of the available bindings on that node, no matter if they came from a directive that the user applied directly or from a host directive. This has a couple of drawbacks:
1. We need to store more information that necessary. For example, the only reason we have strings in the arrays is to facilitate host directive aliasing.
2. It doesn't allow us to distinguish which host directives belong to which selector-matched directives.
These changes are a step towards resolving both issues by storing the host directive binding information in separate data structures.
PR Close#60036
Reworks the functions that create the `initialInputs`, `inputs` and `outputs` structures to initilize them within the function, instead of returning them to be initialized later. This will simplify future refactors where they'll produce more than one piece of information.
PR Close#60036
