This change introduces a new DI profiler event:
InjectorToCreateInstanceEvent. This new event allows
us to measure DI tokens instantiation time.
PR Close#60158
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
Calling `setInput` while the component already has an `inputBinding` active can lead to inconsistent state. These changes add an error that will be thrown if that's the case.
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
Sets up the symbols used to power the upcoming `inputBinding` functionality.
I also fixed that `setDirectiveInput` was incorrectly only allowing strings for the `value` parameter.
PR Close#60137
Updates `createComponent`, `ViewContainerRef.createComponent` and `ComponentFactory.create` to allow the user to specify directives that should be applied when creating the component.
PR Close#60137
Some upcoming functionality won't work if we can't retrieve a directive definition from a class. These changes add a `throwIfNotFound` to `getDirectiveDef`, similar to `getNgModuleDef`, to avoid duplication in such cases.
PR Close#60137
The check that verifies that there are no duplicates in the directives array was only running after host directive matching since that was the only case when it can happen. After the upcoming changes that won't be the case anymore so these changes move it always run after directive matching.
I also did some additional cleanup by adding comments and by not lazily initializing the `allDirectiveDefs` array when matching host directives. The array is guaranteed to be defined since earlier in the function we verify that there's at least one def with host directives.
PR Close#60137
Moves the tests for `createComponent` into their own file since the `component_spec.ts` was a bit too generic and was accumulating all sorts of tests.
PR Close#60137
Previously, the profiler would only emit the specific template event and context when a template is created/updated, but not the template function related to the event.
This commit emits this function by using the third argument of the profiler function, which previously was only used for lifecycle hooks and output listeners. This commit also renames this arg to eventFn to express that it varies depending on the event type emitting from the profiler.
Note: this change is fully backwards compatible, since previously these template events did not use the third arg of the profiler function.
PR Close#60174
This commit updates the implementation of the fake navigation to more
closely follow the spec. This includes links to spec parts as well as
some reorganization to have the flow of the code more exactly follow the
corresponding steps in the spec. This makes it easier to verify that th
behavior is correct.
PR Close#60028
The navigate event was only ever being cleared when a new navigation
happened. That new navigation would abort the previous one, even if it
had already finished successfully.
PR Close#60028
This commit ensures that rejections of the promise of the async function
passed to `PendingTasks.run` are not dangling and get reported to the
application error handler. This prevents what would likely be a common
dangling promise that could end up crashing the node process.
BREAKING CHANGE: `PendingTasks.run` no longer returns the result of the
async function. If this behavior is desired, it can be re-implemented
manually with the `PendingTasks.add`. Be aware, however, that promise rejections
will need to be handled or they can cause the node process to shut down
when using SSR.
PR Close#60044
This commit fixes a bug where nodes are reused across incremental
compilations. The source file's next template ID is lost because a new
source file is created but nodes may still be retained.
PR Close#60152
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
The set of inputs and outputs of a component is static, but the getter for the `inputs` and `outputs` property was re-computing them every time which the user might not expect. These changes add a couple of lines to cache them instead.
PR Close#60156
In some rare cases with directives, it is possible that the stash function might be called on a comment node. This actually verifies that the node is an element and exits otherwise.
fixes: #60070
PR Close#60130
This updates the event replay tests to make them share the structure and utility functions used by hydration tests. This also resolves some soft errors in the event replay tests.
PR Close#60130
This commit fixes an issue when ts files are referenced multiple times (and thus analyzed multiple times) for example from a `tsconfig.json` and `tsconfig.spec.json`.
PR Close#60065
Adds a pure annotation to regular expressions because if the animations package is indirectly referenced in the code, it would include regular expressions in the bundle, even if they're unused (since `new` is side-effectful).
PR Close#60095
Instead of using a property on BinaryOperatorExpr / UnaryOperatorExpr,
introduce a ParenthesizedExpr which can be used to parenthesize any
expression.
PR Close#60127
Using `setTimeout` to delay scrolling can result in scrolling in the
next frame and cause noticeable flicker. This commit races rAF and
timeout to ensure scroll happens before the render.
fixes#53985
PR Close#60086
`HttpClient` has a lot of overloads to achieve proper type checking, however each overload is also very long which makes it hard to read on adev. These changes replace the object literal types with `Record` to make them a bit more concise.
PR Close#59901
This commit updates the resolver execution to ensure that resolvers in
children routes are able to read the resolved data from anything above
them in the route tree. Because resolvers on one level block execution
of those below, it seems more of an oversight in the initial
implementation than anything else that this wasn't already possible.
resolves#47287
PR Close#59860
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
Add support for the `void` operator in templates and host bindings.
This is useful when binding a listener that may return `false` and
unintentionally prevent the default event behavior.
Ex:
```
@Directive({
host: { '(mousedown)': 'void handleMousedown()' }
})
```
BREAKING CHANGE: `void` in an expression now refers to the operator
Previously an expression in the template like `{{void}}` referred to a
property on the component class. After this change it now refers to the
`void` operator, which would make the above example invalid. If you have
existing expressions that need to refer to a property named `void`,
change the expression to use `this.void` instead: `{{this.void}}`.
PR Close#59894
Miles Malerba